@import "reset.css";
body { background: #f8f7f4; font-family: "Figtree", sans-serif; font-weight: 400; color: #2e2e2e; font-size: 16px;  }
.container { width: 1400px; margin: 0 auto; position: relative; }
.abre-menu{ display: none; }

.fix-whats{ position: fixed; right: 20px; bottom: 50px; z-index: 99; }
.fix-whats a{ background: #217858; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
.fix-whats svg{ width: 40px; height: auto; }

.btn{ display: flex; justify-content: center; align-items: center; }
.btn a{ position: relative;  border: #000 solid 1px; border-radius: 50px; padding: 8px 20px; overflow: hidden; text-align: center; }
.btn a span{ position: relative; z-index: 10; font-weight: 700; color: #000; font-size: 18px; text-transform: uppercase; }
.btn a:before{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 0; background: #000; z-index: 5; transition: .5s; }
.btn a:hover span{ color: #f7c100; }
.btn a:hover:before{ width: 100%; height: 100%; }


.btn-voltar{ position: fixed; right: 30px; bottom: 30px; z-index: 20;}
.btn-voltar a{ position: relative; border: #000 solid 1px; border-radius: 50px; padding: 8px 20px; overflow: hidden; text-align: center; background: #f7c100; display: block; }
.btn-voltar a span{ position: relative; z-index: 10; font-weight: 700; color: #000; font-size: 18px; text-transform: uppercase; }
.btn-voltar a:before{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 0; background: #000; z-index: 5; transition: .5s; }
.btn-voltar a:hover span{ color: #f7c100; }
.btn-voltar a:hover:before{ width: 100%; height: 100%; }



/* Topo */
.topo{ background: #f8f7f4; padding: 30px 0; }
.topo .container{ display: flex; justify-content: space-between; align-items: center;  }
.topo .marca img{ width: 200px; height: auto; }
.topo .links{ display: flex; gap: 20px; align-items: center;  }
.topo .links ul{ display: flex; gap: 20px; }
.topo .links ul li { border-right: #7b7870 solid 2px; padding-right: 20px; }
.topo .links ul li:last-child{ padding-right: 0; border-right: 0; }
.topo .links ul li a{ text-transform: uppercase; color: #7b7870; font-weight: 600; letter-spacing: 1px; }
.topo .links ul li a:hover{  color: #c38502; }
.topo .links ul li a.ativo{  color: #c38502; }
.topo .links .redes{ display: flex; gap: 20px; justify-content: center; align-items: center; margin-left: 20px; }
.topo .links .redes a{ display: block; opacity: .2; }
.topo .links .redes a img{ width: auto; height: 20px; display: block; }
.topo .links .redes a:hover{ opacity: 1; margin-top: -5px; }
.menu-mobile{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 40; background:#f7c100; display: none; }
.menu-mobile nav{display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%; }
.menu-mobile nav ul li{ margin: 20px 0; text-align: center; }
.menu-mobile nav ul li a{ color: #000; text-transform: uppercase; font-size: 18px; font-weight: 500; text-align: center; }
.menu-mobile .container{ display: flex; justify-content: space-between; flex-direction: column;  align-items: center; }
.menu-mobile .redes { display: flex; gap: 20px; }
.menu-mobile .marca{ padding: 40px 0 20px 0; }
.menu-mobile .marca img{ width: 140px; height: auto; }
.menu-mobile .redes{ display: flex; gap: 50px; justify-content: center; align-items: center; margin-top: 20px; }
.menu-mobile .redes a{ display: block; opacity: 1; }
.menu-mobile .redes a img{ width: auto; height: 24px; display: block; }
.menu-mobile .fecha-menu { position: absolute; right: 0; top: 40px; }

/* Home */
.banner{ width: 100%; height: auto; position: relative; }
.banner img{ width: 100%; height: auto; display: block; }
.banner video{ width: 100%; height: auto; display: block; }
.sobre-home{ background: #f7c100; padding: 80px 0; width: 100%; height: auto; position: relative; }
.sobre-home .cont{ display: flex; gap: 80px; justify-content: space-between; margin-bottom: 60px; padding: 0 70px; } 
.sobre-home .cont .title{ width: 50%; }
.sobre-home .cont .title img{ width: 100%; height: auto; }
.sobre-home .cont .text{ width: 50%; }
.sobre-home .cont .text h3{ font-weight: 500; margin-bottom: 30px; color: #000; font-size: 20px; line-height: 130%; } 
.sobre-home .cont .text p{ margin-bottom: 30px; color: #000; }
.sobre-home .cases-home a.item{ overflow: hidden;  display: block; width: 100%; height: 100%; }
.sobre-home .cases-home a img{ width: 100%; height: auto; display: block; transition: .5s; }
.sobre-home .cases-home a:hover img{ transform: scale(1.020); }
.icons-home{ padding: 80px 0; width: 100%; height: auto; position: relative; }
.icons-home .title{ text-align: center; max-width: 850px; margin: 0 auto; }
.icons-home .title h2{ text-transform: uppercase; font-size: 42px; margin-bottom: 40px; font-weight: 700; }
.icons-home .title p{ line-height: 160%; }
.icons-home .cont{ display: flex; gap: 50px; margin-top: 80px; margin-bottom: 60px; }
.icons-home .cont .item{ width: calc(100% / 4); }
.icons-home .cont .item img{ width: auto; height: 80px; }
.icons-home .cont .item h3{ font-size: 34px; margin-bottom: 30px; font-weight: 500; margin:14px 0 24px 0; }
.icons-home .cont .item ul li{ margin-bottom: 10px; }
.clientes-home{ padding: 0 0 80px 0; width: 100%; height: auto; position: relative; }
.clientes-home .title{ text-align: center; max-width: 850px; margin: 0 auto; }
.clientes-home .title h2{ text-transform: uppercase; font-size: 42px; margin-bottom: 40px; font-weight: 700; }
.clientes-home .title p{ line-height: 160%; }
.clientes-home .cont{ display: flex; justify-content: center; flex-wrap: wrap; gap: 50px; }
.clientes-home .cont .item{ width: calc(100% / 4 - 50px); text-align: center; }
.clientes-home .cont .item img{ width: auto; height: 150px; }
.clientes-home .voltar-topo{ display: flex; align-items: center; justify-content: center; margin-top: 40px; }
.clientes-home .voltar-topo a{ display: block; }
.clientes-home .voltar-topo img{ width: 80px; height: auto; } 
.clientes-home .voltar-topo a:hover{ margin-top: -10px; }

/* A YAYA */
.page-texto{ padding: 80px 0; }
.page-texto .cont{ max-width: 900px; margin: 0 auto; }
.page-texto .title { text-align: center; }
.page-texto .title h2{ text-transform: uppercase; font-size: 42px; margin-bottom: 20px; font-weight: 700; }
.page-texto .cont img{ max-width: 100%; height: auto; border: #000 solid 6px; border-radius: 8px; display: block; }
.page-texto p{ margin-bottom: 30px; }
.page-texto strong{ font-weight: 700; }

/* CONTATO */
.contato{ width: 100%; height: auto; position:relative; padding: 80px 0; }
.contato .cont{ display: flex; justify-content: center; gap: 100px; }
.contato .cont .text{ width: 50%; }
.contato .cont .text h2{ text-transform: uppercase; font-size: 50px; margin-bottom: 30px; font-weight: 700; line-height: 120%; }
.contato .cont .text p{ margin-bottom: 50px; line-height: 180%; }
.contato .cont .formulario{ width: 50%; }
.contato .cont .formulario input{font-family: "Figtree", sans-serif; color: #987c72; padding: 10px 20px; width: calc(100% - 40px); border-radius: 10px; background: #ebe0d2; border: none; margin-bottom: 20px; text-transform: uppercase; }
.contato .cont .formulario textarea{font-family: "Figtree", sans-serif; color: #987c72; padding: 10px 20px; width: calc(100% - 40px); min-height: 200px; border-radius: 10px; background: #ebe0d2; border: none; margin-bottom: 20px; text-transform: uppercase; }
input::placeholder, textarea::placeholder { color: #987c72;  opacity: 1; }
.contato .cont .formulario .aceito{ display: flex; gap: 10px; align-items: center; }
.contato .cont .formulario .aceito input{ width: 17px; height: 17px; border-radius: 10px; margin: 0; padding: 0; }
.contato .cont .formulario .aceito span{ font-size: 14px; opacity: .6; }
.contato .cont .formulario .flex{ justify-content: space-between; flex-wrap: wrap; gap: 20px; }
.contato .cont .formulario button{ background: url(../img/enviar.png) top right no-repeat; transition: .5s; padding: 12px 30px 0 0; background-size: 30px auto; font-family: "Figtree", sans-serif; text-transform: uppercase; font-size: 18px; color: #7e7e7e; font-weight: 700; }
.contato .cont .formulario button:hover{ background-size: 34px auto; color: #c38502;  }
.mapa{ width: 100%; height: auto; position: relative; }
.mapa iframe{ width: 100%; height: 450px; display: block; }

/* CASES */
.cases{ width: 100%; height: auto; position:relative; padding: 80px 0; background: #363636; }
.cases .flex{ flex-wrap: wrap; justify-content: space-between; gap: 30px;  }
.cases .flex .item{ width: calc(100% / 2 - 15px); margin-bottom: 14px; }
.cases .flex .item .image{ width: 100%; height: auto; overflow: hidden; }
.cases .flex .item img{ width: 100%; height: auto; transition: .5s; }
.cases .flex .item .info{ display: flex; justify-content: space-between; border-top:#beb79f solid 1px; margin-top: 15px; padding-top: 15px; flex-wrap: wrap; gap: 15px; }
.cases .flex .item .info h3{ color: #beb79f; font-size: 18px; }
.cases .flex .item .info span{ color: #beb79f; font-size: 18px; }
.cases .flex .item a:hover img{ transform: scale(1.020); }


/* SINGLE */
.content-single{ width: 100%; height: auto; position:relative; padding: 40px 0; text-align: center; }
.content-single .container{ max-width: 1000px; }
.content-single p{ margin-bottom: 20px; }
.content-single h2{ margin-bottom: 30px; text-transform: uppercase; font-weight: 300; font-size: 32px; }
.content-single img{ max-width:100%; height:auto; }
.imagem-full-single{ width: 100%; height: auto; position:relative; }
.imagem-full-single img{ width: 100%; height: auto; display: block; }
.galeria-dupla-single{ width: 100%; height: auto; position:relative; padding: 40px 0;   }
.galeria-dupla-single img{ width: 100%; height: 580px; object-fit: cover; } 
.galeria-single-single{ width: 100%; height: auto; position:relative; padding: 40px 0;  }
.galeria-single-single img{ width: 100%; height: auto; object-fit: cover; } 
.buttons{ display: flex; justify-content: center; gap: 20px; }
.imagem-grid-single{ display: flex; align-items: center; justify-content: center; flex-wrap: wrap; padding: 40px 0; }
.imagem-grid-single a{ width: calc(100% / 3); height: stretch; object-fit: cover; }
.imagem-grid-single a img{ width:100%; height: stretch; object-fit:cover; }
.embed-responsive{ width: 100%; height: 650px; padding: 40px 0; }
.embed-responsive iframe{ width: 100%; height: 100%; }
.single .swiper{ padding-bottom: 20px; }


/* Rodape */
.rodape{ width: 100%; background: #f7c100; height: auto; position: relative; padding: 80px 0 0 0; text-align: center; }
.rodape .redes{ display: flex; gap: 50px; justify-content: center; align-items: center; margin-bottom: 40px; }
.rodape .redes a{ display: block; opacity: .2; }
.rodape .redes a img{ width: auto; height: 34px; display: block; }
.rodape .redes a:hover{ opacity: 1; margin-top: -5px; }
.rodape .flex{ display: flex; align-items: center; justify-content: center; gap: 50px; margin-bottom: 40px; }
.rodape .flex span{ font-size: 24px; font-weight: 500; }
.rodape .sinapro{ margin-bottom: 40px; }
.rodape p{ font-size: 14px; text-transform: uppercase; margin-bottom: 5px; }
.rodape .level { background: #fff; padding: 20px 0; width: 100%; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 40px; gap: 20px; }
.rodape .marca-rodape{ width: 180px; height: auto; }
.rodape .world{ width: 100px; height: auto; }
.rodape .sinapro{ width: 150px; height: auto; }

/* Responsivos */
/* X-Large devices (large desktops, less than 1400px) */
@media (max-width: 1450.98px) {
  .container { width: 1200px; }
}

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
  .container { width: 90%; }
  .content-single .container{ max-width: 90%; }
}



/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
  .topo .links{ display: none; }
  .abre-menu{ display: block; }
  .topo .marca img{ width: 140px; }
  .sobre-home .cont{ flex-direction: column; gap: 40px; padding: 0; margin-bottom: 20px; }
  .sobre-home .cont .title{ width: 100%; }
  .sobre-home .cont .text{ width: 100%; text-align: center; }
  .icons-home .cont{ flex-wrap: wrap; }
  .icons-home .cont .item { width: calc(100% / 2 - 25px); text-align: center; }
  .clientes-home .cont .item { width: calc(100% / 3 - 15px); }
  .rodape .redes{ margin-bottom: 30px; gap: 30px; }
  .rodape .flex{ flex-direction: column; gap: 30px; margin-bottom: 30px; }
  .rodape .sinapro{ margin-bottom: 30px; }
  .contato .cont{ flex-direction: column; gap: 0px; }
  .contato .cont .text{ width: 100%; }
  .contato .cont .formulario{ width: 100%; }
  .embed-responsive{ width: 100%; height: 400px; }

  
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
  .clientes-home .cont{ gap: 20px; }
  .icons-home .title h2{ font-size: 32px; }
  .icons-home .cont .item h3{ font-size: 28px; }
  .clientes-home .title h2{ font-size: 32px; }
  .page-texto .title h2{ font-size: 32px; }
  .contato .cont .text h2{ font-size: 32px; }
  .galeria-dupla-single img{height: auto; } 
  .embed-responsive{ width: 100%; height: 250px; }
  .cases .flex .item { width: calc(100% / 1 - 15px); }
  .topo{ padding: 18px 0; }
  .topo .marca img{ width: 100px; }
.imagem-grid-single a{ width: calc(100% / 1);  }
 
}

/* Small devices (landscape phones, less than 590px) */
@media (max-width: 590.98px) {
  .icons-home .cont .item { width: calc(100% / 1 - 0px);  }
  .clientes-home .cont .item { width: calc(100% / 2 - 15px); }
  .cases .flex .item .info span{ font-size: 15px; }
  .cases .flex .item .info h3{ font-size: 15px; }
}