/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  /* Theme colors */
  :root {
    --gold: #d4af37;
    --rich: #4b0082;
    --bg: #f8f4e9;
  }
  
 /* --- HERO IMAGE FIX: Ensures model's face is visible on mobile --- */

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

#hero-carousel {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* SLIDE TRACK */
#slide-track {
    position: relative;
    display: flex;
    width: 600vw; /* 6 slides */
    height: 100%;
    animation: slideShow 8s infinite ease-in-out;
}

/* SLIDE IMAGES */
.hero-image-slide {
    width: 100vw;
    height: 100%;
    object-fit: cover;
    flex-shrink: 0;
}

/* DARK OVERLAY */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        rgba(0, 0, 0, 0.55),
        rgba(0, 0, 0, 0.45)
    );
    z-index: 5;
}

/* CONTENT OVERLAY */
.content-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
}

/* HERO TEXT */
.hero-content {
    max-width: 900px;
    color: #fff;
}

.hero-content h1 {
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    font-weight: 700;
    margin-bottom: 16px;
}

.hero-content p {
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.6;
    margin-bottom: 28px;
}

/* CTA BUTTON */
.hero-btn {
    display: inline-block;
    padding: 14px 34px;
    background: #f5b301;
    color: #000;
    font-weight: 600;
    text-decoration: none;
    border-radius: 40px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.3);
}

/* SLIDE ANIMATION */
@keyframes slideShow {
    0%, 15%   { transform: translateX(0); }
    20%, 35%  { transform: translateX(-100vw); }
    40%, 55%  { transform: translateX(-200vw); }
    60%, 75%  { transform: translateX(-300vw); }
    80%, 90%  { transform: translateX(-400vw); }
    95%, 100% { transform: translateX(-500vw); }
}

/* MOBILE OPTIMIZATION */
@media (max-width: 768px) {
    #hero-carousel {
        height: 85vh;
    }
}


  /* ===== SAREE TYPES SECTION ===== */
  body {
    font-family: 'Poppins', sans-serif;
    background: var(--bg);
    color: #333;
  }
  
  .saree-types {
    padding: 70px 20px;
    text-align: center;
    background: var(--bg);
  }
  
  .saree-types h2 {
    font-size: 2.5rem;
    color: var(--rich);
    font-weight: 700;
    margin-bottom: 50px;
    position: relative;
  }
  
  .saree-types h2::after {
    content: "";
    width: 80px;
    height: 4px;
    background: var(--gold);
    display: block;
    margin: 15px auto 0;
    border-radius: 2px;
  }
  
  /* Grid container */
  .saree-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  /* Saree card */
  .saree-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
  }
  
  .saree-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
  }
  
  /* Saree image */
  .saree-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-bottom: 3px solid var(--gold);
    display: block;
  }
  
  /* Text content */
  .saree-card h3 {
    color: var(--rich);
    font-size: 1.25rem;
    margin: 15px 0 8px;
  }
  
  .saree-card p {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.5;
    padding: 0 15px 20px;
  }
  
  /* Responsive fix */
  @media (max-width: 768px) {

    .saree-types h2 {
      font-size: 2rem;
    }
  
    .saree-card img {
      height: 180px;
    }
  }
  
  .sell-now {
    background: #fce5cd; /* light gold background */
    padding: 50px 20px;
    text-align: center;
  }
  
  .sell-now h2 {
    font-size: 2rem;
    color: #4b0082;
  }
  
  .sell-now p {
    font-size: 1.2rem;
    color: #222;
    margin: 20px 0;
  }
  
  .sell-now .btn {
    background: #d4af37;
    color: #fff;
    padding: 15px 30px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 8px;
  }


/* Custom scrollbar for better look */
::-webkit-scrollbar {
    width: 8px;
  }
  ::-webkit-scrollbar-thumb {
    background-color: #d4af37;
    border-radius: 8px;
  }
  
  body {
    scroll-behavior: smooth;
  }

  .hidden {
    display: none;
}

/* --- Fix 1: Guarantee Mobile Menu Closure (The most important fix) --- */
/* This overrides any conflicting styles and forces the menu to close
   when the 'hidden' class is added by JavaScript. */
   #mobileNav.hidden {
    display: none !important; 
}

/* --- Fix 2: Improve Link Readability (Contrast Fix) --- */
/* Ensures links are visible against the dark header background. */
#mobileNav a {
    color: #f8f4e9 !important; /* Light text for contrast */
    padding: 12px 20px;
}

/* Fix the active/selected link state (the dark box you see in the screenshot)
   It changes the background to your Rich Purple and the text to Gold. */
#mobileNav div a.hover\:bg-gray-800:hover,
#mobileNav div a:focus,
#mobileNav div a:active {
    background-color: var(--rich, #4b0082) !important; /* Rich Purple Background */
    color: var(--gold, #FFD700) !important; /* Gold Text Color */
}

#whatsappButton, #mobileCallButton {
    position: fixed;
    bottom: 15px;
    right: 15px;
    z-index: 99999; /* Increase z-index */
    display: flex;
    align-items: center;
    justify-content: center;
}


#whatsappButton:hover {
    transform: scale(1.2);
}

@media (max-width: 768px) {
    /* Hides the wide text on mobile */
    .whatsapp-text {
        display: inline-block !important; /* Force it to show */
        font-size: 14px; /* Adjust for small screens */
        margin-left: 5px; /* Optional spacing between icon and text */
        white-space: nowrap; /* Prevent wrapping */
        color: #fff; /* Or your desired color */
       
    }

    /* Adjust WhatsApp button layout */
    #whatsappButton {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px 12px;
        background-color: #25D366; /* WhatsApp green */
        border-radius: 50px;
        text-decoration: none;
        font-weight: 500;
    }

    #whatsappButton:hover {
        transform: scale(1.1);
    }

    .whatsapp-icon {
        display: flex;
        align-items: center;
        background-color: #25D366;
        color: #fff;
        border-radius: 50px;
        padding: 10px 15px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.25);
        font-size: 18px;
        cursor: pointer;
        transition: transform 0.2s, background-color 0.2s;
    }
}

/* Mobile adjustments */
@media (max-width: 480px) {
    .call-text, .whatsapp-text {
        font-size: 12px; /* Shrinks text on small screens */
    }

    #whatsappButton {
        bottom: 15px;
        right: 15px;
    }

    #mobileCallButton {
        bottom: 75px; /* Adjust spacing above WhatsApp */
        right: 15px;
    }
}

/* Header Background and Text */
.header {
    background-color: #0A0A0A;
    color: #e5e7eb; /* Tailwind text-gray-300 */
  }
  
  /* Logo color */
  .logo {
    color: #FFD700;
  }
  
  /* Desktop Navigation Links */
  .desktop-nav a {
    font-weight: 600;
    font-size: 0.875rem; /* Tailwind text-sm */
    transition: color 0.3s;
  }
  .desktop-nav a:hover {
    color: #FFD700;
  }
  
  /* Mobile Nav */
  .mobile-links {
    background-color: #0A0A0A;
    padding: 1rem;
    box-shadow: 0 10px 15px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .mobile-links a:hover {
    color: #FFD700;
  }
  
  /* Mobile Links Styling */
  .mobile-nav-link {
    font-size: 1rem;
    font-weight: 500;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem; /* Tailwind rounded-md */
    transition: all 0.3s;
    color: #e5e7eb;
    text-decoration: none;
  }
  .mobile-nav-link:hover {
    color: #FFD700;
    background-color: #1f2937; /* Tailwind gray-800 */
  }
  
  /* Toggle button */
  .toggle-btn {
    color: #e5e7eb;
    transition: color 0.3s;
  }
  .toggle-btn:hover {
    color: #FFD700;
  }
  /* Example CSS for a better tap target */
.mobile-menu-toggle { /* Replace with your actual hamburger class/ID */
    padding: 10px; /* Adds space around the icon */
    min-width: 44px; /* Ensures minimum width */
    min-height: 44px; /* Ensures minimum height */
    display: flex;
    align-items: center;
    justify-content: center;
}
  
#mobileCallButton {
    position: fixed;
    bottom: 90px; /* above WhatsApp button */
    right: 20px;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.mobile-call-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #007bff;
    color: #fff;
    border-radius: 50px; /* Rounded pill, not circle */
    padding: 10px 15px;   /* Space for icon + text */
    box-shadow: 0 4px 8px rgba(0,0,0,0.25);
    font-size: 18px;
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s;
}

.mobile-call-icon:hover {
    background-color: #0056b3;
    transform: scale(1.1);
}

.call-text {
    margin-left: 8px;
    font-weight: 500;
    white-space: nowrap; /* Prevent line break */
}

/* Responsive: shrink text on tiny screens */
@media (max-width: 480px) {
    .call-text {
        font-size: 14px;
    }
}




/* Google Review Button - CIRCULAR STYLE */
.google-review-popup {
    /* CRITICAL FIX: Changed 'position: left' to 'position: fixed' */
    position: fixed; 
    
    /* CRITICAL FIX: Positioning on the bottom-left corner */
    bottom: 30px;
    left: 30px; /* Use left: 30px to align with the image */
    
    /* Outer Ring Size */
    width: 120px;
    height: 120px;
    
    /* Conic Gradient for the 4-color border */
    background: conic-gradient(
      #4285f4 0% 25%, /* Blue */
      #34a853 25% 50%, /* Green */
      #fbbc05 50% 75%, /* Yellow */
      #ea4335 75% 100% /* Red */
    );
    
    border-radius: 50%; /* Changed 95% to standard 50% for perfect circle */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    cursor: pointer;
    z-index: 9999;
    transition: transform 0.2s;
}

.google-review-popup:hover {
    transform: scale(1.08);
}

.google-review-text {
    /* Inner White Circle */
    font-family: Arial, sans-serif;
    font-size: 11px; /* Reduced font size to fit three lines */
    font-weight: bold;
    text-align: center;
    color: #444;
    background: #fff;
    border-radius: 50%;
    
    /* Ring Size Adjustment (120px outer - 106px inner = 14px difference, 7px ring thickness) */
    width: 106px; /* Reduced from 95px to 106px to make the ring thinner */
    height: 106px;
    
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.1; /* Tighter line height for stacking text */
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    /* Whitespace: nowrap is NOT needed since we want the text to wrap */
}


/* Show only on desktop */
@media (max-width: 1024px) {  /* adjust breakpoint as needed */
    .google-review-popup {
        display: none;
    }

}



/* 1. Mobile Styles (Default: for screens up to 767px) */
.container {
    width: 100%; /* Full width on mobile */
    padding: 10px;
  }
  
  /* 2. Tablet Styles (For screens 768px and wider) */
 /* 2. Tablet Styles (For screens 768px and wider) */
@media (min-width: 768px) {
    
    /* Existing rule for main content */
    .container {
        width: 80%; /* Takes up 80% of the screen on tablet */
        margin: 0 auto;
    }
    
    /* ⚠️ NEW FIX FOR HEADER MENU BAR ⚠️ */
    /* Replace '.header' with the actual class/ID of your header/navbar element */
    .header {
        /* Makes the header use the full screen width */
        width: 100%; 
        max-width: 100%;
        /* Use box-sizing to prevent padding from making it too wide */
        box-sizing: border-box; 
    }

    .header-content-wrapper { 
        /* Assuming this is the element holding your Logo, Nav, and Login */
        display: flex;
        
        /* Spreads the items out: Logo to the left, Nav/Login to the right */
        justify-content: space-between; 
        
        /* Vertically centers items */
        align-items: center; 
        
        /* Adds horizontal space between children */
        gap: 20px; 
    }
    
    /* Make the navigation section take up most of the space */
    .desktop-nav { 
        flex-grow: 1; /* Allows the navigation section to expand */
        display: flex;
        justify-content: flex-end; /* Pushes links to the right */
    }

    /* ... new fixes below ... */

    @media (min-width: 768px) {
        /* ... Fix 1 & 2 ... */
    
        /* ⚠️ NEW FIX FOR LOGIN BUTTON ⚠️ */
        /* Target your login button/link (replace .login-btn with your class) */
        .login-btn { 
            /* Reduce horizontal padding to save space */
            padding: 8px 15px; 
            
            /* Ensure the text is small enough */
            font-size: 0.9rem;
            
            /* Ensures the button doesn't shrink to nothing */
            flex-shrink: 0; 
        }
    

    }
}
    
    

  

 /* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; 
}
 
/* --- NEW GLOBAL FLUIDITY AND SAFETY FIXES --- */
img {
    max-width: 100%;
    height: auto;
    display: block; 
}

body, html {
    overflow-x: hidden; 
}
/* ------------------------------------------- */

/* Theme colors */
:root {
    --gold: #d4af37;
    /* ... rest of your variables ... */
}


/* Global Base Font Size */
html {
    font-size: 16px; 
}

/* SHRINK FONT FOR TINY SCREENS (e.g., iPhone SE) */
@media (max-width: 480px) {
    html {
        font-size: 14px; /* Shrinks the base size for all rem units */
    }
}