/*
    Author: Leandro Zambelli
    v 2024
*/ 

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

:root {

  --brand-color-primary-default: #1960AB;
  --brand-color-primary-light: #38B3F2;
  --brand-color-secondary: #ED1C24;
  --background-color-default: #0D0F11;
  --background-color-light: #12171D;

  --regular: 400;
  --medium: 500;
  --semibold: 600;
  --bold: 700;
  
}

body { overflow-x: hidden; font-family: 'Outfit', sans-serif; background: var(--background-color-default); color: #fff; transition: 0.4s ease; }

/* =Bootstrap Reset 
*/

.container-fluid { padding: 0 60px; max-width: 1440px; }

	@media (max-width:767px) { .container-fluid { padding: 0 20px; } }

.card { background: var(--background-color-light); border: 0; border-left: 8px solid var(--brand-color-primary-light); border-radius: 24px; color: #fff; transition: 0.2s ease; }
.card:hover { transform: translateY(-10px); }
.card-body a { color: #fff; text-decoration: none; }

.card-img-top { border-radius: 18px 24px 0 0 }

input.form-control, input.form-control:focus { background-color: var(--background-color-light); border: none; color: #fff; border-radius: 10px; padding: 14px; }
textarea.form-control, textarea.form-control:focus { color: #fff }

.form-floating input, .form-floating textarea { background-color: var(--background-color-light); border: none; border-radius: 10px; }
.form-floating textarea { height: 160px!important; }
.form-floating input:focus, .form-floating textarea:focus { background-color: var(--background-color-light); }

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-control-plaintext ~ label,
.form-floating > .form-select ~ label {
  color: #fff;
}

.form-floating > .form-control:focus ~ label::after,
.form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.form-floating > .form-control-plaintext ~ label::after,
.form-floating > .form-select ~ label::after {
  background-color: var(--background-color-light);
}

button { border: none; }

.form-control::file-selector-button {
  padding: 0.375rem 0.75rem;
  margin: 0;
  -webkit-margin-end: 0.75rem;
  margin-inline-end: 0.75rem;
  color: #fff;
  background-color: var(--brand-color-primary-default);
  pointer-events: none;
  border-color: inherit;
  border-style: solid;
  border-width: 0;
  border-inline-end-width: none;
  border-radius: 50px;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
  background-color: var(--brand-color-primary-light);
}

/* =animation
*/

.animated { animation-duration: 1s; animation-fill-mode: both; }
.fadeIn { animation-name: fadeIn; }
.fadeOut { animation-name: fadeOut; animation-duration: 300ms }
.slideInUp { animation-name: slideInUp; }

@keyframes fadeIn {
    
  from { opacity: 0; }
  to { opacity: 1; }
    
}

@keyframes fadeOut {
    
    0% {opacity:1} 
    to {opacity:0}
    
}

@keyframes slideInUp {
    
  from {
    transform: translate3d(0, 20%, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
    
}

/* Helper - Utilities
*/ 

.button { display: inline-block; padding: 10px 24px; font-weight: var(--bold); text-decoration: none; transition: .2s ease; }
.button-sm { padding: 8px 20px; font-size: 14px; }

.button-primary { background: var(--brand-color-primary-default); color: #fff; }
.button-primary:hover { background: var(--brand-color-primary-light); color: #fff;}

.button-primary-outline { background: var(--background-color-default); border: 2px solid var(--brand-color-primary-default); color: #fff; }
.button-primary-outline:hover { background: var(--brand-color-primary-default); color: #fff; }
#supermercados .supermercados.active { background: var(--brand-color-primary-default); color: #fff; }
#combustivel .combustivel.active { background: var(--brand-color-primary-default); color: #fff; }
#restaurantes .restaurantes.active { background: var(--brand-color-primary-default); color: #fff; }
#home-centers .home-centers.active { background: var(--brand-color-primary-default); color: #fff; }
#pet-shops .pet-shops.active { background: var(--brand-color-primary-default); color: #fff; }
#cama-mesa-banho .cama-mesa-banho.active { background: var(--brand-color-primary-default); color: #fff; }

.rounded-16 { border-radius: 16px; }
.rounded-24 { border-radius: 24px; }

.pt-8 { padding-top: 8px; }
.pt-16 { padding-top: 16px; }
.pt-32 { padding-top: 32px; }
.pt-48 { padding-top: 48px; }
.pt-64 { padding-top: 64px; }
.pt-80 { padding-top: 80px; }
.pt-128 { padding-top: 128px; }

.pb-8 { padding-bottom: 8px; }
.pb-16 { padding-bottom: 16px; }
.pb-32 { padding-bottom: 32px; }
.pb-48 { padding-bottom: 48px; }
.pb-64 { padding-bottom: 64px; }
.pb-80 { padding-bottom: 80px; }
.pb-128 { padding-bottom: 128px; }


.title-h1 { font-size: 52px; font-weight: var(--semibold); line-height: 100%; }
.title-h2 { font-size: 48px; font-weight: var(--semibold); line-height: 100%; }
.title-h3 { font-size: 32px; font-weight: var(--semibold); line-height: 120%; }
.title-h4 { font-size: 24px; font-weight: var(--semibold); line-height: 120%; }

@media(max-width:767px){
  .title-h1, .title-h2 { font-size: 42px; font-weight: var(--semibold); line-height: 110%; }
  .title-h3 { font-size: 24px; font-weight: var(--semibold); line-height: 120%; }
}

.text-24 { font-size: 24px; }
.text-20 { font-size: 20px; }
.text-18 { font-size: 18px; }
.text-16 { font-size: 16px; }
.text-14 { font-size: 14px; }
.text-12 { font-size: 12px; }

@media(max-width:767px){
  .text-24 { font-size: 20px; }
}

.text-primary-default { color: var(--brand-color-primary-default); }
.text-primary-light { color: var(--brand-color-primary-light); }

.bg-primary-default { color: var(--brand-color-primary-default); }
.bg-primary-light { color: var(--brand-color-primary-light); }
.bg-background-light { background: var(--background-color-light); }


/* =Typography
*/

h1,h2,h3,h4,h5,h6 { font-weight: var(--semibold); }
p { line-height: 130%; margin-bottom: 50px; }
p:last-of-type { margin-bottom: 0; }


/* =Header
*/

header { padding: 24px 0; background: var(--brand-color-primary-default); }

/* =Nav
*/

nav ul { margin: 0 }
nav li { margin-left: 24px; }
nav li:nth-child(1) { margin-left: 0; }
nav a { color: #fff; font-size: 14px; text-decoration: none; font-weight: var(--regular); }
nav a:hover { opacity: 0.5 }


@media (max-width: 991px){

  nav { transition: 150ms ease; top: 0; width: 100%; max-height: 0; overflow: hidden; z-index: 3; }
  nav li { margin-left: 0; }
  nav li:first-child { margin-top: 32px }
  nav .list-inline-item, nav a { display: block; }
  nav a { padding: 10px 0 }
  

  .btn-toggle-nav { position: absolute; top: -42px; right: 0; z-index: 4; padding: 10px; }
  .bar { display: block; margin: 5px 0; width: 30px; height: 4px; border-radius: 100px; background: #fff; transition: ease 0.2s; }
  .bar-close .bar:nth-child(1) { transform: rotate(45deg) translateY(5px) translateX(-1px); background: #fff; width: 24px }
  .bar-close .bar:nth-child(2) { transform: rotate(-45deg) translateY(-7px) translateX(1px); background: #fff; width: 24px }

}

/* =Subheader
*/

.subheader { padding: 16px 0; }
.subheader ul { margin: 0; }
.subheader .list-inline-item { margin: 2px; }
.subheader a { font-weight: var(--medium); }

@media(max-width:1199px){
  .subheader { white-space: nowrap; overflow: scroll; }
}


/* Banner */

.banner  { height: 550px; width: 100%; overflow: hidden; }
.banner__home { height: 772px; background: url("../img/banners/home.jpg") no-repeat center; }
.banner__supermercados { background: url("../img/banners/supermercados.jpg") no-repeat center; background-size: cover; }
.banner__combustivel { background: url("../img/banners/combustivel.jpg") no-repeat bottom center; background-size: cover; }
.banner__restaurantes { background: url("../img/banners/restaurantes.jpg") no-repeat bottom center; background-size: cover; }
.banner__home-centers { background: url("../img/banners/home-centers.jpg") no-repeat bottom center; background-size: cover; }
.banner__pet-shops { background: url("../img/banners/pet-shops.jpg") no-repeat center; background-size: cover; }
.banner__cama-mesa-banho { background: url("../img/banners/cama-mesa-banho.jpg") no-repeat center; background-size: cover; }
.banner__quem-somos { background: url("../img/banners/quem-somos.jpg") no-repeat center; background-size: cover; }
.banner__trabalhe-conosco { background: url("../img/banners/trabalhe-conosco.jpg") no-repeat center; background-size: cover; }
.banner__contato { background: url("../img/banners/contato.jpg") no-repeat center; background-size: cover; }

@media(max-width: 440px){
  .banner { height: auto; padding-top: 180px}
  .banner__home { background: url("../img/banners/mobile/home.png") no-repeat top center; }
  .banner__supermercados {  background: url("../img/banners/mobile/supermercados.png") no-repeat top center; }
  .banner__combustivel { background: url("../img/banners/mobile/combustivel.png") no-repeat top center; }
  .banner__restaurantes { background: url("../img/banners/mobile/restaurantes.png") no-repeat top center; }
  .banner__home-centers { background: url("../img/banners/mobile/home-centers.png") no-repeat top center; }
  .banner__pet-shops { background: url("../img/banners/mobile/pet-shops.png") no-repeat top center; }
  .banner__cama-mesa-banho { background: url("../img/banners/mobile/cama-mesa-banho.png") no-repeat top center; }
  .banner__quem-somos { background: url("../img/banners/mobile/quem-somos.png") no-repeat top center; }
  .banner__trabalhe-conosco { background: url("../img/banners/mobile/trabalhe-conosco.png") no-repeat top center; }
  .banner__contato { background: url("../img/banners/mobile/contato.png") no-repeat top center; }
}


/* box */

#contato .box { padding: 24px; min-height: 206px; }
.box { padding: 40px; background: var(--background-color-light); border-radius: 16px; }
.box li { font-size: 24px; }

@media(max-width: 767px) {
  .box { padding: 24px; }
  .box li { font-size: 20px }
}

/* icons home */

@media (max-width: 767px){
    img.icon { width: 50% }
}


/* =Footer
 */

footer { margin-top: 220px; padding: 88px 0 104px 0; background: var(--background-color-light); }

@media (max-width: 767px){
  footer { margin-top: 128px; }
}


/* scroll reveal effect
*/

.reveal { opacity: 0; transition: opacity 1s ease, transform .6s ease } /* change the duration for faster or slower transition */
.reveal-from-bottom { transform: translateY(60px); }
.reveal-from-left { transform: translateX(-60px); }
.reveal-from-right { transform: translateX(60px); }
.show { opacity: 1; transform: translate(0, 0); }


@media (max-width: 767px){
  .reveal-from-bottom, .reveal-from-left, .reveal-from-right  { transform: translate(0, 0); }
}