@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: Roboto; 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 ==========*/
.acima-topo-fora-a-fora {position: fixed; width: 100%; height: 40px; background-color: #35569f; z-index: 9999;}
.acima-topo {position: relative; float: left; width: 90%; margin-left: 5%; text-align: right; font-size: 13px; line-height: 40px; font-family: Roboto; color: #fff;}
.topo-fora-a-fora {position: fixed; width: 100%; height: 90px; margin-top: 40px; background-color: #ecbc28; z-index: 9999;}
.topo {position: relative; float: left; width: 90%; margin-left: 5%;}
.logo img {position: absolute; width: 200px; height: 104px; margin-top: -25px;}
.botao-whatsapp {position: relative; float: right; width: 120px; margin-top: 19px; padding: 15px 10px; border-radius: 10px; font-size: 15px; font-weight: 500; text-align: center; color: #fff; background: #25d366; 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: 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: 20px; text-align: center; font-size: 30px; font-weight: 800; color: #ecbc28; text-shadow: 1px 1px 1px rgba(0,0,0,.5);}
.subtitulo-banner {position: relative; float: left; width: 100%; margin-bottom: 20px; text-align: center; font-size: 18px; font-weight: 500; color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,.5);}
.botoes-banner {position: relative; float: left; width: 330px; left: 50%; margin-left: -165px; margin-top: 19px;}
.botao-banner-1 {position: relative; float: left; width: 155px; padding: 15px 10px; border-radius: 10px; font-size: 15px; font-weight: 500; text-align: center; color: #fff; background: #0058a4; transition: 0.2s ease-out;}
.botao-banner-1:hover {background: #004887; transform: scale(1.04);}
.botao-banner-2 {position: relative; float: right; width: 170px; padding: 15px 10px; border-radius: 10px; font-size: 15px; font-weight: 500; text-align: center; color: #0058a4; background: #f9be00; transition: 0.2s ease-out;}
.botao-banner-2:hover {background: #d6a300; transform: scale(1.04);}

/*========== BENEFICIOS ==========*/
.beneficios-fora-a-fora {position: relative; float: left; width: 100%; padding: 70px 30px; background: #fff;}
.beneficios {position: relative; float: left; width: 300px; left: 50%; margin-left: -150px;}
.beneficio {position: relative; float: left; width: 100%; margin-top: 20px; border-radius: 30px; background-color: #ffbe00; transition: 0.3s ease-out;}
.beneficio:hover {box-shadow: 0px 20px 40px rgba(0, 0, 0, .4);}
.beneficio-img {position: relative; float: left; width: 100%; text-align: center;}
.beneficio-img img {position: relative; float: left; width: 40%; margin-left: 30%; padding: 20px 0;}
.beneficio-txt {position: relative; float: left; width: 100%; border-radius: 0 0 30px 30px; padding: 12px; font-size: 17px; font-weight: 600; text-align: center; color: #fff; background-color: #005fcb;}
.color {color: #ffc100;}

/*========== OFERTAS ==========*/
.ofertas-fora-a-fora {position: relative; float: left; width: 100%; padding: 0 30px 70px 30px; background: #fff;}
.ofertas {position: relative; float: left; width: 100%; padding-top: 70px; padding-bottom: 70px; border-top: 1px solid #cdcdcd; border-bottom: 1px solid #cdcdcd; text-align: center;}
.ofertas h1 {text-align: center;}
.ofertas-caixa {position: relative; float: left; width: 300px; left: 50%; margin-left: -150px; margin-top: 30px;}
.oferta-img {position: relative; float: left; width: 100%; margin-top: 10px;}

/*========== LOCALIZACAO ==========*/
.localizacao {position: relative; float: left; width: 330px; left: 50%; margin-left: -165px; padding-bottom: 70px; background: #fff;}
.localizacao h1 {text-align: center; margin-bottom: 20px;}
.mapa {position: relative; float: left; width: 100%; height: 300px;}
.infos {position: relative; float: left; width: 100%; margin-top: 30px;}
.botao-como-chegar {position: relative; float: left; width: 155px; padding: 15px 10px; border-radius: 10px; font-size: 15px; font-weight: 500; text-align: center; color: #fff; background: #0058a4; transition: 0.2s ease-out;}
.botao-como-chegar:hover {background: #004887; transform: scale(1.04);}

/*========== CONTATO RÁPIDO ==========*/
.contato-rapido {position: relative; float: left; width: 100%; padding: 150px 30px; text-align: center; background: url(../img/cta.jpg); background-size: cover; background-position: center;}
.contato-rapido h1 {color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,.5);}
.botao-contato-rapido {position: relative; float: left; width: 300px; left: 50%; margin-left: -150px; margin-top: 30px; padding: 15px 10px; border-radius: 10px; font-size: 15px; font-weight: 500; text-align: center; color: #004887; background: #f9be00; transition: 0.2s ease-out;}
.botao-contato-rapido:hover {background: #d6a300; 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: #fff;}
.politica-de-privacidade {position: relative; float: left; width: 100%;}
.politica-de-privacidade h1 {text-align: center;}

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

/* SMALL DEVICES - TABLETS */
@media screen and (min-width: 768px) {
.topo, .acima-topo, .beneficios, .ofertas, .ofertas-caixa, .localizacao, .politica-de-privacidade {width: 700px; left: 50%; margin-left: -350px;}

.logo img {width: 250px; height: 131px; margin-top: -40px;}
.botao-whatsapp {width: 180px; font-size: 17px;}
.banner {width: 700px; left: 50%; margin-left: -350px;}
.titulo-banner {font-size: 38px;}
.subtitulo-banner {font-size: 22px;}
.botoes-banner {width: 420px; margin-left: -210px;}
.botao-banner-1, .botao-banner-2 {width: 200px; padding: 20px 10px; font-size: 17px;}

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

.oferta-img {width: 335px; margin-left: 10px; margin-top: 10px;}

.infos {text-align: center;}
.botao-como-chegar {left: 50%; margin-left: -78px;}

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

/* MEDIUM DEVICES - TABLETS & DESKTOPS */
@media screen and (min-width: 960px) {
body {font-size: 17px; line-height: 24px;}
.topo, .acima-topo, .ofertas, .ofertas-caixa, .localizacao, .politica-de-privacidade {width: 900px; margin-left: -450px;}

.titulo-banner {font-size: 46px; line-height: 52px;}
.subtitulo-banner {font-size: 26px; line-height: 32px;}

.oferta-img {width: 287px;}

.mapa {width: 450px; height: 320px;}
.infos {width: 400px; float: right; text-align: left; margin-top: 40px;}
.botao-como-chegar {left: 0; margin-left: 0;}

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

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

.banner {width: 900px; margin-left: -450px;}
.titulo-banner {font-size: 54px; line-height: 60px;}
.subtitulo-banner {font-size: 28px; line-height: 36px;}

.oferta-img {width: 385px;}
}