* {font-family: 'Raleway', 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; background-image:url('../img/pattern.jpg')}
h1 {font-size:40px; font-weight:900; line-height:1; color:#fff; margin:0px; padding:0px}
h2 {font-size:39px; font-weight:700; color:var(--corPrimaria); margin:0px; padding:0px; line-height:1.1}
h3 {font-size:25px; font-weight:700; color:var(--corPrimaria); margin:0px; padding:0px; line-height:1.1}

:root {
    --gridPrincipal: 1200px;
    --gridSecundario: 820px;
    --corPrimaria: #308fb8;
    --corSecundaria: #308fb8;
    --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:transparent; height:90px; align-items:center}
#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:var(--corPrimaria); font-weight:700; font-family:'Poppins'; font-size:15px; margin:0px 15px}
#topo .tel i {color:var(--corPrimaria); margin-right:5px}
#topo a {text-decoration:none}

#banner {width:100%; height:500px; background-image:url('../img/banner/3.png'); background-size:cover; background-position:right; align-items: center;}
#banner button {height:65px; background-color:#fff; border-radius:50px; border:0px; padding:0px 50px; color:var(--corPrimaria); font-size:18px; font-weight:700; margin-top:20px}
#banner h1 {max-width:600px; line-height:1.1; text-shadow: 1px 3px 2px rgba(36,122,134,0.6);}

#servicos {margin-top:80px}
#servicos h2 {width:100%; text-align:center}
#servicos .containerbox {display:flex; gap:20px}
#servicos .box {background-color:#fff; border:1px #F2F2F2 solid; border-radius:4px; padding:25px 30px; width:calc(20% - 20px); margin:25px 10px; -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); padding-bottom:40px; position:relative; flex:1}
#servicos span {display:block; margin-top:20px; line-height:1.4; font-size:18px}
#servicos .box img {max-width:100%; height:auto; margin-bottom:10px}
#servicos h3 {margin-top:10px}
#servicos button {margin-top:20px; background-color:var(--corWhats); color:#fff; padding:15px 40px; border-radius:100px; border:0px; font-size:16px}

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

#depoimentos {width:100%; margin-top:70px; background-color:#F3FBFC; 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 {max-width:700px; font-size:32px; color:#fff; font-weight:700; text-align:center; padding:0px 20px}

#perguntas {margin:70px 0px}
#perguntas .box {background-color:#fff; border-radius:4px; padding:25px 30px; margin-top:20px; background-color:#fff; border:1px #fff solid}
#perguntas .box.active {background-color:#fff; border:1px #fff solid}
#perguntas .pergunta {font-size:18px; font-weight:600; background:url('../img/icone-arrow-down.png') no-repeat center right; padding-right:20px; cursor:pointer; color:#545454}
#perguntas .pergunta.active {background:url('../img/icone-arrow-up.png') no-repeat center right;}
#perguntas .resposta {font-size:15px; line-height:1.5; margin-top:20px; display:none}

#rodape {margin-top:0px}
#rodape .divImg, #rodape .divInfo {width:50%; height:640px; align-items:center}
#rodape .divImg {background-image:url('../img/img-rodape-3.png'); background-repeat:no-repeat; background-position:right center; background-size:cover}
#rodape .divInfo {background-color:var(--corPrimaria)}
#rodape .info {width:100%; max-width:600px; padding:50px}
#rodape h2 {color:#fff; font-size:29px}
#rodape .local-tel {color:#fff; font-size:16px; margin-top:20px; font-family:'Poppins'}
#rodape .local-tel i {color:#fff; font-size:21px; margin-right:10px}
#rodape button {width:100%; height:62px; border:0px; background-color:#185b77; font-size:18px; color:#fff; font-weight:700; border-radius:2px; cursor:pointer}
#rodape a {text-decoration:none}
#rodape form {display:flex; gap:12px; flex-direction: column; margin-top:20px}
#rodape form input {width:100%; background-color:#fff; height:48px; border:0px; border-radius:2px; padding:0px 12px}
#rodape form textarea {padding:12px; border:0px; border-radius:2px}
#rodape form .sucesso {color:#fff}


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

#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 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: 1200px) {
    /*#servicos .containerbox {width:1400px}
    #servicos .scroll {width:100%; overflow:auto; padding-bottom:10px}*/
    #servicos .box {width:calc(33.33% - 20px)}
}

@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}
}

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

@media screen and (max-width: 720px) {
    #numeros {min-height:280px}
    #rodape .divImg, #rodape .divInfo {width:100%; height:auto}
    #rodape .divImg {height:180px}
    #posrodape .container {flex-direction: column}
    #posrodape {height:auto; padding:12px 0px}
    #sobre .metade {width:100%}
    #sobre .img {height:200px; margin-bottom:30px}
    #sobre .contbt {width:100%; text-align:center}
    #banner {height:380px}
    h1 {font-size:32px}
    #banner .blocotxt {text-align:center}
    #topo div {text-align:center; justify-content:center}
    #topo button {display:none}
    #servicos {margin-top:40px}
    #servicos .containerbox {gap:0px}
    #numeros .box {font-size:24px}
    #rodape .info {padding:30px}
}

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