/* Basic Reset and Font Setup */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
    /* CRITICAL FIX 1: Prevents any individual element from expanding beyond the screen */
    max-width: 100%; 
}

body {
    font-family: 'Montserrat', sans-serif;
    color: #fff;
    background-color: #1a1a1a;
    margin: 0; 
    min-height: 100vh;
    
    /* CRITICAL FIX 2: Hides all horizontal overflow for the entire page */
    overflow-x: hidden; 
}

/* You may need to also ensure the HTML tag inherits this: */
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

/* --- Section Layout --- */
.full-screen-section {
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 60px 20px;
    position: relative;
    /* Temporary different colors for sections */
    /* You can remove these when you add content and better styling */
    &:nth-child(2) { background-color: #1a1a1a; }
    &:nth-child(3) { background-color: #2c2c2c; }
    &:nth-child(4) { background-color: #1a1a1a; }
}

/* --- Landing Page Buttons --- */
.cta-container {
    display: flex;
    gap: 20px; /* Space between buttons */
    margin-top: 30px;
    flex-wrap: wrap; /* Allows stacking on small screens */
}

.cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    
    padding: 12px 25px;
    border: 1px solid #fff;
    border-radius: 4px; /* Slight rounded corners */
    
    color: #fff;
    background-color: transparent;
    text-decoration: none;
    
    font-size: 0.9em;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    
    transition: all 0.3s ease;
}

/* Style 1: Primary (Solid White - Stands out most) */
.primary-btn {
    padding: 12px 25px;
    border: 1px solid #fff;
    border-radius: 4px; /* Slight rounded corners */
    
    color: #fff;
    background-color: transparent;
    text-decoration: none;
    
    font-size: 0.9em;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    
    transition: all 0.3s ease;
}

.primary-btn:hover {
    background-color: #fff;
    color: #1a1a1a;
    transform: translateY(-3px); /* Subtle lift */
    box-shadow: 0 5px 15px rgba(255, 255, 255, 0.2); /* Glow effect */
}

/* Style 2: Secondary (Outline - Subtle) */
.secondary-btn {
    padding: 12px 25px;
    border: 1px solid #fff;
    border-radius: 4px; /* Slight rounded corners */
    
    color: #fff;
    background-color: transparent;
    text-decoration: none;
    
    font-size: 0.9em;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    
    transition: all 0.3s ease;
}

.secondary-btn:hover {
    background-color: #fff;
    color: #1a1a1a;
    transform: translateY(-3px); /* Subtle lift */
    box-shadow: 0 5px 15px rgba(255, 255, 255, 0.2); /* Glow effect */
}

/* --- Desktop Language Switcher --- */
.lang-desktop {
    position: fixed;
    top: 30px;
    right: 40px; /* Adjust this if it overlaps your sidebar dots */
    z-index: 1002; /* High z-index to sit on top of everything */
    font-family: sans-serif; /* Or your main font */
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
}

.lang-desktop a {
    text-decoration: none;
    color: #888; /* Dimmed color for inactive language */
    transition: color 0.3s ease;
}

.lang-desktop a:hover {
    color: #fff;
}

.lang-desktop .active-lang {
    color: #fff; /* Bright white for current language */
    pointer-events: none; /* Disable clicking the current language */
}

.lang-desktop .separator {
    margin: 0 8px;
    color: #555;
}

/* Hide Mobile Language Group on Desktop */
.mobile-lang-group {
    display: none;
}

/* --- Hamburger Button BASE STYLES (Paste this in your main CSS area) --- */
#hamburger-menu-btn {
    /* KEY RULE: Hide by default on desktop */
    display: none; 
    
    /* Layout & Positioning */
    position: fixed;
    top: 25px;
    right: 25px;
    z-index: 1001; 
    width: 40px; 
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    
    /* Alignment logic */
    flex-direction: column;
    justify-content: center; 
    align-items: center;
    gap: 6px; 
}

/* Base styles for the bars */
#hamburger-menu-btn .bar {
    display: block;
    width: 28px;
    height: 2px;
    background-color: #fff;
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
    transform-origin: center center;
}

/* Active State Animations (The Perfect Cross) */
#hamburger-menu-btn.is-active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

#hamburger-menu-btn.is-active .bar:nth-child(2) {
    opacity: 0;
    transform: scale(0); 
}

#hamburger-menu-btn.is-active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* --- Full Screen Menu Overlay --- */
#full-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    z-index: 1000;
    
    transform: translateX(100%); /* Start hidden */
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    
    pointer-events: none;
}

#full-menu.is-active {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

.menu-item {
    color: #fff;
    text-decoration: none;
    font-size: 2em; 
    font-weight: 700;
    padding: 10px 0; 
}

/* Hamburger Icon Animation (X shape) */
#hamburger-menu-btn.is-active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
#hamburger-menu-btn.is-active .bar:nth-child(2) { opacity: 0; }
#hamburger-menu-btn.is-active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* --- Projects Page Specifics --- */

/* 1. The Glass Header */
.projects-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    z-index: 100; /* Stays on top */
    
    display: flex;
    justify-content: center; /* Centers the Title */
    align-items: center;
    
    /* THE BLUR EFFECT */
    background-color: rgba(26, 26, 26, 0.7); /* Semi-transparent dark background */
    backdrop-filter: blur(3px); /* Blurs whatever is behind it */
    -webkit-backdrop-filter: blur(3px); /* Safari support */
}

/* Header Title */
.header-title {
    font-size: 1.5em;
    font-weight: 700;
    letter-spacing: 2px;
    margin: 0;
}

/* --- Base Button Styles (Desktop) --- */
.back-btn {
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);

    color: #bbb;
    text-decoration: none;
    font-size: 0.9em;
    font-weight: 300;
    transition: color 0.3s
}

.back-btn:hover {
    color: #fff;
}

.arrow {
    font-size: 1.2rem;
    line-height: 1;
}

/* 2. Grid Page Layout Adjustment */
.projects-grid-page {
    
    padding-top: 120px; 
    padding-bottom: 50px;
    padding-left: 5%;
    padding-right: 5%;
    
    min-height: 100vh;
    position: relative;
    z-index: 10; /* Sits above the background SVG */
}

/* Grid Layout */
.grid-container {
    display: grid;
    /* Responsive Grid: Fits as many 300px cards as possible */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 40px;
    justify-items: center;
}

/* Ensure cards on this page behave nicely */
.projects-grid-page .project-card {
    width: 100%; /* Fill the grid cell */
    margin-right: 0; /* Remove marquee margins */
}

/* Layer 1: The Animated Topology SVG (Deepest) */
.topology-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Ensure it's the bottom layer */
    
    /* Ensure the SVG stretches without preserving aspect ratio so it fills the screen */
    object-fit: cover; 
    pointer-events: none; /* Let clicks pass through */
    
    /* Subtle overall opacity */
    opacity: 0.6;
}

/* Ensure the topology group pivots from the center */
#topology-group {
    transform-origin: center center;
    will-change: transform; /* Optimization for browser performance */
}

/* --- Scroll Up Button --- */
#scroll-up-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    
    background-color: #1a1a1a;
    border: 1px solid #fff;
    border-radius: 50%; /* Circle shape */
    color: #fff;
    
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 900; /* Above content, below modal/menu overlays */
    
    /* Animation: Hidden by default */
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none; /* Not clickable when hidden */
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Visible State */
#scroll-up-btn.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

/* Hover Effect */
#scroll-up-btn:hover {
    background-color: #fff;
    color: #1a1a1a;
    transform: scale(1.1); /* Slight grow */
}

/* --- Side Navigation (Left Dots - Auto Resize) --- */
.side-nav {
    position: fixed;
    left: 20px; /* Adjusted left position */
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    
    display: flex;
    flex-direction: column;
    gap: 25px;
    /* This padding ensures the menu expands before you actually touch a dot */
    padding: 20px 40px 20px 20px; 
}

/* --- Default State (Tiny / Minimal) --- */
.nav-dot {
    display: block;
    /* Tiny size by default */
    width: 6px; 
    height: 6px;
    
    background-color: transparent;
    border: 2px solid #fff;
    border-radius: 10px;
    position: relative;
    cursor: pointer;
    
    /* Smooth transition for growing/shrinking */
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Tiny Active State */
.nav-dot.active {
    height: 20px; /* Smaller pill */
    background-color: #fff;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}

/* --- Interaction: Expand on Hovering the ZONE --- */
.side-nav:hover .nav-dot {
    width: 12px; /* Original Full Size */
    height: 12px;
}

.side-nav:hover .nav-dot.active {
    height: 40px; /* Original Full Active Height */
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* --- Hover Label (Text) --- */
.nav-dot::after {
    content: attr(data-label);
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%) translateX(-10px);
    
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8em;
    font-weight: 700;
    letter-spacing: 1px;
    white-space: nowrap;
    
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
}

/* Only show text when the SIDEBAR is expanded AND the specific dot is hovered */
.side-nav:hover .nav-dot:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* Highlight dot on hover */
.side-nav:hover .nav-dot:not(.active):hover {
    background-color: rgba(255, 255, 255, 0.5);
}

.menu-item {
    color: #fff;
    text-decoration: none;
    font-size: 2em; 
    font-weight: 700;
    padding: 10px 0; 
    
    opacity: 0; 
    /* NEW: Slide in from right with the menu */
    transform: translateX(20px); 
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Staggered animation for links (Adjusted transform to match slide-in from RIGHT) */
#full-menu.is-active .menu-item:nth-child(1) { transition-delay: 0.2s; opacity: 1; transform: translateX(0); }
#full-menu.is-active .menu-item:nth-child(2) { transition-delay: 0.3s; opacity: 1; transform: translateX(0); }
#full-menu.is-active .menu-item:nth-child(3) { transition-delay: 0.4s; opacity: 1; transform: translateX(0); }
#full-menu.is-active .menu-item:nth-child(4) { transition-delay: 0.5s; opacity: 1; transform: translateX(0); }

/* --- Landing Page Specifics --- */
.center-name {
    font-size: 5em;
    font-weight: 700;
    text-align: center;
}

.current-project-info {
    position: absolute;
    bottom: 20px;
    left: 20px;
    display: flex;
    align-items: center;
    color: #888; /* Subtle text */
    /* Animation for subtle entry */
    animation: fadeInSlideUp 1.5s ease-out forwards;
    opacity: 0; /* Start invisible */
}

.project-logo {
    width: 30px; /* Small size */
    height: 30px;
    margin-right: 10px;
}

.project-name {
    font-size: 0.9em;
    font-weight: 300;
}

/* --- Background Section Layout --- */
.background-section {
    display: flex;
    flex-direction: row; /* Side by side layout */
    justify-content: center;
    align-items: center;
    /* Ensure section has padding so content isn't on the edge */
    padding: 0 5%; 
    gap: 50px; /* Space between text and images */
}

/* --- Left Side: Bio Text --- */
.bio-container {
    flex: 1; /* Takes up 1 part of the space */
    max-width: 500px;
    padding-right: 20px;
}

.bio-text {
    font-size: 1.1em;
    line-height: 1.8;
    color: #ccc;
    font-weight: 300;
    text-align: justify;
}

/* --- Right Side: Expanding Gallery --- */
.gallery-container {
    flex: 1.5; /* Takes up slightly more space than the text */
    display: flex; /* Makes the cards sit in a row */
    height: 500px; /* Fixed height for the gallery */
    width: 100%;
    gap: 10px; /* Small gap between strips */
}

.gallery-card {
    position: relative;
    height: 100%;
    border-radius: 10px; /* Rounded corners */
    
    /* The Flex Magic */
    flex: 1; /* Default: all cards share space equally */
    
    /* Background Image Setup */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* Smooth Animation */
    transition: flex 0.7s cubic-bezier(0.25, 1, 0.5, 1);
    cursor: pointer;
    overflow: hidden;
    
    /* Dim the images slightly by default so white text pops */
    box-shadow: inset 0 0 0 2000px rgba(0,0,0,0.3);
}

/* --- Hover Effect: Expand --- */
.gallery-card:hover {
    flex: 5; /* The hovered card grows to take 5x the space */
    box-shadow: inset 0 0 0 2000px rgba(0,0,0,0); /* Remove dimming */
}

/* --- Card Caption (Updated for Text Reveal) --- */
.card-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    
    /* Add a dark gradient behind text so it's readable on any image */
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.card-caption h3 {
    font-size: 1.5em;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 5px;
    white-space: nowrap; /* Keep title on one line */
}

/* The Description Text */
.card-desc {
    font-size: 0.9em;
    color: #ddd;
    font-weight: 300;
    line-height: 1.4;
    
    /* Hidden State */
    opacity: 0;
    transform: translateY(20px); /* Push it down */
    max-height: 0; /* Take up no space */
    
    /* Transition Setup */
    transition: opacity 0.4s ease, transform 0.4s ease, max-height 0.4s ease;
    transition-delay: 0s; /* Hide immediately when mouse leaves */
}

/* Hover State: Reveal Text */
.gallery-card:hover .card-desc {
    opacity: 1;
    transform: translateY(0); /* Slide up to natural position */
    max-height: 100px; /* Give it space to exist */
    
    /* DELAY: Wait 0.3s for the card to widen before showing text */
    transition-delay: 0.3s; 
}

/* --- Projects Section Styling --- */

/* Title Styling */
.section-title {
    font-size: 3em;
    font-weight: 700;
    margin-bottom: 50px;
    letter-spacing: 2px;
}

/* Container limits the view */
.marquee-container {
    width: 100%;
    overflow: hidden; /* Hides content that scrolls off screen */
    padding: 20px 0;
    position: relative;

    /* NEW: Improve smooth scrolling behavior */
    scroll-behavior: smooth;
}

/* The Track moves the cards */
.marquee-track {
    display: flex;
    width: max-content; /* Ensure width fits all cards */
    
}

/* Hovering over the track pauses the movement */
.marquee-track:hover {
    animation-play-state: paused;
}

/* --- Project Card (Image BG + Reveal Effect) --- */
.project-card {
    /* 1. Layout & Size */
    width: 300px;
    height: 400px;
    flex-shrink: 0;
    margin-right: 40px;
    
    /* 2. Content Layout */
    display: flex;
    flex-direction: column;
    /* Pushes content to the bottom (Poster style) */
    justify-content:space-between; 
    padding: 25px;
    
    /* 3. Image & Border */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid #000; /* Dark stroke */
    border-radius: 8px;
    
    /* 4. Overlay Setup */
    position: relative;
    overflow: hidden;
    z-index: 1;
    
    /* Interaction */
    text-decoration: none;
    color: #fff;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* The Dark Overlay (Consistent) */
.project-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.75); /* Dark tint */
    z-index: -1; /* Behind text */
    transition: background-color 0.3s;
}

/* Lighten overlay on hover */
.project-card:hover::before {
    background-color: rgba(0, 0, 0, 0.6);
}

/* --- Hover Animation --- */
.project-card:hover {
    transform: translateY(-10px);
    width: 360px; /* Slight width expansion */
    border-color: #555;
}

/* --- Hiding Logic (Default) --- */
.card-top h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.5em;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    padding-bottom: 10px;
}

.project-desc {
    font-size: 0.9em;
    color: #ccc;
    line-height: 1.5;
    
    /* Hidden State */
    max-height: 0;
    opacity: 0;
    margin: 0;
    overflow: hidden;
    transition: all 0.4s ease;
}

.card-bottom {
    /* Layout for Skills */
    display: flex;
    flex-wrap: wrap; /* FIX: Prevents vertical stacking */
    gap: 10px;       /* Adds space between boxes */
}

/* --- Reveal Logic (Hover) --- */


.project-card:hover .project-desc {
    max-height: 100px; /* Give space for text */
    opacity: 1;
    margin-bottom: 15px;
}

.project-card:hover .card-bottom {
    max-height: 100px; /* Give space for skills */
    opacity: 1;
}

/* Skill Box Styling */
.skill-box {
    border: 1px solid #fff;
    padding: 5px 10px;
    font-size: 0.8em;
    border-radius: 4px;
    background: transparent;
    white-space: nowrap; /* Ensures text stays on one line */
}

/* --- See All Projects Button --- */
.see-all-btn {
    margin-top: 40px; /* Space between the slider and the button */
    padding: 12px 30px;
    
    font-size: 0.9em;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    
    /* Match the aesthetic of your other boxes */
    border: 1px solid #ffffff66; 
    border-radius: 5px; /* Consistent bevel */
    background-color: transparent;
    
    transition: all 0.3s ease;
}

.see-all-btn:hover {
    background-color: #fff; /* Fill with white */
    color: #1a1a1a; /* Dark text */
    border-color: #fff;
}

/* --- The Animation Keyframes --- */
@keyframes scrollProjects {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Move exactly 50% to the left. 
           Since we duplicated the content, -50% is the exact 
           point where the second set starts, creating a seamless loop. */
        transform: translateX(-50%);
    }
}

/* Keyframe for subtle bottom-left info entry */
@keyframes fadeInSlideUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Footer --- */
#contact {
    min-height: 25vh;
    width: 100%;
    background-color: #111;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    
    /* Ensure the footer also snaps */
    scroll-snap-align: start;
    scroll-snap-stop: always;/* Ensure the footer also snaps */

}

.socials-container {
    display: flex;
    gap: 30px; /* Space between icons */
    margin-bottom: 20px; /* Space between icons and copyright text */
}

.social-link {
    display: inline-block;
    transition: transform 0.3s ease;
}

.social-icon {
    width: 30px; /* Size of the icons */
    height: 30px;
    fill: #888; /* Initial gray color */
    transition: fill 0.3s ease;
}

/* Hover Effects */
.social-link:hover {
    transform: translateY(-5px); /* Float up slightly */
}

.social-link:hover .social-icon {
    fill: #fff; /* Turn white on hover */
}

.copyright-text {
    font-size: 0.8em;
    color: #555;
    margin-top: 10px;
}

#contact p {
    margin-top: 10px;
    font-size: 0.8em;
    color: #555;
}

/* --- Resume Button --- */
.resume-btn {
    display: inline-flex;
    align-items: center; /* Aligns icon and text vertically */
    margin-top: 30px;    /* Space from the text above */
    
    padding: 12px 25px;
    border: 1px solid #fff;
    border-radius: 4px; /* Slight rounded corners */
    
    color: #fff;
    background-color: transparent;
    text-decoration: none;
    
    font-size: 0.9em;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    
    transition: all 0.3s ease;
}

/* Hover Effect: Fill with white */
.resume-btn:hover {
    background-color: #fff;
    color: #1a1a1a;
    transform: translateY(-3px); /* Subtle lift */
    box-shadow: 0 5px 15px rgba(255, 255, 255, 0.2); /* Glow effect */
}

/* =========================================
   MOBILE OPTIMIZATION (Max-Width: 768px)
   ========================================= */
@media screen and (max-width: 768px) {

    /* --- 1. General Resets --- */
    body {
        overflow-x: hidden; /* Prevent horizontal side-scroll */
    }
    
    .full-screen-section {
        height: auto; /* Let content determine height, don't force full screen */
        min-height: 100vh;
        padding: 80px 20px; /* More padding to avoid edge touches */
    }

    /* --- inside @media screen and (max-width: 768px) --- */

    /* KEY FIX 1: HIDE THE DESKTOP SIDEBAR */
    .side-nav { 
        display: none !important; 
    }

    /* --- Inside @media screen and (max-width: 768px) --- */

    /* 1. Hide the Desktop Top-Left Switcher */
    .lang-desktop {
        display: none !important;
        opacity: 0 !important; /* Extra safety */
        pointer-events: none; /* Ensures you can't click invisible links */
    }

   /* --- Inside @media screen and (max-width: 768px) --- */

    .mobile-lang-group {
        display: flex !important;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        
        width: 100%;
        margin-top: 30px;
        padding-top: 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.2); 
        
        position: relative;
        z-index: 9999; /* Ensure it's on top */
    }

    .mobile-lang-group .separator {
        color: #fff;
        margin: 0 20px;
        font-size: 1.2rem;
    }

    /* Define styling for lang-item directly since we removed menu-item */
    .lang-item {
        font-family: inherit; /* Use site font */
        text-decoration: none;
        font-size: 1.2rem;
        color: #888;
        padding: 10px;
        cursor: pointer;
        
        /* Force interaction */
        pointer-events: auto !important;
    }

    .lang-item.active-lang {
        color: #fff;
        font-weight: bold;
    }
    
    .cta-container {
        /* Center them on mobile */
        justify-content: center;
        gap: 15px;
    }

    .cta-btn {
        /* Make buttons wider on mobile for easier tapping */
        width: 100%; 
        max-width: 300px; /* Prevent them from getting comically wide */
    }

    #hamburger-menu-btn {
        /* KEY RULE: Show it only on mobile */
        display: flex !important; 
    }

    /* --- 2. Navigation (Mobile Expandable) --- */
    
    /* 1. Container: The vertical strip */
    .side-nav {
        display: flex; /* Force show it */
        flex-direction: column;
        justify-content: center;
        gap: 20px;
        
        position: fixed;
        left: 20px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1000;
        
        /* Closed State: Small pill shape */
        width: 40px; 
        padding: 20px 0;
        background: rgba(0, 0, 0, 0.4); /* Subtle background */
        backdrop-filter: blur(5px);
        border-radius: 30px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        
        /* Smooth sizing animation */
        transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1), background 0.3s;
        overflow: hidden; /* Hide text when closed */
    }

    /* 2. Expanded State (Added via JS) */
    .side-nav.mobile-expanded {
        width: 180px; /* Widen to fit text */
        background: rgba(0, 0, 0, 0.9); /* Darker bg for readability */
        padding-left: 20px; /* Align items */
        align-items: flex-start; /* Left align dots */
        box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    }

    /* 3. The Dots */
    .nav-dot {
        margin: 0 auto; /* Center dots when closed */
        flex-shrink: 0;
    }
    
    .side-nav.mobile-expanded .nav-dot {
        margin: 0; /* Left align when open */
    }

    /* 4. The Labels (Text) */
    .nav-dot::after {
        /* Force the text to always exist in the DOM, just hidden */
        content: attr(data-label);
        position: absolute;
        left: 25px; /* Position to right of dot */
        top: 50%;
        transform: translateY(-50%);
        
        font-size: 0.8em; /* Readable text size */
        color: #fff;
        opacity: 0; /* Invisible when closed */
        white-space: nowrap;
        pointer-events: none;
        
        transition: opacity 0.2s ease;
    }

    /* Show labels when expanded */
    .side-nav.mobile-expanded .nav-dot::after {
        opacity: 1;
        pointer-events: all;
    }
    
    /* Disable the hover effects from desktop so they don't get stuck */
    .side-nav:hover .nav-dot { width: 6px; height: 6px; }
    .side-nav:hover .nav-dot.active { height: 20px; }

    /* --- 3. Landing Page --- */
    .center-name { font-size: 2.5em; }
    .center-subtitle { font-size: 0.9em; padding: 0 20px; text-align: center; }
    
    /* Position the "Current Project" info at the bottom center */
    .current-project-info {
        left: 50%;
        transform: translateX(-50%);
        bottom: 30px;
        width: 100%;
        justify-content: center;
    }

    /* --- 4. Background Section (Vertical Stacking) --- */
    .background-section {
        flex-direction: column; /* Stack Bio on top, Gallery below */
        gap: 40px;
        padding: 80px 20px;
    }

    .bio-container {
        width: 100%;
        padding-right: 0;
        text-align: left;
    }
    
    /* The Accordion Gallery Container */
    .gallery-container {
        flex-direction: column; /* CRUCIAL: Stack images vertically */
        height: auto; /* Allow height to expand vertically */
        width: 100%;
        gap: 15px; 
    }

    /* Individual Gallery Cards */
    .gallery-card {
        width: 100%;
        
        /* KEY FIX: Reset the complex flex property from the desktop view */
        flex: 0 0 auto !important; 
        
        height: 100px; /* Collapsed height in the stack */
        transition: height 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    }
    
    /* Hover/Tap Effect: Expand the height to reveal content */
    /* We target :active (for tap-hold) and :focus-within (for accessibility/tap) */
    .gallery-card:hover, /* Keep hover for touch emulation in dev tools */
    .gallery-card:active, 
    .gallery-card:focus-within {
        height: 350px; /* Expanded height */
        box-shadow: inset 0 0 0 2000px rgba(0,0,0,0); /* Ensure dimming is removed */
    }

    /* Card Caption/Text Reveal */
    .card-caption {
        justify-content: flex-start; /* Ensure text starts from the top of the expanded area */
    }

    /* Reveal description immediately on expansion */
    .card-desc {
        opacity: 0; /* Always ensure base is 0 */
        max-height: 0;
    }

    .gallery-card:hover .card-desc,
    .gallery-card:active .card-desc,
    .gallery-card:focus-within .card-desc {
        opacity: 1;
        transform: translateY(0);
        max-height: 200px; /* Give it space to be seen */
        transition-delay: 0.3s;
    }

    /* --- Mobile Version (Arrow Only) --- */

    .back-btn {
        /* KEY CHANGE: Remove the border */
        border: none !important; 
        
        /* Layout */
        display: flex !important; 
        justify-content: flex-start; 
        align-items: center;
        
        /* Size & Padding Adjustment */
        width: auto; 
        height: 40px;
        /* Padding is now crucial for the visual size */
        padding: 0 15px 0 0; /* Remove left padding to align arrow further left, keep right padding */
        
        /* Ensure the text is still gone */
        gap: 0; 
        
        /* Make sure the text color is still visible against the dark background */
        color: #fff;
    }

    /* HIDE the text label */
    .back-btn .btn-text {
        display: none;
    }
    
    /* STYLE the arrow */
    .back-btn .arrow {
        font-size: 1.5rem; 
        line-height: 1; 
        font-weight: 900; 
        margin: 0;
        padding-right: 5px; 
    }


    /* --- 5. Projects Marquee (Mobile Sliding) --- */
    
    /* CRITICAL FIX: Ensure the Marquee always runs on mobile */
    .marquee-container {
        /* FIX: Allow manual horizontal scrolling */
        overflow-x: auto !important; 
        
        /* Enable smooth momentum scrolling on iOS */
        -webkit-overflow-scrolling: touch; 
        
        /* Ensure width logic remains correct */
        width: 100vw; 
        margin-left: -20px; 
        padding-left: 20px; 
        
        /* Hide Scrollbar (Firefox) */
        scrollbar-width: none; 
    }
    /* Hide Scrollbar (Chrome/Safari/Edge) */
    .marquee-container::-webkit-scrollbar {
        display: none;
    }

    .marquee-track {
        display: flex;
        width: max-content;
        gap: 20px;
        animation: none;
    }

    .project-card {
        /* FIX: Use relative width so it fits any phone screen */
        width: 80vw; 
        max-width: 320px; /* Cap it so it's not huge on tablets */
        
        height: 400px;
        scroll-snap-align: none;
        margin-right: 20px;
        
        /* Ensure text is always visible on mobile */
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    /* DISABLE EXPANSION: Force width to stay same on hover/active */
    .project-card:hover,
    .project-card:active,
    .project-card:focus {
    transform: translateY(-10px); /* This is the lift, which is fine */
    /* Remove any unnecessary width changes or padding adjustments that might be causing the shift */
    border-color: #fff; 
    background-color: #222; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    /* Ensure width is stable */
    width: 100%; 
}

    /* Keep descriptions visible */
    .project-desc, .card-bottom {
        opacity: 1;
        transform: translateY(0);
        max-height: none;
        margin-top: 15px;
    }
    
    .project-card h3 {
        transform: translateY(0);
    }

    /* --- 6. Footer --- */
    .socials-container { gap: 25px; }
    .social-icon { width: 24px; height: 24px; }

    /* --- Inside @media screen and (max-width: 768px) --- */

    /* Force text visibility on mobile */
    .project-card .project-desc,
    .project-card .card-bottom {
        opacity: 1 !important;
        max-height: none !important;
        margin-top: 15px !important;
    }
    
    /* Fix Card Size for Mobile */
    .project-card {
        width: 80vw;
        height: 400px;
        pointer-events: none;
        /* Ensure title sits at top or spaced out nicely on mobile */
        justify-content: space-between;
        transform: none !important;
    }    
    /* Disable the hover expansion on mobile */
    .project-card:hover {
        width: 80vw;
        transform: none;
    }

    /* --- HIDE Current Project Info on Mobile --- */
    .current-project-info {
        display: none !important;
    }
}