/* =========================================
        PACKAGE DETAILS - MANALI HERO
========================================= */


/* HERO */

.destination-hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    color:white;

}


/* MANALI BACKGROUND */

.manali-hero{

    background:
        url("../images/packages/manali.jpg")
        center/cover
        no-repeat;

}


/* DARK CINEMATIC OVERLAY */

.destination-overlay{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(10,20,35,.82) 0%,
            rgba(10,20,35,.55) 48%,
            rgba(10,20,35,.18) 100%
        );

    z-index:1;

}


/* CONTENT */

.destination-hero-content{

    position:relative;

    z-index:2;

    padding-top:150px;

    padding-bottom:100px;

}


/* BACK BUTTON */

.back-packages{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:white;

    text-decoration:none;

    font-size:15px;

    font-weight:600;

    margin-bottom:45px;

    opacity:.8;

    transition:.3s ease;

}

.back-packages:hover{

    opacity:1;

    transform:translateX(-5px);

}


/* LOCATION */

.destination-location{

    display:flex;

    align-items:center;

    gap:10px;

    width:max-content;

    padding:10px 17px;

    border-radius:50px;

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

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

    backdrop-filter:blur(16px);

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

    font-size:14px;

    margin-bottom:25px;

}

.destination-location i{

    color:#9CC5FF;

}


/* TITLE */

.destination-title{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    margin:0 0 25px;

    line-height:.95;

    font-family:'Space Grotesk',sans-serif;

    font-size:clamp(70px,10vw,150px);

    letter-spacing:-5px;

    overflow:hidden;

}


/* WORD ANIMATION */

.destination-word{

    display:block;

    width:max-content;

    opacity:0;

    transform:translateX(-180px);

    filter:blur(20px);

    animation:destinationWordReveal
        1s
        cubic-bezier(.2,.8,.2,1)
        forwards;

}


.word-one{

    animation-delay:.5s;

}


.word-two{

    animation-delay:.8s;

    background:linear-gradient(
        135deg,
        #A7D8FF,
        #8B9CFF
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}


/* WORD REVEAL */

@keyframes destinationWordReveal{

    from{

        opacity:0;

        transform:translateX(-180px);

        filter:blur(20px);

    }

    to{

        opacity:1;

        transform:translateX(0);

        filter:blur(0);

    }

}


/* DESCRIPTION */

.destination-description{

    max-width:650px;

    font-size:20px;

    line-height:1.8;

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

    margin-bottom:40px;

}


/* GLASS INFO */

.trip-info{

    display:flex;

    flex-wrap:wrap;

    gap:16px;

    margin-bottom:40px;

}


.trip-info-item{

    display:flex;

    align-items:center;

    gap:14px;

    padding:17px 20px;

    border-radius:20px;

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

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

    backdrop-filter:blur(20px);

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

    transition:
        transform .35s ease,
        background .35s ease;

}


.trip-info-item:hover{

    transform:translateY(-6px);

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

}


.trip-info-item > i{

    font-size:22px;

    color:#A7D8FF;

}


.trip-info-item div{

    display:flex;

    flex-direction:column;

    gap:3px;

}


.trip-info-item span{

    font-size:12px;

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

}


.trip-info-item strong{

    font-size:14px;

    font-weight:600;

}


/* BOOK BUTTON */

.hero-book-btn{

    position:relative;

    display:inline-flex;

    align-items:center;

    gap:14px;

    padding:19px 30px;

    border-radius:18px;

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

    color:#172033;

    text-decoration:none;

    font-size:16px;

    font-weight:700;

    overflow:hidden;

    box-shadow:
        0 15px 45px
        rgba(0,0,0,.22);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}


.hero-book-btn::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            135deg,
            #DDEEFF,
            #B9CFFF
        );

    opacity:0;

    transition:.35s ease;

}


.hero-book-btn span,
.hero-book-btn i{

    position:relative;

    z-index:2;

}


.hero-book-btn:hover{

    transform:
        translateY(-5px)
        scale(1.02);

    box-shadow:
        0 25px 60px
        rgba(0,0,0,.35);

}


.hero-book-btn:hover::before{

    opacity:1;

}


.hero-book-btn i{

    transition:transform .35s ease;

}


.hero-book-btn:hover i{

    transform:translateX(6px);

}


/* =========================================
        HERO ELEMENT REVEAL
========================================= */

.hero-reveal{

    opacity:0;

    transform:translateX(-70px);

    filter:blur(12px);

    animation:heroSlideReveal
        .85s
        cubic-bezier(.2,.8,.2,1)
        forwards;

}


.back-packages{

    animation-delay:.15s;

}


.destination-location{

    animation-delay:.3s;

}


.destination-description{

    animation-delay:1.15s;

}


.trip-info{

    animation-delay:1.4s;

}


.hero-book{

    animation-delay:1.65s;

}


@keyframes heroSlideReveal{

    from{

        opacity:0;

        transform:translateX(-70px);

        filter:blur(12px);

    }

    to{

        opacity:1;

        transform:translateX(0);

        filter:blur(0);

    }

}


/* =========================================
            SCROLL HINT
========================================= */

.scroll-hint{

    position:absolute;

    bottom:35px;

    left:50%;

    transform:translateX(-50%);

    z-index:2;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

    font-size:12px;

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

    animation:scrollBounce 2s ease-in-out infinite;

}


@keyframes scrollBounce{

    0%,
    100%{

        transform:
            translateX(-50%)
            translateY(0);

    }

    50%{

        transform:
            translateX(-50%)
            translateY(8px);

    }

}


/* =========================================
            INTRO SECTION
========================================= */

.destination-intro{

    padding:130px 0;

    background:#F8FBFF;

}


.destination-intro > .container{

    max-width:850px;

}


.section-label{

    display:inline-block;

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    color:#4F8DFF;

    margin-bottom:20px;

}


.destination-intro h2{

    font-size:clamp(42px,6vw,72px);

    line-height:1.08;

    color:#1E293B;

    margin-bottom:30px;

}


.destination-intro h2 span{

    display:block;

    background:
        linear-gradient(
            135deg,
            #4F8DFF,
            #8B5CF6
        );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}


.destination-intro p{

    max-width:720px;

    font-size:19px;

    line-height:1.9;

    color:#64748B;

}
/* =========================================
            DISCOVER MANALI
========================================= */

.discover-manali{

    padding:140px 0;

    background:
        linear-gradient(
            180deg,
            #F8FBFF,
            #EEF4FF
        );

}


.discover-grid{

    display:grid;

    grid-template-columns:
        1fr
        1fr;

    gap:90px;

    align-items:center;

}


/* TEXT */

.discover-content h2{

    font-family:'Space Grotesk',sans-serif;

    font-size:clamp(48px,5vw,78px);

    line-height:1.05;

    letter-spacing:-3px;

    color:#172033;

    margin-bottom:32px;

}


.discover-content h2 span{

    display:block;

    background:
        linear-gradient(
            135deg,
            #4F8DFF,
            #8B5CF6
        );

    -webkit-background-clip:text;

    background-clip:text;

    -webkit-text-fill-color:transparent;

}


.discover-content p{

    color:#64748B;

    font-size:17px;

    line-height:1.9;

    margin-bottom:18px;

}


/* EXPLORE BUTTON */

.discover-book-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    margin-top:22px;

    padding:16px 24px;

    border-radius:16px;

    text-decoration:none;

    font-weight:700;

    color:#1E293B;

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

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

    backdrop-filter:blur(18px);

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

    box-shadow:
        0 15px 35px
        rgba(30,41,59,.08);

    transition:.35s ease;

}


.discover-book-btn:hover{

    transform:
        translateY(-5px);

    box-shadow:
        0 22px 45px
        rgba(79,141,255,.18);

}


.discover-book-btn i{

    transition:.3s ease;

}


.discover-book-btn:hover i{

    transform:
        translateX(6px);

}


/* =========================================
                IMAGE
========================================= */

.discover-image{

    position:relative;

    min-height:620px;

    border-radius:35px;

    overflow:hidden;

    box-shadow:
        0 30px 70px
        rgba(30,41,59,.16);

}


.discover-image img{

    width:100%;

    height:100%;

    position:absolute;

    inset:0;

    object-fit:cover;

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

}


.discover-image:hover img{

    transform:
        scale(1.06);

}


/* IMAGE OVERLAY */

.discover-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            to top,
            rgba(10,20,35,.55),
            transparent 60%
        );

}


/* GLASS CARD ON IMAGE */

.image-glass-card{

    position:absolute;

    z-index:2;

    left:25px;

    right:25px;

    bottom:25px;

    display:flex;

    align-items:center;

    gap:15px;

    padding:20px;

    border-radius:22px;

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

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

    backdrop-filter:blur(22px);

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

    color:white;

}


.image-glass-card i{

    font-size:30px;

    color:#BBD8FF;

}


.image-glass-card div{

    display:flex;

    flex-direction:column;

    gap:4px;

}


.image-glass-card strong{

    font-size:16px;

}


.image-glass-card span{

    font-size:13px;

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

}


/* =========================================
            WHY MANALI
========================================= */

.why-manali{

    padding:140px 0;

    background:#F8FBFF;

}


.section-heading{

    max-width:780px;

    margin:0 auto 70px;

    text-align:center;

}


.section-heading h2{

    font-family:'Space Grotesk',sans-serif;

    font-size:clamp(45px,5vw,75px);

    line-height:1.08;

    letter-spacing:-3px;

    color:#172033;

    margin-bottom:25px;

}


.section-heading h2 span{

    display:block;

    background:
        linear-gradient(
            135deg,
            #4F8DFF,
            #8B5CF6
        );

    -webkit-background-clip:text;

    background-clip:text;

    -webkit-text-fill-color:transparent;

}


.section-heading p{

    font-size:17px;

    line-height:1.8;

    color:#64748B;

}


/* EXPERIENCE GRID */

.manali-experience-grid{

    display:grid;

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

    gap:24px;

}


/* GLASS CARD */

.manali-experience-card{

    position:relative;

    padding:38px 32px;

    border-radius:28px;

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

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

    backdrop-filter:blur(20px);

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

    box-shadow:
        0 18px 45px
        rgba(30,41,59,.07);

    overflow:hidden;

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

}


/* GLOW */

.manali-experience-card::before{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    border-radius:50%;

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

    filter:blur(45px);

    top:-80px;

    right:-80px;

    transition:.5s ease;

}


.manali-experience-card:hover::before{

    transform:
        scale(1.4);

}


.manali-experience-card:hover{

    transform:
        translateY(-12px);

    box-shadow:
        0 28px 60px
        rgba(79,141,255,.15);

}


.experience-icon{

    position:relative;

    z-index:2;

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:28px;

    border-radius:18px;

    color:#4F8DFF;

    font-size:24px;

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

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

}


.manali-experience-card h3{

    position:relative;

    z-index:2;

    color:#1E293B;

    font-size:21px;

    margin-bottom:14px;

}


.manali-experience-card p{

    position:relative;

    z-index:2;

    color:#64748B;

    font-size:15px;

    line-height:1.8;

}


/* CTA */

.manali-section-cta{

    display:flex;

    justify-content:center;

    margin-top:70px;

}


.manali-cta-btn{

    display:inline-flex;

    align-items:center;

    gap:14px;

    padding:19px 30px;

    border-radius:18px;

    text-decoration:none;

    color:white;

    font-weight:700;

    background:
        linear-gradient(
            135deg,
            #4F8DFF,
            #8B5CF6
        );

    box-shadow:
        0 20px 45px
        rgba(79,141,255,.25);

    transition:.35s ease;

}


.manali-cta-btn:hover{

    transform:
        translateY(-6px)
        scale(1.02);

    box-shadow:
        0 30px 60px
        rgba(79,141,255,.35);

}


.manali-cta-btn i{

    transition:.3s ease;

}


.manali-cta-btn:hover i{

    transform:
        translateX(7px);

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

.navbar{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    z-index:1000;

    background:transparent;
}

.nav-container{
    width:min(1180px, 92%);
    margin:0 auto;

    min-height:82px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:30px;
}

/* LOGO */

.navbar .logo{
    display:flex;
    align-items:center;
    gap:10px;

    text-decoration:none;
    flex-shrink:0;
}

.navbar .logo img{
    width:48px;
    height:48px;

    object-fit:contain;
}

.navbar .logo span{
    color:#ffffff;
    font-weight:700;
    letter-spacing:1px;
    white-space:nowrap;
}

/* NAV LINKS */

.navbar .nav-links{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:30px;

    list-style:none;

    margin:0;
    padding:0;
}

.navbar .nav-links li{
    margin:0;
    padding:0;
}

.navbar .nav-links a{
    position:relative;

    display:block;

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

    text-decoration:none;

    font-size:14px;
    font-weight:500;

    white-space:nowrap;

    transition:.3s ease;
}

.navbar .nav-links a:hover{
    color:#ffffff;
}

.navbar .nav-links a::after{
    content:"";

    position:absolute;

    left:0;
    bottom:-7px;

    width:0;
    height:2px;

    border-radius:5px;

    background:#ffffff;

    transition:width .3s ease;
}

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

/* MENU BUTTON */

.navbar .menu-btn{
    display:none;

    border:none;
    background:transparent;

    color:white;

    font-size:24px;

    cursor:pointer;
}
/*spiti*/
.spiti-hero{
    background-image: url("../images/spiti.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.spiti-hero{
    background-image: url("../images/spiti-about.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* =========================================
                LADAKH HERO
========================================= */

.ladakh-hero{
    background-image: url("../images/ladakh.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.ladakh-hero{
    background-image: url("../images/ladakh-about.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* =========================================
                KASOL HERO
========================================= */

.kasol-hero{
    background-image: url("../images/kasol.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.kasol-hero{
    background-image: url("../images/kasol-about.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* =========================================
                KUFRI HERO
========================================= */

.kufri-hero{
    background-image: url("../images/kufri.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.kufri-hero{
    background-image: url("../images/kufri-about.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* =========================================
            DHARAMSHALA HERO
========================================= */

.dharamshala-hero{
    background-image: url("../images/dharamshala.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.dharamshala-hero{
    background-image: url("../images/dharamshala-about.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* =========================================
              DALHOUSIE HERO
========================================= */

.dalhousie-hero{
    background-image: url("../images/dalhousie.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.dalhousie-hero{
    background-image: url("../images/dalhousie-about.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* =========================================
                JIBHI HERO
========================================= */

.jibhi-hero{
    background-image: url("../images/jibhi.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.jibhi-hero{
    background-image: url("../images/jibhi-about.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* =========================================
                KINNAUR HERO
========================================= */

.kinnaur-hero{
    background-image: url("../images/kinnaur.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.kinnaur-hero{
    background-image: url("../images/kinnaur-about.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* =========================================
                ROHTANG HERO
========================================= */

.rohtang-hero{
    background-image: url("../images/rohtang.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.rohtang-hero{
    background-image: url("../images/rohtang-about.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* =========================================
             HONEYMOON HERO
========================================= */

.honeymoon-hero{
    background-image: url("../images/honeymoon.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.honeymoon-hero{
    background-image: url("../images/honeymoon-about.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* =========================================
            HIDDEN PANGI VALLEY HERO
========================================= */

.pangi-hero{
    background-image: url("../images/pangi.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* =========================================
            PANGI TOUR HIGHLIGHTS
========================================= */

.pangi-highlights{
    padding: 100px 0;
}


.pangi-highlight-grid{
    display: grid;

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

    gap: 18px;

    margin-top: 50px;
}


.pangi-highlight-item{
    display: flex;

    align-items: center;

    gap: 12px;

    padding: 18px 20px;

    border-radius: 14px;

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

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

    backdrop-filter: blur(12px);

    transition: 0.4s ease;
}


.pangi-highlight-item:hover{

    transform: translateY(-6px);

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

}


.pangi-highlight-item i{

    color: #D4AF37;

}


/* =========================================
                PACKAGE INCLUDES
========================================= */

.pangi-includes{
    padding: 100px 0;
}


.pangi-includes-grid{

    display: grid;

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

    gap: 25px;

    margin-top: 50px;

}


.pangi-include-card{

    padding: 35px;

    border-radius: 20px;

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

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

    backdrop-filter: blur(15px);

    transition: 0.4s ease;

}


.pangi-include-card:hover{

    transform: translateY(-8px);

    border-color: rgba(212,175,55,0.5);

}


.pangi-include-card i{

    font-size: 28px;

    color: #D4AF37;

    margin-bottom: 20px;

}


.pangi-include-card h3{

    margin-bottom: 12px;

}


.pangi-include-card p{

    line-height: 1.7;

    opacity: 0.75;

}


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

@media(max-width: 768px){

    .pangi-highlight-grid{

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

    }


    .pangi-includes-grid{

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

    }


    .pangi-highlights,
    .pangi-includes{

        padding: 70px 0;

    }

}
/* =========================================
   TITLE IMAGE VISUAL
========================================= */

.destination-title-visual {
    position: relative;
    width: 100%;
    min-height: 280px;

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

    overflow: hidden;
    border-radius: 28px;
}


/* IMAGE */

.destination-title-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    z-index: 0;

    transform: scale(1.03);

    /* Decrease image brightness */
    filter: brightness(0.65);
}


/* PREMIUM LIGHT / GLASS OVERLAY */

.destination-title-overlay {
    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.35),
            rgba(180, 220, 255, 0.18),
            rgba(255, 255, 255, 0.28)
        );

    backdrop-filter: blur(2px);
}


/* TITLE STAYS ABOVE IMAGE */

.destination-title-visual .destination-title {
    position: relative;

    z-index: 2;

    margin: 0;

    text-align: center;
}
/* =========================================
   MANALI CLASSIC – PURE WHITE TITLE
========================================= */

.destination-title .word-one,
.destination-title .word-two {
    color: #ffffff !important;
    background: none !important;

    -webkit-background-clip: initial !important;
    background-clip: initial !important;

    -webkit-text-fill-color: #ffffff !important;
}
/* =========================================
   PACKAGE TITLE IMAGE BACKGROUND
   WORKS FOR ALL PACKAGE PAGES
========================================= */

.destination-title-visual {
    position: relative;
    width: 100%;
    min-height: 280px;

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

    overflow: hidden;
    border-radius: 28px;
}


.destination-title-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    z-index: 0;

    transform: scale(1.03);

    /* Reduced brightness */
    filter: brightness(0.65);
}


/* Title stays above image */

.destination-title-visual .destination-title {
    position: relative;
    z-index: 2;

    margin: 0;

    text-align: center;
}


/* Make BOTH title words pure white */

.destination-title-visual .word-one,
.destination-title-visual .word-two {
    color: #ffffff !important;

    background: none !important;

    -webkit-background-clip: initial !important;
    background-clip: initial !important;

    -webkit-text-fill-color: #ffffff !important;
}