@import url('https://fonts.cdnfonts.com/css/script-mt');
@import url('https://fonts.googleapis.com/css2?family=Abyssinica+SIL&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/*========== RESET ==========*/
* {margin: 0; padding: 0; box-sizing: border-box; border: none;}
body {font-family: Inter, sans-serif; color: #222; font-family: "Poppins", Sans-serif;}
html {scroll-behavior: smooth;}
.negrito {font-weight: bold;}
.italico {font-style: italic;}

/*========== TOPO ==========*/
.topo-fora-a-fora {position: fixed; width: 100%; height: 100px; background-color: rgba(0, 0, 0, 0.9); z-index: 9999;}
.topo {position: relative; float: left; width: 90%; margin-left: 5%;}
.logo img {position: relative; float: left; width: 90px; height: 90px; margin-top: 5px;}
.botao-whatsapp {position: relative; float: right; width: 180px; margin-top: 24px; padding: 15px 10px; border-radius: 10px; font-size: 15px; font-weight: 500; text-align: center; text-transform: uppercase; color: #fff; background: #04AC1B; transition: 0.2s ease-out;}
.botao-whatsapp:hover {background: #11b227; transform: scale(1.04);}

/*========== BANNER ==========*/
.banner-fora-a-fora {position: relative; float: left; width: 100%; padding: 150px 30px 50px 30px; background: url(../img/bg.jpg); background-size: cover; background-position: center;}
.banner {position: relative; float: left; width: 100%;}
.titulo-banner {position: relative; float: left; width: 100%; margin-bottom: 20px; text-align: center; font-size: 30px; font-weight: 600; color: #e2ce78; text-shadow: 2px 2px 5px rgba(0,0,0,.6); text-transform: uppercase;}
.subtitulo-banner {position: relative; float: left; width: 100%; margin-bottom: 20px; text-align: center; font-size: 18px; font-weight: 500; color: #fff; text-shadow: 2px 2px 5px rgba(0,0,0,.6);}

/*========== DESCRICAO ==========*/
.descricao-fora-a-fora {position: relative; float: left; width: 100%; padding: 70px 30px; background: #fff;}
.descricao {position: relative; float: left; width: 100%;}
.descricao h1 {text-align: center;}
.img-descricao {position: relative; float: left; width: 100%; margin-top: 20px;}
.txt-descricao {position: relative; float: left; width: 100%;}
.botao-whatsapp-descricao {position: relative; float: left; width: 180px; margin-top: 24px; padding: 15px 10px; border-radius: 10px; font-size: 15px; font-weight: 500; text-align: center; text-transform: uppercase; color: #fff; background: #04AC1B; transition: 0.2s ease-out;}
.botao-whatsapp-descricao:hover {background: #11b227; transform: scale(1.04);}

/*========== SERVICOS ==========*/
.servicos-fora-a-fora {position: relative; float: left; width: 100%; padding: 0 30px 70px 30px; background: #fff;}
.servicos {position: relative; float: left; width: 100%; padding-top: 70px; border-top: 1px solid #cdcdcd;}
.servicos h1 {text-align: center;}
.servicos-caixa {position: relative; float: left; width: 350px; left: 50%; margin-left: -175px;}
.servico {position: relative; float: left; width: 350px; height: 175px; margin-bottom: 20px; box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.05); transition: 0.3s ease-out;}
.servico:hover {box-shadow: 0px 20px 40px rgba(0, 0, 0, .4);}
.servico-img {position: relative; float: left; width: 100%;}
.servico-titulo {position: absolute; width: 100%; height: 100%; padding: 20px; text-align: center; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 600; color: #e2ce78; text-shadow: 2px 2px 5px rgba(0,0,0,.6); text-transform: uppercase;}

/*========== GALERIA ==========*/
.galeria-fora-a-fora {position: relative; float: left; width: 100%; padding: 70px 30px; color: #fff; background: #111;}
.galeria {position: relative; float: left; width: 100%;}
.galeria h1 {text-align: center;}
.galeria-box {position: relative; float: left; width: 280px; left: 50%; margin-left: -140px;}
.img-galeria {position: relative; float: left; width: 280px; height: 280px; margin-top: 20px; background: #333;}

/*========== PERGUNTAS FREQUENTES ==========*/
.perguntas-frequentes-fora-a-fora {position: relative; float: left; width: 100%; padding: 70px 30px; background: #fff;}
.perguntas-frequentes {position: relative; float: left; width: 100%;}
.perguntas-frequentes h1 {text-align: center;}
.pergunta {position: relative; float: left; width: 100%; border-bottom: 1px solid #cdcdcd;}
.seta {position: absolute; background: url(../img/seta.png); width: 18px; height: 9px; right: 20px; top: 20px;}
#pergunta1, #pergunta2, #pergunta3, #pergunta4, #pergunta5, #pergunta6, #pergunta7, #pergunta8, #pergunta9, #pergunta10, #pergunta11, #pergunta12 {width: 100%; padding-right: 10%; cursor: pointer; padding-top: 10px; font-size: 18px; font-weight: 500; margin-bottom: 20px;}
#resposta1, #resposta2, #resposta3, #resposta4, #resposta5, #resposta6, #resposta7, #resposta8, #resposta9, #resposta10, #resposta11, #resposta12 {display: none; margin-bottom: 20px;}

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

/*========== RODAPÉ SUPERIOR ==========*/
.rodape-superior-fora-a-fora {position: relative; float: left; width: 100%; padding: 50px 30px; background: #e2ce78;}
.rodape-superior {position: relative; float: left; width: 100%; text-align: center;}
.rodape-superior a {text-decoration: none; color: #222;}
.rodape-superior a:hover {text-decoration: underline;}
.endereco-rodape {position: relative; float: left; width: 100%; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #777;}
.telefones-rodape {position: relative; float: left; width: 100%; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #777;}
.cnpj-rodape {position: relative; float: left; width: 100%;}

/*========== RODAPÉ INFERIOR ==========*/
.rodape-inferior {position: relative; float: left; width: 100%; padding: 20px 30px; text-align: center; font-size: 14px; font-weight: 500; color: #fff; text-transform: uppercase; background: #111;}
a.link-rodape {color: #fff; text-decoration: none;}
a.link-rodape:hover {text-decoration:underline;}


/* SMALL DEVICES - TABLETS */
@media screen and (min-width: 768px) {
.topo, .descricao, .servicos, .galeria, .perguntas-frequentes, .politica-de-privacidade, .rodape-superior {width: 700px; left: 50%; margin-left: -350px;}

.titulo-banner {font-size: 38px;}
.subtitulo-banner {font-size: 22px;}

.img-descricao {float: right; width: 49%; margin-left: 1%; margin-top: 0;}
.txt-descricao {width: 50%;}

.servicos-caixa {width: 700px; margin-left: -350px;}
.servico {width: 340px; height: 170px; margin-left: 10px;}

.galeria-box {width: 700px; margin-left: -350px;}
.img-galeria {width: 330px; height: 330px; margin: 10px;}

.rodape-superior {font-size: 15px;}
.endereco-rodape {width: 223px; height: 100px; padding-bottom: 0; margin-bottom: 0; padding-right: 10px; margin-right: 10px; border-bottom: 0; border-right: 1px solid #777;}
.telefones-rodape {width: 222px; height: 100px; padding-bottom: 0; margin-bottom: 0; padding-right: 10px; margin-right: 10px; border-bottom: 0; border-right: 1px solid #777;}
.cnpj-rodape {width: 222px; height: 100px;}
}

/* MEDIUM DEVICES - TABLETS & DESKTOPS */
@media screen and (min-width: 960px) {
.topo, .descricao, .servicos, .galeria, .perguntas-frequentes, .politica-de-privacidade, .rodape-superior {width: 900px; margin-left: -450px;}

.titulo-banner {font-size: 46px;}
.subtitulo-banner {font-size: 26px;}

.img-descricao {width: 40%; margin-left: 3%;}
.txt-descricao {width: 57%;}

.servicos-caixa {width: 900px; margin-left: -450px;}
.servico {width: 430px; height: 220px; margin-left: 20px;}

.galeria-box {width: 900px; margin-left: -450px;}
.img-galeria {width: 280px; height: 280px; margin: 10px;}

.rodape-superior {width: 900px; left: 50%; margin-left: -450px;}
.endereco-rodape {width: 289px; height: 46px;}
.telefones-rodape {width: 289px; height: 46px;}
.cnpj-rodape {width: 288px; height: 46px;}
}

/* LARGE DEVICES - WIDE SCREENS */
@media screen and (min-width: 1280px) {
.descricao, .servicos, .galeria, .politica-de-privacidade {width: 1200px; margin-left: -600px;}

.titulo-banner {font-size: 54px;}
.subtitulo-banner {font-size: 28px;}

.servicos-caixa {width: 1100px; margin-left: -550px;}
.servico {width: 520px; height: 260px; margin-left: 20px;}

.galeria-box {width: 1200px; margin-left: -600px;}
}