@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100..900&display=swap');

:root {
    --primary-color: #feb000;
    --secondary-color: #090a23;
    --white-color: #ffffff;
    --black-color: #000000;
}

a:hover {
    text-decoration: none !important;
}

/* ==========================================
   TOP HEADER (Contact & Socials)
   ========================================== */
    .top-header {
        background-color: var(--secondary-color);
        color: var(--white-color);
        font-size: 13px;
        height: 30px; /* Slim height */
        display: flex;
        align-items: center;
        border-bottom: 1px solid #222;
        padding: 0;
    }
    
    .contact-info i {
        color: var(--primary-color, #ffc107);
        margin-right: 8px;
        font-size: 14px;
    }
    
    .social-icons a {
        font-size: 16px;
        margin-left: 20px;
        color: var(--white-color);
        transition: color 0.3s ease;
    }
    
    .social-icons a:hover {
        color: var(--primary-color);
    }

/* ==========================================
   MAIN HEADER (Sticky Scroll Effect) - SLIM HEIGHT
   ========================================== */
    .main-header {
        background-color: var(--white-color);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
        position: -webkit-sticky;
        position: sticky;
        top: -1px;
        z-index: 1000;
        width: 100%;
    }
    
    /* Forcefully removing Bootstrap's default navbar padding */
    .main-header .navbar {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        min-height: 55px; /* Height thodi aur kam kar di hai */
    }
    
    /* Removing extra space around the logo */
    .navbar-brand {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin: 5px 0; /* Upar-neeche sirf 5px ka gap */
    }
    
    .logo {
        max-height: 50px;
        width: auto;
        transition: all 0.3s ease;
    }
    
    /* === MENU LINKS SPACING & PADDING === */
    .navbar-nav .nav-link {
        color: #111;
        font-size: 14.5px;
        font-weight: 600;
        /* Vertical padding ko 20px se kam karke 15px (ya apni zarurat ke hisaab se 10px) kar diya hai */
        padding: 15px 10px !important;
        text-transform: uppercase;
        transition: color 0.3s;
        letter-spacing: 0.3px;
    }
    
    .navbar-nav .nav-item {
        margin: 0 12px;
    }
    
    .navbar-nav .nav-link:hover {
        color: var(--primary-color);
    }
    
    /*=========================================
      TOUR CATEGORIES DROPDOWN
    =========================================*/
    .custom-dropdown {
        position: relative;
    }
    
    .custom-dropdown .nav-link {
        display: flex;
        align-items: center;
    }
    
    .custom-dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 250px;
        background: #fff;
        border: none;
        border-radius: 8px;
        padding: 8px 0;
        margin-top: 0;
        box-shadow: 0 10px 25px rgba(0,0,0,.15);
        display: none;
        z-index: 9999;
    }
    
    .custom-dropdown:hover .custom-dropdown-menu {
        display: block;
        animation: dropdownFade .25s ease;
    }
    
    .custom-dropdown-menu li {
        list-style: none;
    }
    
    .custom-dropdown-menu .dropdown-item {
        display: block;
        padding: 12px 18px;
        color: #000;
        font-size: 15px;
        font-weight: 500;
        text-decoration: none;
        transition: .3s;
    }
    
    .custom-dropdown-menu .dropdown-item:hover {
        background: var(--primary-color);
        color: #fff;
    }
    
    @keyframes dropdownFade{
        from{
            opacity:0;
            transform:translateY(10px);
        }
        to{
            opacity:1;
            transform:translateY(0);
        }
    }
    
    /*============== MOBILE DROPDOWN ==============*/
    @media (max-width:991px){
        .custom-dropdown-menu{
            position: static;
            display: none;
            background: transparent;
            box-shadow: none;
            border-radius: 0;
            width: 100%;
            padding: 0;
        }
    
        .custom-dropdown:hover .custom-dropdown-menu{
            display: block;
        }
    
        .custom-dropdown-menu .dropdown-item{
            color: #fff;
            padding: 10px 30px;
        }
    
        .custom-dropdown-menu .dropdown-item:hover{
            background: rgba(255,255,255,.1);
            color: var(--primary-color);
        }
    }
    
    /* ==========================================
       MOBILE SLIDE MENU & RESPONSIVE RULES
       ========================================== */
    .menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.6);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        z-index: 998;
    }
    
    .menu-overlay.show {
        opacity: 1;
        visibility: visible;
    }
    
    .navbar-toggler {
        border: none;
        outline: none;
        box-shadow: none !important;
    }
    
    .custom-toggler .navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    }
    
    .menu-close {
        position: absolute;
        top: 20px;
        right: 20px;
        background: none;
        border: none;
        font-size: 2rem;
        color: var(--white-color);
        cursor: pointer;
        display: none;
    }
    
    .menu-close:hover {
        color: var(--primary-color);
    }
    
    /* TABLET VIEW */
    @media (max-width: 991px) {
        .top-header {
            height: auto;
            padding: 5px 0; /* Slim padding for tablet */
        }
    
        .top-header .row {
            justify-content: center;
        }
    
        .social-icons a {
            margin: 0 10px;
        }
    
        .slide-menu {
            position: fixed;
            top: 0;
            right: 0;
            height: 100vh;
            width: 280px;
            background-color: var(--secondary-color, #1a1a1a);
            padding-top: 70px;
            transform: translateX(100%);
            transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
            z-index: 999;
            display: block !important;
        }
    
        .slide-menu.show {
            transform: translateX(0);
        }
    
        .menu-close {
            display: block;
        }
    
        .navbar-nav .nav-link {
            color: var(--white-color);
            padding: 12px 20px;
            border-bottom: 1px solid rgba(255,255,255,0.1);
            font-weight: 500;
        }
    
        .navbar-nav .nav-item {
            margin: 0;
        }
    }
    
    /* MOBILE VIEW (Extra Slim Top Header) */
    @media (max-width: 425px) {
        .logo {
            max-height: 40px;
        }
    
        .top-header {
            display: block; /* Flex hataya taaki Bootstrap .row theek se kaam kare */
            padding: 2px 0; /* Ekdum minimal padding */
            height: auto;
        }
    
        .top-header .contact-info,
        .top-header .social-icons {
            text-align: center;
            width: 100%;
            margin-top: 2px; /* Margin kam kiya */
        }
    
        /* Font size thoda chhota kiya taaki mobile screen par properly fit ho aur wrap na ho */
        .top-header .contact-info {
            font-size: 11.5px;
        }
    
        .contact-info i {
            font-size: 12px;
            margin-right: 4px;
        }
    }
    
    /* JS FALLBACK CLASSES */
    .header-fixed {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1050;
        background-color: var(--white-color);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        animation: slideDown 0.3s ease-in-out;
    }
    
    body.fixed-active {
        padding-top: 70px;
    }

/* ==========================================================================
   1. HERO BANNER SECTION (Layout Shift & Aspect Ratio Fix)
   ========================================================================== */
    .hero-section {
        width: 100%;
        border-radius: 10px;
        overflow-x: hidden;
        background-color: #f8f9fa;
    }
    
    .hero-image-container {
        width: 100%;
    
        line-height: 0;
        position: relative;
        background-color: #f5f5f5;
        /* Mobile standard par fixed height placeholder hatakar auto scale allow kiya */
        aspect-ratio: auto;
    }
    
    .hero-image-container picture {
        display: block;
        width: 100%;
    }
    
    .hero-img {
        width: 100%;
        height: auto; /* Isse choti screens aur mobile par banner bina kate poora dikhega */
        display: block;
    }

/* Desktop screen configurations (769px aur upar) */

  /* Floating Button */
    #returnProductBtn {
      position: fixed;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      background-color: #00194D;
      color: white;
      padding: 10px;
      writing-mode: vertical-rl;
      text-orientation: mixed;
      border: none;
      border-radius: 8px 0 0 8px;
      cursor: pointer;
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
      transition: background-color 0.3s;
      z-index: 1000;
    }

    #returnProductBtn:hover {
      background-color: #EF7F1A;
    }

     /* Popup Form */
     #returnForm {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        z-index: 1000;
        width: 90%;
        max-width: 400px;
        box-sizing: border-box;
        z-index: 10000;
    }
    
    .what {
      position: fixed;
      bottom: 30px;
      left: 15px;
      z-index: 999;
    }
    
    .what a {
      color: #fff;
      font-size: 30px;
      border-radius: 100%;
      height: 50px;
      width: 50px;
      margin-top: 10px;
      display: flex;
      text-decoration: none;
      align-items: center;
      justify-content: center;
      box-shadow: 0px 5px 10px 0px #00000052;
      background: #0df173;
    }
    
    .what a:last-child {
      font-size: 20px;
      background-color: rgb(0, 25, 77);
    }
    
    @media (min-width: 769px) {
        .hero-image-container {
            aspect-ratio: 16 / 6; /* Desktop par proper design ratio lock */
        }
        .hero-img {
            height: 100%;
            object-fit: cover; /* Desktop screen par bina stretch hue maintain rahega */
        }
    }
    
    .heroSlider-pagination {
        position: absolute;
        bottom: 20px !important;
        left: 0;
        right: 0;
        z-index: 10;
    }
    
    .heroSlider-pagination .swiper-pagination-bullet {
        background: #fff;
        opacity: .5;
    }
    
    .heroSlider-pagination .swiper-pagination-bullet-active {
        opacity: 1;
    }
    
    .BannerSwiper {
        overflow: hidden;
    }
    
    .banner-pagination {
        text-align: center;
        margin-top: 15px;
    }
    
    .heroSwiper{
        padding: 0 !important;
    }
    
    .heroSwiper.swiper{
        padding: 0 !important;
    }

/* ==========================================================================
    categories section
   ========================================================================== */
    .categories-section {
        padding: 40px 0;
        background-color: #fff; /* Clean white background */
        width: 100%;
    }
    .section-title {
        font-family: 'Playfair Display', Georgia, serif;
        font-style: italic;
        font-weight: 700;
        color: #071a44;
    }
    .section-subtitle {
        font-size: 0.95rem;
        color: #888;
        letter-spacing: 0.5px;
    }
    
    /* Luxury Navigation Buttons */
    .nav-btn {
        border: 1px solid #e0e0e0;
        background: #fff;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
        z-index: 10;
    }
    .nav-btn:hover {
        border-color: #c5a059; /* Premium Champagne Gold */
        background-color: #fcfbf9;
    }
    .btn-prev::after {
        content: '';
        width: 10px;
        height: 10px;
        border-left: 1.5px solid #333;
        border-bottom: 1.5px solid #333;
        transform: rotate(45deg);
        margin-left: 3px;
        transition: border-color 0.3s ease;
    }
    .btn-next::after {
        content: '';
        width: 10px;
        height: 10px;
        border-right: 1.5px solid #333;
        border-top: 1.5px solid #333;
        transform: rotate(45deg);
        margin-right: 3px;
        transition: border-color 0.3s ease;
    }
    .nav-btn:hover::after {
        border-color: #c5a059;
    }
    
    /* Swiper Padding for Shadows */
    .category-slider {
        padding: 20px 0 40px 0 !important;
    }
    
    /* --- LUXURY CARD STYLING --- */
    
    .luxury-category-card {
        display: flex;
        flex-direction: column;
        background: #fff;
        border: 1px solid #f2f2f2; /* Very subtle border */
        border-radius: 12px;
        padding: 12px; /* White frame around the image */
        text-decoration: none;
        box-shadow: 0 4px 15px rgba(0,0,0,0.02); /* Extremely soft shadow */
        transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
        cursor: pointer;
    }
    
    .luxury-category-card:hover {
        box-shadow: 0 15px 35px rgba(0,0,0,0.08); /* Elegant elevated shadow */
        border-color: #eaeaea;
        transform: translateY(-5px);
    }
    
    /* 1:1 Square Image Wrapper - NO CROPPING */
    .luxury-img-box {
        width: 100%;
        aspect-ratio: 1 / 1; /* Strictly Square */
        border-radius: 8px; /* Slightly sharp premium corners */
        overflow: hidden;
        position: relative;
        background: #fcfcfc; /* In case image takes time to load */
    }
    
    .luxury-img-box img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Since aspect-ratio is 1:1 and your images are 1:1, this will fit perfectly without cropping */
        display: block;
        transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1); /* Very slow, premium zoom */
    }
    
    .luxury-category-card:hover .luxury-img-box img {
        transform: scale(1.06);
    }
    
    /* Elegant Text Info */
    .luxury-info {
        text-align: center;
        padding-top: 20px;
        padding-bottom: 10px;
    }
    
    .luxury-title {
        font-family: 'Playfair Display', Georgia, serif;
        color: #1a1a1a;
        font-weight: 600;
        font-size: 1.3rem;
        margin: 0 0 8px 0;
        letter-spacing: 0.5px;
        transition: color 0.3s ease;
    }
    
    /* Premium Explore Button with Animated Arrow */
    .luxury-explore {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        color: #c5a059; /* Champagne Gold */
    }
    
    .explore-text {
        font-size: 0.8rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 2px;
    }
    
    .luxury-arrow {
        font-size: 1.2rem;
        line-height: 1;
        transform: translateX(0);
        transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    }
    
    /* Hovering Text Effects */
    .luxury-category-card:hover .luxury-title {
        color: #feb000;
    }
    
    .luxury-category-card:hover .luxury-arrow {
        transform: translateX(8px);
    }

/* Agency Intro Text Styling */
        .agency-intro {
            max-width: 800px;
            margin: 0 auto;
            color: #4b3f3f;
            font-size: 1.1rem;
            line-height: 1.6;
        }

        /* Form Container Styling based on Screenshot */
        .quote-form-container {
            background-color: #c7e7e7; /* Light cyan background */
            border-radius: 10px;
            padding: 40px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            max-width: 1200px;
            margin: 0 auto;

        }

        .form-title {
            color: #f13c4d; /* Red color from image */
            font-weight: 700;
            letter-spacing: 0.5px;
            margin-bottom: 30px;
        }

        /* Input Customizations */
        .form-control, .form-select {
            border: 1px solid #ced4da;
            border-radius: 5px;
            padding: 10px 15px;
            font-size: 0.95rem;
            color: #6c757d;
        }

        .form-control:focus, .form-select:focus {
            box-shadow: none;
            border-color: #4ebfb3;
        }

        textarea.form-control {
            resize: none; /* Disables manual resizing */
        }

        /* Submit Button Styling */
        .btn-submit {
            background-color: #3dbdb0; /* Teal green button */
            color: white;
            font-weight: 600;
            padding: 12px 30px;
            border-radius: 30px; /* Pill shape */
            border: none;
            transition: background-color 0.3s;
        }

        .btn-submit:hover {
            background-color: #3cae9f;
            color: white;
        }

        .select2-container--default .select2-results > .select2-results__options {
            max-height: 150px !important;
            overflow-y: auto !important;
        }


        .select2-container .select2-selection--single {
            height: 38px !important;
            padding-top: 4px;
            border: 1px solid #ced4da;
        }
        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 36px !important;
        }

/* ==========================================================================
    OUR TOUR PACKAGES SECTION 
   ========================================================================== */
   /* Swiper Section */
.swiper-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
                url('https://images.unsplash.com/photo-1506012787146-f92b2d7d6d96?q=80&w=1920') no-repeat center center/cover;
    padding: 50px 20px;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

/* --- New Header Styles --- */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding: 0 15px;
}

.section-title {
    color: #ffffff;
    font-size: 2.2rem;
    font-weight: 700;
    margin: 0;
    text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.911);
}

.btn-view-more {
    background: #23145c;
    color: #ffffff;
    padding: 10px 24px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(255, 87, 34, 0.4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.btn-view-more:hover {
    background: #d1c305;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(255, 87, 34, 0.6);
}

/* Responsive adjustment for header */
@media (max-width: 576px) {
    .section-header {
        flex-direction: row;
        align-items: flex-start;
        padding: 0 10px;
    }

    .section-title {
        font-size: 1.5rem;
        max-width: 65%;
        line-height: 1.2;
    }

    .btn-view-more {
        padding: 7px 15px;
        font-size: 0.8rem;
        margin-top: 5px;
    }
}
/* --- End Header Styles --- */

/* Swiper Container */
.swiper {
    width: 100%;
    padding: 20px 0 50px 0 !important;
}

/* Card Styling */
.card {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
}

/* 1:1 Aspect Ratio Image Box (Perfect Square) */
.card-img-box {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}

.card-img-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Card Content */
.card-details {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.card-title {
    font-size: 1.15rem;
    color: #111111;
    font-weight: 600;
    margin-bottom: 6px;
}

.card-duration {
    font-size: 0.9rem;
    color: #000000;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Action Buttons */
.card-actions {
    display: flex;
    gap: 10px;
    margin-top: auto;
}

.btn {
    flex: 1;
    padding: 11px 5px;
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
    /* Updated for perfect center alignment inside anchors/buttons */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-view {
    background: #23145c;
    color: #ffffff;
}

.btn-view:hover {
    background: #d1c305;
}

.btn-book {
    background: #23145c;
    color: #fff;
}

.btn-book:hover {
    background: #d1c305;
}

/* Navigation Buttons */
.swiper-button-next, .swiper-button-prev {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.2);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    backdrop-filter: blur(5px);
}

.swiper-button-next:after, .swiper-button-prev:after {
    font-size: 18px !important;
    font-weight: bold;
}

/* Pagination Dots */
.swiper-pagination-bullet {
    background: #fff !important;
    opacity: 0.5;
}

.swiper-pagination-bullet-active {
    opacity: 1;
    background: #ff5722 !important;
    width: 20px;
    border-radius: 5px;
    transition: all 0.3s;
}
/* ==========================================
   ROBUST UNIFORM CARD STYLING (UI FIX)
   ========================================== */
.package-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    height: 100%; /* Injects equal height alignment across swiper container */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    text-decoration: none !important;
}

.package-card:hover {
    transform: translateY(-8px);
}

.package-img-box {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;;
    overflow: hidden;
    background-color: #fff; 
    padding: 6px; 
}

.package-img-box img {
    width: auto;
    height: auto;
    object-fit: cover; 
    display: block;
}


.package-card:hover .package-img-box img {
    transform: scale(1.08);
}

.package-body {
    padding: 15px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; 
    text-align: center;
}

/* Dynamic Multi-line text clamping prevents title breaking UI */
.package-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #222;
    line-height: 1.4;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;

    /* Strict Clamping to Max 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2.8em; 
}

.package-duration {
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 15px;
    font-weight: 500;
}

/* ==========================================
   UPDATED: 2 BUTTONS LAYOUT (View Detail & Book Now)
   ========================================== */
.package-btn-group {
    display: flex;
    gap: 8px; /* Space between buttons */
    margin-top: auto; /* Always pushes button group to the absolute bottom of the card */
    width: 100%;
}

.btn-view-detail,
.btn-book-now {
    flex: 1; /* Dono buttons strictly half-half width lenge */
    background-color: #040133; /* Deep Maroon matching your screenshot */
    color: #ffffff;
    text-align: center;
    padding: 8px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.btn-view-detail:hover,
.btn-book-now:hover {
    background-color: #6a1a1a; /* Darker tone on hover */
    color: #ffffff;
    text-decoration: none;
}

/* Touch Performance Layer for Mobile Devices */
@media (max-width: 768px) {
    .packages-section {
        background-attachment: scroll;
        padding: 40px 0;
    }
    .package-body {
        padding: 12px;
    }
    .package-title {
        font-size: 0.85rem;
    }
    .package-btn-group {
        gap: 5px;
    }
    .btn-view-detail,
    .btn-book-now {
        font-size: 0.75rem;
        padding: 6px 5px;
    }
}
/* ==========================================================================
   TESTIMONIAL SECTION - D FLY LOGO THEME (GOLD & DEEP NAVY BLUE)
   ========================================================================== */
    .testimonial-section {
        padding: 70px 0;
        width: 100%;
        overflow: hidden;
    }
    
    .testimonial-section .section-title {
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        color: #0E2340; /* D FLY Logo Deep Navy Blue */
        font-size: 2.5rem;
        text-align: center;
    }
    
    .testimonial-slider-container {
        padding: 30px 0;
    }
    
    /* ==========================================
       ROBUST FLEXBOX TESTIMONIAL CARD UI (FIXED)
       ========================================== */
    .testimonial-card {
        background: #ffffff;
        border: 1px solid rgba(223, 176, 67, 0.25);
        border-radius: 20px;
        padding: 30px 25px 25px 25px;
        position: relative;
        box-shadow: 0 12px 35px rgba(14, 35, 64, 0.04);
    
        /* Strict Height Alignment Layout */
        display: flex;
        flex-direction: column;
        height: 100%; 
        justify-content: space-between;
        transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    }
    
    .testimonial-card:hover {
        transform: translateY(-6px);
        border-color: #DFB043; /* Active D FLY Gold on hover */
        box-shadow: 0 20px 40px rgba(14, 35, 64, 0.09);
    }
    
    /* Header Meta Box */
    .client-meta-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 22px;
    }
    
    .client-info-details .client-name {
        font-size: 1.2rem;
        font-weight: 700;
        color: #0E2340; /* Deep Navy Blue */
        margin-bottom: 3px;
    }
    
    .client-info-details .client-location {
        font-size: 0.88rem;
        color: #666;
        font-weight: 500;
        letter-spacing: 0.5px;
    }
    
    /* Premium Rounded Profile Icon Boundary */
    .client-avatar-placeholder {
        width: 52px;
        height: 52px;
        border: 3px solid #DFB043; /* D FLY Logo Metallic Gold */
        background-color: #0E2340; /* Deep Navy Fill */
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.3s ease;
    }
    
    .testimonial-card:hover .client-avatar-placeholder {
        transform: rotate(15deg) scale(1.05);
    }
    
    .client-avatar-placeholder svg {
        width: 22px;
        height: 22px;
        fill: #DFB043; /* Gold vector icon fill */
    }
    
    /* ==========================================
       DESCRIPTION TEXT CLAMP MANAGEMENT (FIXED UI)
       ========================================== */
    .testimonial-text {
        font-size: 0.96rem;
        color: #3f4e64;
        line-height: 1.6;
        font-weight: 400;
        margin-bottom: 25px;
        flex-grow: 1;
    
        /* Strict Multi-line Clamping */
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    
        min-height: 1.8em;
    }
    
    /* ==========================================
       LOGO COHESIVE BASE CORNER COVERS
       ========================================== */
    .card-bottom-bar {
        margin-top: auto; /* Buttons aur badges ko strict absolute bottom alignment deta hai */
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        width: 100%;
    }
    
    /* Left side rating badge */
    .stars-badge {
        background: linear-gradient(135deg, #0E2340 0%, #1a3963 100%);
        color: #DFB043;
        padding: 7px 20px;
        border-radius: 0 16px 0 16px;
        margin-left: -25px; /* Flush alignments */
        margin-bottom: -25px;
        font-size: 0.85rem;
        letter-spacing: 1.5px;
        box-shadow: 3px -3px 10px rgba(0,0,0,0.05);
    }
    
    /* Right side decorative quote mark */
    .quote-icon-mark {
        color: rgba(223, 176, 67, 0.35); /* Soft transparent Gold mark */
        font-size: 3rem;
        font-family: 'Georgia', serif;
        line-height: 0;
        margin-bottom: -8px;
        user-select: none;
        font-weight: 900;
    }
    
    @media (max-width: 576px) {
        .testimonial-section {
            padding: 50px 0;
        }
        .testimonial-section .section-title {
            font-size: 1.95rem;
        }
        .testimonial-card {
            padding: 22px;
        }
        .stars-badge {
            margin-left: -22px;
            margin-bottom: -22px;
            padding: 6px 15px;
        }
        .testimonial-text {
            /* Mobile par 3 lines comfortable space hold karti hain */
            min-height: 1.2em;
        }
    }
    .swiper {
        margin-left: auto;
        margin-right: auto;
        position: relative;
        overflow: hidden;
        list-style: none;
        padding: 0;
        z-index: 1;
        display: block;
    }
    .swiper {
        width: 100%;
        padding: 5px 0 10px 0 !important;
    }
    .testimonial-slider-container {
        padding: 10px 0;
    }
/* ==========================================
    SPECIAL PACKAGES SECTION (FIXED UI)
   ========================================== */

   /* Heading Underline Style */
.custom-heading {
    display: inline-block;
    border-bottom: 2px solid #d48a44; /* Orange underline */
}

/* Card Styling */
.tour-card {
    border-radius: 4px; /* Image edges ko thoda smooth karne ke liye */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.tour-card img {
    height: auto; /* Sabhi cards ki height uniform rakhne ke liye */
    object-fit: cover;
    transition: transform 0.5s ease; /* Smooth zoom effect */
}

/* Bottom Title Bar (Teal color) */
.tour-title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(56, 142, 142, 0.85); /* Semi-transparent teal */
    color: #ffffff;
    text-align: center;
    padding: 12px 0;
    font-weight: 600;
    font-size: 1.1rem;
    z-index: 2;
    transition: bottom 0.3s ease;
}

/* Hover Overlay Background */
.tour-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Dark overlay */
    opacity: 0;
    z-index: 3;
    transition: opacity 0.3s ease;
}

/* Actions on Hover */
.tour-card:hover img {
    transform: scale(1.1); /* Image slightly zoom hogi */
}

.tour-card:hover .tour-overlay {
    opacity: 1; /* Overlay visible hoga */
}

.tour-card:hover .tour-title {
    bottom: -50px; /* Optional: Hover pe title hide karna ho toh */
}

/* =========================================
   LATEST BLOG SECTION COMPLETE STYLES
   ========================================= */

/* Main Section Wrapper */
.latest-blog-section {
    background-color: #ffffff;
    font-family: 'Poppins', 'Arial', sans-serif;
}

/* Header Styling */
.blog-section-title {
    font-size: 1.5rem;
    color: #333333;
    font-weight: 600;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Orange Divider below title */
.blog-title-divider {
    width: 40px;
    height: 2px;
    background-color: #dd9208;
    margin: 0 auto;
}

/* =========================================
   BLOG CARD STYLING
   ========================================= */
.blog-card {
    border: 1px solid #ebebeb;
    border-radius: 4px;
    background-color: #ffffff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding: 10px; /* Internal padding matching reference image */
}

/* Hover Movement & Shadow Effect */
.blog-card:hover {
    transform: translateY(-8px); /* Card moves upwards */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

/* Card Image */
.blog-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1; /* Keeps all images uniform in height/width ratio */
    object-fit: cover;
    border-radius: 2px;
}

/* Card Body (Text Area) */
.blog-card-body {
    padding: 15px 5px 5px 5px;
}

/* Blog Title Text */
.blog-title {
    font-size: 0.95rem;
    color: #222222;
    line-height: 1.4;
    font-weight: 500;
    margin: 0;
    transition: color 0.3s ease;
}

/* Title color changes to orange when hovered over the link */
a:hover .blog-title {
    color: #ffb310;
}

/* =========================================
   LOAD MORE BUTTON & JS HELPERS
   ========================================= */

/* Load More Button Styling */
.btn-load-more {
    background-color: #130a33;
    color: #ffffff;
    padding: 10px 30px;
    font-size: 0.95rem;
    font-weight: 600;
    border: 2px solid #f3d111;
    border-radius: 4px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Button Hover State */
.btn-load-more:hover {
    background-color: transparent;
    color: #f26b38;
}

/* Utility class used by JavaScript to hide extra cards initially */
.blog-item.d-none {
    display: none !important;
}

/* =========================================
    Category_details Page
   ========================================= */
    .page-banner {
        background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
                    url('/front/assets/images/backb.png') center/cover no-repeat;
        height: 350px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        text-align: center;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }
    
    .page-banner h1 {
        font-size: 3rem;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
    }
    
    /* Creative Content Section */
    .creative-content {
        background: white;
        padding: 40px 20px;
        margin-top: -30px;
        position: relative;
        border-radius: 10px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.05);
        text-align: center;
        margin-bottom: 40px;
        z-index: 10;
    }
    
    .creative-content h3 {
        color: var(--primary-color);
        font-weight: 600;
    }
    
    /* Left Side Form Wrapper */
    .form-sidebar {
        background: rgb(199, 213, 235);
        padding: 25px;
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.08);
        position: sticky;
        top: 20px;
        height: fit-content; /* YEH LINE FORM KO STRETCH HONE SE ROKEGI */
    }
    
    .form-sidebar h4 {
        border-bottom: 2px solid var(--primary-color, #0b5ed7);
        padding-bottom: 10px;
        margin-bottom: 20px;
        font-weight: 600;
    }
    
    /* Overriding form columns for sidebar layout */
    .form-sidebar .col-md-4,
    .form-sidebar .col-md-3,
    .form-sidebar .col-md-2,
    .form-sidebar .col-md-8,
    .form-sidebar .col-6 {
        width: 100% !important;
    }
    
    .submit-btn {
        background-color: var(--primary-color, #0b5ed7);
        color: white;
        font-weight: bold;
        border-radius: 50px;
        padding: 10px 30px;
        transition: all 0.3s ease;
        width: 100%;
    }
    
    .submit-btn:hover {
        background-color: #0043a8;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(11, 94, 215, 0.4);
    }
    
    /* --- Premium Package Cards Design --- */
    .package-card {
        border: none;
        border-radius: 12px;
        overflow: hidden;
        background: white;
        box-shadow: 0 10px 20px rgba(0,0,0,0.05);
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
        height: 100%;
        cursor: pointer;
    }
    
    /* Card image wrapper */
    .package-img-wrapper {
        position: relative;
        overflow: hidden;
        width: 100%;
    }
    
    .package-img {
        width: 100%;
        height: auto;
        aspect-ratio: 1/1;
        object-fit: cover;
        transition: transform 0.6s ease;
        display: block;
    }
    
    /* Card Body Smooth Transition */
    .package-card .card-body {
        transition: background-color 0.4s ease;
    }
    
    .card-title-hover {
        font-weight: 700;
        margin-bottom: 8px;
        font-size: 1.1rem;
        transition: color 0.4s ease;
        color: #333;
    }
    
    .card-text-hover {
        color: #4b4949;
        font-size: 0.9rem;
        font-weight: 500;
        transition: color 0.4s ease;
    }
    
    /* --- HOVER EFFECTS --- */
    .package-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 30px 50px rgba(40, 38, 153, 0.15);
    }
    
    /* Image zoom out effect on hover */
    .package-card:hover .package-img {
        transform: scale(1.1);
    }
    
    .package-card:hover .card-body {
        background-color: #aebcca;
    }
    
    .package-card:hover .card-title-hover {
        color: #111 ;
    }
    
    .package-card:hover .card-text-hover {
        color: #444 ;
    }
    
    .package-card:hover .card-text-hover i {
        color: #ffc107 ;
    }

/* =========================================
    darshan_details Page
   ========================================= */
/* Banner Section */
        .darshan-banner {
            position: relative;
            height: 400px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: white;
            text-align: center;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            overflow: hidden;
        }

        .banner-bg-img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 1;
        }

        .banner-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4));
            z-index: 2;
        }

        .banner-content {
            position: relative;
            z-index: 3;
        }

        .darshan-banner h1 {
            font-size: 3.5rem;
            font-weight: 800;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--gold-accent);
            text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
        }

        .premium-text {
            font-size: 1.2rem;
            font-weight: 500;
            margin-top: 10px;
            letter-spacing: 1px;
        }

        /* Luxury Intro Text */
        .luxury-intro {
            padding: 40px 20px;
            background: #fff;
            border-bottom: 2px solid #f0e6d2;
            box-shadow: 0 4px 15px rgba(0,0,0,0.03);
            border-radius: 10px;
        }

        .luxury-intro h2 {
            color: var(--primary-color);
            font-weight: 800;
            letter-spacing: 1px;
        }

        .luxury-intro p {
            font-size: 1.15rem;
            color: #555;
            max-width: 850px;
            margin: 0 auto;
            line-height: 1.8;
        }

        /* Darshan Vibes Section */
        .vibes-section {
            padding: 30px 20px;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
            height: 100%;
            border-left: 5px solid #feb000;
            position: sticky;
            top: 20px;
        }
        
        .vibes-section h3 {
            color: #feb000;
            font-weight: 700;
        }
        
        /* Package Card */
        .package-card {
            border: none;
            border-radius: 12px;
            overflow: hidden;
            background: #fff;
            box-shadow: 0 5px 15px rgba(0,0,0,0.08);
            transition: all .3s ease;
            display: flex;
            flex-direction: column;
            height: 100%;
        }
        
        .package-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(62,13,238,.15);
        }
        
        /* Image */
        .package-img-wrapper {
            position: relative;
            width: 100%;
            padding-top: 100%;
            background: #fff;
            overflow: hidden;
        }
        
        .package-img {
            position: absolute;
            inset: 0;
            width: 100% !important;
            height: 100% !important;
            object-fit: contain !important;
            padding: 15px;
            transition: transform .5s ease;
        }
        
        .package-card:hover .package-img {
            transform: scale(1.05);
        }
        
        /* Card Body */
        .card-body{
            padding:16px 18px;
            display:flex;
            flex-direction:column;
            flex-grow:1;
        }
        
        /* Title */
        .card-body h5{
            font-weight:700;
            color:#222;
            text-align:center;
            font-size:1.1rem;
            line-height:1.3;
            margin-bottom:4px;
        
            /* 2 line fix */
            height:2.6em;
        
            display:-webkit-box;
            -webkit-line-clamp:2;
            -webkit-box-orient:vertical;
            overflow:hidden;
        }
        
        /* Duration */
        .card-body p{
            margin-bottom:12px;
            text-align:center;
            color:#777;
            line-height:1.2;
        }
        
        /* Button */
        .btn-center{
            display:block;
            width:100%;
            margin-top:auto;
            background:#1d0b5e;
            color:#fff;
            border:none;
            border-radius:25px;
            padding:10px 15px;
            font-weight:600;
            text-align:center;
            transition:.3s;
        }
        
        .btn-center:hover {
            background: #feb000;
            color: #111;
        }
        
        /* View More Button */
        .view-more-btn {
            background: transparent;
            color: #3e0dee;
            border: 2px solid #3e0dee;
            padding: 10px 35px;
            border-radius: 30px;
            font-weight: 700;
            transition: .3s;
        }
        
        .view-more-btn:hover {
            background: #3e0dee;
            color: #fff;
        }

        /* Form Section */
        .form-section {
            background: rgb(189, 245, 255);
            padding: 40px;
            border-radius: 15px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.08);
            margin: 50px 0;
            border-top: 4px solid var(--primary-color);
        }
        .submit-btn {
            background-color: #3e0dee;
            color: white;
            font-weight: bold;
            border-radius: 50px;
            padding: 12px 40px;
            transition: all 0.3s ease;
        }
        .submit-btn:hover {
            background-color: #eed70d;
            transform: translateY(-2px);
        }

        /* Why Choose Us */
        .why-choose-card {
            text-align: center;
            padding: 30px 20px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
            height: 100%;
        }
        .why-choose-card:hover {
            background-color: var(--primary-color);
            color: white;
        }
        .why-choose-card i {
            font-size: 2.5rem;
            color: var(--gold-accent);
            margin-bottom: 15px;
        }
        .why-choose-card:hover i {
            color: white;
        }

        /* Tips Accordion Section */
        .accordion-button:not(.collapsed) {
            background-color: #fdf3e7;
            color: var(--primary-color);
            font-weight: bold;
        }
        .accordion-button:focus {
            box-shadow: none;
            border-color: rgba(211, 84, 0, 0.5);
        }

 /* =========================================
      package page
    ========================================= */

        .hero-banner {
            position: relative;
            background: url('https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') center/cover no-repeat;
            height: 60vh;
            min-height: 400px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        .hero-overlay {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.5);
        }
        .hero-content {
            position: relative;
            z-index: 1;
            color: #fff;
        }
        .hero-content h1 {
            font-size: 3.5rem;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
        }

        /* =========================================
           Premium Intro Content
           ========================================= */
        .premium-intro {
            padding: 60px 20px;
            text-align: center;
            max-width: 800px;
            margin: 0 auto;
        }
        .premium-intro h2 {
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 20px;
        }
        .premium-intro p {
            color: #666;
            font-size: 1.1rem;
            line-height: 1.8;
        }

        /* =========================================
           Package Cards Section
           ========================================= */
        /* Container */
            .container {
                max-width: 1200px;
                margin: 0 auto;
                padding: 20px;
            }

            /* -------------------------------------
            Responsive Grid Layout (3, 2, 1)
            -------------------------------------- */
            .card-grid {
                display: grid;
                grid-template-columns: repeat(3, 1fr); /* Desktop: Strictly 3 Cards */
                gap: 24px;
            }

            /* Tablet Screen: 2 Cards */
            @media (max-width: 992px) {
                .card-grid {
                    grid-template-columns: repeat(2, 1fr);
                }
            }

            /* Mobile Screen: 1 Card */
            @media (max-width: 576px) {
                .card-grid {
                    grid-template-columns: 1fr;
                }
            }

            /* -------------------------------------
            Card & Image Styling
            -------------------------------------- */
            .custom-card {
                background: #ffffff;
                border-radius: 12px;
                overflow: hidden;
                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
                display: flex;
                flex-direction: column;
                transition: transform 0.3s ease, box-shadow 0.3s ease;
            }

            .custom-card:hover {
                transform: translateY(-5px);
                box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
            }

            .img-wrapper {
                width: 100%;
                aspect-ratio: 1 / 1;
                background-color: #f0f0f0;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .img-wrapper img {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }

            /* -------------------------------------
            Card Content UI
            -------------------------------------- */
            .card-content {
                padding: 16px 20px;
                display: flex;
                flex-direction: column;
                text-align: left;
            }

            .card-title {
                font-size: 1.15rem;
                color: #333333;
                font-weight: 600;
                margin-bottom: 6px;
            }

            .card-duration {
                font-size: 0.9rem;
                font-weight: 500;
            }

            /* Default hide all cards after 6 */
            .custom-card.hidden-card{
                display: none;
            }

            /* View More Button */
            .view-more-wrapper {
                display: flex;
                justify-content: center;
                align-items: center;
                margin: 30px 0;
                width: 100%;
            }
            .view-more-btn {
                display: inline-block !important; /* force show */
                background: #21135d;
                color: #fff;
                border: none;
                padding: 12px 35px;
                border-radius: 8px;
                font-size: 16px;
                font-weight: 600;
                cursor: pointer;
                transition: .3s;
            }
            .view-more-btn:hover{
                background: #feb000;
            }

            @media (max-width:576px){
                .view-more-btn{
                    width: 220px;
                }

            }

            /* -------------------------------------
            Single Button Styling
            -------------------------------------- */
            .card-actions {
                width: 100%;
            }

            .action-btn {
                display: block;
                width: 100%; /* Ek button hai to full width me accha lagega */
                background-color: #21135d;
                color: #ffffff;
                text-align: center;
                padding: 10px 0;
                border-radius: 6px;
                font-size: 0.9rem;
                font-weight: 600;
                text-decoration: none;
                transition: background-color 0.2s ease;
            }

            .action-btn:hover {
                background-color: #feb000;
                color: #ffffff;
            }
        /* =========================================
           Customized Holiday Section
           ========================================= */
        .customized-section {
            background-color: #fff;
            padding: 80px 0;
            text-align: center;
            border-top: 1px solid #eee;
        }
        .customized-section h2 {
            font-weight: 700;
            margin-bottom: 50px;
            color: #333;
        }
        .step-icon-box {
            width: 100px;
            height: 100px;
            border: 1px solid #ffcccc;
            border-radius: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            transition: all 0.3s ease;
        }
        .step-icon-box i {
            font-size: 40px;
            color: #e60000;
        }
        .step-icon-box:hover {
            background-color: #fff5f5;
            transform: translateY(-5px);
        }
        .step-title {
            font-weight: 600;
            font-size: 1.1rem;
            margin-bottom: 10px;
        }
        .step-desc {
            color: #666;
            font-size: 0.9rem;
        }
        .btn-build-trip {
            background-color: #e60000;
            color: #fff;
            padding: 12px 40px;
            border-radius: 5px;
            font-size: 1.1rem;
            font-weight: 600;
            margin-top: 40px;
            border: none;
            transition: background 0.3s;
        }
        .btn-build-trip:hover {
            background-color: #cc0000;
            color: #fff;
        }

        /* =========================================
           FAQ Section
           ========================================= */
        .faq-section {
            padding: 80px 0;
            background-color: #fcfcfc;
        }
        .faq-title {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 600;
            font-size: 1.5rem;
            margin-bottom: 30px;
        }
        .faq-container {
            background: #fff;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.03);
        }
        .accordion-item {
            border: none;
            border-bottom: 1px solid #eaeaea;
            border-radius: 0 !important;
        }
        .accordion-button {
            font-weight: 500;
            color: #333;
            padding: 20px 0;
            background-color: transparent !important;
            box-shadow: none !important;
        }
        .accordion-button:not(.collapsed) {
            color: #000;
        }
        .accordion-body {
            padding: 0 0 20px 0;
            color: #666;
        }

/* =========================================
      package_details
   ========================================= */
/*==========================
Title Section
==========================*/

.rating-badge{
    background:#f8d42a;
    color:#000;
    padding:3px 8px;
    border-radius:5px;
    font-size:14px;
    font-weight:600;
}


/*==========================
Gallery Section
==========================*/

.gallery-container{
    min-height:420px;
}

.main-img-wrapper{
    width:100%;
    height:100%;
    overflow:hidden;
    border-radius:12px;
    position:relative;
}

.main-img-wrapper img{
    width:100%;
    height:100%;
    object-fit:cover;
    cursor:pointer;
    transition:.4s;
}

.main-img-wrapper:hover img{
    transform:scale(1.04);
}

.thumbnails-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    grid-template-rows:repeat(2,1fr);
    gap:10px;
    height:100%;
}

.thumb-item{
    position:relative;
    overflow:hidden;
    border-radius:12px;
}

.thumb-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    cursor:pointer;
    transition:.4s;
}

.thumb-item:hover img{
    transform:scale(1.08);
}

.see-all-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:18px;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}

.see-all-overlay:hover{
    background:rgba(0,0,0,.65);
}


/*==========================
Inclusion Icons
==========================*/

.inclusions-wrapper{
    margin:35px 0 25px;
    gap:20px;
}

.icon-item{
    width:85px;
    text-align:center;
    cursor:pointer;
    transition:.3s;
}

.icon-item:hover{
    transform:translateY(-5px);
}

.icon-circle{
    width:58px;
    height:58px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    margin:auto auto 8px;
    color:#fff;
    font-size:22px;
    box-shadow:0 5px 15px rgba(0,0,0,.12);
}

.icon-text{
    font-size:14px;
    font-weight:500;
    color:#444;
}

.bg-hotel{
    background:#ff007f;
}

.bg-meals{
    background:#ff7f50;
}

.bg-sightseeing{
    background:#8a2be2;
}

.bg-transfer{
    background:#f4c430;
}

.bg-manager{
    background:#da70d6;
}

.bg-highlights{
    background:#cd853f;
}

#inclusion-details{
    display:none;
    background:#f8f9fa;
    padding:15px;
    border-radius:8px;
    border-left:4px solid #ff007f;
    margin-bottom:35px;
}


/*==========================
Description Section
==========================*/

.description-section {
    margin-top: 40px;
    overflow-x: hidden; 
}

.description-section h3 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 25px;
}

.desc-text {
    width: 100%;
    word-break: break-word;
}

.desc-text * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.desc-text p {
    font-size: 16px;
    color: #555;
    line-height: 1.9;
    margin-bottom: 18px;
}

.desc-text h1, .desc-text h2, .desc-text h3, 
.desc-text h4, .desc-text h5, .desc-text h6 {
    margin: 25px 0 15px;
    font-weight: 700;
}

.desc-text ul, .desc-text ol {
    padding-left: 20px;
    margin-bottom: 20px;
}

.desc-text li {
    margin-bottom: 8px;
}

.desc-text table {
    width: 100% !important;
    display: block;
    overflow-x: auto; 
}

.desc-text iframe, .desc-text video {
    width: 100% !important;
    max-width: 100%;
}


.desc-text figure, .desc-text span, .desc-text div {
    max-width: 100% !important;
    width: auto !important; 
    height: auto !important;
    margin: 15px 0;
}

.desc-text img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    aspect-ratio: 3 / 2;
    display: block;
    margin: 20px auto;
    border-radius: 10px;
    object-fit: contain !important;
}


/*==========================
Related Packages
==========================*/

.related-section{
    background:#f8f9fa;
    padding:60px 0;
    margin-top:50px;
}

.related-section h3{
    font-size:30px;
    font-weight:700;
    margin-bottom:30px;
}

/* Card */
.package-card{
    background:#fff;
    border:1px solid #eee;
    border-radius:12px;
    overflow:hidden;
    height:100%;
    display:flex;
    flex-direction:column;
    transition:.3s ease;
    box-shadow:0 5px 15px rgba(0,0,0,.06);
}

.package-card:hover{
    transform:translateY(-5px);
    box-shadow:0 12px 25px rgba(0,0,0,.12);
}

/* Image Wrapper */
.package-img-wrapper{
    position:relative;
    width:100%;
    aspect-ratio:1/1;
    background:#fff;
    overflow:hidden;
}

/* Image */
.package-img{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:contain;
    padding:12px;
    transition:.4s ease;
}

.package-card:hover .package-img{
    transform:scale(1.05);
}

/* Card Body */
.package-card .card-body{
    padding:16px;
    display:flex;
    flex-direction:column;
    flex-grow:1;
}

/* Title */
.package-card .card-title{
    font-size:18px;
    font-weight:600;
    color:#222;
    text-align:center;
    line-height:1.35;
    margin-bottom:8px;

    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;

    min-height:48px;
}

/* Duration */
.package-duration{
    text-align:center;
    color:#666;
    font-size:15px;
    margin-top:auto;
    margin-bottom:0;
}

/* Swiper Buttons */
.swiper-button-next,
.swiper-button-prev{
    color:#333;
    transform:scale(.75);
}

.swiper-button-next::after,
.swiper-button-prev::after{
    font-size:24px;
}

/* Mobile */
@media (max-width:767px){

    .related-section{
        padding:40px 0;
    }

    .related-section h3{
        font-size:24px;
        margin-bottom:20px;
    }

    .package-card .card-body{
        padding:12px;
    }

    .package-card .card-title{
        font-size:16px;
        min-height:42px;
    }

    .package-duration{
        font-size:14px;
    }
}


/*==========================
Gallery Modal
==========================*/

.modal-carousel-img {
    width: 100%;
    max-height: 85vh;
    object-fit: contain !important;
    margin: 0 auto;
}

.btn-close-white {
    filter: invert(1) brightness(200%);
}


/*==========================
Tablet
==========================*/

@media(max-width:991px){

.gallery-container{
    min-height:auto;
}

.main-img-wrapper{
    height:320px;
    margin-bottom:12px;
}

.thumbnails-grid{
    height:auto;
    grid-template-columns:repeat(2,1fr);
    grid-template-rows:repeat(2,160px);
}

.related-section{
    padding:50px 0;
}

}


/*==========================
Mobile
==========================*/

@media(max-width:767px) {
    /* Page ko horizontally hilne se roke */
    body, html {
        overflow-x: hidden;
    }

    /* Modal padding remove kare taaki image full useable space le */
    #galleryModal .modal-body {
        padding: 0 !important; 
    }
    
    .modal-carousel-img {
        max-height: 70vh !important; /* Mobile controls ke liye space chhodne ke liye */
    }

    .package-title {
        font-size: 24px;
    }

    .gallery-container {
        min-height: auto;
    }

    .main-img-wrapper {
        height: 240px;
    }

    .thumbnails-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 110px);
        gap: 8px;
    }

    .icon-item {
        width: 70px;
    }

    .icon-circle {
        width: 50px;
        height: 50px;
        font-size: 18px;
    }

    .icon-text {
        font-size: 12px;
    }

    .description-section h3 {
        font-size: 24px;
    }

    .desc-text p {
        font-size: 15px;
        line-height: 1.8;
    }

    .related-section h3 {
        font-size: 24px;
    }

    .package-card img {
        height: 180px;
    }
}


/*==========================
Small Mobile
==========================*/

@media(max-width:480px){

.main-img-wrapper{
    height:220px;
}

.thumbnails-grid{
    grid-template-rows:repeat(2,100px);
}

.rating-badge{
    display:inline-block;
    margin-top:8px;
}

.package-card img{
    height:170px;
}

.desc-text img{
    border-radius:8px;
}

}


/* =========================================
    policy page
   ========================================= */

   .premium-hero {
            background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
            color: white;
            padding: 80px 0;
            margin-bottom: 50px;
            position: relative;
            overflow: hidden;
        }
        .premium-hero::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 20px;
            background: #f8f9fa;
            clip-path: polygon(0 100%, 100% 100%, 100% 0);
        }
        .policy-card {
            background: #ffffff;
            border: none;
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
            padding: 40px;
        }
        .toc-sticky {
            position: sticky;
            top: 40px;
        }
        .toc-link {
            display: block;
            padding: 10px 15px;
            color: #6c757d;
            text-decoration: none;
            border-left: 3px solid #dee2e6;
            transition: all 0.3s ease;
            font-weight: 500;
        }
        .toc-link:hover, .toc-link.active {
            color: #0d6efd;
            border-left-color: #0d6efd;
            background: rgba(13, 110, 253, 0.04);
            padding-left: 20px;
        }
        h2.section-title {
            color: #0f2027;
            font-weight: 600;
            margin-top: 30px;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #f1f3f5;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        h2.section-title i {
            color: #0d6efd;
        }
        p {
            line-height: 1.8;
            font-size: 0.95rem;
        }
        .last-updated {
            font-size: 0.85rem;
            color: #adb5bd;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        /* Full Responsiveness Adjustments */
        @media (max-width: 991.98px) {
            .toc-sticky {
                position: relative;
                top: 0;
                margin-bottom: 30px;
            }
            .policy-card {
                padding: 25px;
            }
            .premium-hero {
                padding: 60px 0;
            }
        }
        
/* =========================================
    contact page
   ========================================= */
.contact-banner {
    background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url('https://images.unsplash.com/photo-1524492412937-b28074a5d7da?auto=format&fit=crop&q=80&w=2000') center/cover;
    padding: 60px 0;
    text-align: center;
    border-bottom: 1px solid #e0e0e0;
}

.contact-banner h1 {
    font-weight: 700;
    color: #333;
}

.contact-banner p {
    color: #666;
    font-size: 1.1rem;
}

.map-container iframe {
    width: 100%;
    height: 400px;
    border: 0;
}

/* =========================================
   Contact Info Section (Cards)
   ========================================= */
.contact-info-section {
    background-color: #fafafa;
    padding: 60px 0;
}

.info-card {
    background-color: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    padding: 24px;
    display: flex;
    align-items: flex-start;
    height: 100%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
    transition: all 0.3s ease-in-out; /* Smooth transition for hover */
}

/* --- Hover Effects --- */
.info-card:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    border-color: #feb000 !important; /* Dark Blue border on hover */
    background-color: #f9f9fc !important; /* Light tint background on hover */
}

.info-card:hover .icon-circle {
    border-color: #feb000;
    color: #feb000; /* Icon color changes to Dark Blue on hover */
}

.icon-circle {
    width: 45px;
    height: 45px;
    background-color: transparent;
    color: #17185a; /* Default Maroon/Dark Red color */
    border: 1px solid #dcdcdc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin-right: 18px;
    flex-shrink: 0;
    transition: all 0.3s ease-in-out; /* Smooth icon transition */
}

/* --- Text Layout & Overflow Fixes --- */
.info-text {
    display: flex;
    flex-direction: column;
    flex: 1; /* Takes remaining space */
    min-width: 0; /* Prevents flexbox overflow */
}

.info-text .label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #888;
    font-weight: 600;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

.info-text p {
    margin: 0;
    color: #333;
    font-size: 0.95rem;
    line-height: 1.5;
    /* Force long text (emails/addresses) to wrap on small screens */
    word-wrap: break-word;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.info-text p strong,
.info-text p a.fw-bold {
    font-weight: 700;
    color: #111;
}

.info-text .sub-text {
    font-size: 0.8rem;
    color: #777;
    margin-top: 5px;
}

/* =========================================
   Mobile Responsiveness (Media Queries)
   ========================================= */
@media (max-width: 768px) {
    .contact-info-section {
        padding: 40px 0;
    }

    .info-card {
        padding: 16px 15px;
        align-items: center;
        margin-bottom: 15px; /* Spacing between stacked cards */
    }

    .icon-circle {
        width: 40px;
        height: 40px;
        margin-right: 12px;
        font-size: 1rem;
    }

    .info-text .label {
        font-size: 0.7rem;
        margin-bottom: 4px;
    }

    .info-text p {
        font-size: 0.85rem;
        line-height: 1.4;
    }

    .info-text .sub-text {
        font-size: 0.75rem;
    }
}

@media (max-width: 400px) {
    .info-card {
        padding: 12px 10px;
    }

    .icon-circle {
        margin-right: 10px;
    }

    .info-text p {
        font-size: 0.8rem;
    }
}

/* =========================================
    About Page Styling
   ========================================= */
      .small-title {
        color: var(--secondary-color);
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 2px;
        text-transform: uppercase;
    }
    
    .section-title {
        color: var(--primary-color);
        font-weight: 700;
        font-size: 2.5rem;
    }
    
    /* ========================================================
       Buttons
    ======================================================== */
    .btn-custom {
        padding: 12px 28px;
        font-weight: 500;
        border-radius: 50px;
        position: relative;
        overflow: hidden;
        transition: all .3s ease;
        z-index: 1;
    }
    
    .btn-primary-custom {
        background: var(--primary-color);
        color: var(--white);
        border: 2px solid var(--primary-color);
    }
    
    .btn-primary-custom:hover {
        background: var(--secondary-color);
        border-color: var(--secondary-color);
        color: var(--primary-color);
    }
    
    .btn-outline-custom {
        background: transparent;
        color: var(--primary-color);
        border: 2px solid var(--primary-color);
    }
    
    .btn-outline-custom:hover {
        background: var(--primary-color);
        color: var(--white);
    }
    
    /* Ripple Effect */
    .ripple{
        position:absolute;
        border-radius:50%;
        transform:scale(0);
        animation:ripple-animation .6s linear;
        background:rgba(255,255,255,.4);
    }
    
    @keyframes ripple-animation{
        to{
            transform:scale(4);
            opacity:0;
        }
    }
    
    /* ========================================================
       Page Header Banner
    ======================================================== */
    
    .page-header-banner{
        position:relative;
        height:420px;
        overflow:hidden;
        display:flex;
        align-items:center;
        justify-content:center;
        margin-bottom:20px;
    }
    
    /* Banner Image */
    
    .banner-image{
        position:absolute;
        inset:0;
        width:100%;
        height:100%;
        object-fit:cover;
    }
    
    
    /* Banner Content */
    
    .banner-content{
        position:relative;
        z-index:2;
    }
    
    .page-header-banner h1{
        color:#fff;
        font-weight:700;
    }
    
    .page-header-banner .tagline{
        color:var(--secondary-color);
        font-weight:500;
    }
    
    /* ========================================================
       Hero Section
    ======================================================== */
    
    .about-hero-section{
        padding:40px 0;
        background:#fff;
    }
    
    .main-heading{
        color:var(--primary-color);
        font-size:3.5rem;
        font-weight:700;
        line-height:1.2;
    }
    
    .hero-para{
        font-size:1.1rem;
        color:var(--text-muted);
    }
    
    .hero-image-wrapper{
        position:relative;
        overflow:hidden;
        border-radius:16px;
    }
    
    .about-hero-img{
        width:100%;
        height:420px;
        object-fit:cover;
    }
    
    .img-overlay{
        position:absolute;
        inset:0;
        background:linear-gradient(to right,
        rgba(29,11,94,.30),
        rgba(0,0,0,.10));
    }
    
    /* ========================================================
       About Company
    ======================================================== */
    
    .feature-card{
        border:1px solid rgba(0,0,0,.05);
        transition:.3s;
    }
    
    .feature-card:hover{
        transform:translateY(-5px);
    }
    
    .feature-icon{
        color:var(--secondary-color);
        font-size:1.5rem;
    }
    
    /* ========================================================
       Why Choose Us
    ======================================================== */
    
    .service-card{
        background:#fff;
        border:1px solid transparent;
        transition:.4s;
    }
    
    .service-card:hover{
        transform:translateY(-10px);
        box-shadow:0 1rem 3rem rgba(0,0,0,.1)!important;
        border-color:rgba(254,176,0,.3);
    }
    
    .icon-box{
        width:70px;
        height:70px;
        margin:auto;
        border-radius:50%;
        background:var(--light-gray);
        color:var(--primary-color);
        display:flex;
        justify-content:center;
        align-items:center;
        font-size:1.8rem;
        transition:.3s;
    }
    
    .service-card:hover .icon-box{
        background:var(--primary-color);
        color:var(--secondary-color);
    }
    
    /* ========================================================
       FAQ
    ======================================================== */
    
    .custom-accordion .accordion-button{
        background:#fff;
        color:var(--primary-color);
        padding:1.2rem 1.5rem;
        box-shadow:none!important;
    }
    
    .custom-accordion .accordion-button:not(.collapsed){
        background:rgba(254,176,0,.1);
        color:var(--primary-color);
        border-bottom:1px solid rgba(254,176,0,.2);
    }
    
    .custom-accordion .accordion-button::after{
        filter:invert(15%) sepia(26%) saturate(6320%)
        hue-rotate(242deg) brightness(87%) contrast(116%);
    }
    
    /* ========================================================
       Animation
    ======================================================== */
    
    .fade-up{
        opacity:0;
        transform:translateY(40px);
        transition:.8s;
    }
    
    .fade-up.visible{
        opacity:1;
        transform:translateY(0);
    }
    
    .zoom-in{
        opacity:0;
        transform:scale(.9);
        transition:.8s;
    }
    
    .zoom-in.visible{
        opacity:1;
        transform:scale(1);
    }
    
    /* ========================================================
       Responsive
    ======================================================== */
    
    @media(max-width:991px){
    
        .page-header-banner{
            height:340px;
        }
    
        .main-heading{
            font-size:2.8rem;
        }
    
        .section-title{
            font-size:2.2rem;
        }
    
        .about-hero-img{
            height:350px;
        }
    
    }
    
    @media(max-width:767px){
    
        .page-header-banner{
            height:260px;
        }
    
        .page-header-banner h1{
            font-size:2rem;
        }
    
        .page-header-banner .tagline{
            font-size:1rem!important;
        }
    
        .main-heading{
            font-size:2.2rem;
        }
    
        .section-title{
            font-size:1.8rem;
        }
    
        .about-hero-section{
            padding:60px 0;
            text-align:center;
        }
    
        .about-hero-img{
            height:250px;
        }
    
    }
    /* ===========================================
            Hero Buttons
    =========================================== */
        .about-hero-buttons{
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
        }

        .about-hero-buttons .btn-custom{
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 180px;
            padding: 14px 30px;
            border-radius: 50px;
            font-size: 16px;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.35s ease;
            border: 2px solid transparent;
            cursor: pointer;
        }

        /* Primary Button */
        .about-hero-buttons .btn-primary-custom{
            background: #0d6efd;
            color: #fff;
            border-color: #0d6efd;
        }

        .about-hero-buttons .btn-primary-custom:hover{
            background: #ffc107;
            border-color: #ffc107;
            color: #000;
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(255, 193, 7, 0.35);
        }

        /* Outline Button */
        .about-hero-buttons .btn-outline-custom{
            background: #0d6efd;
            color: #fff;
            border-color: #0d6efd;
        }

        .about-hero-buttons .btn-outline-custom:hover{
            background: #ffc107;
            border-color: #ffc107;
            color: #000;
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(255, 193, 7, 0.35);
        }

        /* Mobile Responsive */
        @media (max-width: 767px){

            .about-hero-buttons{
                flex-direction: column;
            }

            .about-hero-buttons .btn-custom{
                width: 100%;
            }

        }
/* =========================================
   Form Section Styling
   ========================================= */
.form-section {
    padding: 60px 0;
}

.form-wrapper {
    background: #fff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.section-title {
    font-weight: 700;
    color: #000000;
    margin-bottom: 10px;
}

.sweet-line {
    color: #666;
    margin-bottom: 30px;
    font-size: 1.05rem;
}

.btn-submit {
    background-color: #19093f;
    color: #fff;
    width: auto;
    padding: 10px 30px;
    border: none;
    border-radius: 4px;
    font-weight: 600;
    transition: 0.3s;
}

.btn-submit:hover {
    background-color: #feb000;
    color: #fff;
}

/* =========================================
   Bolgs Page
   ========================================= */
   .page-header {
    height: 220px;
    background: url('https://images.unsplash.com/photo-1436491865332-7a61a109cc05?auto=format&fit=crop&w=1920&q=80') center/cover no-repeat;
    position: relative;
    overflow: hidden;
}

.page-header .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(29, 11, 94, 0.7); /* Dark overlay using primary color */
}

/* Initial Load Animation */
.fade-up-load {
    animation: fadeUpOnLoad 1s ease-out forwards;
}

/* ====================================================
   SECTION 2: BLOG INTRODUCTION
==================================================== */
.blog-intro {
    background-color: var(--bg-white);
}

.intro-content {
    max-width: 850px;
    margin: 0 auto;
}

.small-title {
    color: var(--secondary-color);
    letter-spacing: 2px;
    font-size: 0.9rem;
}

.main-heading {
    color: rgb(22, 7, 56);
}

/* ====================================================
   SECTION 3: ENQUIRY CTA & BUTTON PULSE
==================================================== */
.enquiry-cta {
    background-color: var(--bg-light);
}

.btn-blog {
    background-color: blue;
    color: var(--bg-white);
    border-radius: 50rem; /* Pill shape */
    border: none;
    transition: var(--transition-smooth);
    animation: pulseGlow 2s infinite;
}

.btn-blog:hover {
    background-color: goldenrod;
    color: var(--text-color);
    transform: scale(1.05);
    /* Enhances the glow on hover */
    box-shadow: 0 0 25px rgba(254, 176, 0, 0.6) !important;
    animation: none; /* Stops blinking while interacting */
}

@keyframes pulseGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(29, 11, 94, 0.7);
    }
    70% {
        box-shadow: 0 0 0 20px rgba(29, 11, 94, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(29, 11, 94, 0);
    }
}

/* ====================================================
   SECTION 4: BLOG CARDS
==================================================== */
.blog-card {
    border-radius: 12px;
    overflow: hidden;
    transition: var(--transition-smooth);
    background-color: var(--bg-white);
}

.blog-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important;
}

/* Image Wrapper for 1:1 Aspect Ratio & Zoom */
.img-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: var(--bg-white);
    position: relative;
}

.img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Prevents cropping */
    transition: var(--transition-smooth);
}

.blog-card:hover .img-wrapper img {
    transform: scale(1.08); /* Image Zoom on hover */
}

.blog-card .card-title {
    color: black;
}

.read-more-btn {
    border-color: var(--primary-color);
    color: var(--primary-color);
    border-radius: 50rem;
    align-self: flex-start; /* Keeps button sized to text */
    transition: var(--transition-smooth);
}

.read-more-btn:hover {
    background-color: var(--primary-color);
    color: var(--bg-white);
}

/* ====================================================
   SECTION 5: PAGINATION
==================================================== */
.pagination-section {
    background-color: var(--bg-white);
}

.pagination .page-link {
    color: var(--primary-color);
    border-radius: 50%;
    margin: 0 5px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    font-weight: 500;
    transition: var(--transition-smooth);
}

.pagination .page-link:hover {
    background-color: rgba(29, 11, 94, 0.1);
    color: var(--primary-color);
}

.pagination .page-item.active .page-link {
    background-color: var(--primary-color);
    color: var(--bg-white);
    box-shadow: 0 4px 10px rgba(29, 11, 94, 0.3);
}

/* Format 'Previous' and 'Next' to not be circular */
.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link {
    border-radius: 20px;
    width: auto;
    padding: 0 20px;
}

/* ====================================================
   ANIMATION CLASSES (Triggered by JS)
==================================================== */
.animate-on-scroll {
    opacity: 0;
    visibility: hidden;
}

.fade-up {
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.zoom-in {
    transform: scale(0.9);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Class added via IntersectionObserver */
.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

@keyframes fadeUpOnLoad {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ====================================================
    Blog_details Page
   ==================================================== */
   .blog-page-banner {
    height: 220px;
    background: url('https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') center/cover no-repeat;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    }
    .blog-page-banner::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
    }
    .blog-page-banner-content {
        position: relative;
        z-index: 2;
        text-align: center;
        color: #ffffff;
    }
    .blog-detail-title {
        font-size: 2.2rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
        color: hwb(217 43% 50%);
    }
    .breadcrumb-item a { color: rgb(12, 10, 158); transition: 0.3s; }
    .breadcrumb-item a:hover { color: #ffffff; }
    .breadcrumb-item.active { color: #fcfcfc; }
    .breadcrumb-item + .breadcrumb-item::before { color: #000000; }
    
    /* =========================================
       SECTION 2: BLOG INFO BOX
       ========================================= */
    .info-box-card {
        background: var(--bg-color);
        border-radius: 12px;
        padding: 1.5rem;
        margin-top: -30px; /* Slight overlap with banner */
        position: relative;
        z-index: 3;
    }
    .info-box-grid {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
    }
    .info-item {
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 500;
        color: var(--primary-color);
    }
    .info-item i { color: var(--secondary-color); font-size: 1.2rem; }
    
    /* Responsive Rules for Info Box */
    @media (max-width: 991px) {
        .info-box-grid { display: grid; grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 767px) {
        .info-box-grid { grid-template-columns: 1fr; }
    }
    
    /* =========================================
       SECTION 3: FEATURE IMAGE
       ========================================= */
    .feature-image-wrapper {
        background: var(--bg-color);
        border-radius: 16px;
        padding: 10px;
        text-align: center;
    }
    .feature-image-wrapper img {
        width: 100%;
        max-height: 500px;
        object-fit: contain; /* NEVER CROPS */
        border-radius: 12px;
    }
    
    /* =========================================
       SECTION 4: SHORT DESCRIPTION
       ========================================= */
    .overview-card {
        background: var(--light-bg);
        border-left: 5px solid var(--secondary-color);
        padding: 2rem;
        border-radius: 8px;
    }
    .overview-heading {
        color: var(--primary-color);
        font-weight: 700;
        margin-bottom: 1rem;
        font-size: 1.5rem;
    }
    .overview-text {
        line-height: 1.9;
        font-size: 18px;
    }
    @media (max-width: 767px) {
        .overview-text { font-size: 16px; }
    }
    
    /* =========================================
       SECTION 5: BLOG CONTENT (CKEditor)
       ========================================= */
    .ckeditor-content {
        line-height: 1.8;
        font-size: 1.1rem;
        color: #444;
    }
    .ckeditor-content h2, .ckeditor-content h3, .ckeditor-content h4 {
        color: var(--primary-color);
        font-weight: 700;
        margin-top: 2rem;
        margin-bottom: 1rem;
    }
    .ckeditor-content p { margin-bottom: 1.5rem; }
    .ckeditor-content a {
        color: var(--primary-color);
        text-decoration: underline;
        text-decoration-color: var(--secondary-color);
        text-decoration-thickness: 2px;
    }
    .ckeditor-content ul, .ckeditor-content ol { margin-bottom: 1.5rem; padding-left: 1.5rem; }
    .ckeditor-content li { margin-bottom: 0.5rem; }
    .ckeditor-content blockquote {
        background: var(--light-bg);
        border-left: 4px solid var(--primary-color);
        padding: 1.5rem;
        font-style: italic;
        margin: 2rem 0;
        border-radius: 0 8px 8px 0;
    }
    /* CKEditor Images/Videos Strict Rules */
    .ckeditor-content img, .ckeditor-content video, .ckeditor-content iframe {
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important; /* NEVER CROPS */
        display: block !important;
        margin: 2rem auto !important;
        border-radius: 8px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }
    .ckeditor-content .table { margin-top: 1.5rem; margin-bottom: 1.5rem; }
    
    /* =========================================
       SECTION 6: SHARE SECTION
       ========================================= */
    .share-section h5 { color: var(--primary-color); font-weight: 600; }
    .share-btn {
        width: 45px;
        height: 45px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        color: #fff;
        font-size: 1.2rem;
        transition: all 0.3s ease;
        border: none;
        cursor: pointer;
    }
    .share-btn:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.2); color: #fff; }
    .btn-facebook { background: #1877F2; }
    .btn-instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
    .btn-whatsapp { background: #25D366; }
    .btn-copy { background: #6c757d; }
    
    
    
    
    .related-title { color: var(--primary-color); font-weight: 600; font-size: 1.1rem; }
    .related-desc { font-size: 0.9rem; color: #666; margin-bottom: 1rem; }
    .read-more-btn {
        color: var(--secondary-color);
        font-weight: 600;
        transition: 0.3s;
    }
    .read-more-btn i { transition: transform 0.3s; }
    .read-more-btn:hover { color: var(--primary-color); }
    .read-more-btn:hover i { transform: translateX(5px); }
    
    /* =========================================
       SECTION 9: ENQUIRE NOW CTA & ANIMATIONS
       ========================================= */
    .cta-section { background: var(--primary-color); color: #fff; }
    .cta-heading { font-weight: 700; color: var(--secondary-color); }
    
    /* Continuous Pulse Glow Animation */
    @keyframes pulseGlow {
        0% { box-shadow: 0 0 0 0 rgba(254, 176, 0, 0.7); }
        70% { box-shadow: 0 0 0 15px rgba(254, 176, 0, 0); }
        100% { box-shadow: 0 0 0 0 rgba(254, 176, 0, 0); }
    }
    .btn-enquire {
        background: var(--secondary-color);
        color: var(--primary-color);
        font-weight: 800;
        padding: 12px 35px;
        border-radius: 30px;
        font-size: 1.1rem;
        border: none;
        transition: all 0.3s ease;
    }
    .btn-pulse-glow { animation: pulseGlow 2s infinite; }
    .btn-pulse-glow:hover {
        background: #e59e00;
        color: var(--primary-color);
        transform: scale(1.05);
        box-shadow: 0 8px 25px rgba(254, 176, 0, 0.6);
    }
    
    /* =========================================
       SCROLL ANIMATIONS (Triggered by JS)
       ========================================= */
    .animate-fade-up, .animate-zoom-in, .animate-slide-up {
        opacity: 0;
        visibility: hidden;
        will-change: transform, opacity;
    }
    .animate-fade-up { transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; }
    .animate-zoom-in { transform: scale(0.95); transition: opacity 0.8s ease, transform 0.8s ease; }
    .animate-slide-up { transform: translateY(50px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.25, 1, 0.5, 1); }
    
    /* When element is in view */
    .in-view { opacity: 1; visibility: visible; transform: none; }
    
    
    .hero-banner {
        position: relative;
        /* Travel background image */
        background: linear-gradient(rgba(0, 25, 77, 0.8), rgba(0, 25, 77, 0.6)), url('https://images.unsplash.com/photo-1436491865332-7a61a109cc05?q=80&w=2000&auto=format&fit=crop') center/cover no-repeat;
        height: 40vh;
        min-height: 300px;
        margin-bottom: 2rem;
    }
    
    .hero-content {
        animation: fadeInDown 1s ease;
    }
    
    /* =========================================
       Cards Design
    ========================================= */
    .intro-card, .term-card, .contact-card {
        background-color: #ffffff;
        border-radius: 16px;
        box-shadow: var(--dfly-card-shadow);
        transition: var(--dfly-transition);
    }
    
    .term-card:hover, .contact-card:hover {
        transform: translateY(-8px);
        box-shadow: var(--dfly-hover-shadow);
    }
    
    /* Custom Underline for Section Title */
    .section-title {
        color: var(--dfly-dark-blue);
        position: relative;
        display: inline-block;
        padding-bottom: 10px;
    }
    
    .section-title::after {
        content: '';
        position: absolute;
        width: 50px;
        height: 3px;
        background-color: var(--dfly-orange);
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 2px;
    }
    
    /* Icons */
    .icon-wrapper {
        width: 50px;
        height: 50px;
        border-radius: 12px;
        background-color: rgba(239, 127, 26, 0.1);
        color: var(--dfly-orange);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        transition: var(--dfly-transition);
    }
    
    .term-card:hover .icon-wrapper {
        background-color: var(--dfly-orange);
        color: #ffffff;
    }
    
    .card-title {
        color: var(--dfly-dark-blue);
        margin-bottom: 1rem;
    }
    
    /* Custom List Style */
    .custom-list {
        padding-left: 1.2rem;
        margin-bottom: 0;
    }
    
    .custom-list li {
        margin-bottom: 0.5rem;
        position: relative;
        list-style: none;
    }
    
    .custom-list li::before {
        content: "\f0da";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        position: absolute;
        left: -1.2rem;
        color: var(--dfly-orange);
    }
    
    /* =========================================
       Buttons & Animations
    ========================================= */
    
    /* Pulse Button */
    .btn-pulse {
        background-color: var(--dfly-dark-blue);
        color: #ffffff;
        border-radius: 30px;
        padding: 10px 25px;
        font-weight: 500;
        border: 2px solid var(--dfly-dark-blue);
        transition: var(--dfly-transition);
        display: inline-block;
        animation: pulse-animation 2s infinite;
        text-decoration: none;
    }
    
    .btn-pulse:hover {
        background-color: var(--dfly-orange);
        border-color: var(--dfly-orange);
        color: #ffffff;
        animation: none;
    }
    
    @keyframes pulse-animation {
        0% { box-shadow: 0 0 0 0 rgba(239, 127, 26, 0.7); }
        70% { box-shadow: 0 0 0 12px rgba(239, 127, 26, 0); }
        100% { box-shadow: 0 0 0 0 rgba(239, 127, 26, 0); }
    }
    
    /* Primary Contact Button */
    .btn-primary-custom {
        background-color: var(--dfly-dark-blue);
        color: #fff;
        border-radius: 30px;
        font-weight: 500;
        transition: var(--dfly-transition);
        border: 2px solid var(--dfly-dark-blue);
    }
    
    .btn-primary-custom:hover {
        background-color: var(--dfly-orange);
        border-color: var(--dfly-orange);
        color: #fff;
    }
    
    /* Outline Contact Button */
    .btn-outline-custom {
        color: var(--dfly-dark-blue);
        border: 2px solid var(--dfly-dark-blue);
        background: transparent;
        border-radius: 30px;
        font-weight: 500;
        transition: var(--dfly-transition);
    }
    
    .btn-outline-custom:hover {
        background-color: var(--dfly-dark-blue);
        color: #fff;
    }
    
    /* Orange CTA Button */
    .btn-orange {
        background-color: var(--dfly-orange);
        color: #fff;
        border: 2px solid var(--dfly-orange);
        border-radius: 30px;
        font-weight: 500;
        transition: var(--dfly-transition);
    }
    
    .btn-orange:hover {
        background-color: #fff;
        color: var(--dfly-orange);
    }
    
    /* White Outline CTA Button */
    .btn-outline-light {
        border-radius: 30px;
        font-weight: 500;
    }
    
    /* =========================================
       Contact Details & Bottom CTA Section
    ========================================= */
    .contact-card {
        border-top: 5px solid var(--dfly-orange);
    }
    
    .brand-color {
        color: var(--dfly-dark-blue);
    }
    
    .text-orange {
        color: var(--dfly-orange);
    }
    
    .contact-item {
        font-size: 1.05rem;
        color: #555;
    }
    
    /* CTA Section using simple class */
    .cta-section {
        background-color: var(--dfly-dark-blue);
        color: #ffffff;
        position: relative;
        margin-top: 2rem;
    }
    
    /* Fade In Animation */
    @keyframes fadeInDown {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }


/* =========================================
   DFLY RESPONSIVE PREMIUM FOOTER
   ========================================= */

.dfly-footer {
    position: relative;
    /* Historical background image ka link yahan daalein */
    background-image: url('https://images.unsplash.com/photo-1599661046289-e31897846e41?q=80&w=1920&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Parallax effect */
    color: #b0c0d0;
    padding-top: 45px; /* Reduced height */
    font-family: 'Poppins', sans-serif;
}

/* Overlay to darken historical image so text is visible */
.footer-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Dark Navy/Black gradient overlay */
    background: linear-gradient(180deg, rgba(66, 73, 85, 0.92) 0%, rgba(0,0,0,0.98) 100%);
    z-index: 1;
}

.footer-content {
    z-index: 2;
}

/* Gold Theme Custom Class */
.text-gold {
    color: #d4af37 !important;
}

/* Logo & Desc */
.footer-logo {
    max-height: 65px; /* Reduced height for compactness */
    filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.5));
}

.footer-desc {
    font-size: 0.85rem;
    line-height: 1.6;
    color: #cfd8e3;
}

/* Footer Titles */
.footer-title {
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 0;
    position: relative;
}

/* Contact Us Specific UI (Matching image_7d2c88.png) */
.contact-info li {
    align-items: flex-start;
}

.contact-icon {
    color: #8c9cb0; /* Subtle grey/blue icon color like screenshot */
    font-size: 1rem;
    width: 20px;
    margin-right: 15px;
    text-align: center;
}

.contact-text {
    color: #b0c0d0;
    text-decoration: none;
    font-size: 0.9rem;
    line-height: 1.5;
    transition: color 0.3s ease;
}

a.contact-text:hover {
    color: #d4af37;
}

/* Standard Links */
.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: #9baac2;
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    display: inline-block;
}

.footer-links a:hover {
    color: #d4af37;
    transform: translateX(3px);
}

/* Divider */
.footer-divider {
    border-color: rgba(255, 255, 255, 0.1);
    margin: 15px 0;
}

/* Bottom Bar Links */
.bottom-links a {
    color: #9baac2;
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.3s ease;
}

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

/* =========================================
   ORIGINAL SOCIAL MEDIA ICONS
   ========================================= */
.social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #ffffff;
    font-size: 1.1rem;
    margin: 0 6px;
    transition: all 0.3s ease;
    text-decoration: none;
}

/* Original Brand Background Colors */
.social-fb { background-color: #1877F2; }
.social-tw { background-color: #1DA1F2; } /* Or black (#000) for X */
.social-in { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.social-li { background-color: #0A66C2; }

.social-icons a:hover {
    transform: translateY(-4px);
    opacity: 0.85;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

.copyright-text {
    font-size: 0.85rem;
    color: #6a7b94;
    margin-top: 10px;
}

/* Responsive Adjustments */
@media (max-width: 991px) {
    .footer-title {
        margin-top: 20px;
        margin-bottom: 10px;
    }
    .footer-desc {
        margin-bottom: 20px;
    }
}

@media (max-width: 767px) {
    .footer-brand-col, .contact-col, .footer-title, .footer-links {
        text-align: center;
    }
    .contact-info li {
        justify-content: center;
        text-align: left; /* Text remains readable */
    }
}