/* ===========================================
            MOBILE
=========================================== */

@media(max-width:768px){

/* ===========================
GENERAL
=========================== */

body{

overflow-x:hidden;

}

.container{

width:92%;

margin:auto;

}

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

section{

padding:80px 0;

}

/* ===========================
HEADINGS
=========================== */

h2{

font-size:34px;

line-height:1.25;

}

.section-heading{

margin-bottom:45px;

}

.section-heading p{

font-size:16px;

line-height:1.8;

}

/* ===========================
NAVBAR
=========================== */

header{

top:12px;

}

.navbar{

height:68px;

padding:0 18px;

border-radius:50px;

}

/* Logo */

.logo{

gap:10px;

}

.logo img{

width:42px;

height:42px;

}

.logo span{

font-size:22px;

}

/* Hide Desktop Menu */

.nav-links{

display:none;

}

/* Mobile Menu */

.menu-btn{

display:block;

font-size:28px;

cursor:pointer;

}

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

.hero{

padding-top:120px;

padding-bottom:70px;

min-height:100vh;

}

.hero-content{

padding:35px 25px;

border-radius:28px;

}

.hero-tag{

font-size:13px;

padding:10px 18px;

margin-bottom:22px;

}

.hero h1{

font-size:48px;

line-height:1.1;

margin-bottom:20px;

}

.hero p{

font-size:17px;

line-height:1.8;

margin-bottom:35px;

}

/* ===========================
BUTTONS
=========================== */

.hero-buttons{

flex-direction:column;

gap:15px;

}

.primary-btn,

.secondary-btn{

width:100%;

padding:16px;

font-size:16px;

justify-content:center;

}

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

.hero-stats{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:12px;

margin-top:20px;

}

.hero-stats div{

padding:14px 8px;

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

border-radius:18px;

}

.hero-stats h2{

font-size:28px;

margin-bottom:6px;

}

.hero-stats span{

font-size:13px;

line-height:1.4;

}

/* Scroll */

.scroll-indicator{

display:none;

}

}
/* =====================================================
            MOBILE FEATURED PACKAGES
===================================================== */

@media (max-width:768px){

.featured-packages{

padding:70px 0;

}

.packages-grid{

display:flex;

flex-direction:column;

gap:28px;

}

.package-card{

width:100%;

max-width:100%;

margin:0 auto;

border-radius:26px;

overflow:hidden;

box-shadow:0 15px 35px rgba(60,80,120,.10);

}

/* Image */

.package-card img{

height:220px;

object-fit:cover;

}

/* Content */

.package-content{

padding:22px;

}

/* Top Row */

.package-top{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:18px;

}

.package-top span{

font-size:13px;

padding:8px 14px;

}

.rating{

display:none;

}

/* Title */

.package-card h3{

font-size:26px;

margin-bottom:12px;

line-height:1.3;

}

/* Description */

.package-card p{

font-size:15px;

line-height:1.7;

margin-bottom:20px;

}

/* Bottom */

.package-bottom{

display:flex;

justify-content:space-between;

align-items:center;

gap:15px;

}

.duration{

font-size:14px;

}

.package-bottom a{

padding:13px 22px;

font-size:15px;

border-radius:40px;

}

.center-btn{

margin-top:45px;

}

.view-all{

width:100%;

text-align:center;

padding:16px;

font-size:16px;

}

/* =====================================================
                WHY US
===================================================== */

.why-us{

padding:70px 0;

}

.why-grid{

display:grid;

grid-template-columns:1fr;

gap:22px;

}

.why-card{

padding:32px 24px;

border-radius:24px;

}

.why-card i{

width:72px;

height:72px;

font-size:28px;

margin-bottom:20px;

}

.why-card h3{

font-size:22px;

margin-bottom:12px;

}

.why-card p{

font-size:15px;

line-height:1.8;

}

}
/* =====================================================
                MOBILE REVIEWS
===================================================== */

@media (max-width:768px){

.reviews{

padding:70px 0;

}

.reviews-grid{

display:flex;

flex-direction:column;

gap:22px;

}

.review-card{

padding:24px;

border-radius:24px;

}

.review-top{

gap:15px;

margin-bottom:18px;

}

.review-top img{

width:60px;

height:60px;

}

.review-top h3{

font-size:18px;

}

.review-top span{

font-size:13px;

}

.review-card p{

font-size:15px;

line-height:1.7;

}

/* =====================================================
                PLAN JOURNEY
===================================================== */

.plan-journey{

padding:70px 0;

}

.journey-box{

padding:35px 22px;

border-radius:28px;

}

.journey-box span{

font-size:12px;

padding:10px 16px;

margin-bottom:20px;

}

.journey-box h2{

font-size:34px;

line-height:1.25;

margin-bottom:20px;

}

.journey-box p{

font-size:16px;

line-height:1.8;

margin-bottom:30px;

}

.journey-buttons{

display:flex;

flex-direction:column;

gap:15px;

}

.journey-buttons a{

width:100%;

text-align:center;

}

/* =====================================================
                CONTACT
===================================================== */

.contact-home{

padding:70px 0;

}

.contact-card{

display:flex;

flex-direction:column;

padding:28px;

gap:30px;

border-radius:26px;

}

.contact-left{

text-align:center;

}

.contact-left h2{

font-size:34px;

margin-bottom:15px;

}

.contact-left p{

font-size:16px;

line-height:1.8;

}

.contact-right{

display:grid;

grid-template-columns:1fr;

gap:15px;

width:100%;

}

.contact-right a{

padding:18px;

font-size:16px;

justify-content:center;

border-radius:18px;

}

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

footer{

padding:60px 6% 25px;

margin-top:70px;

}

.footer-grid{

display:flex;

flex-direction:column;

gap:35px;

padding-bottom:35px;

text-align:center;

}

.footer-grid h3{

font-size:28px;

}

.footer-grid h4{

font-size:20px;

margin-bottom:15px;

}

.footer-grid a{

margin-bottom:10px;

}

.footer-bottom{

display:flex;

flex-direction:column;

text-align:center;

gap:12px;

margin-top:25px;

}

.footer-bottom p{

font-size:14px;

}

/* =====================================================
                EXTRA SPACING
===================================================== */

.package-card,
.review-card,
.why-card,
.contact-card{

margin-left:auto;

margin-right:auto;

}

img{

max-width:100%;

height:auto;

}

}
/* =========================================
        PREMIUM MOBILE SIDE MENU
========================================= */

@media (max-width:768px){

    .menu-btn{
        display:flex;
        align-items:center;
        justify-content:center;

        width:48px;
        height:48px;

        cursor:pointer;

        position:relative;
        z-index:1002;

        border-radius:16px;

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

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

        backdrop-filter:blur(15px);
        -webkit-backdrop-filter:blur(15px);

        box-shadow:0 10px 30px rgba(40,60,100,.10);
    }


    .menu-btn i{
        font-size:20px;
        transition:
            transform .35s ease,
            opacity .25s ease;
    }


    /* SIDE MENU */

    .nav-links{

        position:fixed;

        top:0;
        right:0;

        width:min(82vw,360px);
        height:100vh;

        padding:110px 30px 40px;

        display:flex;
        flex-direction:column;

        align-items:flex-start;
        justify-content:flex-start;

        gap:12px;

        background:rgba(248,251,255,.82);

        backdrop-filter:blur(25px);
        -webkit-backdrop-filter:blur(25px);

        border-left:1px solid rgba(255,255,255,.9);

        box-shadow:
            -20px 0 60px rgba(30,50,90,.14);

        z-index:1001;

        /* Hidden state */

        transform:translateX(110%);

        opacity:0;

        filter:blur(12px);

        pointer-events:none;

        transition:
            transform .55s cubic-bezier(.2,.8,.2,1),
            opacity .35s ease,
            filter .45s ease;

    }


    /* OPEN STATE */

    .nav-links.show{

        transform:translateX(0);

        opacity:1;

        filter:blur(0);

        pointer-events:auto;

    }


    /* MENU LINKS */

    .nav-links li{

        width:100%;

        list-style:none;

        opacity:0;

        transform:translateX(30px);

        transition:
            opacity .4s ease,
            transform .4s cubic-bezier(.2,.8,.2,1);

    }


    /* Animate links one by one */

    .nav-links.show li{

        opacity:1;

        transform:translateX(0);

    }

    .nav-links.show li:nth-child(1){
        transition-delay:.10s;
    }

    .nav-links.show li:nth-child(2){
        transition-delay:.16s;
    }

    .nav-links.show li:nth-child(3){
        transition-delay:.22s;
    }

    .nav-links.show li:nth-child(4){
        transition-delay:.28s;
    }

    .nav-links.show li:nth-child(5){
        transition-delay:.34s;
    }


    .nav-links li a{

        display:flex;

        width:100%;

        padding:16px 18px;

        border-radius:16px;

        font-size:17px;

        font-weight:600;

        text-decoration:none;

        color:#1E293B;

        transition:
            background .3s ease,
            transform .3s ease,
            color .3s ease;

    }


    .nav-links li a:hover,
    .nav-links li a:active{

        background:rgba(79,141,255,.10);

        color:#4F8DFF;

        transform:translateX(6px);

    }


    /* MENU BUTTON ACTIVE */

    .menu-btn.active i{

        transform:rotate(90deg);

    }

}
/* =========================================
      PACKAGES HERO MOBILE ANIMATION
========================================= */

/* =========================================
   WORD BY WORD - LEFT TO RIGHT ANIMATION
========================================= */

.hero-title{
    overflow:hidden;
}

/* Every word starts from LEFT */

.hero-title span{
    display:inline-block;

    opacity:0;

    transform:translateX(-120px);

    filter:blur(15px);

    animation:wordSlideFromLeft .8s
        cubic-bezier(.22,.8,.25,1)
        forwards;
}


/* WORD 1 */

.hero-title span:nth-child(1){
    animation-delay:.4s;
}


/* WORD 2 */

.hero-title span:nth-child(2){
    animation-delay:.65s;
}


/* WORD 3 */

.hero-title span:nth-child(3){
    animation-delay:.9s;
}


/* WORD 4 */

.hero-title span:nth-child(4){
    animation-delay:1.15s;
}


/* ANIMATION */

@keyframes wordSlideFromLeft{

    from{

        opacity:0;

        transform:translateX(-120px);

        filter:blur(18px);

    }

    to{

        opacity:1;

        transform:translateX(0);

        filter:blur(0);

    }

}
@media (max-width:768px){

    .hero-title{
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        overflow:hidden;
    }

    .hero-title span{
        display:block;
        width:max-content;

        transform:translateX(-100px);
    }

}
/* =========================================
        PACKAGE DETAILS MOBILE
========================================= */

@media(max-width:768px){

    .destination-hero{

        min-height:100svh;

        align-items:flex-end;

    }


    .destination-overlay{

        background:
            linear-gradient(
                to top,
                rgba(10,20,35,.92) 0%,
                rgba(10,20,35,.65) 48%,
                rgba(10,20,35,.15) 100%
            );

    }


    .destination-hero-content{

        padding-top:130px;

        padding-bottom:110px;

    }


    .back-packages{

        margin-bottom:30px;

    }


    .destination-title{

        font-size:clamp(58px,18vw,95px);

        letter-spacing:-3px;

        margin-bottom:20px;

    }


    .destination-description{

        font-size:16px;

        line-height:1.75;

        margin-bottom:28px;

    }


    /* GLASS INFO STACK */

    .trip-info{

        display:grid;

        grid-template-columns:1fr;

        width:100%;

        gap:10px;

        margin-bottom:30px;

    }


    .trip-info-item{

        width:100%;

        padding:15px 17px;

        border-radius:17px;

    }


    .trip-info-item:hover{

        transform:none;

    }


    .trip-info-item strong{

        font-size:13px;

    }


    /* BOOK BUTTON */

    .hero-book-btn{

        width:100%;

        justify-content:center;

        padding:18px 22px;

    }


    /* INTRO */

    .destination-intro{

        padding:90px 0;

    }


    .destination-intro h2{

        font-size:clamp(38px,11vw,55px);

    }


    .destination-intro p{

        font-size:16px;

        line-height:1.8;

    }


    .scroll-hint{

        display:none;

    }

}
/* =========================================
      MANALI DETAILS - MOBILE
========================================= */

@media(max-width:768px){

    .discover-manali,
    .why-manali{

        padding:90px 0;

    }


    .discover-grid{

        grid-template-columns:1fr;

        gap:55px;

    }


    .discover-content h2{

        font-size:clamp(42px,12vw,60px);

        letter-spacing:-2px;

    }


    .discover-content p{

        font-size:16px;

        line-height:1.8;

    }


    .discover-image{

        min-height:480px;

        border-radius:28px;

    }


    .image-glass-card{

        left:15px;

        right:15px;

        bottom:15px;

        padding:16px;

        border-radius:18px;

    }


    .manali-experience-grid{

        grid-template-columns:1fr;

        gap:16px;

    }


    .manali-experience-card{

        padding:30px 25px;

        border-radius:24px;

    }


    .manali-experience-card:hover{

        transform:none;

    }


    .section-heading{

        margin-bottom:45px;

    }


    .section-heading h2{

        font-size:clamp(40px,11vw,58px);

        letter-spacing:-2px;

    }


    .manali-section-cta{

        margin-top:45px;

    }


    .manali-cta-btn{

        width:100%;

        justify-content:center;

        padding:18px 20px;

        text-align:center;

    }

}
/* =========================================
     PACKAGE PAGE NAVBAR - MOBILE FIX
========================================= */

@media(max-width:768px){

    .nav-container{
        width:92%;
        min-height:72px;
        gap:15px;
    }

    .navbar .logo img{
        width:44px;
        height:44px;
    }

    .navbar .logo span{
    font-size: 22px;
    font-weight: 700;
    white-space: nowrap;
}

    .navbar .menu-btn{
        display:flex;
        align-items:center;
        justify-content:center;

        width:42px;
        height:42px;

        flex-shrink:0;

        font-size:23px;

        z-index:1002;
    }

    .navbar .nav-links{
        position:fixed;

        top:0;
        right:0;

        width:min(2800px, 80vw);
        height:100svh;

        display:flex;
        flex-direction:column;
        align-items:flex-start;
        justify-content:center;

        gap:28px;

        padding:90px 35px;

        background:rgba(15,25,45,1);

        backdrop-filter:blur(25px);
        -webkit-backdrop-filter:blur(25px);

        border-left:1px solid rgba(255,255,255,.18);

        transform:translateX(110%);
        opacity:0;

        transition:
            transform .45s cubic-bezier(.2,.8,.2,1),
            opacity .35s ease;

        z-index:1001;
    }

    .navbar .nav-links.show{
        transform:translateX(0);
        opacity:1;
    }

    .navbar .nav-links li{
        width:100%;
    }

    .navbar .nav-links a{
        width:100%;

        font-size:20px;
        font-weight:600;

        color:white;

        padding:8px 0;

        opacity:0;
        transform:translateX(30px);

        transition:
            transform .4s ease,
            opacity .4s ease,
            color .3s ease;
    }

    .navbar .nav-links.show a{
        opacity:1;
        transform:translateX(0);
    }

    .navbar .nav-links.show li:nth-child(1) a{
        transition-delay:.10s;
    }

    .navbar .nav-links.show li:nth-child(2) a{
        transition-delay:.17s;
    }

    .navbar .nav-links.show li:nth-child(3) a{
        transition-delay:.24s;
    }

    .navbar .nav-links.show li:nth-child(4) a{
        transition-delay:.31s;
    }

    .navbar .nav-links.show li:nth-child(5) a{
        transition-delay:.38s;
    }

}
@media (max-width: 768px) {

    /* Homepage mobile side menu fix */
    .navbar .nav-links {
        position: fixed !important;

        top: 0 !important;
        right: 0 !important;

        bottom: 0 !important;
        left: auto !important;

        margin: 0 !important;

        border-radius: 0 !important;
    }

}
/* =========================================
   REMOVE TOP + RIGHT GAP FROM MOBILE MENU
========================================= */

@media (max-width:768px){

    .navbar .nav-links{
        position:fixed !important;

        top:0 !important;
        right:0 !important;

        bottom:0 !important;

        margin:0 !important;

        border-radius:0 !important;

        /* Remove any inherited spacing */
        inset:0 0 0 auto !important;

        /* Keep your current menu width */
        width:min(320px, 82vw) !important;

        height:100dvh !important;
    }

}
/* =========================================
   RESTORE NAVBAR GLASS WITHOUT BREAKING MENU
========================================= */

.navbar{
    background:transparent !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;

    position:fixed;
    z-index:1000;
}

/* Create glass effect separately */
.navbar::before{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(255,255,255,0.12);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,0.18);

    border-radius:inherit;

    z-index:-1;

    pointer-events:none;

}
.navbar .nav-container{
    position:relative;
    z-index:2;
}

.navbar .nav-links{
    z-index:1001;
}
/* =========================================
   INCREASE TORA TRAILS TITLE ON MOBILE
========================================= */

@media (max-width: 768px) {

    .logo-text {
        font-size: 1.9rem !important;
        font-weight: 700;
    }

}