@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: 200px; height: 58px; margin-top: 16px;}
.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: #193c69; transition: 0.2s ease-out;}
.botao-whatsapp:hover {background: #4dc0f2; transform: scale(1.04);}

/*========== BANNER ==========*/
.banner-fora-a-fora {position: relative; float: left; width: 100%; padding: 250px 30px 150px 30px; background: url(../img/banner2.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: #4dc0f2; transition: 0.2s ease-out;}
.botao-banner:hover {background: #193c69; transform: scale(1.04);}

/*========== ATENDIMENTO PERSONALIZADO ==========*/
.atendimento-personalizado-fora-a-fora {position: relative; float: left; width: 100%; padding: 70px 30px; background: #fff;}
.atendimento-personalizado {position: relative; float: left; width: 100%;}
.titulo-atendimento-personalizado {position: relative; float: left; width: 100%; margin-bottom: 20px; text-align: center; font-size: 28px; font-weight: 800; color: #193c69;}
.descricao-atendimento-personalizado {position: relative; float: left; width: 100%;}
.descricao-atendimento-personalizado-imagem {position: relative; float: left; width: 100%; margin-bottom: 20px;}
.descricao-atendimento-personalizado-imagem img {position: relative; float: left; width: 300px; left: 50%; margin-left: -150px; border-radius: 15px;}
.descricao-atendimento-personalizado-texto {position: relative; float: left; width: 100%; text-align: left; font-size: 17px;}

/*========== CTA ==========*/
.cta {position: relative; float: left; width: 100%; padding: 100px 30px; text-align: center; background: url(../img/cta.jpg); background-size: cover; background-position: center;}
.cta2 {position: relative; float: left; width: 100%; padding: 100px 30px; text-align: center; background: url(../img/cta2.jpg); background-size: cover; background-position: center;}
.cta-margem {position: relative; float: left; width: 100%;}
.titulo-cta {position: relative; float: left; width: 100%; font-size: 28px; font-weight: 800; color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,.5);}
.botao-cta {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: #4dc0f2; transition: 0.2s ease-out;}
.botao-cta:hover {background: #193c69; transform: scale(1.04);}

/*========== AGENDE ==========*/
.agende-fora-a-fora {position: relative; float: left; width: 100%; padding: 70px 30px; background: #2e57ff;}
.agende {position: relative; float: left; width: 100%;}
.titulo-agende {position: relative; float: left; width: 100%; margin-bottom: 20px; text-align: center; font-size: 28px; font-weight: 800; color: #fff;}
.descricao-agende {position: relative; float: left; width: 100%; text-align: center; font-size: 20px; font-weight: 500; color: #fff;}
.botao-agende {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: #222; background: #fff; transition: 0.2s ease-out;}
.botao-agende:hover {color: #fff; background: #4dc0f2; transform: scale(1.04);}

/*========== VANTAGENS ==========*/
.vantagens-fora-a-fora {position: relative; float: left; width: 100%; padding: 70px 30px; background: #fff;}
.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: #193c69;}
.descricao-vantagens {position: relative; float: left; width: 100%; margin-bottom: 30px; font-size: 19px; text-align: center;}
.vantagens-caixa {position: relative; float: left; width: 320px; left: 50%; margin-left: -160px; padding: 15px 10px;}
.vantagem {position: relative; float: left; width: 100%; margin-bottom: 30px;}
.imagem-vantagem {position: relative; float: left; width: 100%;}
.imagem-vantagem img {border-radius: 15px;}
.titulo-vantagem {position: relative; float: left; width: 100%; margin-top: 10px; margin-bottom: 10px; text-align: center; font-size: 24px; font-weight: 800; color: #193c69;}
.descricao-vantagem {position: relative; float: left; width: 100%; text-align: center; font-size: 17px;}
.botao-vantagem {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: #4dc0f2; transition: 0.2s ease-out;}
.botao-vantagem:hover {background: #193c69; transform: scale(1.04);}

/*========== BLOCOS ==========*/
.blocos-fora-a-fora {position: relative; float: left; width: 100%; padding: 70px 30px; background: #fff;}
.blocos {position: relative; float: left; width: 100%;}
.bloco-esq {position: relative; float: left; width: 100%; margin-bottom: 20px;}
.bloco-dir {position: relative; float: left; width: 100%; margin-bottom: 20px;}
.bloco-imagem {position: relative; float: left; width: 100%;}
.bloco-imagem img {border-radius: 15px; box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3);}
.bloco-texto {position: relative; float: left; width: 100%; text-align: center;}
.bloco-titulo {position: relative; float: left; width: 100%; margin-top: 10px; margin-bottom: 10px; font-size: 24px; font-weight: 800; color: #193c69;}
.bloco-descricao {position: relative; float: left; width: 100%; font-size: 17px;}

/*========== PERGUNTAS ==========*/
.perguntas-fora-a-fora {position: relative; float: left; width: 100%; padding: 70px 30px; background: #fff;}
.perguntas {position: relative; float: left; width: 100%;}
.titulo-perguntas {position: relative; float: left; width: 100%; margin-bottom: 20px; text-align: center; font-size: 28px; font-weight: 800; color: #193c69;}
.caixa-perguntas {position: relative; float: left; width: 100%; font-size: 17px;}
.caixa-perguntas h2 {margin-bottom: 10px; font-size: 20px; color: #193c69;}

/*========== RODAPÉ ==========*/
.rodape-fora-a-fora {position: relative; float: left; width: 100%; padding: 70px 30px; text-align: center; color: #fff; background: #193c69;}
.rodape {position: relative; float: left; width: 100%;}

/* SMALL DEVICES - TABLETS */
@media screen and (min-width: 768px) {
.topo, .banner, .atendimento-personalizado, .agende, .vantagens, .vantagens-caixa, .beneficio-caixa, .blocos, .cta-margem, .perguntas, .rodape {width: 700px; left: 50%; margin-left: -350px;}
.titulo-atendimento-personalizado, .titulo-vantagens, .titulo-perguntas {font-size: 36px;}
.titulo-agende {font-size: 34px;}

.logo img {width: 280px; height: 81px; margin-top: 4px;}
.botao-whatsapp {width: 200px; font-size: 17px;}
.titulo-banner {font-size: 36px;}
.subtitulo-banner {font-size: 22px;}
.descricao-banner {font-size: 18px;}
.botao-banner, .botao-cta, .botao-agende, .botao-vantagem {width: 200px; margin-left: -100px; padding: 20px 10px; font-size: 17px;}

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

.bloco-esq .bloco-imagem {position: relative; float: left; width: 50%;}
.bloco-esq .bloco-imagem img {width: 300px; float: left;}
.bloco-esq .bloco-texto {position: relative; float: right; width: 50%; height: 300px; display: flex; align-items: center; justify-content: center; flex-direction: column; flex-wrap: nowrap; text-align: left;}
.bloco-dir .bloco-imagem {position: relative; float: right; width: 50%;}
.bloco-dir .bloco-imagem img {width: 300px; float: right;}
.bloco-dir .bloco-texto {position: relative; float: left; width: 50%; height: 300px; display: flex; align-items: center; justify-content: center; flex-direction: column; flex-wrap: nowrap; text-align: left;}
.bloco-titulo {font-size: 34px;}
.bloco-descricao {font-size: 20px; line-height: 30px;}

}

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

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

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

.titulo-beneficio {font-size: 19px;}
.titulo-cta {font-size: 42px; line-height: 52px;}

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

.bloco-esq .bloco-imagem img, .bloco-dir .bloco-imagem img {width: 400px;}
.bloco-esq .bloco-texto, .bloco-dir .bloco-texto {height: 400px;}
}

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

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

.descricao-atendimento-personalizado-imagem {width: 450px;}
.descricao-atendimento-personalizado-texto {width: 700px; font-size: 21px; line-height: 30px;}
.descricao-vantagem, .caixa-perguntas {font-size: 20px; line-height: 30px;}
.descricao-vantagens {font-size: 24px;}

.titulo-beneficio {font-size: 22px;}

.vantagem {width: 393px;}

.bloco-esq .bloco-imagem img, .bloco-dir .bloco-imagem img {width: 500px;}
.bloco-esq .bloco-texto, .bloco-dir .bloco-texto {height: 500px;}
.bloco-titulo {font-size: 40px;}
.bloco-descricao {font-size: 24px; line-height: 34px;}

.caixa-perguntas h2 {font-size: 24px;}
}