/*==================================================
SUNSET
Desenvolvido por AsWeb
==================================================*/

/*==========================
RESET
==========================*/

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth; }
a{text-decoration: none;}
body{font-family: "Roboto", sans-serif; overflow-x: hidden;}
div{scroll-margin-top: 165px;}


@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@font-face {font-family: 'Baloo';src: url('../font/Baloo-Regular.ttf') format('truetype');font-weight: normal;font-style: normal;font-display: swap;}

#header{position: absolute; width: 100%; z-index: 999;}
.navbar-brand{padding-top: 40px;}
.menu-right{display:flex;flex-direction:column;align-items:flex-end;}
.social-top{display:flex;gap:10px;margin-bottom:10px;}
.social-top img{max-height: 24px;}
.navbar-nav{display:flex;gap:10px;}
.nav-link{color: #fff; font-size: 18px;}
.nav-link:hover{color: #fee196;}
.social-mobile{display: none;}

/* mobile */
.animated-icon1, .animated-icon2, .animated-icon3{display: inline-block; width: 56px; height: 20px; position: relative; margin: 0px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer;}
.animated-icon1 span, .animated-icon2 span, .animated-icon3 span { display: inline-block; position: absolute; height: 5px; width: 100%; opacity: 1; left: 0;-webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
.animated-icon1 span { background: #e65100;}
.animated-icon2 span {background: #fff;border: rgba(255, 255, 255, 0); border-radius: 15px;}
.navbar-toggler{border: rgba(255, 255, 255, 0); position: relative; z-index: 9999;}
.navbar-toggler:focus{box-shadow:none;}
.animated-icon3 span { background: #0084c2;}
.animated-icon1 span:nth-child(1) {top: 0px;}
.animated-icon1 span:nth-child(2) {top: 10px;}.animated-icon1 span:nth-child(3) {top: 20px;}
.animated-icon1.open span:nth-child(1) {top: 11px; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg);}
.animated-icon1.open span:nth-child(2) { opacity: 0; left: -60px;}
.animated-icon1.open span:nth-child(3) {top: 11px; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg);}
.animated-icon2 span:nth-child(1) {top: 0px;}
.animated-icon2 span:nth-child(2), .animated-icon2 span:nth-child(3) {top: 10px;}
.animated-icon2 span:nth-child(4) {top: 20px;}
.animated-icon2.open span:nth-child(1) { top: 11px; width: 0%; left: 50%;}
.animated-icon2.open span:nth-child(2) {-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg); transform: rotate(45deg);}
.animated-icon2.open span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);}
.animated-icon2.open span:nth-child(4) {top: 11px;width: 0%;left: 50%;}
.animated-icon3 span:nth-child(1) { top: 0px;-webkit-transform-origin: left center;-moz-transform-origin: left center;-o-transform-origin: left center;transform-origin: left center;}
.animated-icon3 span:nth-child(2) { top: 10px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center;}
.animated-icon3 span:nth-child(3) { top: 20px; -webkit-transform-origin: left center; -moz-transform-origin: left center;-o-transform-origin: left center;transform-origin: left center;}
.animated-icon3.open span:nth-child(1) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: 0px; left: 8px;}
.animated-icon3.open span:nth-child(2) {  width: 0%;  opacity: 0;}
.animated-icon3.open span:nth-child(3) {-webkit-transform: rotate(-45deg);  -moz-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);top: 21px;left: 8px;}


#hero{ position:relative;width:100%;height:100vh;overflow:hidden;}
.heroSlider{position:absolute;inset:0;width:100%;height:100%;z-index:1;}
.heroSlider .swiper-wrapper{width:100%;height:100%;}
.heroSlider .swiper-slide{width:100%;height:100%;}
.heroSlider .swiper-slide img{width:100%;height:100%;object-fit:cover;}
@keyframes heroZoomOut{
    from{transform:scale(1.25);}
    to{ transform:scale(1);}
}
.hero-content-layer{position:absolute;inset:0;z-index:20;display:flex;align-items:center;}
#hero .container{position:relative;z-index:10;height:100%;}
.hero-content{max-width:620px; padding-top: 200px;}
.hero-title{font-family: 'Baloo'; font-size:120px;line-height:.92;color:#ffe297;font-weight:800;margin-bottom:10px;text-transform:uppercase;}
.hero-text{color:#fff;font-size:18px;line-height:1.8;margin-bottom:85px; font-weight: 300;}
.hero-buttons{display:flex;align-items:center;gap:25px;}
.hero-buttons .btn{display: flex;gap: 10px;  background:#ff8533; background-image: url("../img/camada-fundo1.png"); background-size: cover; align-items: center;padding:15px 20px;border-radius:50px;border:none;font-weight:700;text-transform:uppercase;letter-spacing:1px;transition:.35s; font-family: 'Baloo'; color: #000;}
.hero-buttons .btn img{max-height: 24px;}
.hero-buttons .btn:hover{background:#ff8533;transform:translateY(-3px);}


#sunset-park{background-image: url("../img/camada-fundo.jpg");background-repeat: no-repeat;background-position-x:right ;position:relative; padding: 20px 0;}
.content-park{position:relative;min-height:320px;}
.texto-park{padding-top: 30px;}
.texto-park h2{font-family: 'Baloo'; font-size: 40px; color: #ee4123; text-transform: uppercase;}
.imagem-park{position:absolute;right:0;top:-100px;z-index:10;}
.imagem-park img{width:100%;display:block;}

.referencia{position: relative; background-image: url("../img/camada-fundo1.png"); background-repeat: no-repeat; background-size: cover;}
.referencia .row{align-items: center;}
.title-7{font-family: 'Baloo'; text-transform: uppercase; font-size: 50px; color: #fff; padding-bottom: 40px;}

.big{color: #fff; font-size: 18px;}
.video-link{position:absolute;top:50%;left:50%;transform:translate(-40%, -50%);
width:120px;height:120px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;z-index:2;transition:.3s ease;}
/* círculo externo animado */
.video-link:before{content:"";position:absolute;width:100%;height:100%;border-radius:50%;background:rgba(255,255,255,.35);z-index:-1;animation:pulse-video 2s infinite;}
/* segundo círculo */
.video-link:after{content:"";position:absolute;width:130%;height:130%;border-radius:50%;border:1px solid rgba(255,255,255,.5);animation:pulse-video 2s infinite;}
.video-link:hover{transform:translate(-40%, -50%) scale(1.1);}
/* animação */
@keyframes pulse-video{
    0%{transform:scale(.8);opacity:.8;}
    100%{transform:scale(1.5);opacity:0;}
}

.video-link .icon{ font-size:35px;color:#333;margin-left:10px;transition:.3s;}
.video-link:hover .icon{transform:scale(1.1); }
.video-loading{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);z-index:5;}
.video-loading .spinner-border{width:50px;height:50px;}

#estrutura{background-color: #fafafa; padding: 20px 0;}
.aviso{padding: 20px 0;}
.cards img{margin: 10px 0;}
.cards h3{font-size: 30px; font-family: 'Baloo'; color: #636363; max-width: 180px; text-transform: uppercase;}
.cards p{font-size: 18px; max-width: 250px;}

#valores{background-image: url("../img/camada-fundo3.jpg");background-repeat: no-repeat;background-position-x:left -120px;  padding: 30px 0;}
#valores h2{font-family: 'Baloo'; font-size: 40px; color: #ee4123; text-transform: uppercase;}
#valores h3{font-family: 'Baloo'; color: #636363; text-transform: uppercase; margin: 0; padding-bottom: 30px;}
.card-valores p{color: #636363; font-size: 18px; margin-bottom: 8px;}
.card-planos p{color: #636363; font-size: 18px; padding: 0; margin-bottom: 5px;}
.card-planos .group-box{margin-bottom: 0;}
.group-box{display: flex; align-content: center;  margin-bottom: 10px;}
.lago{flex-direction: column; padding-bottom: 20px; margin-right: 50px;}
.box-time{display: flex; align-items: center; justify-content: center; gap: 8px; background-color: #ee4123; border-radius: 8px; color: #fff; text-align: center; padding: 5px; font-size: 18px;}
.box-time img{height: 18px; }
.box-valores{display: flex; align-items: center; justify-content: center; gap: 8px; background-color: #e4e4e4; border-radius: 8px; color: #636363; text-align: center; padding: 5px; font-size: 18px;}
.box-one{background-color: #e4e4e4; border-radius: 8px; margin-right: 80px;}
.box-01{width: 100%;}
.box-02{width: 130px;}

#aluguel{background-color: #fafafa; padding: 50px 0;}
#aluguel .container{position: relative}
#aluguel h3{font-family: 'Baloo'; color: #636363; text-transform: uppercase; font-size: 30px;}
.imagem-pracha img{position: absolute; left: 0; top: -70px;}

#lanche {display: flex;align-items: center;background-image: url("../img/fundo-parallax-2.jpg");background-repeat: no-repeat;background-position: top center;background-size: cover;margin-bottom: -30px;}
#lanche .container {position: relative;display: flex;align-items: center;}
.texto-lanche { position: relative;z-index: 2;width: 65%; padding: 50px 0 90px;}
.texto-lanche h2 {font-family: 'Baloo';font-size: 60px;text-transform: uppercase;color: #fff;line-height: 1;margin-bottom: 40px;}
.texto-lanche h2 span {color: #fee196;}
.lachonete {position: absolute;right: 0;top: 35%;width: 35%;z-index: 1;margin-top: -180px;}
.lachonete img {width: 100%;height: auto;display: block;}

.evento{position: relative; background-image: url("../img/camada-fundo1.png"); background-repeat: no-repeat; background-size: cover;}
.evento .row{align-items: center;}
.title-8{font-family: 'Baloo'; text-transform: uppercase; font-size: 50px; color: #fff; padding-bottom: 20px;}
.big-2{color: #fff; font-size: 18px; padding-bottom: 40px;}






#fotos {background-color: #fafafa; padding: 30px 0;}
#fotos h2{font-family: 'Baloo'; font-size: 40px; color: #ee4123; text-transform: uppercase;}

#videos { background-image: url("../img/camada-fundo4.jpg");background-position-x: right -295px;background-repeat: no-repeat;background-size: contain;padding: 30px 0;}
#videos h2{font-family: 'Baloo'; font-size: 40px; color: #ee4123; text-transform: uppercase; padding-bottom: 20px;}

#localizacao iframe{width: 100%; height: 450px; margin-bottom: -7px;}
.info{background-color: #ee4123; padding: 30px 0;}
.informacao{display: flex; align-items: center; gap: 30px;}
.texto-info{color: #fff;}
.texto-info p{margin: 0;}
.texto-info p:first-of-type{padding-bottom: 15px;}


#contato{padding: 30px 0; background-image: url("../img/camada-fundo3.jpg"); background-repeat: no-repeat; background-position-x: left -150px;}
.linha-contato .col-lg-2{max-width: 20%; flex: 0 0  20%;}
.menu-rodape {margin: 0;padding: 0;list-style: none;}
.menu-rodape li {position: relative;padding-left: 15px;}
.menu-rodape li::before {content: "";width: 8px;height: 12px;background: #f45a1e;position: absolute;left: 0;top: 4px;}
.menu-rodape a {color: #555;text-decoration: none;}
.padding-footer{padding-bottom: 75px;}
.info-footer .icone img{color: #f45a1e;width: 24px;margin-bottom: 5px;}
.info-footer h4 {font-size: 15px;color: #f45a1e;margin-bottom: 10px;font-weight: 500;}
.info-footer p {margin: 0;line-height: 1.6; font-weight: 00;}
.logo-footer {max-width: 250px; }
.copyright {background: #2b2b2a;color: #fff;padding: 20px 0;font-size: 12px;}
.copyright strong { font-size: 28px; font-weight: 700;}
.logo-as img{width: 60px;}



/* Mobille */

@media(max-width:1440px){
    #sunset-park{background-position-x:right -150px;}
    .imagem-park{right: -150px;}
    .texto-park{width: 650px;}
    .hero-title {font-size: 95px;}
    .hero-text{margin-bottom: 55px;}
    .referencia{padding: 30px 0;}


 
}

@media(max-width:1400px){

    .video-1 .video-figure {position: relative;overflow: hidden;width: 100%;height: 100%;}
    .video-1 .video-image {left: 0;top: 0;width: 100%;height: 100%;transform: none;object-fit: cover;object-position: center center;}
    .imagem-park {right: -175px;top: -65px;width: 55%;}
    .imagem-park img{width:100%;height:auto;}
    #valores{background-image: none;}
    #videos{background-image: none;}

}

@media(max-width:1200px){
    .lachonete {position: relative;right: 0;top: 0;width: auto; margin-top: 0;}
    .texto-park {width: 560px;}

}




@media(max-width:991px){
     #sunset-park{background-image: none;}
    .imagem-park{position:initial; width: 100%;}
    .texto-park{width: 100%;}
    .navbar-nav {display: flex;padding: 0 20px;gap: 0;width: 155px;background-image: url("../img/camada-fundo1.png");border-radius: 20px;}
    .menu-right .social-top{display:none;}
    .navbar{position:relative;}
    .social-mobile{display:flex;align-items:center;gap:10px;margin-left:auto;margin-right:15px;}
    .social-mobile img{width:30px;height:24px;display:block;}
    .navbar-toggler{padding:0; margin:0;}
    .navbar-brand{margin-right:auto;}
    .navbar-brand{padding-top: 20px;}
    .navbar-brand img{width: 80px;}
    #hero{text-align: center; padding:180px 0 100px;}
    .hero-content{max-width: 100%; padding-top: 60px;}
    .hero-title{ font-size:120px;}
    .hero-image{margin-top:60px;text-align:center;}
    .hero-image img{width:100%;max-width:520px;}
    .hero-buttons{flex-direction:column;align-items:flex-start;}
    .referencia{padding: 70px 0;background-size: cover;background-position: center;}
    .referencia .row{display: flex; flex-direction: column;}
    .referencia .col-md-6.col-lg-5{width: 100%;max-width: 100%;text-align: center;margin-bottom: 50px;}
    .title-7{ font-size: 34px; line-height: 1.2; padding-bottom: 20px;}
    .big{font-size: 16px;line-height: 1.8;}
    .referencia .video{ position: relative;width: 100%;}
    .referencia .video-figure{position: relative;}
    .referencia .video-image{width: 100%; height: auto; display: block; border-radius: 8px;}
    .video-link{ top: 50%; left: 50%; transform: translate(-50%, -50%);width: 90px;height: 90px;}
    .video-link:hover{transform: translate(-50%, -50%) scale(1.08);}
    .video-link .icon{width: 30px;height: auto;margin-left: 6px;}
    #estrutura{text-align: center;}
    .cards{padding: 20px 0;}
    .cards h3{max-width: 100%;}
    .cards p{max-width: 100%;}
    #valores{text-align: center; background-image: none;}
    .lago{margin: 0 auto;}
    .group-box{margin: 5px auto;}
    #aluguel{text-align: center;}
    .imagem-pracha img{position: relative; top: 0; padding-bottom: 30px; width: 100px;}
    #lanche{padding: 70px 0 40px;text-align: center;}
    #lanche .container{display: flex;flex-direction: column;align-items: center;}
    .texto-lanche{width: 100%;order: 1;  padding: 0;}
    .texto-lanche h2{ max-width: 100%; font-size: 36px; line-height: 1.2; margin-bottom: 25px;}
    .hero-buttons{ align-items: center;}
    .lachonete{position: relative; top: 0; width: 50%;margin-top: 40px;order: 2;display: flex;justify-content: center;}
    .lachonete img{position: static;width: 100%;max-width: 420px;height: auto;}
    .evento{text-align: center; padding: 30px 0;}
    .wakepark-figure{padding-top: 30px;}
    .wakepark-imagem-evento{width: 100%;}
    #fotos{text-align: center;}
    #fotos h2{padding-bottom: 20px;}
    #mixedSlider{margin: 20px 0;}
    .linha-contato .col-lg-2{max-width: 100%; flex: 0 0  100%; }
    .menu-rodape{display: flex;flex-direction: column; max-width: 100px; margin-left: auto; margin-right: auto; padding-left: 15px; margin-bottom: 30px;}
    .menu-rodape li{padding-left: 18px;margin-bottom: 12px;}
    .menu-rodape li::before{left: 0;top: 50%;transform: translateY(-50%);}
    .info-footer{text-align: center;}
    .logo-footer{padding: 0;}
    .copyright{text-align: center;}



}

@media(max-width:768px){

.hero-title{ font-size:80px;}



}