@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Mona+Sans:ital,wght@0,200..900;1,200..900&display=swap');
/*========== RESET ==========*/
* {margin: 0; padding: 0; box-sizing: border-box; border: none;}
body {font-family: Inter, sans-serif; color: #222; font-family: "Manrope", 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;}

/*========== 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: 180px; height: 57px; margin-top: 17px;}
.botao-whatsapp {position: relative; float: right; width: 160px; margin-top: 19px; padding: 15px 10px; border-radius: 10px; font-size: 15px; font-weight: 500; text-align: center; color: #fff; background: #1A2238; transition: 0.2s ease-out;}
.botao-whatsapp:hover {background: #1f3d7c; transform: scale(1.04);}

/*========== VÍDEO ==========*/
.video-fora-a-fora {position: relative; float: left; width: 100%; background-color: #fff;}
.video {position: relative; float: left; width: 100%; margin-top: 90px;}
video {width: 100%; display: block;}

/*========== BANNER ==========*/
.banner-fora-a-fora {position: relative; float: left; width: 100%; padding: 250px 30px 150px 30px; background: url(../img/banner.jpg); background-size: cover; background-position: center;}
.banner {position: relative; float: left; width: 100%;}
.titulo-banner {position: relative; float: left; width: 100%; margin-bottom: 10px; text-align: center; 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: 800; color: #f1f1f1; text-shadow: 1px 1px 1px rgba(0,0,0,.5);}
.descricao-banner {position: relative; float: left; width: 100%; margin-bottom: 20px; text-align: center; font-size: 17px; font-weight: 500; color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,.5);}
.botao-banner {position: relative; float: left; width: 155px; left: 50%; margin-left: -78px; padding: 15px 10px; border-radius: 10px; font-size: 15px; font-weight: 500; text-align: center; color: #fff; background: #FF6A3D; transition: 0.2s ease-out;}
.botao-banner:hover {background: #cd5633; transform: scale(1.04);}

/*========== CTA ==========*/
.cta-fora-a-fora {position: relative; float: left; width: 100%; padding: 70px 30px; background: #1A2238;}
.cta {position: relative; float: left; width: 100%;}
.titulo-cta {position: relative; float: left; width: 100%; margin-bottom: 20px; text-align: center; font-size: 24px; font-weight: 800; color: #fff;}
.botao-cta {position: relative; float: left; width: 155px; left: 50%; margin-left: -78px; padding: 15px 10px; border-radius: 10px; font-size: 15px; font-weight: 500; text-align: center; color: #fff; background: #FF6A3D; transition: 0.2s ease-out;}
.botao-cta:hover {background: #cd5633; transform: scale(1.04);}

/*========== CHAT ==========*/
.chat-fora-a-fora {position: relative; float: left; width: 100%; padding: 70px 30px; background: #f1f1f1;}
.chat {position: relative; float: left; width: 100%;}
.titulo-chat {position: relative; float: left; width: 100%; margin-bottom: 20px; text-align: center; font-size: 28px; font-weight: 800; color: #1A2238;}
.descricao-chat-caixa {position: relative; float: left; width: 100%;}
.descricao-chat-imagem {position: relative; float: left; width: 100%; margin-bottom: 20px;}
.descricao-chat-imagem img {position: relative; float: left; width: 300px; left: 50%; margin-left: -150px; border-radius: 15px;}
.descricao-chat-texto {position: relative; float: left; width: 100%; text-align: left; font-size: 17px;}
.botao-chat {position: relative; float: left; width: 155px; padding: 15px 10px; border-radius: 10px; font-size: 15px; font-weight: 500; text-align: center; color: #fff; background: #FF6A3D; transition: 0.2s ease-out;}
.botao-chat:hover {background: #cd5633; transform: scale(1.04);}

/*========== BENEFÍCIOS ==========*/
.beneficios-fora-a-fora {position: relative; float: left; width: 100%; padding: 70px 30px; background: #fff;}
.beneficios {position: relative; float: left; width: 100%;}
.titulo-beneficios {position: relative; float: left; width: 100%; margin-bottom: 20px; text-align: center; font-size: 28px; font-weight: 800; color: #1A2238;}
.beneficio-caixa {position: relative; float: left; width: 300px; left: 50%; margin-left: -150px;}
.beneficio {position: relative; float: left; width: 100%; height: 350px; padding: 60px 20px; margin-top: 20px; border-radius: 15px; background: linear-gradient(to bottom, #1A2238, #1f3d7c);}
.icon-beneficio {position: relative; float: left; width: 150px; height: 150px; left: 50%; margin-left: -75px; margin-bottom: 20px;}
.titulo-beneficio {position: relative; float: left; width: 100%; text-align: center; font-size: 21px; font-weight: 800; color: #fff;}

/*========== CTA 2 ==========*/
.cta2 {position: relative; float: left; width: 100%; padding: 100px 30px; text-align: center; background: url(../img/cta2.jpg); background-size: cover; background-position: center;}
.cta2 h1 {color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,.5);}
.botao-contato-rapido {position: relative; float: left; width: 155px; left: 50%; margin-left: -78px; margin-top: 30px; padding: 15px 10px; border-radius: 10px; font-size: 15px; font-weight: 500; text-align: center; color: #fff; background: #FF6A3D; transition: 0.2s ease-out;}
.botao-contato-rapido:hover {background: #cd5633; transform: scale(1.04);}

/*========== DEPOIMENTOS ==========*/
.depoimentos-fora-a-fora {position: relative; float: left; width: 100%; padding: 70px 30px; background: #fff;}
.depoimentos {position: relative; float: left; width: 100%;}
.titulo-depoimentos {position: relative; float: left; width: 100%; margin-bottom: 20px; text-align: center; font-size: 28px; font-weight: 800; color: #1A2238;}
.depoimentos-caixa {position: relative; float: left; width: 100%;}
.depoimento {position: relative; float: left; width: 100%; margin-top: 20px;}
.descricao-depoimento {position: relative; float: left; width: 100%; font-size: 18px; color: #1A2238;}
.autor-depoimento {position: relative; float: left; width: 100%; margin-top: 10px; font-size: 16px; font-weight: 700; color: #182f5f;}
.cargo-depoimento {position: relative; float: left; width: 100%; font-size: 14px; font-weight: 700; color: #c8502b;}

/*========== VANTAGENS ==========*/
.vantagens-fora-a-fora {position: relative; float: left; width: 100%; padding: 70px 30px; background: #f1f1f1;}
.vantagens {position: relative; float: left; width: 100%;}
.titulo-vantagens {position: relative; float: left; width: 100%; margin-bottom: 20px; text-align: center; font-size: 28px; font-weight: 800; color: #1A2238;}
.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-size: 24px; font-weight: 800; color: #1A2238;}
.descricao-vantagem {position: relative; float: left; width: 100%; font-size: 17px;}

/*========== CTA 3 ==========*/
.cta3 {position: relative; float: left; width: 100%; padding: 100px 30px; text-align: center; background: url(../img/cta.jpg); background-size: cover; background-position: center;}
.cta3 h1 {color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,.5);}
.botao-contato-rapido {position: relative; float: left; width: 155px; left: 50%; margin-left: -78px; margin-top: 30px; padding: 15px 10px; border-radius: 10px; font-size: 15px; font-weight: 500; text-align: center; color: #fff; background: #FF6A3D; transition: 0.2s ease-out;}
.botao-contato-rapido:hover {background: #cd5633; transform: scale(1.04);}

/*========== POLITICA DE PRIVACIDADE ==========*/
.politica-de-privacidade-fora-a-fora {position: relative; float: left; width: 100%; padding: 170px 30px 70px 30px; background: #f1f1f1;}
.politica-de-privacidade {position: relative; float: left; width: 100%;}
.politica-de-privacidade h1 {text-align: center;}

/*========== RODAPÉ ==========*/
.acima-rodape {position: relative; float: left; width: 100%; padding: 12px 30px; font-size: 16px; text-align: center; color: #fff; font-style: italic; background: #182f5f;}
.rodape-fora-a-fora {position: relative; float: left; width: 100%; padding: 70px 30px; text-align: center; color: #fff; background: #1A2238;}
.rodape {position: relative; float: left; width: 100%;}
.rodape-esquerda {position: relative; float: left; width: 100%;}
.rodape-direita {position: relative; float: left; width: 100%; margin-top: 20px;}
.logo2 img {position: relative; float: left; width: 180px; height: 57px; left: 50%; margin-left: -90px;}

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

.logo img {width: 200px; height: 63px; margin-top: 13px;}
.botao-whatsapp {width: 200px; font-size: 17px;}

.video {width: 700px; left: 50%; margin-left: -350px; margin-top: 100px; margin-bottom: 10px;}

.titulo-banner {width: 600px; float: right; text-align: right; font-size: 36px;}
.subtitulo-banner {width: 600px; float: right; text-align: right; font-size: 22px;}
.descricao-banner {width: 600px; float: right; text-align: right; font-size: 18px;}
.botao-banner {width: 200px; float: right; left: 0; margin-left: 0; padding: 20px 10px; font-size: 17px;}

.titulo-cta {font-size: 30px; line-height: 36px;}
.botao-cta {width: 200px; margin-left: -100px; padding: 20px 10px; font-size: 17px;}

.descricao-chat-imagem {width: 500px; left: 50%; margin-left: -250px;}
.descricao-chat-imagem img {width: 100%; left: 0; margin-left: 0;}

.botao-chat {width: 200px; padding: 20px 10px; font-size: 17px;}

.beneficio {width: 320px; margin: 10px 15px;}

.botao-contato-rapido {width: 200px; margin-left: -100px; padding: 20px 10px; font-size: 17px;}

.rodape-esquerda {width: 50%;}
.rodape-direita {width: 50%; margin-top: 5px; text-align: right;}
.logo2 img {width: 180px; height: 57px; left: 0; margin-left: 0;}
}

/* MEDIUM DEVICES - TABLETS & DESKTOPS */
@media screen and (min-width: 960px) {
body {font-size: 17px; line-height: 24px;}
.topo, .banner, .cta, .chat, .beneficios, .vantagens, .vantagens-caixa, .beneficio-caixa, .depoimentos, .rodape, .politica-de-privacidade {width: 900px; margin-left: -450px;}
.titulo-chat, .titulo-vantagens, .titulo-beneficios, .titulo-depoimentos {margin-bottom: 40px;}

.video {width: 900px; margin-left: -450px; margin-top: 100px; margin-bottom: 10px;}

.titulo-banner {width: 700px; margin-bottom: 30px; font-size: 46px; line-height: 58px;}
.subtitulo-banner {width: 100%; margin-bottom: 30px; font-size: 28px;}
.descricao-banner {width: 100%; margin-bottom: 30px; font-size: 18px;}

.descricao-chat-imagem {width: 370px; left: 0; margin-left: 0; margin-bottom: 0;}
.descricao-chat-texto {width: 490px; float: right;}

.beneficio {width: 280px; height: 340px; margin: 10px;}
.titulo-beneficio {font-size: 19px;}

.cta2 h1 {font-size: 42px; line-height: 52px;}

.depoimento {width: 300px; padding: 10px; margin-top: 0;}

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

.cta3 h1 {font-size: 42px; line-height: 52px;}
}

/* LARGE DEVICES - WIDE SCREENS */
@media screen and (min-width: 1280px) {
.banner, .chat, .beneficios, .vantagens, .vantagens-caixa, .depoimentos, .politica-de-privacidade {width: 1200px; margin-left: -600px;}
.titulo-chat, .titulo-vantagens, .titulo-beneficios, .titulo-depoimentos {margin-bottom: 60px; font-size: 42px;}

.titulo-banner {width: 820px; font-size: 52px; line-height: 60px;}
.subtitulo-banner {width: 100%; font-size: 32px;}
.descricao-banner {font-size: 20px;}

.descricao-chat-imagem {width: 450px;}
.descricao-chat-texto {width: 700px; font-size: 21px; line-height: 30px;}

.beneficio-caixa {width: 1100px; margin-left: -550px;}
.beneficio {width: 346px; height: 360px;}
.titulo-beneficio {font-size: 22px;}

.depoimento {width: 400px;}

.vantagem {width: 393px;}
}