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

/*========== OVER ==========*/
.over {position: fixed; width: 100%; height: 100%; background-color: rgba(20,20,20,0.95); z-index: 99999;}
.over-conteudo {position: relative; float: left; width: 360px; left: 50%; margin-left: -180px; padding: 120px 20px; text-align: center; color: #fff;}
.titulo-over {position: relative; float: left; width: 100%; margin-bottom: 10px; text-align: center; font-family: "Old Standard TT", serif; font-size: 30px; font-weight: 800; color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,.5);}
.subtitulo-over {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);}
.btn-close {position: absolute; top: 70px; right: 15px; width: 45px; height: 45px; font-size: 25px; text-align: center; color: #4b4750; border-radius: 56px; cursor: pointer; transition: 0.1s ease-out;}

/*========== TOPO ==========*/
.topo-fora-a-fora {position: fixed; width: 100%; height: 90px; box-shadow: 0px 1px 6px #222; background-color: rgba(0,0,0,0.8); z-index: 9999;}
.topo {position: relative; float: left; width: 90%; margin-left: 5%;}
.logo img {position: relative; float: left; width: 200px; height: 55px; margin-top: 17px;}
.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: #1ab454; transition: 0.2s ease-out;}
.botao-whatsapp:hover {transform: scale(1.04);}

/*========== BANNER ==========*/
.banner-fora-a-fora {position: relative; float: left; width: 100%; padding: 180px 30px 90px 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: "Old Standard TT", 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);}
.descricao-banner {position: relative; float: left; width: 100%; margin-bottom: 30px; text-align: center; font-size: 18px; color: #fff;}
.botao-fora-a-fora {position: relative; float: left; width: 100%;}
.botao-banner {position: relative; float: left; width: 300px; left: 50%; margin-left: -150px; padding: 15px 5px; border-radius: 100px; font-size: 15px; font-weight: 600; text-align: center; color: #000; background: #daa520; transition: 0.2s ease-out;}
.botao-banner:hover {transform: scale(1.04);}

/*========== SOBRE NÓS ==========*/
.sobre-nos-fora-a-fora {position: relative; float: left; width: 100%; padding: 100px 30px; background: #1e1e1e;}
.sobre-nos {position: relative; float: left; width: 100%;}
.imagem-sobre-nos {position: relative; float: left; width: 100%; margin-bottom: 30px;}
.imagem-sobre-nos img {position: relative; float: left; width: 320px; left: 50%; margin-left: -160px; border-radius: 10px; box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.4);}
.textos-sobre-nos {position: relative; float: left; width: 100%;}
.titulo-sobre-nos {position: relative; float: left; width: 100%; margin-bottom: 10px; text-align: center; font-family: "Old Standard TT", serif; font-size: 18px; font-weight: 700; color: #fff;}
.subtitulo-sobre-nos {position: relative; float: left; width: 100%; margin-bottom: 20px; text-align: center; font-family: "Old Standard TT", serif; font-size: 36px; font-weight: 800; color: #fff;}
.descricao-sobre-nos {position: relative; float: left; width: 100%; margin-bottom: 40px; text-align: center; font-size: 18px; color: #fff;}
.botao-sobre-nos {position: relative; float: left; width: 260px; left: 50%; margin-left: -130px; padding: 15px 5px; border-radius: 100px; font-size: 15px; font-weight: 600; text-align: center; color: #000; background: #daa520; transition: 0.2s ease-out;}
.botao-sobre-nos:hover {transform: scale(1.04);}

/*========== ÁREAS ==========*/
.areas-fora-a-fora {position: relative; float: left; width: 100%; background: #1e1e1e;}
.areas {position: relative; float: left; width: 100%; padding: 100px 30px; border-top: 1px solid #333;}
.areas-caixa {position: relative; float: left; width: 280px; left: 50%; margin-left: -140px;}
.titulo-areas {position: relative; float: left; width: 100%; margin-bottom: 20px; text-align: center; font-family: "Old Standard TT", serif; font-size: 36px; font-weight: 800; color: #fff;}
.descricao-areas {position: relative; float: left; width: 100%; margin-bottom: 40px; text-align: center; font-size: 18px; color: #fff;}
.area {position: relative; float: left; width: 280px; padding: 40px 20px; border-radius: 10px; margin-bottom: 15px; background: linear-gradient(180deg, #ddd 0%, #fff 100%);}
.area-icone {position: relative; float: left; width: 70px; height: 70px; left: 50%; margin-left: -35px;}
.area-titulo {position: relative; float: left; width: 100%; margin-top: 20px; text-align: center; font-size: 17px; font-weight: 700;}

/*========== CTA ==========*/
.cta-fora-a-fora {position: relative; float: left; width: 100%; padding: 80px 30px; background: url(../img/cta.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: "Old Standard TT", serif; font-size: 36px; font-weight: 800; color: #fff;}
.descricao-cta {position: relative; float: left; width: 100%; margin-bottom: 20px; text-align: center; color: #fff;}

/*========== DEPOIMENTOS ==========*/
.depoimentos-fora-a-fora {position: relative; float: left; width: 100%; padding: 100px 30px; background: #1e1e1e;}
.depoimentos {position: relative; float: left; width: 100%;}
.titulo-depoimentos {position: relative; float: left; width: 100%; margin-bottom: 20px; text-align: center; font-family: "Old Standard TT", serif; font-size: 36px; font-weight: 800; color: #fff;}
.descricao-depoimentos {position: relative; float: left; width: 100%; margin-bottom: 40px; text-align: center; font-size: 18px; color: #fff;}
.depoimentos-caixa {position: relative; float: left; width: 100%; text-align: center;}
.depoimento {position: relative; float: left; width: 100%; margin-top: 20px;}
.descricao-depoimento {position: relative; float: left; width: 100%; font-size: 18px; font-style: italic; color: #fff;}
.autor-depoimento {position: relative; float: left; width: 100%; margin-top: 10px; font-size: 16px; font-weight: 700; color: #fff;}
.estrelas-depoimento {position: relative; float: left; width: 100%; font-size: 18px; font-weight: 700; color: #fff;}
.botao-depoimentos {position: relative; float: left; width: 240px; left: 50%; margin-left: -120px; margin-top: 30px; padding: 15px 5px; border-radius: 100px; font-size: 15px; font-weight: 600; text-align: center; color: #000; background: #daa520; transition: 0.2s ease-out;}
.botao-depoimentos:hover {transform: scale(1.04);}

/*========== PROCESSOS ==========*/
.processos-fora-a-fora {position: relative; float: left; width: 100%; padding: 100px 30px; background: url(../img/processos.jpg); background-size: cover; background-position: center;}
.processos {position: relative; float: left; width: 100%;}
.titulo-processos {position: relative; float: left; width: 100%; margin-bottom: 40px; text-align: center; font-family: "Old Standard TT", serif; font-size: 36px; font-weight: 800; color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,.5);}
.processos-caixa {position: relative; float: left; width: 340px; left: 50%; margin-left: -170px;}
.processo {position: relative; float: left; width: 100%; margin-bottom: 30px;}
.numero-processo {position: relative; float: left; width: 30px; font-family: "Old Standard TT", serif; font-size: 36px; font-weight: 800; color: #daa520; text-shadow: 1px 1px 1px rgba(0,0,0,.5);}
.titulo-processo {position: relative; float: left; width: 310px; font-family: "Old Standard TT", serif; font-size: 26px; font-weight: 800; color: #daa520; text-shadow: 1px 1px 1px rgba(0,0,0,.5);}
.descricao-processo {position: relative; float: left; width: 100%; margin-top: 10px; font-size: 18px; font-style: italic; color: #fff;}

/*========== DÚVIDAS ==========*/
.duvidas-fora-a-fora {position: relative; float: left; width: 100%; padding: 100px 30px; background: linear-gradient(180deg, #1e1e1e 0%, #111 100%);}
.duvidas {position: relative; float: left; width: 100%;}
.titulo-duvidas {position: relative; float: left; width: 100%; margin-bottom: 40px; text-align: center; font-family: "Old Standard TT", serif; font-size: 36px; font-weight: 800; color: #fff;}
.descricao-duvidas {position: relative; float: left; width: 100%; margin-top: 10px; font-size: 18px; font-style: italic; color: #fff;}
.duvida {font-family: "Old Standard TT", serif; font-size: 24px; font-weight: 800; color: #daa520; font-style: normal;}

/*========== RODAPÉ ==========*/
.rodape-fora-a-fora {position: relative; float: left; width: 100%; padding: 50px 30px; background: #222;}
.rodape {position: relative; float: left; width: 100%; text-align: center; font-size: 16px; color: #fff;}

/* SMALL DEVICES - TABLETS */
@media screen and (min-width: 768px) {
.over-conteudo, .topo, .banner, .sobre-nos, .areas, .depoimentos, .processos, .duvidas, .cta, .rodape {width: 700px; left: 50%; margin-left: -350px;}
.logo img {width: 289px; height: 80px; margin-top: 5px;}

.botao-whatsapp {width: 200px; font-size: 17px;}
.titulo-banner, .titulo-over {font-size: 42px;}
.subtitulo-banner, .subtitulo-over {font-size: 24px;}
.descricao-banner {font-size: 20px;}
.botao-banner {width: 360px; margin-left: -180px; padding: 20px 10px; font-size: 17px;}

.imagem-sobre-nos img {width: 500px; margin-left: -250px;}
.titulo-sobre-nos {font-size: 20px;}
.subtitulo-sobre-nos, .titulo-areas, .titulo-depoimentos, .titulo-cta, .titulo-processos, .titulo-duvidas {font-size: 42px;}
.descricao-sobre-nos {font-size: 20px;}
.botao-sobre-nos {width: 320px; margin-left: -160px; padding: 20px 10px; font-size: 17px;}

.areas-caixa {width: 650px; margin-left: -325px;}
.area {width: 305px; padding: 40px 10px; margin-left: 15px; margin-bottom: 15px;}
.area-titulo {font-size: 16px;}

.descricao-depoimento {text-align: left;}
.botao-depoimentos {width: 300px; margin-left: -150px; padding: 20px 10px; font-size: 17px;}

.processos-caixa {width: 650px; margin-left: -325px;}
.numero-processo {width: 40px; font-size: 48px;}
.titulo-processo {width: 610px; margin-top: 8px; font-size: 30px;}
.descricao-processo {font-size: 20px;}
}

/* MEDIUM DEVICES - TABLETS & DESKTOPS */
@media screen and (min-width: 960px) {
body {font-size: 17px;}
.over-conteudo, .topo, .banner, .sobre-nos, .areas, .depoimentos, .processos, .cta, .rodape {width: 900px; margin-left: -450px;}

.banner-fora-a-fora {padding: 170px 30px 80px 30px; overflow: hidden;}
.textos-banner {width: 800px; left: 50%; margin-left: -400px;}
.titulo-banner, .titulo-over {margin-bottom: 30px; font-size: 44px; line-height: 58px;}
.subtitulo-banner, .subtitulo-over {margin-bottom: 50px;}
.descricao-banner {margin-bottom: 50px;}

.imagem-sobre-nos {width: 400px; height: 496px; margin-bottom: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; flex-wrap: nowrap;}
.imagem-sobre-nos img {width: 400px; left: 0; margin-left: 0;}
.textos-sobre-nos {width: 460px; float: right;}
.titulo-sobre-nos, .subtitulo-sobre-nos, .descricao-sobre-nos {text-align: left;}
.botao-sobre-nos {left: 0; margin-left: 0;}

.areas-caixa {width: 900px; margin-left: -450px;}
.area {width: 280px; padding: 40px 10px;}
.area-titulo {font-size: 14px;}

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

.processos-caixa {width: 900px; margin-left: -450px;}
.processo {width: 450px; margin-bottom: 30px;}
.titulo-processo {width: 410px; margin-top: 0;}
}

/* LARGE DEVICES - WIDE SCREENS */
@media screen and (min-width: 1280px) {
.banner, .sobre-nos, .areas, .depoimentos, .processos, .cta {width: 1200px; margin-left: -600px;}
.descricao-cta {font-size: 22px;}

.textos-banner {width: 1100px; margin-left: -550px;}
.titulo-banner {font-size: 56px; line-height: 60px;}
.subtitulo-banner {font-size: 24px;}

.imagem-sobre-nos {width: 500px; height: 424px;}
.imagem-sobre-nos img {width: 500px;}
.textos-sobre-nos {width: 640px;}

.areas-caixa {width: 1150px; margin-left: -575px;}
.area {width: 268px; padding: 40px 10px;}
.area-titulo {font-size: 14px;}

.depoimento {width: 400px;}

.processos-caixa {width: 1150px; margin-left: -575px;}
.processo {width: 575px; margin-bottom: 30px;}
.titulo-processo {width: 535px; margin-top: 8px;}
}