:root {
            --brand-primary: #000;
            --brand-accent: #d4af37; /* Gold */
            
            /* Updated Dimensions */
            --sidebar-width-desktop: 280px; 
            --sidebar-width-mobile: 100%;
            
            --header-height-desktop: 140px;
            --header-height-mobile: 100px;
        }

        body {
            font-family: 'Montserrat', sans-serif;
            overflow-x: hidden;
            margin: 0;
            padding: 0;
            background-color: white;
        }

        /* --- 1. HEADER OVERLAY --- */
        .header-overlay-wrapper {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1050;
            /* background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0) 100%); */
            padding-top: 25px;
            padding-bottom: 25px;
            color: white;
            pointer-events: none; 
        }

        .header-overlay-wrapper .container {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: var(--header-height-desktop);
            pointer-events: auto;
        }

        .header-logo {
            text-align: center;
            flex: 1;
        }
        
        /* --- FIX: Constrain Logo Width to prevent Sidebar Overlap --- */
        .header-logo img {
            max-height: 90px;
            width: auto; 
            /* max-width: 350px;  */
            object-fit: contain;
        }
        @media(max-width:1280px){
            .header-logo img{
                width: 85%;
                margin-top: -95px;
                margin-left:48px;
            }
        }

        /* @media(max-width:767px){
            .header-log img{
            margin-top: -61px;
            margin-left: 54px;
            }
        } */
        .py-5{
            /* padding-top: 9rem !important; */
            /* padding-bottom: 0rem !important; */
        }
        .mobile-logo { display: none; }
        
        @media (max-width: 768px) {
            .header-overlay-wrapper .container {
                min-height: var(--header-height-mobile);
            }
            .laptop-logo { display: none; }
            .mobile-logo { 
                display: block; 
                max-height: 50px; 
                width: auto;
                padding-top: 34px;
                padding-left: 12px; }
        }

        /* ---------------------------------------------------------
           2. HEADER TOGGLE BUTTON (Static - Hamburger)
           --------------------------------------------------------- */
        
        #menuToggle {
            position: fixed;
            top: 70px;
            left: 30px;
            
            z-index: 9999; 
            
            background: rgba(0, 0, 0, 0.6); 
            border: 1px solid rgba(212, 175, 55, 0.8); 
            color: white;
            width: 50px;
            height: 42px;
            
            display: flex;
            align-items: center;
            justify-content: center;
            transition: opacity 0.3s ease, background 0.3s ease, border 0.3s ease;
            pointer-events: auto;
            box-shadow: 0 2px 10px rgba(0,0,0,0.3);
            
            /* Default State: Visible */
            opacity: 1;
        }

        #menuToggle:hover {
            background: var(--brand-accent);
            color: #000;
            border-color: #fff;
        }

        /* Hide Header Toggle when Sidebar is Open */
        body.sidebar-open #menuToggle {
            opacity: 0;             
            pointer-events: none;  
        }

        /* Mobile adjustments for Header Toggle */
        @media(max-width: 768px) {
            #menuToggle {
                left: 15px;
                top: 20px;
            }
        }

        /* ---------------------------------------------------------
           3. SIDEBAR CONTAINER
           --------------------------------------------------------- */
        
        .custom-sidebar {
            position: fixed;
            top: 0;
            left: 0;
            width: var(--sidebar-width-desktop);
            height: 100vh; 
            
            background-color: #121212; 
            border-right: 1px solid rgba(212, 175, 55, 0.1); 
            
            z-index: 1060; 
            transform: translateX(-120%); /* Hidden initially */
            transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1); 
            box-shadow: 10px 0 40px rgba(0,0,0,0.5);
            
            display: flex;
            flex-direction: column;
            overflow-y: auto;
        }

        /* Backdrop */
        .sidebar-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.6);
            z-index: 1035;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.4s ease;
            backdrop-filter: blur(4px);
        }

        /* ACTIVE STATES */
        body.sidebar-open .custom-sidebar {
            transform: translateX(0);
        }
        
        body.sidebar-open .sidebar-backdrop {
            opacity:1;
            pointer-events: auto;
        }

        /* Mobile Sidebar Width */
        @media (max-width: 768px) {
            .custom-sidebar {
                width: var(--sidebar-width-mobile);
            }
        }

        /* ---------------------------------------------------------
           4. SIDEBAR CLOSE BUTTON (The "X" inside sidebar)
           --------------------------------------------------------- */
        
        .sidebar-close-btn {
            position: absolute;
            top: 20px;
            right: 20px;
            
            background-color: var(--brand-accent);
            color: #000;
            border: none;
            
            width: 40px;
            height: 40px;
            border-radius: 50%; 
            
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 1070; 
            transition: all 0.3s ease;
        }

        .sidebar-close-btn:hover {
            background-color: #fff;
            transform: rotate(90deg);
        }

        /* --- Sidebar Content Styling --- */
        .sidebar-content {
            padding: 5rem 0 2rem 0; 
            display: flex;
            flex-direction: column;
            height: 100%;
            justify-content: space-between; 
        }

        .sidebar-content::before {
            content: '';
            display: block;
            width: 40px;
            height: 3px;
            background-color: var(--brand-accent);
            margin: 0 auto 2rem auto;
        }

        .sidebar-nav { list-style: none; padding: 0; margin: 0; text-align: center; }
        .sidebar-nav li { display: block; border-bottom:1px solid rgba(255,255,255,0.05); }
        .sidebar-nav li:last-child { border-bottom: none; }
        .sidebar-nav-link {
            display: block; padding: 1.2rem 1rem; color: #e0e0e0;
            text-transform: uppercase; font-size: 0.95rem; letter-spacing: 2px;
            text-decoration: none; position: relative; transition: all 0.3s ease;
        }
        .sidebar-nav-link:hover {
            color: var(--brand-accent); background-color: rgba(255,255,255,0.02);
            letter-spacing: 3px;
        }
        .sidebar-footer {
            margin-top: auto; padding: 2rem 1rem 1rem 1rem; text-align: center;
            border-top: 1px solid rgba(255, 255, 255, 0.05); background-color: #121212;
        }
        .sidebar-footer-logo {
            /* max-height: 50px;*/ width: 100%; 
            filter: brightness(0) invert(1); transition: opacity 0.3s ease, transform 0.3s ease;
        }
        .sidebar-footer-logo:hover { opacity: 1; transform: scale(1.05); }

/* carousel */

 #home {
            position: relative; 
        }

        .carousel-item {
            height: 100vh; 
            min-height: 600px;
        }

        .carousel-item img {
            object-fit: cover;
            height: 100%;
            filter: brightness(0.8);
        }

        .carousel-caption {
            bottom: 30%;
        }

        .display-2 {
            font-family: 'Playfair Display', serif;
        }

        .btn-custom {
            background-color: var(--brand-primary);
            color: #fff;
            padding: 12px 30px;
            text-transform: uppercase;
            letter-spacing: 1px;
            border: 2px solid var(--brand-primary);
        }
        
        .btn-custom:hover {
            background-color: transparent;
            color: #fff;
        }

/* about */

 /* --- 6. ABOUT PAGE SPECIFIC STYLES --- */
        .about-section {
            padding-top: 160px; /* Account for header height */
            padding-bottom: 80px;
        }
        .about-image {
            /* border-radius: 8px; */
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            overflow: hidden;
            margin-top: 30px;
        }
        .about-image img {
            width: 100%;
            height: auto;
            transition: transform 0.5s ease;
        }
        /* .about-image:hover img {
            transform: scale(1.05);
        } */
        .section-title {
            font-family: 'Playfair Display', serif;
            color: #333;
            font-weight: 700;
        }

        /* Timeline Styles */
        .timeline {
            position: relative;
            padding: 20px 0;
            margin: 60px 0;
        }
        .timeline::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            width: 2px;
            height: 100%;
            background: var(--brand-accent); /* Changed to Gold */
            transform: translateX(-50%);
        }
        .timeline-item {
            position: relative;
            margin-bottom: 40px;
        }
        .timeline-content {
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            width: 45%;
        }
        .timeline-item:nth-child(odd) .timeline-content {
            margin-left: auto;
        }
        .timeline-date {
            position: absolute;
            top: 0;
            width: 100%;
            text-align: center;
            font-weight: 600;
            color: var(--brand-accent); /* Gold */
        }
        .timeline-item:nth-child(odd) .timeline-date {
            left: 0;
        }
        .timeline-item:nth-child(even) .timeline-date {
            right: 0;
        }

        /* Value Cards */
        .value-card {
            background: #fff;
            border-radius: 8px;
            padding: 30px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            height: 100%;
            transition: transform 0.3s ease;
            border-bottom: 3px solid transparent;
        }
        .value-card:hover {
            transform: translateY(-10px);
            border-bottom: 3px solid var(--brand-accent);
        }
        .value-icon {
            font-size: 2.5rem;
            color: var(--brand-accent); /* Gold */
            margin-bottom: 20px;
        }

        /* Mobile Adjustments */
        @media (max-width: 991px) {
            .about-section { padding-top: 120px; }
        }
        
        @media (max-width: 768px) {
            .timeline::before {
                left: 30px;
            }
            .timeline-content {
                width: calc(100% - 60px);
                margin-left: 60px !important;
            }
            .timeline-date {
                left: 30px !important;
                text-align: left !important;
                width: auto !important;
            }
        }
 @media (max-width: 768px) {
            .page-title { font-size: 2.5rem; }
            .timeline::before { left: 20px; }
            .timeline-content { width: calc(100% - 50px); margin-left: 50px !important; }
            .timeline-content::before { left: -10px !important; right: auto !important; border-width: 10px 10px 10px 0 !important; }
            .timeline-item:nth-child(odd) .timeline-date, .timeline-item:nth-child(even) .timeline-date {
                text-align: left !important; left: 0 !important; right: auto !important; position: relative; margin-bottom: 10px; top: 0;
            }
        }



         /* -----------------------------------------------------------
           3. NEW PROFESSIONAL PAGE HEADER (Breadcrumbs)
           ----------------------------------------------------------- */
        .page-header {
            position: relative;
            background-image: url("/images/men.webp");
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            /* padding: 120px 0 80px; */
            /* margin-bottom: -26%; */
            color: #fff;
            padding-top: 159px;
            /* bottom: 11%; */
            margin-top: 146px;
        }
@media(max-width:767px){
    .page-header{
        padding: 210px 0 50px;
    }
}
        /* Dark overlay for text readability */
        .page-header::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0, 0, 0, 0.65); 
        }

        .page-header .container {
            position: relative;
            z-index: 2;
            margin-top: -69px;
        }

        .page-title {
            font-family: 'Playfair Display', serif;
            font-size: 3.5rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            letter-spacing: 1px;
            margin-top: -40px;
        }

        /* Breadcrumb Styling */
        .breadcrumb {
            background: transparent;
            margin-bottom: 0;
            padding: 0;
            font-family: 'Montserrat', sans-serif;
            font-weight: 500;
        }

        .breadcrumb-item a {
            color: var(--brand-accent); /* Gold links */
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .breadcrumb-item a:hover {
            color: #fff;
        }

        .breadcrumb-item + .breadcrumb-item::before {
            color: rgba(255, 255, 255, 0.5);
            content: "›"; /* Custom separator */
            font-size: 1.2rem;
            line-height: 1;
        }

        .breadcrumb-item.active {
            color: rgba(255, 255, 255, 0.8);
        }
/* sarees collection */
.sarees-section {
            padding-top: 160px;
            padding-bottom: 80px;
            background-color: #ffffff; /* Clean White Background */
        }
        
        .product-card {
            /* Clean, Professional Styling */
            background: #fff;
            border: none; /* No border for cleaner look */
            border-radius: 4px; /* Slight rounding */
            overflow: hidden;
            /* No box-shadow as per clean request, or very subtle */
            /* box-shadow: 0 2px 5px rgba(0,0,0,0.05); */ 
            height: 100%;
        }

        .product-card img {
            width: 100%;
            height: auto;
            object-fit: cover;
            aspect-ratio: 3/4; /* Consistent aspect ratio for neatness */
            /* NO HOVER TRANSFORM */
        }
        
        .product-info {
            padding: 15px 0;
            text-align: center;
        }

        .product-title {
            font-size: 1rem;
            font-weight: 600;
            color: #333;
            margin: 0;
            font-family: 'Playfair Display', serif;
        }

        .section-title {
            font-family: 'Playfair Display', serif;
            color: #333;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 3rem;
        }

        /* Mobile Adjustments */
        @media (max-width: 991px) {
            .sarees-section { padding-top: 120px; }
        }



        /* Contact */
         .contact-section {
            /* Padding top accounts for fixed header overlay 
            padding: 160px 0 40px; Reduced bottom padding from 80px to 40px */
            /* Removed min-height: 100vh to fix the empty space issue */
        }
        .contact-info-card {
            background: #fff;
            border-radius: 8px;
            padding: 30px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            /* h-100 ensures all cards in the row have equal height */
            height: 100%; 
            transition: transform 0.3s ease;
            border-bottom: 3px solid transparent;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .contact-info-card:hover {
            transform: translateY(-5px);
            border-bottom: 3px solid var(--brand-accent);
        }
        .contact-icon {
            font-size: 2.5rem;
            color: var(--brand-accent); /* Using Gold */
            margin-bottom: 20px;
        }
        .form-control:focus {
            border-color: var(--brand-accent);
            box-shadow: 0 0 0 0.25rem rgba(212, 175, 55, 0.25);
        }
        .btn-custom {
            background-color: var(--brand-accent);
            color: #fff;
            border: none;
            padding: 12px 30px;
            border-radius: 4px;
            font-weight: 600;
            text-transform: uppercase;
            transition: all 0.3s ease;
        }
        .btn-custom:hover {
            background-color: #bfa13a; /* Slightly darker gold */
            color: #fff;
        }
        .map-container {
            height: 400px;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            border: 1px solid #ddd;
        }
        .section-title {
            font-family: 'Playfair Display', serif;
            color: #333;
            font-weight: 700;
        }
        
        /* Mobile Adjustments */
        @media(max-width:767px){
            .contact-section {
                padding-top: 120px;
            }
        }


         /* --- 6. FANCY SAREES PAGE SPECIFIC STYLES --- */
        .sarees-section {
            padding-top: 160px;
            padding-bottom: 80px;
            background-color: #ffffff; /* Clean White Background */
        }
        
        .product-card {
            /* Clean, Professional Styling */
            background: #fff;
            border: none; /* No border for cleaner look */
            border-radius: 4px; /* Slight rounding */
            overflow: hidden;
            /* No box-shadow as per clean request, or very subtle */
            /* box-shadow: 0 2px 5px rgba(0,0,0,0.05); */ 
            height: 100%;
        }

        .product-card img {
            width: 100%;
            height: auto;
            object-fit: cover;
            aspect-ratio: 3/4; /* Consistent aspect ratio for neatness */
            /* NO HOVER TRANSFORM */
        }
        
        .product-info {
            padding: 15px 0;
            text-align: center;
        }

        .product-title {
            font-size: 1rem;
            font-weight: 600;
            color: #333;
            margin: 0;
            font-family: 'Playfair Display', serif;
        }

        .section-title {
            font-family: 'Playfair Display', serif;
            color: #333;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 3rem;
        }

        /* Mobile Adjustments */
        @media (max-width: 991px) {
            .sarees-section { padding-top: 120px; }
        }
        /* footer */

        .site-footer {
            background-color: black !important;
            font-size: 0.9rem;
            position: relative;
            z-index: 10; 
        }
        .footer-heading {
            color: #d4af37;
            font-weight: 600;
            margin-bottom: 1.2rem;
            font-family: 'Playfair Display', serif;
        }
        .footer-links li { margin-bottom: 0.8rem; }
        .footer-links a { color: #aaa; text-decoration: none; transition: color 0.3s; }
        .footer-links a:hover { color: #fff; }
        .footer-social a { color: #fff; font-size: 1.2rem; margin-right: 15px; text-decoration: none; }
        .footer-social a:hover { color: #d4af37; }
        .footer-divider { border-color: #333; margin: 30px 0; }
         .footer-logo{  width:90%; }
        .text-secondary{color: white !important;}
         .footer-links li a{
            color: white;
         }


         /* --- FLOATING WHATSAPP BUTTON --- */
  .whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: #25d366;
    color: #131111;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    /* box-shadow: 2px 2px 3px #999; */
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.whatsapp-float:hover {
    transform: scale(1.1);
    background-color: #20b857;
}

/* On smaller screens, move it slightly up so it doesn't cover footer text */
@media (max-width: 600px) {
    .whatsapp-float {
        bottom: 20px;
        right: 20px;
    }
}