/* Reset and Base Styles */
:root {
    --primary-color: #8A3324; /* A sophisticated, earthy Saffron/Terracotta */
    --secondary-color: #D4AF37; /* Rich Gold, for accents */
    --dark-color: #333333;
    --light-color: #f8f5f0; /* Creamy off-white */
    --white-color: #ffffff;
    --text-color: #4A4A4A; /* Softer than pure black */
    --success-color: #2E8B57; /* Pistachio green for success/confirmation */

    --font-primary: 'Merriweather', serif;
    --font-secondary: 'Open Sans', sans-serif;

    --header-height: 70px;
}

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

html {
    scroll-behavior: smooth;
    font-size: 16px; /* Base font size */
}

body {
    font-family: var(--font-secondary);
    line-height: 1.7;
    color: var(--text-color);
    background-color: var(--white-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* For mobile menu open state */
body.nav-menu-open {
    overflow: hidden;
}


.container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    color: var(--primary-color);
    font-weight: 700;
    line-height: 1.3;
}

h1 { font-size: 2.8rem; margin-bottom: 1rem; } /* Hero title */
h2.section-title {
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 2.5rem;
    position: relative;
    padding-bottom: 0.5rem;
}

h3 { font-size: 1.5rem; margin-bottom: 0.75rem; color: var(--dark-color); }

p { margin-bottom: 1rem; }
a { color: var(--secondary-color); text-decoration: none; transition: color 0.3s ease; }
a:hover { color: var(--primary-color); text-decoration: none; }

img { max-width: 100%; height: auto; display: block; }

.section-padding { padding: 80px 0; }
.bg-light { background-color: var(--light-color); }
.section-intro { text-align: center; max-width: 700px; margin: 0 auto 2rem auto; font-size: 1.1rem; }

/* Buttons */
.btn {
    display: inline-block;
    padding: 12px 28px;
    font-family: var(--font-secondary);
    font-weight: 600;
    text-decoration: none;
    border-radius: 5px;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    font-size: 1rem;
}
.btn-primary { background-color: var(--secondary-color); color: var(--primary-color); }
.btn-primary:hover { background-color: #c8931b; transform: translateY(-2px); }
.btn-secondary { background-color: var(--primary-color); color: var(--white-color); }
.btn-secondary:hover { background-color: #7a2d1f; transform: translateY(-2px); }
.btn-small { padding: 8px 18px; font-size: 0.9rem; }

/* Header */
#main-header {
    background-color: rgba(255, 255, 255, 0.95);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* Header bar is above content, and potentially above the initial state of the menu */
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    height: var(--header-height);
}

/* This is the direct child of #main-header and contains .logo-link, .nav-toggle, and ul#primary-navigation */
#main-header nav.container { /* Added .container for specificity */
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    position: relative; /* Stacking context for children like .nav-toggle if needed */
}

/* Logo container and image */
.logo-link {
    display: flex; /* Ensures vertical alignment of image if it had text alongside */
    align-items: center;
    /* The logo link itself doesn't need a specific z-index if it's part of the #main-header flow */
    /* It will naturally be part of the z-index: 1000 stacking context of #main-header */
}

#navbar-logo {
    height: 40px; /* Default height */
    width: auto;
    display: block;
}

/* Desktop Navigation List (ul#primary-navigation) */
#main-header nav ul#primary-navigation {
    list-style: none;
    display: flex; /* Horizontal on desktop */
    margin: 0;
    padding: 0;
    /* On desktop, this ul is part of the normal flow within nav.container */
}
#main-header nav ul#primary-navigation li {
    margin-left: 30px;
}
#main-header nav ul#primary-navigation li a {
    color: var(--dark-color);
    font-weight: 600;
    padding: 5px 0;
    position: relative;
}
#main-header nav ul#primary-navigation li a:hover,
#main-header nav ul#primary-navigation li a.active {
    color: var(--secondary-color);
}
#main-header nav ul#primary-navigation li a.active::after,
#main-header nav ul#primary-navigation li a:hover::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--secondary-color);
}

/* Hamburger Menu Toggle Button */
.nav-toggle {
    display: none; /* Hidden on desktop */
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0.5em;
    /* This z-index ensures the toggle button is clickable on top of the header bar itself,
       AND on top of the mobile menu panel if it were to slide from behind the toggle. */
    z-index: 1001;
    position: relative; /* Often needed for z-index to apply correctly against siblings */
}

.hamburger {
    display: block;
    position: relative;
    width: 1.8em;
    height: 3px;
    background: var(--primary-color);
    transition: background 100ms 200ms ease-in-out, transform 250ms ease-in-out;
}
.hamburger::before,
.hamburger::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--primary-color);
    transition: transform 250ms ease-in-out;
}
.hamburger::before { top: -7px; }
.hamburger::after { bottom: -7px; }

.nav-toggle.nav-open .hamburger { background: transparent; }
.nav-toggle.nav-open .hamburger::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle.nav-open .hamburger::after { transform: translateY(-7px) rotate(-45deg); }


/* Hero Section - UNCHANGED */
.hero-section {
    background: url('https://images.unsplash.com/photo-1504674900247-0877df9cc836?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80') no-repeat center center/cover; /* REPLACE WITH YOUR IMAGE */
    height: 100vh; min-height: 600px; display: flex; align-items: center; justify-content: center;
    text-align: center; position: relative; color: var(--white-color); padding-top: var(--header-height);
}
.hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); }
.hero-content { position: relative; z-index: 1; }
.hero-content h1 { color: var(--white-color); font-size: 3.5rem; margin-bottom: 1rem; text-shadow: 1px 1px 3px rgba(0,0,0,0.3); }
.hero-content p { font-size: 1.3rem; max-width: 650px; margin: 0 auto 2rem auto; font-weight: 300; }

/* About Us Section - UNCHANGED */
.about-content { display: flex; align-items: center; gap: 40px; }
.about-text { flex: 1; }
.about-image { flex-basis: 40%; max-width: 400px; }
.about-image img { border-radius: 8px; box-shadow: 0 10px 20px rgba(0,0,0,0.1); }

/* Why Choose Us Section - UNCHANGED */
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; text-align: center; }
.feature-item { background-color: var(--white-color); padding: 30px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.07); }
.feature-icon { width: 50px; height: 50px; margin-bottom: 1rem; }
.feature-item h3 { color: var(--primary-color); }

/* Products Section - UNCHANGED */
.product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.product-card { background-color: var(--white-color); border: 1px solid #eee; border-radius: 8px; overflow: hidden; text-align: center; box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; }
.product-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.product-card img { width: 100%; height: 250px; object-fit: contain; }
.product-card {
    background-color: var(--white-color);
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    padding-bottom: 0.5rem; /* Add some padding at the very bottom of the card */
                             /* Adjust 0.5rem as needed */
}
.product-card h3 { margin-top: 0; color: var(--primary-color); margin-bottom: 0.5rem; }
.product-card p { font-size: 0.95rem; color: #555; margin-bottom: 0.5rem; }
.product-card p:last-of-type { margin-bottom: 0; }

/* Contact Section - UNCHANGED */
.contact-wrapper { display: flex; gap: 40px; background-color: var(--white-color); padding: 40px; border-radius: 8px; box-shadow: 0 5px 20px rgba(0,0,0,0.08); }
.contact-form { flex: 2; }
.contact-info { flex: 1; padding-left: 20px; border-left: 1px solid #eee; }
.contact-info h3 { margin-bottom: 1rem; }
.contact-info p { margin-bottom: 0.5rem; }
.form-group { margin-bottom: 20px; }
.form-group input[type="text"], .form-group input[type="email"], .form-group textarea { width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 4px; font-family: var(--font-secondary); font-size: 1rem; transition: border-color 0.3s ease; }
.form-group input[type="text"]:focus, .form-group input[type="email"]:focus, .form-group textarea:focus { border-color: var(--secondary-color); outline: none; }
.form-group textarea { resize: vertical; min-height: 120px; }

/* Footer - UNCHANGED */
footer { background-color: var(--dark-color); color: #ccc; padding-top: 0; text-align: center; }
.map-container { width: 100%; }
.map-container iframe { display: block; }
.footer-content { padding: 20px 0; }
.footer-content p { margin-bottom: 0.3rem; font-size: 0.9rem; }
.footer-content p a { color: var(--secondary-color); }
.footer-content p a:hover { color: var(--white-color); }


/* --- Responsive Design --- */
/* ... (all your existing CSS from the top) ... */

/* --- Responsive Design --- */
/* --- Responsive Design --- */
@media (max-width: 992px) { /* Tablet and smaller */
    h1 { font-size: 2.5rem; }
    .hero-content h1 { font-size: 3rem; }
    .hero-content p { font-size: 1.1rem; }
    .about-content { flex-direction: column; text-align: center; }
    .about-image { margin-top: 30px; max-width: 80%; }
    .contact-wrapper { flex-direction: column; }
    .contact-info { border-left: none; padding-left: 0; margin-top: 30px; text-align: center; }
}

@media (max-width: 768px) { /* Mobile */
    html { font-size: 15px; }

    /* Styles for the main navigation container within the header */
    #main-header nav.container {
        /* These are likely inherited from global styles but ensure they are applied */
        display: flex;
        justify-content: space-between;
        align-items: center;
        /* padding-left: 10px; /* Consider if this much padding is needed or if container's default is enough */
        /* padding-right: 10px; */
    }

    /* Styles for the logo link and image ON MOBILE */
    .logo-link {
        display: flex;
        align-items: center;
        visibility: visible; /* Explicitly visible */
        opacity: 1; /* Explicitly opaque */
        /* padding: 2px; /* Review if this padding is desired or was just for debug box. Usually not needed. */
        z-index: 1001; /* Ensure logo link is above the menu panel if any doubt */
        position: relative; /* For z-index to work robustly */
        flex-shrink: 0; /* Prevent it from shrinking if other elements are too wide */
    }

    #navbar-logo {
        display: block;
        height: 35px; /* Your mobile logo height */
        width: auto;
        visibility: visible; /* Explicitly visible */
        opacity: 1; /* Explicitly opaque */
    }

    .nav-toggle {
        display: block; /* Show hamburger button */
        z-index: 1001; /* Keep this above the header bar to ensure it's clickable, and above menu */
    }

    /* Mobile Navigation Panel (ul#primary-navigation) */
    #main-header nav ul#primary-navigation {
        position: fixed;
        top: var(--header-height);
        right: 0;
        bottom: 0;
        left: 0;
        
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: min(15vh, 3rem) 2em;
        gap: 1.5em;

        background-color: rgba(255, 255, 255, 0.99);
        box-shadow: 0 8px 15px rgba(0,0,0,0.1);

        transform: translateY(-100%);
        transition: transform 350ms ease-out;
        z-index: 999; /* Stays behind the header bar (z-index: 1000) */
    }

    #main-header nav ul#primary-navigation[data-visible="true"] {
        transform: translateY(0%);
    }

    #main-header nav ul#primary-navigation li {
        margin: 0;
        width: 100%;
        text-align: center;
    }
    #main-header nav ul#primary-navigation li a {
        font-size: 1.2rem;
        display: block;
        padding: 0.75em 0;
    }
    #main-header nav ul#primary-navigation li a.active::after,
    #main-header nav ul#primary-navigation li a:hover::after {
        display: none;
    }

    .hero-section { padding-top: var(--header-height); }
    .hero-content h1 { font-size: 2.5rem; }
    .section-title { font-size: 1.8rem; }
    .product-grid { grid-template-columns: 1fr; }
}

@media (min-width: 769px) { /* Desktop and larger */
    .nav-toggle {
        display: none; /* Ensure toggle is hidden */
    }

    /* Ensure logo is at its default desktop size and z-index is reset if changed for mobile */
    .logo-link {
        /* padding: 0; /* Reset padding if it was added for mobile debug */
        z-index: auto; /* Reset z-index */
    }
    #navbar-logo {
        height: 40px; /* Desktop height */
    }

    #main-header nav ul#primary-navigation {
        position: static;
        transform: none;
        display: flex;
        flex-direction: row;
        background-color: transparent;
        box-shadow: none;
        padding: 0;
        gap: 0;
        z-index: auto; /* Reset z-index from mobile */
        
        /* These !important were to ensure visibility if JS bugged out.
           Ideally, they are not needed if the CSS logic is sound.
           You can try removing them if everything works. */
        visibility: visible !important; 
        opacity: 1 !important;
        height: auto !important;
    }

    #main-header nav ul#primary-navigation li {
        margin: 0 0 0 30px;
        width: auto;
        text-align: left;
    }
    #main-header nav ul#primary-navigation li a {
        font-size: 1rem;
        padding: 5px 0;
        display: inline;
    }
    #main-header nav ul#primary-navigation li a.active::after,
    #main-header nav ul#primary-navigation li a:hover::after {
        display: block;
    }
}