/* Header */

@font-face{
	src: url("./assets/fonts/Odds-Regular.otf");
	font-family: 'Odds';
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{ font-family: 'Montserrat';
  background: url(assets/images/fundo_lp.png) no-repeat center center fixed;
  background-size: cover;
}

a {text-decoration: none; color: #ffffff;}

header{width: 100%;}
header .header-content{ display: flex ; align-items: center;justify-content: space-between; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; padding: 30px;}
header .contact{display: flex; align-items: center; gap: 10px; }
header .logo img{ width: 150px; /*height: 100px;*/}
header .contact svg{ width: 50px; height: 50px;}
header .contact span{display: block; font-family: 'Montserrat'; font-size: 3rem; font-weight: 800; color: #DF5D29;}

/* main */

section#initial .banner img{width: 100%;}
section#initial .banner .pneus{position: relative; top: -1vh;}

/* Preços */

section#precos{position: relative; top: -2vh; overflow: hidden; padding: 40px 20px;}
section#precos h3{color: #fff; font-size: 3rem; text-align: center; margin: 150px 0 50px;}
section#precos .precos-container{color: #FFFFFF; font-family: 'Odds';display: flex;justify-content: space-between; flex-wrap: wrap; gap: 40px 20px; max-width: 1200px; margin: 0 auto; padding: 0 20px;}
section#precos .precos-container .precos-content{max-width: calc(25% - 40px*3/4);}
section#precos .precos-container .aro{font-size: 2rem; text-align: center; position: relative; right: -15%; }
section#precos .precos-container .quant,
section#precos .precos-container span{font-family: 'Montserrat'; display: block;}
section#precos .precos-container .valor{font-size: 9rem;}
section#precos .precos-container .orcamento{font-size: 0.9rem; font-family: 'Montserrat'; text-transform: uppercase; background-color: #1EA312;  max-width: max-content; padding: 10px 30px; border-radius: 30px; transition: 0.3s;}
section#precos .precos-container .orcamento:hover{opacity: 0.8;}
section#precos .precos-content .precos-qv{display: flex;}
section#precos .precos-content img{width: 300px; max-width: 100%;}
section#precos .precos-content .quant-content{display: flex; flex-direction: column; justify-content: end; align-items: flex-end; padding-bottom: 40px; padding-right: 20px;}
section#precos .precos-content .quant-content p{font-size: 0.7rem; text-transform: uppercase; font-size: 700; display: block;}
section#precos .precos-content .quant-content span{font-size: 1.2rem; display:block;}

/* banner-second */

section#banner-second img{width: 100%; position: relative; top: -3vh;}
section#banner-second .banner-mobile{display: none;}

/* maps */

section#maps{background-color: #010832; padding-bottom: 60px; position: relative; top: -4vh;}
section#maps .maps-container{display: flex; justify-content: center; align-items: center; max-width: 1200px; margin: 0 auto; padding: 20px 40px; gap: 60px; flex-wrap: wrap;}
section#maps .map-content{display: grid; justify-content: center; align-items: center;}
section#maps .map-content h3{color: #ffffff; font-size: 1.5rem; text-align: center; text-transform: uppercase;}
section#maps .map-content p{color: #ffffff; font-size: 1rem; text-align: center; padding: 3px;}
section#maps .map{padding-top: 20px;}
section#maps .map iframe{max-width: 100%;}
section#maps .map-content a{display: block; text-transform: uppercase; margin-top: 40px; text-align: center; background-color: #FB280B; place-self: center; max-width: max-content; padding: 10px 40px; border-radius: 30px; font-size: 0.875rem;}
section#maps .map-content a:hover{opacity: 0.8;}

/* footer */

footer#footer{background-color: #272727; width: 100%; position: relative; top:-5vh;}
footer#footer .footer-content{display: grid; justify-content: center;  margin: 0 auto; text-align: center; padding-top: 20px;}
footer#footer .icones{margin-top: 30px; display: flex; justify-content: center; align-items: center; color: #FFFFFF;}
footer#footer .icones img{width: 35px; height: 35px; margin-left: 5px; margin-right: 5px; padding-top: 1px;}
footer#footer p{font-size: 0.875rem; padding-top: 20px; padding-left: 30px; padding-right: 30px; color: #FFFFFF; line-height: 1.4;}

.flot-zap {
  position: fixed;
  bottom: 15px;
  right: 10px;
  width: 100px;
  min-width: 100px;
}

.flot-zap img {
  width: 100px;
}

#zap-loja {
  display: none;
}

@media (max-width: 501px) {
  #zap-loja {
    display: block;
  }
}

#cookies-alert {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #243563;
  color: #fff;
  font-size: 14px;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 10px 50px;
}

#cookies-alert .buttons button {
  border: none;
  outline: unset;
  cursor: pointer;
  font-size: 14px;
  border-radius: 10px;
}

#cookies-alert .buttons .btn-accept {
  position: relative;
  background-color: #fff;
  color: #243563;
  padding: 10px 20px;
  font-weight: 600;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

#cookies-alert .buttons .btn-accept:hover {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

#cookies-alert .buttons .btn-decline {
  background-color: #243563;
  color: #fff;
  padding: 9px 18px;
  border: 2px solid #fff;
}

@media screen and (max-width: 768px) {
  #cookies-alert {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  #cookies-alert .buttons {
    margin: 10px;
  }
  #cookies-alert .buttons button {
    margin: 5px;
  }
  #cookies-alert .buttons .btn-decline {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
  }
}

.hide-cookies-alert {
  display: none !important;
}

/* Nossos Serviços */

section#banner-second .nossos-servicos{color: #FFFFFF; position: relative; top: -4vh;}
section#banner-second .ns-content{max-width: 1200px; margin: 0 auto; padding: 40px 20px}
section#banner-second .ns-text{max-width: 1000px; margin: 0 auto; padding: 0 50px;}
section#banner-second .ns-text p{font-size: 0.875rem;}
section#banner-second .ns-content h2{font-size: 3rem; text-transform: uppercase;  margin-bottom: 40px;}
section#banner-second .ns-content h2 > span{font-weight: 400;}
section#banner-second .ns-content P{margin-bottom: 30px;}
section#banner-second .ns-content h3{font-weight: 500; font-size: 1.3rem; text-transform: uppercase; margin-bottom: 60px;}
section#banner-second .ns-content .ns--services{display: grid; grid-template-columns: repeat(auto-fit, minmax(250px,max-content)); gap: 50px; align-items: center; justify-content: center;  flex-wrap: wrap; margin-bottom: 50px;}
section#banner-second .ns-content .ns-service{background-color: #FFFFFF; color: #000000; max-width: 235px; padding: 20px 10px; border-radius: 15px; height: 315px; margin: 0 auto; }

section#banner-second .ns-contact{display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap;}
section#banner-second .ns-contact a {display: block;}
section#banner-second .ns-contact a.email{padding: 10px 30px ; background: #FBA70B; max-width: max-content; border-radius: 12px;}
section#banner-second .ns-contact a.phone{padding: 10px 40px ; background: #253772; max-width: max-content; border-radius: 12px;}
/* #253772 */

/* Responsivo */

@media(max-width: 900px){
  section#precos .precos-container{justify-content: center; gap: 60px;}
}

@media(max-width: 700px){
  header .header-content{justify-content: center; gap: 30px;}
}

@media(max-width: 540px){
  section#banner-second .banner-mobile{display: block;}
  section#precos .precos-container .precos-content{max-width: 100%;}
}

@media(max-width: 500px){
  header .contact svg{ width: 30px; height: 30px;}
  header .contact span{font-size: 2rem;}
}

@media(max-width: 425px){
  header .logo img{ width: 100px; /*height: 70px;*/}

  section#banner-second .ns-contact a.email{font-size: 0.875rem; text-align: center; padding: 10;}
  section#banner-second .ns-contact a.phone{font-size: 0.875rem; }

}

@media(max-width: 375px){
  section#precos .precos-container .valor{font-size: 7rem;}
  section#precos .precos-container .aro{font-size: 1.2rem;}
  section#precos .precos-content .quant-content p{font-size: 0.5rem;}
  section#precos .precos-content .quant-content span{font-size: 1rem;}
  section#precos .precos-container .orcamento{font-size: 0.875rem;}

  section#banner-second .ns-contact a.email{padding: 10px;}

}
@media(max-width: 320px){

  header .contact span{font-size: 1.5rem;}

  section#precos .precos-container .orcamento{font-size: 0.75rem;}

  section#precos .precos-container .valor{font-size: 6rem;}

  section#banner-second .ns-text{padding: 0;}
  section#banner-second .ns-content h2{font-size: 2.6rem;}
}