/* Custom styles for better aesthetics */
        :root {
            --primary-color: #7F1D1D; /* Tailwind red-900 (Dark Maroon) */
        }
        
        /* 💥 FIX 1: BODY SCROLLING & MARGINS 💥 */
        body {
            font-family: 'Merriweather', serif;
            background-color: #f8fafc; /* Tailwind slate-50 */
            margin: 0; /* Reset default browser margin */
            padding: 0;
            /* Explicitly allow scrolling if any other element was forcing it hidden */
            overflow: auto; 
        }

        /* Class to compensate for the sticky header height (approx 80px-100px tall) */
        .header-compensation {
            /* Adjusted based on your desktop header's observed height */
            padding-top: 70px; 
        }

        /* Active state for main navigation buttons */
        .tab-button.active {
            background-color: var(--primary-color);
            color: white;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
        }
        /* Style for active tab in mobile view */
        .mobile-nav-item.active {
            border-left: 4px solid #f97316; /* Tailwind orange-500 (Kept for contrast) */
            background-color: #f1f5f9; /* Tailwind slate-100 */
            color: #f97316;
            font-weight: 600;
        }
        
        /* SLIDER CSS for positioning controls */
        .slider-container {
            max-width: 600px;
            margin: 0 auto;
            position: relative; 
            overflow: hidden;
        }
        .slider-image {
            width: 100%;
            display: block;
            object-fit: cover;
            transition: transform 0.5s ease-in-out;
            border-radius: 0.5rem;
        }
        .slider-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            padding: 10px 12px;
            cursor: pointer;
            font-size: 1.5rem;
            line-height: 1;
            z-index: 10;
            border-radius: 9999px;
            transition: background 0.2s;
            opacity: 0.8;
        }
        .slider-btn:hover {
            background: rgba(0, 0, 0, 0.8);
            opacity: 1;
        }
        .prev-btn { left: 10px; }
        .next-btn { right: 10px; }

        /* NAVIGATION CIRCUIT TEXTURE CSS */
        .nav-texture {
            /* Circuit board pattern for a tech look */
            background-image: url('https://www.transparenttextures.com/patterns/circuit-board.png');
            background-repeat: repeat;
            background-size: auto;
            
            /* Blends the texture image with the dark maroon background color */
            background-blend-mode: multiply; 
        }
        /* --- DROPDOWN HOVER FIX (CSS) --- */
        /* 1. Initial state for the dropdown menu (hidden and collapsed) */
#projects-menu {
    opacity: 0;
    visibility: hidden;
    max-height: 0; /* Starts collapsed (0 height) */
    overflow: hidden; /* Hides content that exceeds 0 height */
    
    /* Apply transitions to max-height, opacity, and visibility */
    /* Note: I removed the 0.5s delay you had on transition to make it feel snappier. */
    transition: 
        max-height 0.3s ease, 
        opacity 0.3s ease, 
        visibility 0.3s ease;
}

/* 2. Visible state when the parent group is hovered */
.group:hover #projects-menu {
    opacity: 1;
    visibility: visible;
    
    /* 🚨 The fix for the collapse effect: Set a large max-height! 🚨 */
    max-height: 400px; /* Set a height large enough for all content to show */
    
    /* Remove the delay when showing the menu so it appears instantly */
    transition-delay: 0s;
}