/* --- Base Styles --- */
    :root {
        --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        --primary-color: #667eea;
        --secondary-color: #764ba2;
        --dark-bg: rgba(0, 0, 0, 0.95);
    }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    html, body {
        height: 100%;
        overflow-x: hidden; /* Prevent horizontal scroll */
    }

    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        line-height: 1.6;
        color: #333;
        background: var(--primary-gradient);
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }

    .main-content {
        flex-grow: 1;
    }

    .section-bg {
        background: rgba(255, 255, 255, 0.95);
        border-radius: 15px;
        padding: 50px 30px;
        margin-top: 50px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    }

    /* --- Navigation --- */
    nav {
        background: var(--dark-bg);
        backdrop-filter: blur(10px);
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
        position: sticky;
        top: 0;
        z-index: 1000;
        width: 100%;
    }

    .nav-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0.8rem 1.5rem; /* Adjusted for better mobile fit */
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .logo-link {
        display: flex;
        align-items: center;
        text-decoration: none;
    }

    #nav-logo {
        height: 45px;
        width: auto;
        transition: transform 0.3s ease;
    }

    .logo {
        font-size: 1.5rem;
        font-weight: 700;
        background: var(--primary-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-left: 10px;
        text-decoration: none;
    }

    .nav-links {
        display: flex;
        gap: 1.5rem;
        list-style: none;
        align-items: center;
        margin-bottom: 0;
    }

    .nav-links a {
        text-decoration: none;
        color: #fff;
        font-weight: 500;
        transition: color 0.3s ease;
    }

    .nav-links a:hover, .nav-links a.active {
        color: var(--primary-color);
    }

    .nav-links a.nav-button {
        background: var(--primary-color);
        padding: 8px 15px;
        border-radius: 8px;
    }

    /* Cart Badge */
    .cart-link { position: relative; padding: 5px; }
    #cart-count-badge {
        position: absolute;
        top: -5px; right: -10px;
        background: #dc3545; color: white;
        border-radius: 50%;
        width: 20px; height: 20px;
        font-size: 0.75rem;
        display: flex; align-items: center; justify-content: center;
        font-weight: bold;
    }

    /* Hamburger Menu */
    .hamburger {
        display: none;
        flex-direction: column;
        cursor: pointer;
        gap: 5px;
        z-index: 1001; /* Above nav links */
    }
    .hamburger span {
        width: 25px; height: 3px;
        background: #fff; /* White bars to see on dark nav */
        border-radius: 3px;
        transition: all 0.3s ease;
    }

    /* --- Hero Section --- */
    .hero {
        padding: 80px 20px;
        text-align: center;
        color: white;
        animation: fadeInDown 0.8s ease-out;
    }
    .hero h1 { font-size: 2.5rem; font-weight: 700; margin-bottom: 15px; }
    .hero p { font-size: 1.1rem; margin-bottom: 25px; min-height: 2.5rem; }
    .hero-btn {
        padding: 12px 30px;
        background: white; color: var(--primary-color);
        text-decoration: none; border-radius: 10px;
        font-weight: 600; display: inline-block;
        transition: transform 0.3s;
    }
    .hero-btn:hover { transform: translateY(-3px); }

    /* --- Product Cards --- */
    .section-header { text-align: center; margin-bottom: 40px; color: white; }
    .section-bg .section-header { color: #333; }
    
    .products-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 25px;
    }

    .product-card {
        background: white;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        display: flex;
        flex-direction: column;
        transition: transform 0.3s, box-shadow 0.3s;
        height: 100%;
    }
    .product-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.2);
    }

    .product-image {
        width: 100%; height: 250px;
        background: #f8f9fa;
        overflow: hidden;
        position: relative;
    }
    .product-image img {
        width: 100%; height: 100%;
        object-fit: contain; /* Ensures image fits without cropping */
        padding: 10px;
        transition: transform 0.3s;
    }
    .product-card:hover .product-image img { transform: scale(1.05); }

    .product-info { padding: 15px; flex-grow: 1; display: flex; flex-direction: column; }
    .product-details-wrapper { flex-grow: 1; }
    .product-category {
        font-size: 0.8rem; color: var(--primary-color);
        background: #f0f2ff; padding: 4px 10px;
        border-radius: 15px; display: inline-block; margin-bottom: 8px;
    }
    .product-name { font-size: 1.1rem; font-weight: 700; margin-bottom: 10px; }
    .product-price { font-size: 1.3rem; font-weight: 700; color: var(--primary-color); margin-bottom: 10px; }
    .card-footer { padding: 0; background: none; border: none; margin-top: auto; }

    /* --- Forms --- */
    .form-container {
        max-width: 500px;
        margin: 40px auto;
        padding: 30px;
        background: white;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        width: 90%; /* Responsive width */
    }

    /* --- Profile --- */
    .profile-card {
        background: white;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    }
    .profile-header {
        background: var(--primary-gradient);
        color: white; padding: 30px 20px;
    }
    .profile-body { padding: 30px 20px; }
    .table-responsive { overflow-x: auto; }

    /* --- Category Cards --- */
    .category-card {
        display: block;
        background: white;
        padding: 30px;
        border-radius: 15px;
        text-align: center;
        text-decoration: none;
        color: #333;
        transition: transform 0.3s;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
    .category-card:hover { transform: translateY(-5px); color: var(--primary-color); }
    .category-card i { font-size: 2.5rem; margin-bottom: 15px; color: var(--primary-color); }

    /* --- Footer --- */
    footer {
        background: rgba(0, 0, 0, 0.9);
        color: #aaa;
        padding: 50px 20px 20px;
        margin-top: auto; /* Push to bottom */
    }
    .footer-content {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 30px;
        max-width: 1200px;
        margin: 0 auto;
    }

    .footer-section {
    /* New: Use Flexbox on the main container */
    display: flex;
    /* New: Stack all content (logo, heading, paragraph, social links) vertically */
    flex-direction: column;
    /* New: Center all content horizontally (logo, text, and social icons) */
    align-items: center;
    /* New: Align text elements (like <h4> and <p>) to the center of their container */
    text-align: center; 
}

#footer-logo {
    height: 45px;
    width: auto;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}
#footer-logo:hover {
    opacity: 1;
}

.social-links {
    display: flex;
    /* FIX: Change direction from row to column to stack the icons */
    flex-direction: row; 
    /* REMOVE: gap doesn't work well when flex-direction is column and aligning center */
    /* REMOVE: margin-left to allow the main container's align-items: center to work */
    
    /* New: Add vertical space between the icons */
    gap: 15px; 
    /* You can remove this 'gap' and use margin on the 'a' tags if preferred */
}

.social-links a {
    /* Keep the icon styling as is. This creates the white icon on a colored background */
    width: 40px;
    height: 40px;
    /* You can remove the background gradient if you only want the white icons like in the image */
    background: transparent; 
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white; /* Keep the icon color white */
    font-size: 1.5rem; /* Make the icon a bit bigger to match the image */
    transition: transform 0.3s ease;
    
    /* FIX Alternative to gap: Add space below each icon link */
    /* margin-bottom: 15px; */ 
}

.social-links a:hover {
    transform: translateY(-5px);
}
    .footer-section h4 { color: white; margin-bottom: 15px; }
    .footer-section a { display: block; color: #aaa; text-decoration: none; margin-bottom: 8px; }
    .footer-bottom { text-align: center; padding-top: 20px; border-top: 1px solid #333; margin-top: 30px; }
    .social-icons a { font-size: 1.5rem; margin-right: 15px; color: white; }

    /* --- MODAL STYLES (Responsive) --- */
    .product-modal { 
        position: fixed; top: 0; left: 0; 
        width: 100%; height: 100%; 
        background: rgba(0, 0, 0, 0.7); 
        backdrop-filter: blur(5px); 
        z-index: 2000; 
        display: none; 
        align-items: center; justify-content: center; 
        padding: 10px;
        opacity: 0; transition: opacity 0.3s;
    }
    .product-modal.active { display: flex; opacity: 1; }

    .modal-content-wrapper { 
        background: white; 
        border-radius: 15px; 
        width: 100%; max-width: 900px; 
        max-height: 90vh; 
        overflow-y: auto; /* Allow internal scrolling */
        display: flex; flex-direction: column; 
        position: relative;
        transform: scale(0.95); transition: transform 0.3s;
    }
    .product-modal.active 
    .modal-content-wrapper { transform: scale(1); }

    .modal-header-custom { 
        padding: 15px 20px; 
        border-bottom: 1px solid #eee; 
        display: flex; justify-content: space-between; align-items: center;
        position: sticky; top: 0; background: white; z-index: 10;
    }
    .modal-title-custom { font-size: 1.25rem; font-weight: 700; margin: 0; }
    .modal-close-btn { 
        background: none; 
        border: none; 
        font-size: 2rem; 
        line-height: 1; 
        cursor: pointer; }

    .modal-body-custom { 
        padding: 20px; 
    }
    
    .modal-carousel-container 
    .carousel-item img {
        width: 100%; 
        height: 350px; 
        object-fit: contain; 
        background: #f8f9fa; 
        border-radius: 10px;
    }
    

    /* Added for Next and Prev Button */

    /* Target both the previous and next control buttons */
.carousel-control-prev,
.carousel-control-next {
    /* * FIX 1: Set your custom solid or semi-transparent background color.
     * We use !important to override Bootstrap's default styles if needed.
     */
    background-color: rgba(120, 0, 150, 0.7) !important; /* Example: Purple with 70% opacity */
    
    /* FIX 2: Remove Bootstrap's default gradient background (if present) */
    background-image: none !important;
    
    /* Optional: Make the button area round */
    border-radius: 50px; 
    
    /* Optional: Center the buttons vertically on the image (default behavior) */
    width: 50px; 
    height: 50px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 1; /* Ensure it's fully visible */
}

/* Optional: Add a nice hover effect */
.carousel-control-prev:hover,
.carousel-control-next:hover {
    background-color: rgba(80, 0, 100, 0.9) !important; /* Darker on hover */
}


    .modal-product-price { font-size: 1.8rem; 
        font-weight: 700; 
        color: var(--primary-color); 
    }
    .quantity-selector { 
        max-width: 150px;
     }

    /* --- MEDIA QUERIES (Mobile Responsiveness) --- */
    @media (max-width: 968px) {
        .nav-container { padding: 1rem; }
        
        .hamburger { display: flex; }
        
        .nav-links {
            position: fixed;
            top: 70px; /* Adjust based on navbar height */
            right: -100%;
            width: 280px;
            height: calc(100vh - 70px);
            background: white;
            flex-direction: column;
            align-items: flex-start;
            padding: 30px;
            box-shadow: -5px 0 15px rgba(0,0,0,0.1);
            transition: right 0.3s ease;
        }
        
        .nav-links.active { right: 0; }
        
        .nav-links li { width: 100%; margin-bottom: 15px; }
        .nav-links a { color: #333; font-size: 1.1rem; display: block; }
        .nav-links a:hover { color: var(--primary-color); }
        
        .hero h1 { font-size: 2rem; }
    }

    @media (max-width: 768px) {
        /* Mobile Modal Adjustments */
        .modal-body-custom .row { flex-direction: column; }
        .modal-body-custom .col-lg-6 { width: 100%; margin-bottom: 20px; }
        .modal-carousel-container .carousel-item img { height: 250px; }
        
        /* Grid Adjustments */
        .products-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; } /* 2 columns on tablet/large phone */
        .product-image { height: 180px; }
        .product-name { font-size: 1rem; }
        .product-price { font-size: 1.1rem; }
        
        /* Footer */
        .footer-content { grid-template-columns: 1fr; text-align: center; }
        .social-icons { justify-content: center; }
    }


    

    @media (max-width: 480px) {
        /* Smallest Phones */
        .products-grid { grid-template-columns: 1fr; } /* 1 column on small phone */
        
        .hero { padding: 60px 15px; }
        .section-bg { padding: 30px 15px; }
        
        .modal-header-custom { padding: 10px 15px; }
        .modal-title-custom { font-size: 1rem; }
    }

    /* Animation Utilities */
    .animate-on-scroll { opacity: 0; transform: translateY(30px); transition: all 0.6s ease-out; }
    .animate-on-scroll.is-visible { opacity: 1; transform: translateY(0); }
    @keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }




    /* iNTEResting CSS */

    /* --- Global Section Styling --- */
.why-choose-us {
    /* Ensure the section takes up vertical space and has a distinct background */
    padding: 30px 0;
    /* Use a dark background to make the white text/icons pop */
    background-color: #1a1a2e; /* Deep dark blue/purple */
    color: #f0f0f0; /* Light text color */
}

.why-choose-us .section-header {
    margin-bottom: 10px;
    text-align: center;
}

.why-choose-us .section-header h2 {
    /* A little flair for the heading */
    font-size: 2.5rem;
    color: #e94560; /* A striking accent color */
    position: relative;
}

/* --- Feature Box Styling --- */
.feature-box {
    /* Create a contained box */
    padding: 20px 15px;
    margin-bottom: 15px;
    background: #0f3460; /* Darker blue background for the box */
    border-radius: 12px;
    text-align: center;
    
    /* Interesting CSS: Setup for the hover effect */
    transition: transform 0.4s ease-out, box-shadow 0.4s ease-out;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle border */
}

/* --- Feature Box Hover Effect (The interesting part!) --- */
.feature-box:hover {
    /* Lift the box */
    transform: translateY(-10px);
    /* Add a multi-layered shadow for a subtle glow effect */
    box-shadow: 
        0 15px 30px rgba(0, 0, 0, 0.4), /* Standard shadow for lift */
        0 0 15px rgba(233, 69, 96, 0.6); /* Color glow shadow */
}

/* --- Icon Styling --- */
.feature-box i {
    /* Make the icons large and colorful */
    font-size: 2.5rem;
    color: #e94560; /* Matching accent color */
    margin-bottom: 20px;
    display: inline-block;
    
    /* Interesting CSS: Icon transition/animation */
    transition: transform 0.3s ease-in-out;
}

.feature-box:hover i {
    /* Subtle rotation on hover */
    transform: rotate(5deg) scale(1.05);
}

/* --- Text Styling --- */
.feature-box h4 {
    font-size: 1.35rem;
    color: #ffffff;
    margin-bottom: 15px;
}

.feature-box p {
    font-size: 0.95rem;
    color: #b0b0d5; /* Slightly muted white for body text */
}

/* --- Animation (If you use the 'animate-on-scroll' class) --- */
/* This is a placeholder, you would use a library like AOS or custom JS for this */
.animate-on-scroll {
    /* Example: starting state for an animation */
    opacity: 0;
    transform: translateY(20px);
}

.animate-on-scroll.is-visible {
    /* Example: final state once scrolled into view */
    opacity: 1;
    transform: translateY(0);
    transition: opacity 1s ease-out, transform 1s ease-out;
}