/* 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: 50px; 
        }

        /* 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 TEXTURE CSS - REMOVING OPACITY ON ELEMENT */
.nav-texture {
    /* Base Color: Restoring the soothing Deep Indigo */
    --primary-color: #1A237E;
    background-color: var(--primary-color); 
    color: #F0F4F8; /* Light gray text for contrast */
    
    /* 💡 Check the image path again! Assuming 'images/OpenMedTech.png' is correct. */
   /* background-image: url('../images/OpenMedTech.png');
    
    /* Crucial settings for a repeating texture: */
    background-repeat: no-repeat;
    background-size: 30px 30px; 
    
    /* 💥 REMOVED: opacity: 0.5; 
       This was dimming the entire element, including the background and text. */
    
    /* NEW: Use blend mode to overlay the texture onto the base color. 
       This is how you "tint" a background image. */
    background-blend-mode: multiply; 
}

/* 💡 REMOVED: .nav-texture > * { opacity: 1; }
   This is no longer needed because the parent opacity is removed. */

/* Active state for main navigation buttons - UPDATED COLORS */
.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);
}
/* 💡 FIX: Ensure text remains fully visible (100% opacity) 💡 */
/* Since the parent element has opacity: 0.5, the text needs a wrapper to override this. */
/* We need a child element (e.g., your navigation links container) to set opacity back to 1.0 */
.nav-texture > * {
    opacity: 1;
}
#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;
}
/* Style for the centered horizontal line */
.section-separator {
    /* Set a minimum height for visibility (we use the border for the line) */
    height: 1px; 
    
    /* The actual line: a solid border on the bottom */
    border-bottom: 2px solid #f0c7c7; /* Light pink color */
    
    /* 1. **NEW:** Set a specific width for the line. 
          I recommend a width like 50% or 300px, depending on your design. 
          Let's use 50% as an example. */
    width: 50%; 
    
    /* 2. **NEW:** Center the block element by setting margin-left and margin-right to auto */
    margin-left: auto;
    margin-right: auto;
    
    /* Add some vertical space above and below the line */
    margin-top: 40px; 
    margin-bottom: 30px;
}
/* Container to control the width and position of the text block */
.lab-info-container {
    /* 1. **INCREASED WIDTH:** Set a maximum width for the text block. 
          Using 75% or 800px should make it wider. Let's try 800px for a fixed size. */
    max-width: 800px; 
    
    /* 2. Center the entire block horizontally (margin: 0 auto is short-hand) */
    margin: 0 auto; 
    
    /* 3. **NEW/CONFIRMED:** Center the text lines WITHIN this block */
    text-align: center; 
    
    /* Add some spacing below the text block */
    margin-bottom: 50px; 
    
    /* Ensure there is enough space above the text */
    margin-top: 40px; 
}

/* Style for the paragraph element (optional, but good for cleanup) */
.lab-text-centered {
    /* Set the text size and line height */
    font-size: 1.15em;
    line-height: 1.6;
    /* Ensure no extra margins are pushing the text */
    margin-top: 0;
    margin-bottom: 0;
}