@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Rajdhani:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap');
/*========== RESET ==========*/
* {margin: 0; padding: 0; box-sizing: border-box; border: none;}
body {font-family: Inter, sans-serif; color: #222; font-family: "Nunito", sans-serif; background: linear-gradient(to bottom, #f8f9fa, #ffffff);}
html {scroll-behavior: smooth;}
.negrito {font-weight: 800;}
.italico {font-style: italic;}
.link-rodape {text-decoration: none; color: #fff;}
.link-rodape:hover {text-decoration: underline;}
.linha-botao {position: relative; float: left; width: 100%;}

/*========== TOPO ==========*/
.topo-fora-a-fora {position: fixed; width: 100%; height: 90px; box-shadow: 0px 1px 6px #999; background-color: #fff; z-index: 9999;}
.topo {position: relative; float: left; width: 90%; margin-left: 5%;}
.logo img {position: relative; float: left; width: 186px; height: 90px; margin-top: 0;}
.botao-whatsapp {position: relative; float: right; width: 170px; margin-top: 19px; padding: 15px 10px; border-radius: 100px; font-size: 15px; font-weight: 800; text-align: center; color: #fff; background: #00303d; transition: 0.2s ease-out;}
.botao-whatsapp:hover {background: #00303d; transform: scale(1.04);}

/*========== BANNER ==========*/
.banner-fora-a-fora {position: relative; float: left; width: 100%; padding: 150px 30px 0 30px; background: url(../img/banner.jpg); background-size: cover; background-position: center;}
.banner {position: relative; float: left; width: 100%;}
.textos-banner {position: relative; float: left; width: 100%;}
.titulo-banner {position: relative; float: left; width: 100%; margin-bottom: 10px; text-align: center; font-family: "Rajdhani", sans-serif; font-size: 30px; font-weight: 800; color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,.5);}
.subtitulo-banner {position: relative; float: left; width: 100%; margin-bottom: 30px; text-align: center; font-size: 20px; font-weight: 700; color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,.5);}
.botao-fora-a-fora {position: relative; float: left; width: 100%;}
.botao-banner {position: relative; float: left; width: 340px; left: 50%; margin-left: -170px; padding: 15px 5px; border-radius: 100px; font-size: 15px; font-weight: 800; text-align: center; color: #00303d; background: #16e962; transition: 0.2s ease-out;}
.botao-banner:hover {transform: scale(1.04);}
.imagem-banner {position: relative; float: left; width: 340px; height: 244px; left: 50%; margin-left: -170px; margin-top: 20px; background: url(../img/time-four.png); background-size: cover; background-position: center;}

/*========== CONTADOR ==========*/
.contador-fora-a-fora {position: relative; float: left; width: 100%; padding: 70px 30px; background: linear-gradient(180deg, #00212a 0%, #00303d 100%);}
.contador {position: relative; float: left; width: 100%;}
.titulo-contador {position: relative; float: left; width: 100%; margin-bottom: 20px; text-align: center; font-family: "Rajdhani", sans-serif; font-size: 28px; font-weight: 800; color: #16e962;}
.descricao-contador {position: relative; float: left; width: 100%; text-align: center; font-size: 18px; color: #fff;}

/*========== SOLUÇÕES ==========*/
.solucoes-fora-a-fora {position: relative; float: left; width: 100%; padding: 70px 30px; background: #f3f3f3;}
.solucoes {position: relative; float: left; width: 100%;}
.titulo-menor-solucoes {position: relative; float: left; width: 100%; margin-bottom: 10px; text-align: center; font-family: "Rajdhani", sans-serif; font-size: 20px; font-weight: 800; color: #16e962;}
.titulo-solucoes {position: relative; float: left; width: 100%; margin-bottom: 20px; text-align: center; font-family: "Rajdhani", sans-serif; font-size: 28px; font-weight: 800; color: #00303d;}
.descricao-solucoes {position: relative; float: left; width: 100%; margin-bottom: 30px; font-size: 19px; text-align: center;}
.solucoes-texto {position: relative; float: left; width: 100%;}
.solucoes-texto-margem {position: relative; float: left; width: 100%;}
.solucoes-caixa {position: relative; float: left; width: 320px; left: 50%; margin-left: -160px; padding: 15px 10px;}
.solucao {position: relative; float: left; width: 100%; margin-bottom: 30px;}
.imagem-solucao {position: relative; float: left; width: 100%;}
.imagem-solucao img {position: relative; float: left; width: 60px; height: 60px; left: 50%; margin-left: -30px;}
.titulo-solucao {position: relative; float: left; width: 100%; margin-top: 10px; margin-bottom: 10px; text-align: center; font-family: "Rajdhani", sans-serif; font-size: 24px; font-weight: 800; color: #00303d;}
.descricao-solucao {position: relative; float: left; width: 100%; text-align: center; font-size: 17px;}
.botao-solucao {position: relative; float: left; width: 180px; left: 50%; margin-left: -90px; margin-top: 30px; padding: 15px 10px; border-radius: 100px; font-size: 15px; font-weight: 800; text-align: center; color: #fff; background: #00303d; transition: 0.2s ease-out;}
.botao-solucao:hover {background: #00303d; transform: scale(1.04);}

/*========== CTA ==========*/
.cta-fora-a-fora {position: relative; float: left; width: 100%; padding: 70px 30px; background: url(../img/cta.jpg); background-size: cover; background-position: center;}
.cta2-fora-a-fora {position: relative; float: left; width: 100%; padding: 70px 30px; background: url(../img/cta2.jpg); background-size: cover; background-position: center;}
.cta {position: relative; float: left; width: 100%;}
.titulo-cta {position: relative; float: left; width: 100%; margin-bottom: 20px; text-align: center; font-family: "Rajdhani", sans-serif; font-size: 28px; font-weight: 800; color: #16e962;}
.descricao-cta {position: relative; float: left; width: 100%; text-align: center; font-size: 18px; color: #fff;}
.botao-cta {position: relative; float: left; width: 260px; left: 50%; margin-left: -130px; margin-top: 30px; padding: 15px 10px; border-radius: 100px; font-size: 15px; font-weight: 800; text-align: center; color: #00303d; background: #16e962; transition: 0.2s ease-out;}
.botao-cta:hover {transform: scale(1.04);}

/*========== VANTAGENS ==========*/
.vantagens-fora-a-fora {position: relative; float: left; width: 100%; padding: 70px 30px; background: #f3f3f3;}
.vantagens {position: relative; float: left; width: 100%;}
.titulo-vantagens {position: relative; float: left; width: 100%; margin-bottom: 20px; text-align: center; font-family: "Rajdhani", sans-serif; font-size: 28px; font-weight: 800; color: #00303d;}
.subtitulo-vantagens {position: relative; float: left; width: 100%; text-align: center; font-size: 18px; font-weight: 500;}
.vantagens-caixa {position: relative; float: left; width: 320px; left: 50%; margin-left: -160px; padding: 15px 10px;}
.vantagem {position: relative; float: left; width: 100%; margin-top: 20px;}
.titulo-vantagem {position: relative; float: left; width: 100%; margin-top: 20px; margin-bottom: 10px; font-family: "Rajdhani", sans-serif; font-size: 24px; font-weight: 800; color: #00303d;}
.descricao-vantagem {position: relative; float: left; width: 100%; font-size: 17px;}

/*========== DEPOIMENTOS ==========*/
*, *::before, *::after { box-sizing: border-box; }
.depoimentos-fora-a-fora {position: relative; float: left; width: 100%; padding: 70px 30px; background: #f3f3f3;}
.titulo-depoimentos {position: relative; float: left; width: 100%; margin-bottom: 20px; text-align: center; font-family: "Rajdhani", sans-serif; font-size: 28px; font-weight: 800; color: #00303d;}
.depoimentos {position: relative; max-width: 1100px; margin: 0 auto; overflow: hidden; padding: 0;}
.depoimentos-caixa {width: 100%; display: flex; gap: 15px; transition: transform 0.45s ease; will-change: transform;}
.depoimento {flex: 0 0 100%; box-sizing: border-box; padding: 30px 50px; border-radius: 8px; background: linear-gradient(180deg, #00212a 0%, #00303d 100%);}
.titulo-depoimento {position: relative; float: left; width: 100%; margin-bottom: 10px; font-family: "Rajdhani", sans-serif; font-size: 24px; font-weight: 800; color: #16e962;}
.subtitulo-depoimento {position: relative; float: left; width: 100%; margin-bottom: 20px; font-family: "Rajdhani", sans-serif; font-size: 18px; font-weight: 600; font-style: italic; color: #16e962;}
.descricao-depoimento {position: relative; float: left; width: 100%; font-size: 17px; color: #fff;}
.seta {position: absolute; top: 45%; transform: translateY(-45%); background: rgba(255,255,255,0.45); color: #00303d; border: none; padding: 10px; border-radius: 8px; cursor: pointer; z-index: 5;}
.seta-esquerda {left: 10px;}
.seta-direita {right: 10px;}
.seta:hover {background-color: rgba(255,255,255,0.8);}
.botao-depoimentos {position: relative; float: left; width: 260px; left: 50%; margin-left: -130px; margin-top: 30px; padding: 15px 10px; border-radius: 100px; font-size: 15px; font-weight: 800; text-align: center; color: #fff; background: #00303d; transition: 0.2s ease-out;}
.botao-depoimentos:hover {background: #00303d; transform: scale(1.04);}

/*========== RODAPÉ ==========*/
.rodape-fora-a-fora {position: relative; float: left; width: 100%; padding: 50px 30px; background: #00303d;}
.rodape {position: relative; float: left; width: 100%;}
.logo-rodape {position: relative; float: left; width: 100%; margin-bottom: 20px;}
.logo-rodape img {position: relative; float: left; width: 200px; height: 97px; left: 50%; margin-left: -100px;}
.textos-rodape {position: relative; float: left; width: 100%; text-align: center; font-size: 16px; color: #fff;}

/* SMALL DEVICES - TABLETS */
@media screen and (min-width: 768px) {
.topo, .banner, .contador, .cta, .solucoes, .solucoes-caixa, .vantagens, .vantagens-caixa, .depoimentos, .rodape {width: 700px; left: 50%; margin-left: -350px;}
.titulo-contador, .titulo-solucoes, .titulo-cta, .titulo-vantagens, .titulo-depoimentos {font-size: 36px;}

.botao-whatsapp {width: 200px; font-size: 17px;}
.titulo-banner {font-size: 42px;}
.subtitulo-banner {font-size: 24px;}
.botao-banner {width: 400px; margin-left: -200px; padding: 20px 10px; font-size: 17px;}
.imagem-banner {width: 500px; height: 359px; margin-left: -250px; margin-top: 20px;}

.botao-solucao {width: 200px; margin-left: -100px; padding: 20px 10px; font-size: 17px;}
.botao-cta, .botao-depoimentos {width: 300px; margin-left: -150px; padding: 20px 10px; font-size: 17px;}

.depoimento {padding: 70px 50px;}
.titulo-depoimento {font-size: 28px;}
.subtitulo-depoimento {font-size: 22px;}
.descricao-depoimento {font-size: 18px;}

.logo-rodape {position: relative; float: left; width: 50%; margin-bottom: 0;}
.logo-rodape img {left: 0; margin-left: 0;}
.textos-rodape {width: 50%; text-align: right;}
}

/* MEDIUM DEVICES - TABLETS & DESKTOPS */
@media screen and (min-width: 960px) {
body {font-size: 17px;}
.topo, .banner, .contador, .cta, .solucoes, .vantagens, .vantagens-caixa, .depoimentos, .rodape {width: 900px; margin-left: -450px;}
.titulo-solucoes, .titulo-vantagens, .titulo-depoimentos {margin-bottom: 20px; line-height: 48px;}

.banner-fora-a-fora {padding: 150px 0 0 30px; overflow: hidden;}
.textos-banner {width: 400px;}
.titulo-banner {margin-bottom: 30px; font-size: 44px; text-align: left; line-height: 58px;}
.subtitulo-banner {margin-bottom: 30px; font-size: 18px; text-align: left;}
.botao-banner {width: 400px; margin-left: -200px; padding: 20px 10px; margin-bottom: 50px; font-size: 17px;}
.imagem-banner {position: absolute; width: 550px; height: 395px; left: 0; margin-left: 400px; margin-top: 0; bottom: 0;}

.solucoes-texto {width: 280px; height: 622px; display: flex; align-items: center; justify-content: center; flex-direction: column; flex-wrap: nowrap; text-align: left;}
.solucoes-texto-margem {width: 100%; height: 590px; text-align: left;}
.solucoes-caixa {width: 598px; left: 0; margin-left: 20px; border-left: 2px solid #ddd;}
.titulo-menor-solucoes, .titulo-solucoes, .descricao-solucoes {text-align: left;}
.solucao {width: 288px; padding: 10px;}
.titulo-solucao {font-size: 22px;}

.vantagem {width: 290px; padding: 10px;}
.titulo-vantagem {font-size: 22px;}

.depoimento {flex: 0 0 calc((100% - 15px) / 2);}
.titulo-depoimento {font-size: 32px;}
.subtitulo-depoimento {font-size: 26px;}
.descricao-depoimento {font-size: 20px;}
}

/* LARGE DEVICES - WIDE SCREENS */
@media screen and (min-width: 1280px) {
.banner, .contador, .cta, .solucoes, .vantagens, .vantagens-caixa, .depoimentos {width: 1200px; margin-left: -600px;}
.titulo-contador, .titulo-cta, .titulo-vantagens, .titulo-depoimentos {margin-bottom: 30px; font-size: 42px;}
.titulo-solucoes {font-size: 42px;}
.descricao-contador, .descricao-cta {font-size: 22px;}

.textos-banner {width: 500px;}
.titulo-banner {font-size: 52px; line-height: 60px;}
.subtitulo-banner, .subtitulo-vantagens {font-size: 20px;}
.imagem-banner {width: 700px; height: 503px; margin-left: 500px; margin-top: 0; bottom: 0;}

.solucoes-texto {width: 350px; height: 622px;}
.solucoes-texto-margem {height: 490px;}
.solucoes-caixa {width: 820px; left: 0; margin-left: 30px; border-left: 2px solid #ddd;}
.solucao {width: 390px;}
.titulo-solucao, .titulo-vantagem {font-size: 26px;}
.descricao-solucao, .descricao-vantagem {font-size: 20px;}

.vantagem {width: 393px; padding: 10px;}
}