* {font-family: 'Inter', Arial, Helvetica, sans-serif; font-size:14px; color:#222; line-height:1.3; box-sizing:border-box}
html {height:100%}
body {margin:0px; height:100%; background-color:#ffffff}
h1 {font-size:40px; font-weight:700; line-height:1; color:#fff; margin:0px; padding:0px}
h2 {font-size:39px !important; font-weight:700 !important; color:#333; margin:0px; padding:0px; line-height:1.1}
h3 {font-size:19px !important; font-weight:700 !important; color:#333; margin:0px; padding:0px; line-height:1.1}
a {text-decoration:none}

:root {
    --gridPrincipal: 1200px;
    --gridSecundario: 820px;
    --corPrimaria: #000000;
    --corSecundaria: #EEAB3C;
    --corWhats: #11C476;
}

.grid-g {width:calc(100% - 28px); max-width:var(--gridPrincipal); margin:0px 14px}
.grid-m {width:calc(100% - 28px); max-width:var(--gridSecundario)}
.flex {display:flex; flex-wrap:wrap}
.linha {display:flex; width:100%; flex-wrap:wrap}
.center {justify-content:center}
.center-v {align-items:center}
.espalhar {justify-content:space-between}
.txtcenter {text-align:center}
.txtleft {text-align:left !important}
.invisivel {display:none}
.mouseHover:hover {opacity:0.7; cursor:pointer; transition:80ms}

.marginTop10 {margin-top:10px !important}
.marginTop20 {margin-top:20px !important}
.marginTop30 {margin-top:30px !important}
.marginTop40 {margin-top:40px !important}
.marginTop50 {margin-top:50px !important}

#topo {background-color:#fff; align-items:center; padding:10px 0px}
#topo img {width:300px; height:auto}
#topo button {height:50px; background-color:var(--corWhats); border-radius:50px; padding:0px 40px; border:0px; font-size:15px; color:#fff; font-weight:700; display:flex; align-items:center; margin-left:20px}
#topo button i {color:#fff; font-size:25px; margin-right:15px; line-height:1}
#topo .tel {color:#fff; font-weight:700; font-size:15px; margin:0px 15px}
#topo .tel i {color:#fff; margin-right:5px}
#topo a {text-decoration:none}

#banner {width:100%; height:450px; align-items:center; background:url('../img/banner.jpg') no-repeat center center; background-size:cover}
#banner button {height:65px; background-color:transparent; border:2px #fff solid; color:#fff; border-radius:50px; padding:0px 50px; font-size:18px; font-weight:700; margin-top:20px}
#banner button:hover {background-color:var(--corSecundaria); border:2px var(--corSecundaria) solid; color:#fff; cursor:pointer}
#banner h1 {text-align:center; font-size:36px; color:#fff; line-height:1.2; font-weight:700}

#servicos {margin-top:50px; flex-direction: column; align-items: center;}
#servicos .containerbox {margin-top:15px}
#servicos .box {background-color:#fff; border:1px #F2F2F2 solid; border-radius:4px; width:calc(33.33% - 20px); margin:25px 0px; -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.12); -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.12); box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.12)}
#servicos .box .img {background-size:cover; background-position:center center; background-repeat:no-repeat; width:100%; height:220px; border-radius:4px 4px 0px 0px}
#servicos h3 {margin:20px}
#servicos .subservicos {width:100%; max-width:1240px}
#servicos .blocosub {width:calc(33.33% - 40px); border-bottom:1px #D7D7D7 solid; padding-bottom:15px; padding-top:15px; margin:0px 20px; align-items:center; text-transform: uppercase; color:#333; font-weight:700}
#servicos .blocosub i {margin-right:10px; font-size:18px; line-height:1; color:var(--corSecundaria)}

#equipamentos {margin-top:20px}
#equipamentos .cont {justify-content: space-between;}
#equipamentos .cont img {flex:1}

#fotos {margin:50px 0px}
#fotos .contFotos {width:100%; display:flex; flex-wrap:wrap; gap:20px; margin-top:20px}
#fotos .contFotos .box {width:calc(33.33% - 13.33px); height:420px; background-size:cover; background-repeat:no-repeat; background-position:center center; border-radius:4px}
#fotos .contFotos .box .video {width:100%; height:100%; background-color: rgba(0, 0, 0, 0.5); display:flex; align-items:center; justify-content:center; cursor:pointer; border-radius:4px}
#fotos .contFotos .box .video:hover {background-color: rgba(0, 0, 0, 0.4)}
#fotos .contFotos .box .video i {color:#fff; font-size:64px}

#sobre {margin:70px 0px}
#sobre .colImg {width:calc(40% - 30px); align-items:center}
#sobre .colTexto {width:calc(60% - 30px); align-items:center}
#sobre .img {background-size:cover; background-repeat:no-repeat; background-position:center center; background-image:url('../img/img-sobre.png'); height:457px; border-radius:10px}
#sobre span {display:block; width:100%; font-size:16px; line-height:1.5; padding:30px 0px}
#sobre button {background-color:var(--corSecundaria); height:60px; padding:0px 60px; border:0px; border-radius:50px; font-size:16px; color:#fff; font-weight:700}

#depoimentos {width:100%; background-color:#F2F2F2; padding:70px 0px}
#depoimentos .contDepoimentos {width:100%}
#depoimentos .box {width:calc(33.33% - 18px); background-color:#ffffff; border-radius:8px; padding:30px; margin-top:25px}
#depoimentos .star {width:100%}
#depoimentos .star i {color:#FFCE39}
#depoimentos .nome {width:100%; font-size:18px; color:#333; font-weight:700}
#depoimentos .empresa {width:100%; font-size:14px; color:var(--corSecundaria); font-weight:700}
#depoimentos .texto {width:100%; font-size:14px; color:#333; line-height:1.5; margin-top:20px}
#depoimentos .contimginfo {flex-wrap: nowrap;}
#depoimentos .info {flex:1}
#depoimentos .img {width:60px; height:60px; border-radius:50px; background-size:cover; background-repeat:no-repeat; background-position:center center; margin-right:10px}
#depoimentos button {border:2px #8B8B8B solid; border-radius:50px; height:65px; padding:0px 40px; font-size:15px; color:#8B8B8B; background-color:transparents; font-weight:700}

#numeros {width:100%; margin-top:70px; min-height:320px; align-items:center; background-image: url("../img/bg-parallax.jpg")}
#numeros .box {width:250px; font-size:17px; color:#fff; font-weight:700; text-align:center}
#numeros .box span {width:100%; display:block; font-size:50px; font-weight:200; color:#fff; line-height:1}

#rodape {margin-top:0px}
#rodape .divImg, #rodape .divInfo {width:50%; height:450px; align-items:center}
#rodape .divImg iframe {width:100%; height:100%}
#rodape .divInfo {background-color:#111}
#rodape .info {width:100%; max-width:600px; padding:50px}
#rodape h2 {color:#fff}
#rodape .local-tel {color:#fff; font-size:16px; margin-top:20px}
#rodape .local-tel a {color:#fff; font-size:16px}
#rodape .local-tel i {color:#fff; font-size:21px; margin-right:10px}
#rodape .local-tel-redes {margin-top:20px}
#rodape .local-tel-redes i {font-size:38px; color:var(--corSecundaria); margin-right:20px}
#rodape button {width:100%; height:62px; border:0px; background-color:#103F55; font-size:18px; color:#fff; font-weight:700; border-radius:50px; cursor:pointer}
#rodape a {text-decoration:none}
#rodape hr {border-top:1px #fff solid; margin-top:50px}
#rodape span {color:#fff}

#posrodape {height:70px; align-items:center}
#posrodape .container div {margin:5px 0px}
#posrodape a {color:#333}

#whatsflutuante {position:fixed; bottom:15px; right:15px; z-index:3}
#whatsflutuante button {width:70px; height:70px; border-radius:50px; background-color:var(--corWhats); color:#fff; border:0px; -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.30); -moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.30); box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.30)}
#whatsflutuante button:hover {background-color:#0eaa66; cursor:pointer}
#whatsflutuante button i {color:#fff; font-size:30px}

.parallax {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  
@media screen and (max-width: 1400px) {
    #posrodape .container {padding-right:80px}
}



@media screen and (max-width: 1050px) {
    #depoimentos {margin-top:90px}
}

@media screen and (max-width: 920px) {
    #depoimentos {margin-top:60px}
    h2 {font-size:25px}
    #topo .tel {display:none}
    #fotos .contFotos .box {width:calc(50% - 10px)}
}

@media screen and (max-width: 800px) {
    #depoimentos .contDepoimentos {width:900px}
    #depoimentos .scroll {width:100%; overflow:auto; padding-bottom:10px}
    #depoimentos .box {width:270px}
}

@media screen and (max-width: 720px) {
    #numeros {min-height:280px}
    #numeros .box {font-size:14px; width:50%}
    #numeros .box span {font-size:36px}
    #rodape .divImg, #rodape .divInfo {width:100%; height:auto}
    #rodape .divImg {height:180px}
    #posrodape .container {flex-direction: column}
    #posrodape {height:auto; padding:12px 0px}
    #sobre .colImg {width:100%}
    #sobre .colTexto {width:100%}
    #sobre .img {height:200px; margin-bottom:30px}
    #sobre .contbt {width:100%; text-align:center}
    #servicos .box {width:100%}
    #servicos .blocosub {width:calc(100% - 40px);} 
    #rodape .info {padding:50px 20px}
    h1 {font-size:25px !important}

    #servicos .containerbox {display:none}
}

@media screen and (max-width: 600px) {
    #topo div {text-align:center; justify-content:center}
    #topo button {display:none}
    #fotos .contFotos .box {width:100%}
}

@media screen and (max-width: 530px) {
    #numeros {margin-top:30px}
    #sobre {margin-top:40px}
}