/* =========================================================
   HAZLO FACIL TRAVEL
   PREMIUM CINEMATIC LANDING PAGE
   style.css
========================================================= */

:root {

    --primary: #082B5B;
    --secondary: #C62828;
    --accent: #5AA8FF;
    --white: #ffffff;
    --light: rgba(255,255,255,.82);
    --glass: rgba(255,255,255,.08);
    --glass-border: rgba(255,255,255,.12);

    --shadow:
        0 10px 40px rgba(0,0,0,.35);

    --blur: blur(20px);

    --gradient-primary:
        linear-gradient(
            135deg,
            #0C63FF,
            #FF2F5B
        );

    --gradient-blue:
        linear-gradient(
            135deg,
            #1148FF,
            #0F91FF
        );

    --gradient-red:
        linear-gradient(
            135deg,
            #FF1B1B,
            #FF6262
        );

    --gradient-purple:
        linear-gradient(
            135deg,
            #5C17FF,
            #0FA7FF
        );

}

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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Outfit',sans-serif;
    background:#020814;
    color:#fff;
    overflow-x:hidden;
    position:relative;

}

/* =========================================================
   VIDEO BACKGROUND
========================================================= */

#heroVideo{

    position:fixed;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

     z-index:-5;

}

/* =========================================================
   DARK OVERLAY
========================================================= */

.overlay{

    position:fixed;
    inset:0;

    background:
        linear-gradient(
            135deg,
            rgba(1,10,25,.94),
            rgba(3,15,40,.88)
        );

    z-index:0;

}

/* =========================================================
   PARTICLES
========================================================= */

#particles-js{

    position:fixed;
    inset:0;

    z-index:-1;

}

/* =========================================================
   TOPBAR
========================================================= */

.topbar{

    position:fixed;
    top:0;
    left:0;

    width:100%;

    z-index:9999;

    padding:15px 0;

    background:rgba(255,255,255,.04);

    backdrop-filter:blur(16px);

    border-bottom:
        1px solid rgba(255,255,255,.08);

}

.topbar span{

    font-size:13px;

    letter-spacing:2px;

    text-transform:uppercase;

    color:#fff;

}

/* =========================================================
   HERO SECTION
========================================================= */

.hero-section{

    min-height:100vh;

    display:flex;
    align-items:center;

    padding:
        140px 0
        80px;

    position:relative;

}
.hero-section,
.services-section,
.quote-section,
.stats-section,
footer,
.topbar{

    position:relative;
    z-index:5;

}
/* =========================================================
   HERO FIX
========================================================= */

.hero-section .container{

    position:relative;
    z-index:20;

}

.hero-content{

    position:relative;
    z-index:30;

}

.logo-container{

    position:relative;
    z-index:30;

}

.countdown-wrapper{

    position:relative;
    z-index:30;

}

.subscription-card{

    position:relative;
    z-index:30;

}
.logo-container{

    margin-bottom:45px;

}

/* =========================================================
   FLOATING ANIMATION
========================================================= */

@keyframes floating{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-14px);
    }

    100%{
        transform:translateY(0);
    }

}

/* =========================================================
   HERO CONTENT
========================================================= */

.hero-content h1{

    font-family:'Montserrat',sans-serif;

    font-weight:900;

    font-size:
        clamp(
            2.8rem,
            7vw,
            6rem
        );

    line-height:1.05;

    margin-bottom:28px;

}

.hero-content h1 span{

    color:var(--accent);

    text-shadow:
        0 0 25px rgba(90,168,255,.9);

}

.hero-description{

    max-width:860px;

    margin:auto;

    font-size:1.3rem;

    line-height:1.9;

    color:var(--light);

}

/* =========================================================
   BADGES
========================================================= */

.hero-badges{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:15px;

    margin-top:45px;

}

.badge-item{

    padding:
        15px 25px;

    border-radius:60px;

    background:var(--glass);

    border:
        1px solid var(--glass-border);

    backdrop-filter:var(--blur);

    font-weight:600;

    transition:.4s ease;

}

.badge-item:hover{

    transform:
        translateY(-5px);

    background:
        rgba(255,255,255,.12);

}

/* =========================================================
   COUNTDOWN
========================================================= */

.countdown-wrapper{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:22px;

    margin-top:65px;

}

.count-box{

    width:165px;
    height:165px;

    border-radius:30px;

    background:var(--glass);

    border:
        1px solid var(--glass-border);

    backdrop-filter:blur(22px);

    box-shadow:var(--shadow);

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    position:relative;

    overflow:hidden;

}

.count-box::before{

    content:'';

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.08),
            transparent
        );

}

.count-box span{

    font-family:'Montserrat',sans-serif;

    font-size:4rem;

    font-weight:900;

    line-height:1;

}

.count-box small{

    margin-top:12px;

    letter-spacing:2px;

    text-transform:uppercase;

    font-size:1rem;

    opacity:.8;

}

/* =========================================================
   SUBSCRIPTION CARD
========================================================= */

.subscription-card{

    max-width:960px;

    margin:
        75px auto 0;

    padding:55px;

    border-radius:35px;

    background:
        rgba(255,255,255,.08);

    border:
        1px solid rgba(255,255,255,.12);

    backdrop-filter:blur(24px);

    box-shadow:var(--shadow);

}

.subscription-card h3{

    font-size:2rem;

    font-weight:800;

    margin-bottom:35px;

    line-height:1.4;

}

/* =========================================================
   INPUTS
========================================================= */

.custom-input{

    height:68px;

    border:none;

    border-radius:18px;

    background:
        rgba(255,255,255,.12);

    color:#fff;

    padding-left:22px;

    font-size:1rem;

    transition:.3s ease;

}

.custom-input::placeholder{

    color:
        rgba(255,255,255,.62);

}

.custom-input:focus{

    background:
        rgba(255,255,255,.16);

    color:#fff;

    box-shadow:
        0 0 25px rgba(90,168,255,.45);

}

/* =========================================================
   BUTTON
========================================================= */

.custom-btn{

    height:70px;

    border:none;

    border-radius:18px;

    background:
        var(--gradient-primary);

    color:#fff;

    font-weight:800;

    letter-spacing:2px;

    transition:.4s ease;

    overflow:hidden;

    position:relative;

}

.custom-btn::before{

    content:'';

    position:absolute;

    top:0;
    left:-100%;

    width:100%;
    height:100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.35),
            transparent
        );

    transition:.7s;

}

.custom-btn:hover::before{

    left:100%;

}

.custom-btn:hover{

    transform:
        translateY(-4px);

    box-shadow:
        0 18px 35px rgba(12,99,255,.45);

}

/* =========================================================
   SECTIONS
========================================================= */

.services-section,
.quote-section,
.stats-section{

    position:relative;

    padding:120px 0;

}

/* =========================================================
   TITLES
========================================================= */

.section-title{

    text-align:center;

    margin-bottom:75px;

}

.section-title h2{

    font-size:3rem;

    font-weight:900;

    margin-bottom:20px;

}

.section-title p{

    font-size:1.2rem;

    opacity:.82;

}

/* =========================================================
   SERVICE CARDS
========================================================= */

.service-card{

    height:100%;

    padding:42px;

    border-radius:30px;

    background:
        rgba(255,255,255,.06);

    border:
        1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    transition:.4s ease;

}

.service-card:hover{

    transform:
        translateY(-10px);

    box-shadow:
        0 20px 45px rgba(0,0,0,.3);

}

.icon-box{

    width:95px;
    height:95px;

    border-radius:24px;

    display:flex;

    justify-content:center;
    align-items:center;

    font-size:2rem;

    margin-bottom:30px;

}

.usa{
    background:var(--gradient-blue);
}

.canada{
    background:var(--gradient-red);
}

.travel{
    background:var(--gradient-purple);
}

.service-card h3{

    font-size:1.7rem;

    font-weight:800;

    margin-bottom:28px;

}

.service-card ul{

    list-style:none;

    padding:0;

}

.service-card ul li{

    position:relative;

    padding-left:30px;

    margin-bottom:16px;

    color:
        rgba(255,255,255,.82);

    line-height:1.7;

}

.service-card ul li::before{

    content:'✈';

    position:absolute;

    left:0;

    color:var(--accent);

}

/* =========================================================
   QUOTE BOX
========================================================= */

.quote-box{

    padding:70px;

    border-radius:40px;

    background:
        rgba(255,255,255,.05);

    border:
        1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

}

.quote-box h2{

    font-size:3rem;

    font-weight:900;

    line-height:1.4;

    margin-bottom:20px;

}

.quote-box p{

    font-size:1.3rem;

    opacity:.8;

}

/* =========================================================
   STATS
========================================================= */

.stat-card{

    padding:45px;

    border-radius:30px;

    background:
        rgba(255,255,255,.05);

    border:
        1px solid rgba(255,255,255,.08);

    transition:.4s ease;

}

.stat-card:hover{

    transform:
        translateY(-6px);

}

.stat-card h2{

    font-size:4rem;

    font-weight:900;

    margin-bottom:12px;

}

.stat-card p{

    opacity:.8;

}

/* =========================================================
   FOOTER
========================================================= */

footer{

    padding:
        80px 0
        60px;

    border-top:
        1px solid rgba(255,255,255,.08);

}

.footer-logo{

    max-width:220px;

    margin-bottom:25px;

}

.social-icons{

    margin-top:25px;

}

.social-icons a{

    width:56px;
    height:56px;

    display:inline-flex;

    justify-content:center;
    align-items:center;

    border-radius:50%;

    margin:0 8px;

    background:
        rgba(255,255,255,.08);

    color:#fff;

    text-decoration:none;

    transition:.3s ease;

}

.social-icons a:hover{

    transform:
        translateY(-5px);

    background:
        rgba(255,255,255,.15);

}

/* =========================================================
   WHATSAPP FLOAT
========================================================= */

.whatsapp-float{

    position:fixed;

    right:30px;
    bottom:30px;

    width:78px;
    height:78px;

    border-radius:50%;

    background:#25D366;

    display:flex;

    justify-content:center;
    align-items:center;

    font-size:2rem;

    color:#fff;

    text-decoration:none;

    z-index:9999;

    box-shadow:
        0 0 35px rgba(37,211,102,.6);

    animation:
        pulseWhatsapp 2s infinite;

}

@keyframes pulseWhatsapp{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.08);
    }

    100%{
        transform:scale(1);
    }

}

/* =========================================================
   LOADER
========================================================= */

#loader{

    position:fixed;

    inset:0;

    background:#020814;

    z-index:999999;

    display:flex;

    justify-content:center;
    align-items:center;

}

.plane-loader i{

    font-size:5rem;

    color:var(--accent);

    animation:
        fly 1.8s infinite ease-in-out;

}

@keyframes fly{

    0%{
        transform:
            translateX(-50px)
            rotate(-10deg);
    }

    50%{
        transform:
            translateX(50px)
            rotate(10deg);
    }

    100%{
        transform:
            translateX(-50px)
            rotate(-10deg);
    }

}

/* =========================================================
   ALERTS
========================================================= */

.alert{

    border:none;

    border-radius:18px;

    padding:20px;

}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:991px){

    .count-box{

        width:140px;
        height:140px;

    }

    .count-box span{

        font-size:3rem;

    }

    .quote-box h2{

        font-size:2.2rem;

    }

}

@media(max-width:768px){

    .hero-section{

        padding-top:150px;

    }

    .hero-description{

        font-size:1.05rem;

    }

    .subscription-card{

        padding:35px;

    }

    .subscription-card h3{

        font-size:1.5rem;

    }

    .count-box{

        width:120px;
        height:120px;

    }

    .count-box span{

        font-size:2.3rem;

    }

    .quote-box{

        padding:45px;

    }

    .quote-box h2{

        font-size:1.7rem;

    }

    .section-title h2{

        font-size:2.2rem;

    }

}

@media(max-width:576px){

    .countdown-wrapper{

        gap:14px;

    }

    .count-box{

        width:100px;
        height:100px;

        border-radius:22px;

    }

    .count-box span{

        font-size:2rem;

    }

    .count-box small{

        font-size:.7rem;

    }

    .custom-btn{

        font-size:.9rem;

    }

    .service-card{

        padding:30px;

    }

}