@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');


html {
    scroll-behavior: smooth;
}

.top-bar {
    top: 0;
    left: 0;
    height: 45px;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1040;
    background: #373737;
    font-family: "Nunito Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    color: white;
}

    .top-bar .container-fluid {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .top-bar a,
    .top-bar span {
        transition: color 0.3s ease, transform 0.3s ease;
    }

    .top-bar > .container-fluid > .row > div:first-child > span {
        cursor: pointer;
        display: inline-block;
    }

        .top-bar > .container-fluid > .row > div:first-child > span:hover {
            color: white;
        }

    .top-bar i {
        color: white;
    }




.social-icon-link {
    position: relative;
    display: inline-block;
    padding: 5px;
    text-decoration: none;
}

    .social-icon-link .badge {
        font-size: 0.65rem;
        padding: 0.35em 0.5em;
        top: 5px !important;
        left: 85% !important;
    }

.social-icons .social-icon-link {
    color: white;
    margin-left: 15px;
    font-size: 1.1rem;
    text-decoration: none;
    display: inline-block;
    transition: color 0.3s ease, transform 0.3s ease;
}

    .social-icons .social-icon-link:hover {
        color: white;
        transform: scale(1.2) rotate(5deg);
    }

@media (min-width: 992px) {
    .dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0;
    }
}

/* Update Logo and Nav Styling */
.main-logo {
    height: 60px; /* Smaller, cleaner logo height */
    width: auto;
    transition: all 0.3s ease;
}


.custom-navbar {
    font-family: "Nunito Sans", sans-serif;
    position: absolute !important; /* Move it out of the normal flow */
    width: 100%;
    top: 45px; /* Height of your top-bar */
    left: 0;
    z-index: 1050;
    background-color: transparent !important; /* Start transparent */
    transition: all 0.4s ease;
}

    .custom-navbar:hover {
        background-color: black !important;
        border-bottom: solid 1px white !important;
    }

    .custom-navbar .nav-link,
    .custom-navbar .nav-icon-link {
        color: #ffffff !important;
        text-transform: capitalize !important;
    }

/* When the user scrolls, make it solid (matches your JS logic) */
.navbar-scrolled {
    position: fixed !important;
    top: 0 !important;
    background-color: black !important;
    border-bottom: solid 1px white !important;
}

    .navbar-scrolled .nav-link,
    .navbar-scrolled .nav-icon-link {
        color: #ffffff !important;
    }

    .navbar-scrolled .main-logo {
        height: 60px; /* Shrink logo slightly on scroll */
    }


.navbar-nav .nav-link {
    font-size: 13px; /* Jaisa aapne kaha, font thoda sa chhota kiya (14px se 13px) */
    letter-spacing: 1px;
    padding: 10px 18px !important; /* ASLI FIX: 30px ki jagah 14px padding kar di */
    transition: color 0.3s;
    font-family: "Nunito Sans", sans-serif;
    position: relative;
}

    .navbar-nav .nav-link::after {
        content: '';
        position: absolute;
        height: 1.5px !important;
        bottom: 2px;
        left: 14px; /* Padding ke hisaab se isko bhi 30px se 14px kar diya */
        right: 14px; /* Taaki hover par red line exactly text ke neeche aaye */
        background-color: #c16452;
        transform: scaleX(0);
        transform-origin: bottom right;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }



    .navbar-nav .nav-link:hover::after {
        transform: scaleX(1);
        transform-origin: bottom left;
    }

.navbar-scrolled .nav-link::after {
    background-color: #333333; /* Jab navbar white ho jaye, tab underline dark dikhegi */
}

.navbar-nav .nav-link:hover {
    color: #c16452 !important; /* Gold/Bronze accent color similar to premium sites */
}

/* Icons on the right */
.nav-icon-link {
    color: #333;
    font-size: 1.2rem;
    margin-left: 20px;
    margin-right: 20px;
    text-decoration: none;
    position: relative;
}

.cart-badge {
    position: absolute;
    top: -8px;
    right: -10px;
    background: #333;
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 50%;
}

.navbar-nav .dropdown-menu {
    background-color: #1a1a1a; /* Dark premium background to match your black navbar */
    border: 1px solid #2a2a2a; /* Very subtle inner border */
    border-top: 2px solid #c16452; /* Top accent border using your peach/gold color */
    border-radius: 0px; /* Sharp corners for a modern luxury feel */
    padding: 12px 0;
    margin-top: 0;
    min-width: 220px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
}

/* Base styling for the links inside the dropdown */
.navbar-nav .dropdown-item {
    color: #c2c2c2 !important; /* Soft muted grey text */
    font-family: "Nunito Sans", sans-serif;
    font-size: 14px;
    letter-spacing: 1px;
    padding: 10px 25px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: transparent !important;
    position: relative;
    display: flex;
    align-items: center;
}

    /* Hover effects for the links */
    .navbar-nav .dropdown-item:hover {
        color: #fff !important; /* Brighten text on hover */
        padding-left: 32px; /* Smooth slide-right effect */
        background-color: rgba(255, 255, 255, 0.03) !important; /* Very subtle highlight */
    }

    /* Creates a small premium dot indicator on hover */
    .navbar-nav .dropdown-item::before {
        content: '';
        position: absolute;
        left: 18px;
        width: 5px;
        height: 5px;
        background-color: #c16452;
        border-radius: 50%;
        opacity: 0;
        transform: scale(0);
        transition: all 0.3s ease;
    }

    .navbar-nav .dropdown-item:hover::before {
        opacity: 1;
        transform: scale(1);
    }

/* --- Inner Pages Navbar Fix --- */
.inner-navbar {
    background-color: #000000 !important; /* Solid black background so white text shows */
    position: relative !important; /* Stops the navbar from overlapping the page content */
    top: 0 !important;
    border-bottom: 1px solid #333 !important; /* Subtle premium border */
}

    /* Ensures the sticky scroll effect still works smoothly on inner pages */
    .inner-navbar.navbar-scrolled {
        position: fixed !important;
        top: 0 !important;
        width: 100%;
    }

/* Carousel Refinement */
.carousel-item {
    height: 85vh; /* Sets a standard premium height, not full screen */
    background: #000;
}

.main-carousel-img {
    height: 100%;
    object-fit: cover; /* Ensures images don't stretch unnaturally */
    opacity: 0.85; /* Slight dimming for text readability */
}

.carousel-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.4));
}

.carousel-caption {
    bottom: 30% !important; /* Centers the text better */
    z-index: 10;
}

    .carousel-caption h1 {
        font-family: 'Playfair Display', serif; /* Use a serif font for a luxury feel */
        letter-spacing: 2px;
    }

/* Custom Outlined Button to match Jainson */
.btn-outline-light {
    border: 2px solid #fff;
    letter-spacing: 2px;
    font-size: 14px;
    transition: all 0.4s ease;
}

    .btn-outline-light:hover {
        background-color: #fff;
        color: #000;
        transform: translateY(-3px);
    }

/* Indicators Styling */
.carousel-indicators [data-bs-target] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin: 0 8px;
    background-color: #fff;
}

/* --- Collections Grid Styling --- */

.custom-jainsons-container {
    max-width: 1150px !important; /* चौड़ाई को लिमिट किया है ताकि लेफ्ट-राइट गैप मिले */
    margin: 0 auto;
}

.collection-card {
    display: block;
    height: 450px; /* ऊँचाई थोड़ी कम की गई है ताकि प्रीमियम लगे */
    width: 100%; /* 90% को 100% किया गया है ताकि बीच का फालतू गैप खत्म हो जाए */
    border-radius: 0px;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    background-size: cover;
    background-position: center;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    border: none; /* बॉर्डर हटा दिया गया है क्लीन लुक के लिए */
}

    .collection-card::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 40%;
        background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
        z-index: 1;
        transition: all 0.4s ease;
    }

    /* Hover Effect: Image Zoom */
    .collection-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.15);
    }

/* Overlay: Move to bottom and make it white/light */
.card-overlay {
    position: absolute;
    bottom: 30px; /* Jainsons की तरह नीचे सेट किया गया है */
    left: 0;
    right: 0;
    background-color: transparent; /* सफेद बैकग्राउंड हटा दिया */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 15px;
    transition: all 0.4s ease;
    border: none; /* कार्ड का बॉर्डर भी हटा दिया */
    z-index: 2; /* टेक्स्ट को ग्रेडिएंट के ऊपर रखने के लिए */
}

.collection-card:hover .card-overlay {
    background-color: transparent;
    border-color: transparent;
}

.card-title {
    color: #fff; /* टेक्स्ट को हमेशा सफेद रखा है */
    font-size: 1.3rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px; /* Jainsons जैसा स्पेसिंग */
    text-align: center;
    margin-bottom: 0;
    transition: all 0.4s ease;
    font-family: "Nunito Sans", sans-serif;
    position: relative;
    padding-bottom: 8px; /* अंडरलाइन के लिए जगह */
}

    /* Jainsons स्टाइल वाली पतली अंडरलाइन */
    .card-title::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 30px;
        height: 1px;
        background-color: #fff;
        transition: width 0.3s ease;
    }

/* होवर करने पर अंडरलाइन थोड़ी बड़ी होगी (Premium touch) */
.collection-card:hover .card-title::after {
    width: 50px;
}

.collection-card:hover .card-title {
    color: #fff;
}

.card-subtitle {
    display: none; /* Jainson style mein subtitle usually cards par nahi hota, clean rakhte hain */
}

/* Responsive adjustment */
@media (max-width: 768px) {
    .collection-card {
        height: 300px;
    }
}


/* --- New Arrivals --- */

.new-arrivals-section {
    background-color: #faf9f8; /* प्रीमियम लाइट वॉर्म-ग्रे (Alabaster) बैकग्राउंड */
    border-top: 1px solid #eee; /* ऊपर एक हल्की सी लाइन सेक्शन को अलग करने के लिए */
}

/* Header Styles */
.section-title-premium {
    font-size: 26px;
    color: #222;
    letter-spacing: 0.5px;
}

.view-all-link-centered {
    color: #e2a8a1; /* Jainsons peach/pink color */
    text-decoration: none;
    font-size: 11px;
    letter-spacing: 1.5px;
    border-bottom: 1px solid #e2a8a1;
    padding-bottom: 2px;
    transition: all 0.3s;
}

    .view-all-link-centered:hover {
        color: #c16452;
        border-bottom-color: #c16452;
    }

/* Image Wrapper & Uniform Size */
.product-img-wrapper {
    overflow: hidden;
    background-color: #f8f8f8;
}

.main-img {
    aspect-ratio: 3/4; /* यह सबसे ज़रूरी है! इससे सभी इमेजेज एक साइज़ की लंबी (portrait) दिखेंगी */
    object-fit: cover; /* इमेज स्ट्रेच नहीं होगी, कटकर फिट हो जाएगी */
    display: block;
    transition: transform 0.5s ease;
}

.product-card-premium {
    background-color: #ffffff; /* कार्ड को प्योर वाइट रखें ताकि वो बैकग्राउंड पर चमके */
    padding-bottom: 15px; /* टेक्स्ट के नीचे थोड़ी सांस लेने की जगह */
    transition: all 0.4s ease;
}

    .product-card-premium:hover {
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04); /* होवर पर एक बहुत ही सॉफ्ट प्रीमियम शैडो */
        transform: translateY(-5px); /* कार्ड हल्का सा ऊपर उठेगा */
    }

        .product-card-premium:hover .main-img {
            transform: scale(1.03); /* हल्का सा ज़ूम इफ़ेक्ट */
        }

/* Badge 'New in' */
.badge-new-in {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: #e2a8a1; /* Soft pink */
    color: #fff;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 500;
    z-index: 2;
    letter-spacing: 0.5px;
}

/* Typography (Left Aligned & Muted) */
.product-name {
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #777 !important; /* हल्का ग्रे */
}

.product-price-premium {
    font-size: 14px;
    color: #777;
    font-weight: 400;
}

/* --- Scroll Arrows & Container --- */

.btn-scroll-arrow {
    background: none;
    border: none;
    font-size: 18px; /* Jainsons जैसे पतले और छोटे ऐरो */
    color: #333;
    cursor: pointer;
    padding: 5px 10px;
    transition: color 0.3s;
}

    .btn-scroll-arrow:hover {
        color: #e2a8a1;
    }

.product-scroll-wrapper {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 30px; /* गैप को 35px से 30px किया है ताकि इमेजेज़ को फैलने की जगह मिले */
    padding-bottom: 20px;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
    
}

    .product-scroll-wrapper::-webkit-scrollbar {
        display: none;
    }

/* Jainsons की तरह स्लिम कार्ड्स के लिए चौड़ाई को 15%-16% कर दिया है */
.scroll-item {
    /* 16% से बढ़ाकर 22% कर दिया है। 
       इससे एक बार में 4.5 इमेजेज़ दिखेंगी, जो एकदम Jainsons जैसा लुक देगा */
    flex: 0 0 calc(18% - 30px);
    max-width: calc(18% - 30px);
}

.product-img-wrapper {
    overflow: hidden;
    background-color: #f8f8f8;
    width: 100%;
    height: 400px;
}

.main-img {
    width: 100%;
    aspect-ratio: 3/4; /* यह सबसे ज़रूरी है: ये इमेज को अपने आप परफेक्ट लंबी (Portrait) शेप में रखेगा */
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .scroll-item {
        flex: 0 0 calc(33.333% - 14px);
        max-width: calc(33.333% - 14px);
    }
}

@media (max-width: 768px) {
    .scroll-item {
        flex: 0 0 calc(50% - 10px);
        max-width: calc(50% - 10px);
    }
}

@media (max-width: 576px) {
    .scroll-item {
        flex: 0 0 80%;
        max-width: 80%;
    }
    /* मोबाइल पर थोड़ा बड़ा दिखेगा */
}

/* --- Jainsons Style Best Sellers Collage --- */
.bestseller-jainsons-grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr; /* 3 कॉलम्स: बीच वाला दोगुना चौड़ा */
    grid-template-rows: 1fr 1fr; /* 2 रोज़ (Rows) */
    gap: 15px;
    height: 150vh; /* डेस्कटॉप पर एक शानदार प्रीमियम हाइट */
}

.bestseller-grid-item {
    position: relative;
    display: block;
    overflow: hidden;
    text-decoration: none;
    background-color: #000; /* इमेज लोड होने से पहले प्रीमियम ब्लैक दिखेगा */
}

    .bestseller-grid-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.85; /* हल्की डार्कनेस ताकि टेक्स्ट उभर कर दिखे */
        transition: transform 0.7s ease, opacity 0.4s ease;
    }

    .bestseller-grid-item:hover img {
        transform: scale(1.05);
        opacity: 1; /* होवर करने पर इमेज ब्राइट हो जाएगी */
    }

    /* 🎯 The Magic: तीसरी इमेज को अपने आप बीच में दोनों रोज़ (rows) कवर करने दें */
    .bestseller-grid-item:nth-child(3) {
        grid-column: 2; /* इसे बीच वाले कॉलम में लाएं */
        grid-row: 1 / span 2; /* ऊपर से नीचे तक दोनों रोज़ कवर करें */
    }

/* Overlay Text Styling */
.bestseller-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    height: 50%; /* नीचे से डार्क शेड ऊपर जाएगा */
}

.bestseller-title {
    color: #fff;
    font-weight: 400;
    font-size: 18px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

/* बीच वाली बड़ी इमेज का टेक्स्ट भी थोड़ा बड़ा रहेगा */
.bestseller-grid-item:nth-child(3) .bestseller-title {
    font-size: 32px;
    letter-spacing: 2px;
}

.bestseller-explore {
    color: #ccc;
    font-size: 11px;
    letter-spacing: 2px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 2px;
    transition: all 0.3s;
}

.bestseller-grid-item:hover .bestseller-explore {
    color: #fff;
    border-bottom-color: #fff;
}

/* Responsive (Mobile & Tablet) */
@media (max-width: 992px) {
    .bestseller-jainsons-grid {
        grid-template-columns: 1fr 1fr;
        height: auto;
        grid-auto-rows: 300px;
    }

    .bestseller-grid-item:nth-child(3) {
        grid-column: 1 / span 2; /* टैबलेट पर सेंटर इमेज फुल-विड्थ हो जाएगी */
        grid-row: span 1;
    }
}

@media (max-width: 576px) {
    .bestseller-jainsons-grid {
        grid-template-columns: 1fr;
    }

    .bestseller-grid-item:nth-child(3) {
        grid-column: span 1;
    }
}

/* --- Service Banner (Dark Luxury Style) --- */

.service-banner-dark {
    background-color: #1a1a1a; /* एकदम गहरा और प्रीमियम डार्क ग्रे/ब्लैक */
    color: #ffffff;
    border-top: 2px solid #e2a8a1; /* ऊपर एक पतली सी एक्सेंट लाइन */
    margin-top: 20px;
}

.service-box-dark {
    padding: 30px 15px;
    text-align: center;
    transition: transform 0.4s ease;
}

    /* Hover Effect: हल्का सा ऊपर उठेगा */
    .service-box-dark:hover {
        transform: translateY(-5px);
    }

.service-icon-dark {
    font-size: 32px; /* आइकन्स थोड़े बड़े और साफ़ दिखेंगे */
    color: #e2a8a1; /* आपके Jainsons थीम वाला Peach/Gold कलर */
    margin-bottom: 18px;
    display: inline-block;
    transition: color 0.3s ease, transform 0.3s ease;
}

.service-box-dark:hover .service-icon-dark {
    color: #c16452; /* होवर पर कलर थोड़ा डार्क होगा */
    transform: scale(1.1);
}

.service-title-dark {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px; /* टेक्स्ट के बीच थोड़ा गैप प्रीमियम लगता है */
    text-transform: uppercase;
    margin: 0;
    font-family: "Nunito Sans", sans-serif;
    color: #e0e0e0;
}

/* 🎯 The Magic: Desktop पर वर्टिकल लाइन्स (Separators) */
@media (min-width: 768px) {
    .service-banner-dark .col {
        border-right: 1px solid rgba(255, 255, 255, 0.1);
    }

        .service-banner-dark .col:last-child {
            border-right: none; /* आखिरी वाले में लाइन नहीं चाहिए */
        }
}

/* Mobile & Tablet (2x2 Grid) पर बॉर्डर्स सेट करना */
@media (max-width: 767px) {
    .service-banner-dark .col:nth-child(1),
    .service-banner-dark .col:nth-child(2) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* ऊपर वाले दो के नीचे लाइन */
    }

    .service-banner-dark .col:nth-child(odd) {
        border-right: 1px solid rgba(255, 255, 255, 0.1); /* लेफ्ट वाले दो के राइट में लाइन */
    }
}

/* --- Premium Testimonial Section --- */

.reviews-section {
    border-top: 1px solid #eee; /* सेक्शन को अलग करने के लिए हल्की सी लाइन */
}

.testimonial-content {
    max-width: 800px; /* टेक्स्ट को बहुत ज़्यादा फैलने से रोकेगा */
    padding: 0 40px;
}

.ratings-premium i {
    color: #c16452; /* लग्ज़री थीम के हिसाब से डार्क पीच/गोल्ड कलर */
    font-size: 14px;
    margin: 0 2px;
}

.review-text-premium {
    font-family: 'Playfair Display', serif; /* लग्ज़री फील के लिए Serif फॉन्ट */
    font-size: 22px;
    font-style: italic;
    font-weight: 400;
    color: #444;
    line-height: 1.6;
}

.customer-name-premium {
    font-family: "Nunito Sans", sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #111;
}

.customer-location-premium {
    font-size: 12px;
    color: #888;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Custom Carousel Buttons */
.custom-carousel-btn {
    width: 5%;
    opacity: 0.5;
    transition: opacity 0.3s;
}

    .custom-carousel-btn:hover {
        opacity: 1;
    }

    .custom-carousel-btn i {
        color: #333; /* ब्लैक एरोज़ (Arrows) */
        font-size: 24px;
    }

/* Mobile Responsive */
@media (max-width: 768px) {
    .review-text-premium {
        font-size: 18px;
    }

    .testimonial-content {
        padding: 0 20px;
    }

    .custom-carousel-btn {
        display: none; /* मोबाइल पर स्वाइप से काम चल जाएगा, एरोज़ हटा दें ताकि क्लीन दिखे */
    }
}

#testimonialCarousel .carousel-item {
    height: auto; /* मेन स्लाइडर की 85vh हाइट को हटाएगा */
    background: transparent; /* ब्लैक बैकग्राउंड को हटाकर वाइट/ट्रांसपेरेंट करेगा */
    padding: 30px 0; /* टेक्स्ट को थोड़ी साँस लेने की जगह देगा */
}

/* --- Luxury Flexbox Accordion Banner --- */

.wow-accordion-banner {
    width: 100%;
    height: 70vh; /* एक अच्छी फुल-विड्थ हाइट */
    margin: 50px 0;
    overflow: hidden;
}

.accordion-gallery {
    display: flex;
    width: 100%;
    height: 100%;
}

.accordion-item {
    flex: 1; /* शुरुआत में तीनों इमेजेज बराबर जगह लेंगी */
    background-size: cover;
    background-position: center;
    transition: flex 0.7s cubic-bezier(0.25, 1, 0.5, 1); /* बेहद स्मूद एनीमेशन */
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

    /* होवर करने पर यह 3 गुना ज़्यादा चौड़ा हो जाएगा */
    .accordion-item:hover {
        flex: 3;
    }

/* Overlay and Text Hidden Initially */
.accordion-overlay {
    position: absolute;
    bottom: -50px; /* टेक्स्ट को नीचे छिपा कर रखा है */
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 40px;
    opacity: 0;
    transition: all 0.6s ease;
}

/* होवर करने पर टेक्स्ट ऊपर आएगा और दिखेगा */
.accordion-item:hover .accordion-overlay {
    bottom: 0;
    opacity: 1;
}

.accordion-title {
    color: #fff;
    font-family: 'Playfair Display', serif;
    letter-spacing: 2px;
    font-size: 32px;
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: center;
}

.accordion-link {
    color: #e2a8a1;
    text-decoration: none;
    font-size: 12px;
    letter-spacing: 3px;
    border-bottom: 1px solid #e2a8a1;
    padding-bottom: 3px;
    transition: color 0.3s;
}

    .accordion-link:hover {
        color: #fff;
        border-color: #fff;
    }

/* Mobile Responsive: मोबाइल पर इसे नॉर्मल स्टैक में बदल देंगे ताकि UI न टूटे */
@media (max-width: 768px) {
    .accordion-gallery {
        flex-direction: column;
    }

    .wow-accordion-banner {
        height: 100vh;
    }

    .accordion-item:hover {
        flex: 2; /* मोबाइल पर ज़्यादा बड़ा नहीं करेंगे */
    }

    .accordion-overlay {
        opacity: 1;
        bottom: 0;
        background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    }

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

/* --- Premium Luxury Footer --- */
.premium-footer {
    background-color: #0a0a0a; /* एकदम डीप ब्लैक, 100% ब्लैक नहीं */
    color: #999;
    font-family: "Nunito Sans", sans-serif;
}

.footer-logo-premium {
    font-family: 'Playfair Display', serif;
    color: #fff;
    letter-spacing: 3px;
    font-size: 24px;
    text-transform: uppercase;
}

.footer-text-muted {
    font-size: 14px;
    line-height: 1.8;
    color: #888;
    text-align: justify;
}

/* Social Icons */
.footer-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #1a1a1a;
    color: #fff;
    border-radius: 50%;
    margin-right: 10px;
    transition: all 0.3s ease;
    text-decoration: none;
}

    .footer-socials a:hover {
        background: #c16452; /* आपका Peach/Gold एक्सेंट कलर */
        transform: translateY(-3px); /* होवर पर आइकन ऊपर उठेगा */
    }

/* Headings */
.footer-heading {
    color: #fff;
    font-size: 15px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 600;
    position: relative;
    padding-bottom: 10px;
}

    .footer-heading::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 30px;
        height: 2px;
        background-color: #c16452; /* हेडिंग के नीचे एक छोटी सी कलरफुल लाइन */
    }

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

.footer-links a {
    color: #888;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;
    display: inline-block;
}

    .footer-links a:hover {
        color: #e2a8a1;
        transform: translateX(5px); /* होवर पर लिंक हल्का सा राइट स्लाइड होगा */
    }

/* Contact Info */
.footer-contact-info li {
    font-size: 14px;
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
    color: #888;
}

.footer-contact-info i {
    color: #c16452;
    margin-top: 4px;
    margin-right: 12px;
    font-size: 14px;
}

/* Copyright Area */
.border-top-dark {
    border-top: 1px solid #1f1f1f;
}

.footer-bottom p {
    font-size: 13px;
    color: #666;
    letter-spacing: 0.5px;
}

.credit-link {
    color: #aaa;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s;
}

    .credit-link:hover {
        color: #fff;
    }

/* --- Mission Focus Box Styling --- */
.mission-focus-box {
    background-color: #1a1a1a; /* Premium dark background */
    border-top: 3px solid #c16452; /* Your peach/gold accent color */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); /* Soft floating shadow */
    height: 100%; /* Ensures it looks balanced */
}

/* --- Shoppable Video Section (Whatmore Style) --- */

.video-scroll-wrapper {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 20px;
    padding-bottom: 25px;
    scroll-behavior: smooth;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

    .video-scroll-wrapper::-webkit-scrollbar {
        display: none; /* Hide scrollbar */
    }

/* Desktop par 5 video cards dikhenge */
.video-item {
    flex: 0 0 calc(20% - 20px);
    max-width: calc(20% - 20px);
}

.video-card {
    position: relative;
    width: 100%;
    aspect-ratio: 9/16; /* Ye isko exactly Instagram Reels / Shorts jaisa lamba banayega */
    border-radius: 12px; /* Smooth rounded corners */
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    background-color: #000;
}

.video-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.video-card:hover .video-thumbnail {
    transform: scale(1.05); /* Hover par हल्का zoom */
    opacity: 1;
}

/* Play Button Overlay */
.play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.85); /* Semi-transparent white */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c16452; /* Aapka theme color */
    font-size: 18px;
    z-index: 2;
    padding-left: 4px; /* Icon ko center karne ke liye */
    transition: all 0.3s ease;
}

.video-card:hover .play-overlay {
    background-color: #c16452;
    color: #fff;
    transform: translate(-50%, -50%) scale(1.1);
}

/* Text and Button at the bottom */
.video-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px 15px 15px;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    z-index: 2;
    text-align: center;
}

.video-title {
    color: #fff;
    font-family: "Nunito Sans", sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.shop-now-btn {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    border: 1px solid #fff;
    padding: 5px 15px;
    font-size: 11px;
    letter-spacing: 1px;
    text-decoration: none;
    border-radius: 20px;
    transition: all 0.3s ease;
}

    .shop-now-btn:hover {
        background-color: #fff;
        color: #000;
    }

/* Mobile Responsive */
@media (max-width: 992px) {
    .video-item {
        flex: 0 0 calc(33.33% - 15px);
        max-width: calc(33.33% - 15px);
    }
}

@media (max-width: 576px) {
    .video-item {
        flex: 0 0 calc(50% - 10px); /* Mobile par 2 cards per view */
        max-width: calc(50% - 10px);
    }
}

/* jtStyle.css - Fixed horizontal Watch & Buy section */

.watch-buy-horizontal-container {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 15px; /* Cards ke beech ka gap thoda kam kar diya */
    padding-bottom: 25px;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

    .watch-buy-horizontal-container::-webkit-scrollbar {
        display: none;
    }

.watch-buy-card {
    flex: 0 0 160px; /* 🔥 Width kam kar ke 160px ki hai */
    max-width: 160px;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    background-color: #fff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.card-visual {
    position: relative;
    width: 100%;
    /* 🔥 Height badhane ke liye ratio 9:16 kar diya hai (Instagram reels jaisa lamba look) */
    padding-top: 177%;
    background-color: #f8f8f8;
}

/* Images wrapper in card-visual */
.watch-buy-img-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

    /* Common style for all images inside card-visual */
    .watch-buy-img-wrapper img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    /* Sirf main thumbnail show ho baaki chhup jayein */
    .watch-buy-img-wrapper .product-thumbnail {
        opacity: 1;
    }

    /* Purana style agar conflict kare toh force hide */
    .watch-buy-img-wrapper .hidden-img {
        opacity: 0 !important;
    }

    /* Jab JS active karega tabs opacity change hogi */
    .watch-buy-img-wrapper img.active {
        opacity: 1 !important;
    }

/* Eye Icon Overlay - remains the same, adjusted for narrow width */
.watch-buy-overlay {
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: rgba(255, 255, 255, 0.9);
    color: #000;
    padding: 3px 8px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px; /* Font thoda chhota smaller width ke liye */
    font-weight: 600;
    z-index: 10;
    width: max-content;
    white-space: nowrap;
}

.eye-icon {
    margin-right: 4px;
    color: #c16452;
    font-size: 11px;
}

.card-details {
    padding: 10px 8px;
}

.product-title {
    margin: 0;
    font-size: 13px; /* Title thoda chhota */
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Our Stores Section Styling --- */
.our-stores-section {
    background-color: #faf9f8; /* Soft alabaster background jaisa New Arrivals mein hai */
    border-top: 1px solid #eee;
    font-family: "Nunito Sans", sans-serif;
}

.store-card {
    background-color: #ffffff;
    padding: 35px 20px;
    border-radius: 4px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.02);
    transition: all 0.4s ease;
    height: 100%;
    border: 1px solid transparent;
}

    /* Hover Effect: Card halka sa uthega aur border highlight hoga */
    .store-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.06);
        border-color: #e2a8a1; /* Peach/Gold highlight */
    }

.store-icon {
    font-size: 36px;
    color: #c16452; /* Primary theme color */
    transition: transform 0.3s ease;
}

.store-card:hover .store-icon {
    transform: scale(1.15) rotate(5deg); /* Icon halka sa pop hoga */
}

.store-city {
    font-family: "Nunito Sans", sans-serif; /* Luxury serif font */
    font-size: 18px;
    font-weight: 600;
    color: #222;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.store-address {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 18px;
    font-family: "Nunito Sans", sans-serif;
}

.store-contact {
    font-size: 14px;
    color: #333;
    font-weight: 700;
    margin: 0;
    letter-spacing: 0.5px;
}

    .store-contact i {
        color: #c16452;
    }