/* =========================================================
   HERO.CSS
   HAZLO FACIL TRAVEL
========================================================= */
/* =========================================================
   HERO SECTION
========================================================= */
.hero-section{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:
        140px 0
        100px;
    overflow:hidden;
    z-index:20;
}
/* =========================================================
   HERO CONTAINER FIX
========================================================= */
.hero-section .container{
    position:relative;
    z-index:30;
}
/* =========================================================
   HERO CONTENT FIX
========================================================= */
.hero-content{
    position:relative;
    z-index:40;
}
/* =========================================================
   LOGO CONTAINER
========================================================= */
.logo-container{
    position:relative;
    z-index:40;
    margin-bottom:45px;
}
/* =========================================================
   MAIN LOGO
========================================================= */
.main-logo{
    position:relative;
    width:100%;
    max-width:320px;
    margin:auto;
    display:block;
    z-index:30;
    opacity:.98;
    filter:
        brightness(1.08)
        contrast(1.08)
        saturate(1.05)
        drop-shadow(
            0 0 8px rgba(255,255,255,.08)
        )
        drop-shadow(
            0 0 18px rgba(90,168,255,.12)
        )
        drop-shadow(
            0 10px 35px rgba(0,0,0,.45)
        );
    transition:
        transform .5s ease,
        filter .5s ease;
    animation:
        floating 6s ease-in-out infinite;
}
/* =========================================================
   LOGO HOVER
========================================================= */
/* =========================================================
   MAIN LOGO
========================================================= */
.main-logo{
    position:relative;
    width:100%;
    max-width:320px;
    margin:auto;
    display:block;
    z-index:30;
    opacity:1;
    filter:
        brightness(1.12)
        contrast(1.08)
        saturate(1.05)
        drop-shadow(
            0 0 2px rgba(255,255,255,.20)
        )
        drop-shadow(
            0 0 6px rgba(255,255,255,.12)
        )
        drop-shadow(
            0 0 12px rgba(90,168,255,.16)
        )
        drop-shadow(
            0 0 22px rgba(90,168,255,.10)
        )
        drop-shadow(
            0 0 45px rgba(90,168,255,.08)
        );
    transition:
        transform .4s ease,
        filter .4s ease;
    animation:
        floating 6s ease-in-out infinite;
}
/* =========================================================
   LOGO HOVER
========================================================= */
.main-logo:hover{
    transform:
        scale(1.015);
    filter:
        brightness(1.16)
        contrast(1.12)
        saturate(1.08)
        drop-shadow(
            0 0 3px rgba(255,255,255,.28)
        )
        drop-shadow(
            0 0 8px rgba(255,255,255,.18)
        )
        drop-shadow(
            0 0 18px rgba(90,168,255,.22)
        )
        drop-shadow(
            0 0 35px rgba(90,168,255,.14)
        )
        drop-shadow(
            0 0 60px rgba(90,168,255,.10)
        );
}
/* =========================================================
   HERO TITLE
========================================================= */
.hero-content h1{
    font-family:
        var(--font-primary);
    font-size:
        clamp(
            3rem,
            7vw,
            6rem
        );
    font-weight:
        var(--fw-black);
    line-height:1.05;
    margin-bottom:30px;
    letter-spacing:-2px;
    color:#fff;
    text-shadow:
        0 0 20px rgba(0,0,0,.35);
}
/* =========================================================
   HERO TITLE SPAN
========================================================= */
.hero-content h1 span{
    color:
        var(--accent);
    text-shadow:
        0 0 25px rgba(90,168,255,.85);
}
/* =========================================================
   HERO DESCRIPTION
========================================================= */
.hero-description{
    max-width:900px;
    margin:
        0 auto
        10px;
    font-size:
        clamp(
            1rem,
            2vw,
            1.35rem
        );
    line-height:1.9;
    color:
        rgba(255,255,255,.88);
    text-shadow:
        0 2px 10px rgba(0,0,0,.35);
}
/* =========================================================
   HERO BADGES
========================================================= */
.hero-badges{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:15px;
    margin-top:45px;
    position:relative;
    z-index:40;
}
/* =========================================================
   BADGE ITEM
========================================================= */
.badge-item{
    display:flex;
    align-items:center;
    gap:10px;
    padding:
        14px 24px;
    border-radius:
        100px;
    background:
        rgba(255,255,255,.08);
    border:
        1px solid rgba(255,255,255,.10);
    backdrop-filter:
        blur(14px);
    color:#fff;
    font-size:.95rem;
    font-weight:600;
    transition:
        all .35s ease;
}
.badge-item:hover{
    transform:
        translateY(-4px);
    background:
        rgba(255,255,255,.14);
    box-shadow:
        0 0 25px rgba(90,168,255,.22);
}
.badge-item i{
    color:
        var(--accent);
}
/* =========================================================
   HERO SUBTITLE
========================================================= */
.hero-subtitle{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-bottom:25px;
    padding:
        10px 22px;
    border-radius:
        100px;
    background:
        rgba(255,255,255,.08);
    border:
        1px solid rgba(255,255,255,.08);
    backdrop-filter:
        blur(16px);
    font-size:.95rem;
    letter-spacing:1px;
    text-transform:uppercase;
    color:
        rgba(255,255,255,.85);
}
.hero-subtitle i{
    color:
        var(--accent);
}
/* =========================================================
   HERO CTA
========================================================= */
.hero-cta{
    margin-top:45px;
    position:relative;
    z-index:40;
}
/* =========================================================
   HERO LIGHT FX
========================================================= */
.hero-section::before{
    content:'';
    position:absolute;
    top:-20%;
    left:-10%;
    width:600px;
    height:600px;
    background:
        radial-gradient(
            circle,
            rgba(90,168,255,.18),
            transparent 70%
        );
    filter:
        blur(80px);
    z-index:1;
    animation:
        floating 10s ease-in-out infinite;
}
.hero-section::after{
    content:'';
    position:absolute;
    bottom:-20%;
    right:-10%;
    width:500px;
    height:500px;
    background:
        radial-gradient(
            circle,
            rgba(255,47,91,.15),
            transparent 70%
        );
    filter:
        blur(80px);
    z-index:1;
    animation:
        floating 12s ease-in-out infinite;
}
/* =========================================================
   HERO GRID
========================================================= */
.hero-grid{
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(
            rgba(255,255,255,.02) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.02) 1px,
            transparent 1px
        );
    background-size:
        60px 60px;
    opacity:.4;
    z-index:1;
}
/* =========================================================
   AIRPLANE TRAIL
========================================================= */
.airplane-trail{
    position:absolute;
    top:20%;
    right:10%;
    width:180px;
    height:2px;
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0),
            rgba(255,255,255,.8),
            rgba(255,255,255,0)
        );
    animation:
        airplaneTrail 3s infinite;
    z-index:2;
}
/* =========================================================
   HERO LIGHTS
========================================================= */
.hero-light{
    position:absolute;
    border-radius:50%;
    filter:
        blur(120px);
    opacity:.25;
    z-index:1;
}
.hero-light.one{
    top:10%;
    left:5%;
    width:300px;
    height:300px;
    background:
        rgba(90,168,255,.35);
}
.hero-light.two{
    bottom:5%;
    right:10%;
    width:400px;
    height:400px;
    background:
        rgba(255,47,91,.25);
}
/* =========================================================
   COUNTDOWN WRAPPER FIX
========================================================= */
.countdown-wrapper{
    position:relative;
    z-index:40;
}
/* =========================================================
   SUBSCRIPTION CARD FIX
========================================================= */
.subscription-card{
    position:relative;
    z-index:40;
}
/* =========================================================
   SCROLL INDICATOR
========================================================= */
.scroll-indicator{
    position:absolute;
    bottom:40px;
    left:50%;
    transform:
        translateX(-50%);
    z-index:50;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    color:
        rgba(255,255,255,.65);
    animation:
        floating 3s ease-in-out infinite;
}
.scroll-indicator span{
    font-size:.8rem;
    letter-spacing:2px;
    text-transform:uppercase;
}
.scroll-indicator .mouse{
    width:34px;
    height:56px;
    border-radius:30px;
    border:
        2px solid rgba(255,255,255,.35);
    position:relative;
}
.scroll-indicator .mouse::before{
    content:'';
    position:absolute;
    top:10px;
    left:50%;
    transform:
        translateX(-50%);
    width:6px;
    height:12px;
    border-radius:10px;
    background:
        rgba(255,255,255,.8);
    animation:
        blinkDot 1.5s infinite;
}
/* =========================================================
   RESPONSIVE
========================================================= */
@media(max-width:991px){
    .hero-content h1{
        letter-spacing:-1px;
    }
    .hero-description{
        font-size:1.1rem;
    }
}
@media(max-width:768px){
    .hero-section{
        padding-top:160px;
    }
    .main-logo{
        max-width:320px;
    }
    .hero-description{
        font-size:1rem;
        line-height:1.8;
    }
    .hero-subtitle{
        font-size:.8rem;
        padding:
            10px 18px;
    }
    .scroll-indicator{
        display:none;
    }
}
@media(max-width:576px){
    .hero-content h1{
        font-size:2.5rem;
    }
    .hero-description{
        font-size:.95rem;
    }
}