/* --- HEADER STYLES --- */
        .site-header {
            background: linear-gradient(135deg, #f05a28, #e8d0b6);
            color: #000000; /* Creamy Off-white - Primary Header Text Color */
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
            position: fixed; /* Makes the header stick to the top */
            top: 0;
            left: 0;
            width: 100%; /* Ensures header spans full width */
            z-index: 1000; /* Ensures header stays on top of other content */
            padding: 1rem 2rem; /* Vertical and horizontal padding */
            display: flex;
            justify-content: center; /* Center content horizontally */
            align-items: center;
            max-height: 70px; /* Minimum height for the header */
        }
        

        .header-content-wrapper {
            max-width: 1200px; /* Max width for inner content to keep it readable */
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        /* Logo Styling */
        .logo-container img {
            height: 45px; /* Adjust logo height as needed */
            width: auto;
            border-radius: 5px; /* Optional: subtle rounded corners for the logo image */
            transition: transform 0.3s ease-in-out; /* Smooth scale animation on hover */
        }
        .logo-container img:hover {
            transform: scale(1.05); /* Slightly enlarge logo on hover */
        }


        /* Desktop Navigation */
        .desktop-nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            gap: 2.5rem; /* Spacing between navigation items */
        }

        .desktop-nav a {
            text-decoration: none;
            color: #000000; /* Creamy off-white for links */
            font-weight: 500;
            font-size: 1.05rem;
            position: relative; /* For the animated underline */
            padding-bottom: 0.5rem; /* Space for the underline */
            transition: color 0.3s ease-in-out; /* Smooth color change on hover */
        }

        /* Animated Underline Effect for Desktop Nav Links */
        .desktop-nav a::after {
            content: '';
            position: absolute;
            left: 50%;
            transform: translateX(-50%) scaleX(0); /* Start hidden and centered */
            bottom: 0;
            width: 100%;
            height: 2px;
            background-color: #681d04; /* Gold/Bronze accent color */
            border-radius: 2px;
            transition: transform 0.3s ease-out; /* Smooth animation for expansion */
        }

        .desktop-nav a:hover {
            color: #681d04; /* Change text color to accent on hover */
        }

        .desktop-nav a:hover::after {
            transform: translateX(-50%) scaleX(1); /* Expand underline to full width on hover */
        }

        .desktop-nav a.active,
        .desktop-nav a:hover {
            color: #681d04;
        }

        .desktop-nav a.active::after,
        .desktop-nav a:hover::after {
            transform: translateX(-50%) scaleX(1);
        }


        /* Mobile Menu Toggle (Hamburger Icon) */
        .menu-toggle {
            display: none; /* Hidden on desktop, shown via media query */
            flex-direction: column;
            justify-content: space-between;
            width: 30px;
            height: 20px;
            cursor: pointer;
            z-index: 1001; /* Above mobile sidebar */
            transition: transform 0.3s ease; /* For overall rotation */
        }

        .menu-toggle .bar {
            width: 100%;
            height: 3px;
            background-color: #681d04; /* Accent color for hamburger bars */
            border-radius: 2px;
            transition: all 0.3s ease-in-out; /* Smooth transition for bar animations */
        }

        /* Hamburger to 'X' Animation */
        .menu-toggle.open .bar:nth-child(1) {
            transform: translateY(8px) rotate(45deg);
        }

        .menu-toggle.open .bar:nth-child(2) {
            opacity: 0; /* Middle bar fades out */
        }

        .menu-toggle.open .bar:nth-child(3) {
            transform: translateY(-8px) rotate(-45deg);
        }

        /* Mobile Sidebar Navigation */
        .mobile-sidebar {
            position: fixed;
            top: 0;
            right: -320px; /* Start off-screen to the right */
            height: 100vh; /* Full viewport height */
            width: 300px; /* Width of the sidebar */
            background: linear-gradient(135deg, #f05a28, #e8d0b6);
            backdrop-filter: blur(10px); /* Frosted glass effect */
            box-shadow: -8px 0 20px rgba(122, 88, 88, 0.4); /* Stronger shadow when open */
            z-index: 1000; /* Same as header, but appears on top when open */
            display: flex;
            flex-direction: column;
            padding-top: 5rem; /* Space from top for close button and content */
            transition: right 0.4s ease-out; /* Smooth slide-in/out animation */
        }

        .mobile-sidebar.open {
            right: 0; /* Slide into view */
        }

        .mobile-sidebar ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            align-items: center; /* Center links vertically */
            flex-grow: 1; /* Allows links to push to center */
            justify-content: center; /* Distribute space if many links */
        }

        .mobile-sidebar li {
            width: 100%;
            text-align: center;
            margin-bottom: 1.5rem; /* Space between mobile links */
        }

        .mobile-sidebar a {
            text-decoration: none;
            color: #F8F4E3; /* Creamy off-white for mobile links */
            font-size: 1.3rem; /* Larger font for mobile readability */
            font-weight: 500;
            display: block;
            padding: 0.8rem 1rem;
            transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
            border-radius: 8px; /* Slightly rounded corners for mobile links */
        }

        .mobile-sidebar a:hover {
            color: #681d04; /* Accent color on hover */
            background-color: rgba(209, 176, 107, 0.1); /* Subtle hover background */
        }

        /* Close button inside mobile sidebar */
        .close-btn {
            position: absolute;
            top: 1.5rem;
            right: 1.5rem;
            cursor: pointer;
            padding: 10px; /* Larger touch target */
            transition: transform 0.2s ease-in-out;
        }

        .close-btn:hover {
            transform: rotate(90deg); /* Rotate on hover */
        }

        .close-btn svg {
            fill: none; /* Color of the SVG 'X' icon */
        }

       
        /* --- Responsive Adjustments --- */
        @media (max-width: 992px) { /* Adjust breakpoint for desktop nav hiding */
            .desktop-nav {
                display: none; /* Hide desktop nav */
            }
            .menu-toggle {
                display: flex; /* Show hamburger icon */
            }
            .site-header {
                padding: 0.8rem 1.5rem; /* Adjust padding for smaller screens */
            }
            .header-logo {
                font-size: 1.5rem; /* Smaller logo on mobile */
            }
            
        }

        @media (max-width: 768px) {
            .mobile-sidebar {
                width: 280px; /* Slightly smaller sidebar on smaller tablets */
            }
            
        }


        @media (max-width: 480px) {
            .site-header {
                padding: 0.6rem 1rem; /* Even smaller padding on very small screens */
            }
            .header-logo {
                font-size: 1.3rem;
            }
            .mobile-sidebar {
                width: 250px; /* Smaller sidebar on phones */
            }
            .mobile-sidebar a {
                font-size: 1.1rem; /* Smaller mobile nav links */
            }
            
        }