/* =========================================
   STEP 1: DESIGN SYSTEM
   ========================================= */

:root {
    /* Colors */
    --color-bg-dark: #05050A;
    --color-bg-light: #F0F2F5;

    --color-text-main: #FFFFFF;
    --color-text-muted: #8892B0;

    --color-primary: #6366F1;
    /* Indigo/Violet */
    --color-secondary: #00F0FF;
    /* Cyan/Neon */
    --color-accent: #D946EF;
    /* Magenta/Neon */

    --color-glass: rgba(255, 255, 255, 0.05);
    --color-glass-border: rgba(255, 255, 255, 0.1);
    --color-glass-highlight: rgba(255, 255, 255, 0.15);

    /* Gradients */
    --gradient-glow: radial-gradient(circle at center, rgba(99, 102, 241, 0.15) 0%, rgba(5, 5, 10, 0) 70%);

    /* Typography */
    --font-main: 'Inter', sans-serif;

    /* Spacing */
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;

    /* Transitions */
    --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

body.light-mode {
    --color-bg-dark: #F0F2F5;
    --color-text-main: #05050A;
    --color-text-muted: #4B5563;
    --color-glass: rgba(255, 255, 255, 0.7);
    --color-glass-border: rgba(0, 0, 0, 0.1);
    --color-glass-highlight: rgba(0, 0, 0, 0.1);
    --gradient-glow: radial-gradient(circle at center, rgba(99, 102, 241, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
}

/* Reset */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-main);
    background-color: var(--color-bg-dark);
    color: var(--color-text-main);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Scroll Container for Locomotive */
[data-scroll-container] {
    min-height: 100vh;
}

/* Utilities */
.glass {
    background: var(--color-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-glass-border);
    border-radius: 1px;
}

.glow-text {
    text-shadow: 0 0 20px rgba(99, 102, 241, 0.5);
}

.glow-box {
    box-shadow: 0 0 30px rgba(99, 102, 241, 0.1);
}

/* Selection */
::selection {
    background: var(--color-secondary);
    color: var(--color-bg-dark);
}

/* Scrollbar (Native fallback) */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-dark);
}

::-webkit-scrollbar-thumb {
    background: var(--color-glass-border);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}

/* =========================================
   CUSTOM CURSOR (Glowing)
   ========================================= */

body,
a,
button,
input,
textarea,
.sidebar-logo-container {
    cursor: none;
    /* Hide default cursor */
}

.cursor-dot {
    width: 8px;
    height: 8px;
    background-color: #00F0FF;
    /* Bright Neon Cyan */
    position: fixed;
    top: 0;
    left: 0;
    /* Transformation handled by JS for performance */
    transform: translate(-50%, -50%);
    /* Center anchor point, but note: we will effectively toggle this or just handle offset in JS. 
       Actually, standard practice: keep translate(-50%, -50%) BUT we must apply the X/Y via a SEPARATE translate or just include it.
       Better approach: Set margin-left/top to negative half width/height or uses JS to offset.
       Let's stick to standard `transform: translate3d(x, y, 0)` in JS. 
       So here we REMOVE the default transform so it doesn't conflict, OR we keep it and append.
       Simplest: Set top: -4px; left: -4px; so (0,0) is center. */
    margin-left: -4px;
    margin-top: -4px;
    border-radius: 50%;
    z-index: 10000;
    pointer-events: none;
    box-shadow: 0 0 15px #00F0FF, 0 0 30px #00F0FF;
    will-change: transform;
}

.cursor-outline {
    width: 20px;
    height: 20px;
    border: 1.5px solid rgba(255, 255, 255, 0.8);
    position: fixed;
    top: 0;
    left: 0;
    margin-left: -10px;
    /* Center (20/2) */
    margin-top: -10px;
    border-radius: 50%;
    z-index: 9999;
    pointer-events: none;
    transition: width 0.2s, height 0.2s, background-color 0.2s, border-color 0.2s;
    /* Only animate state changes, NOT position */
    box-shadow: 0 0 8px rgba(67, 132, 143, 0.3);
    mix-blend-mode: difference;
    will-change: transform;
}

/* Hide on Touch Devices */
@media (hover: none) and (pointer: coarse) {

    .cursor-dot,
    .cursor-outline {
        display: none;
    }

    body,
    a,
    button {
        cursor: auto;
    }
}

/* =========================================
   STEP 2: PRELOADER
   ========================================= */

.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Transparent Blur Background */
    background: rgba(11, 24, 30, 0.684);
    /* Semi-transparent dark */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9999;

    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.logo-text {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--color-secondary);
    /* Neon Blue/Cyan */
    text-shadow: 0 0 20px rgba(1, 11, 12, 0.515);
    letter-spacing: -0.02em;
}

/* Light Mode Preloader */
body.light-mode .preloader {
    background: rgba(255, 255, 255, 0.6);
}

body.light-mode .logo-text {
    /* In light mode, Neon Blue might be hard to read on white glass. 
       Let's use a darker shade or keep it if the glow helps, 
       but standard request implies adaptation. */
    color: #000000;
    /* Black */
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    /* Dark Shadow */
}

.preloader-content {
    text-align: center;
    width: 100%;
    max-width: 400px;
    padding: var(--spacing-md);
    position: relative;
    z-index: 2;
}

.logo-text {
    font-size: 3rem;
    font-weight: 300;
    letter-spacing: -2px;
    margin-bottom: var(--spacing-md);
    color: var(--color-text-main);
    opacity: 0;
    /* Animated in via GSAP */
    transform: translateY(20px);
}

.progress-container {
    width: 100%;
    height: 2px;
    background: var(--color-glass-border);
    position: relative;
    overflow: hidden;
    margin-bottom: var(--spacing-sm);
}

.progress-bar {
    width: 0%;
    height: 100%;
    background: var(--color-secondary);
    box-shadow: 0 0 10px var(--color-secondary);
}

.progress-text {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    font-family: monospace;
    /* Techy feel */
    opacity: 1;
    /* Show 0% initially */
}

/* =========================================
   STEP 3: SIDEBAR NAVIGATION
   ========================================= */

.sidebar {
    position: fixed;
    top: 50%;
    left: var(--spacing-md);
    transform: translateY(-50%);
    width: 80px;
    padding: var(--spacing-md) 0;
    border-radius: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);

    /* Enhance Glassmorphism for Sidebar - Transparent Design */
    background: rgba(19, 30, 35, 0.2);
    /* Much more transparent */
    backdrop-filter: blur(25px) saturate(180%);
    /* Strong blur + saturation for premium feel */
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border: 1px solid rgba(1, 62, 92, 0.382);
    /* Fainter border */
    box-shadow: 0 8px 32px rgba(29, 73, 100, 0.423);

    overflow: hidden;
}

.sidebar:hover {
    width: 200px;
    /* Expand on hover */
}

/* Logo with Glowing Border */
.sidebar-logo-container {
    position: relative;
    width: 55px;
    /* Increased size */
    height: 55px;
    /* Increased size */
    border-radius: 16px;
    /* Slightly more rounded for larger size */
    border: 2px solid rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    /* Reduced from var(--spacing-md) to be closer */
    box-shadow: 0 0 15px rgba(41, 98, 255, 0.5);
    /* Blue Glow (Default) */
    /* Glow effect */
    transition: all 0.3s ease;
    overflow: visible;
    /* Ensure status light isn't clipped if outside, though absolute positioning handles it */
}

/* New Image Styling */
.sidebar-logo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 14px;
    /* Slightly less than container to fit inside border nice if needed, or match */
}

.sidebar-logo-container:hover {
    border-color: #2962FF;
    /* Blue Border */
    box-shadow: 0 0 25px rgba(41, 98, 255, 0.7);
    /* Blue Glow */
    transform: scale(1.05);
}

/* Light Mode Override for Sidebar Logo */
body.light-mode .sidebar-logo-container {
    border-color: #739AFF !important;
    /* Soft Blue Border in Light Mode */
    box-shadow: 0 0 15px rgba(115, 154, 255, 0.6);
    /* Matching Glow */
}

/* Status Indicator (Green Light) */
.status-indicator {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 14px;
    /* Slightly larger dot */
    height: 14px;
    background: #00ff88;
    /* Bright Green */
    border-radius: 50%;
    border: 3px solid var(--color-bg-dark);
    /* Thicker cutout for larger size */
    box-shadow: 0 0 10px #00ff88;
    animation: pulseStatus 2s infinite;
    z-index: 2;
}

@keyframes pulseStatus {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.7);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(0, 255, 136, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 255, 136, 0);
    }
}

/* Profile Name (Hidden by default, shows on hover) */
.profile-name {
    font-size: 0rem;
    /* Hidden initially */
    font-weight: 700;
    color: var(--color-text-main);
    margin-bottom: var(--spacing-sm);
    opacity: 0;
    white-space: nowrap;
    transition: all 0.3s ease;
    background: linear-gradient(90deg, #fff, #888);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 2px;
}

/* Sidebar Hover -> Show Name */
.sidebar:hover .profile-name {
    font-size: 1rem;
    opacity: 1;
    margin-bottom: var(--spacing-md);
    animation: fadeInName 0.5s ease forwards;
}

@keyframes fadeInName {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.profile-name:hover {
    background: linear-gradient(90deg, var(--color-secondary), var(--color-primary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
    transform: scale(1.05);
    letter-spacing: 3px;
    /* Expand effect */
    cursor: default;
}

.nav-links {
    list-style: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.nav-item {
    position: relative;
    width: 100%;
}

.nav-link {
    display: flex;
    align-items: center;
    padding: 12px 28px;
    /* Center icon when width is 80px (80-24)/2 = 28 */
    color: var(--color-text-muted);
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap;
    overflow: hidden;
}

.nav-link i {
    font-size: 1.5rem;
    min-width: 24px;
    margin-right: var(--spacing-md);
    transition: color 0.3s ease;
}

.link-text {
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
}

.sidebar:hover .link-text {
    opacity: 1;
    transform: translateX(0);
}

/* Hover & Active States */
.nav-item:hover .nav-link,
.nav-item.active .nav-link {
    color: var(--color-text-main);
}

.nav-item:hover i,
.nav-item.active i {
    color: var(--color-secondary);
    text-shadow: 0 0 10px var(--color-secondary);
}

.nav-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background: var(--color-secondary);
    box-shadow: 0 0 10px var(--color-secondary);
    transition: height 0.3s ease;
}

.nav-item.active::before {
    height: 60%;
}

/* Mobile Toggle - Smooth Animation */
.menu-toggle {
    position: fixed;
    top: var(--spacing-md);
    right: var(--spacing-md);
    z-index: 1001;
    color: var(--color-text-main);
    font-size: 2rem;
    cursor: pointer;
    display: none;
    /* Hidden on Desktop */
    background: rgba(5, 5, 10, 0.8);
    backdrop-filter: blur(10px);
    padding: 10px;
    border-radius: 12px;
    /* Rounded Square */
    border: 1px solid var(--color-glass-border);
    transition: all 0.3s ease;
    /* Smooth linear-like transition */
}

.menu-toggle:hover {
    transform: translateY(-2px) scale(1.1);
    /* No rotation, just lift */
    background: rgba(99, 102, 241, 0.2);
    border-color: #00F0FF;
    /* Neon Cyan */
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.6);
    /* Cyan Glow */
}

body.light-mode .menu-toggle:hover {
    border-color: #2962FF;
    /* Blue */
    box-shadow: 0 0 20px rgba(41, 98, 255, 0.6);
    /* Blue Glow */
    background: rgba(41, 98, 255, 0.1);
}

.menu-toggle:active {
    transform: scale(0.95);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .sidebar {
        left: -100%;
        /* Hide off-canvas */
        top: 0;
        transform: none;
        width: 100%;
        height: 100vh;
        border-radius: 0;
        background: rgba(5, 5, 10, 0.98);
        /* darker for mobile menu */
        justify-content: center;
        transition: left 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .sidebar.active {
        left: 0;
    }

    .menu-toggle {
        display: block;
    }

    .sidebar:hover {
        width: 100%;
        /* No hover expand logic on mobile */
    }

    .link-text {
        opacity: 1;
        transform: none;
    }

    .nav-link {
        justify-content: flex-start;
        /* Align left but centered in container approx */
        padding-left: 2rem;
        font-size: 1.5rem;
    }

    .nav-link i {
        margin-right: 20px;
    }

    .sidebar-logo {
        position: absolute;
        top: 2rem;
        left: 2rem;
    }
}

/* =========================================
   STEP 4: THEME TOGGLE
   ========================================= */

.theme-toggle {
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 10px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.theme-toggle:hover {
    color: var(--color-secondary);
    background: var(--color-glass-highlight);
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.2);
}

/* Light Mode Overrides */
body.light-mode {
    --color-bg-dark: #F0F2F5;
    /* Switch bg */
    --color-text-main: #1A1A1A;
    --color-text-muted: #555555;

    --color-glass: rgba(255, 255, 255, 0.6);
    --color-glass-border: rgba(0, 0, 0, 0.1);
    --color-glass-highlight: rgba(0, 0, 0, 0.05);
    --color-glass-highlight: rgba(0, 0, 0, 0.05);
    /* Darker hover for light mode */
}

/* =========================================
   LIGHT MODE OVERRIDES (User Requested)
   ========================================= */

/* 1. Menu Bar / Sidebar */
/* 1. Menu Bar / Sidebar */
body.light-mode .sidebar {
    background: rgba(255, 255, 255, 0.85);
    /* Light glass */
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}

body.light-mode .sidebar-logo-container {
    border-color: var(--color-secondary);
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.2);
}

body.light-mode .profile-name {
    background: none;
    -webkit-text-fill-color: initial;
    color: #333;
}

body.light-mode .profile-name:hover {
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.light-mode .status-indicator {
    border-color: var(--color-bg-dark);
}

/* Menu Toggle (Mobile) - Light Mode */
body.light-mode .menu-toggle {
    background: rgba(255, 255, 255, 0.5);
    /* Transparent/Light glass */
    color: #333;
    /* Dark icon */
    border-color: rgba(0, 0, 0, 0.1);
}

body.light-mode .menu-toggle:hover {
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

body.light-mode .nav-link {
    color: #444;
}

body.light-mode .nav-link:hover {
    color: var(--color-primary);
    background: rgba(0, 0, 0, 0.05);
}

/* 2. Tech Stack Text */
body.light-mode .tech-item {
    color: #333;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

body.light-mode .skill-item {
    border: 1px solid rgba(0, 0, 0, 0.2);
    /* Visible Border */
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
    /* Neon Cyan Glow */
    background: rgba(255, 255, 255, 0.8);
    /* Maintain contrast */
    color: #333;
    /* Dark text */
}

body.light-mode .skill-item:hover {
    box-shadow: 0 0 30px #00f0ff, inset 0 0 20px rgba(0, 240, 255, 0.2);
    /* Full Neon Cyan Glow */
    border-color: #00f0ff;
    background: rgba(255, 255, 255, 0.95);
}

body.light-mode .tech-item i,
body.light-mode .skill-item i {
    color: #222;
    /* Dark icon color in Light Mode */
}

/* Education Card Light Mode Hover */
body.light-mode .education-card:hover {
    box-shadow: 0 0 35px rgba(40, 90, 255, 0.6), 0 0 10px rgba(40, 90, 255, 0.4) !important;
    /* Blue Glow (Electric Blue) */
    border-color: #2962FF !important;
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-5px);
    /* Ensure lift effect works */
}

/* 3. Academic Journey Text / Titles */
body.light-mode .subsection-title-large,
body.light-mode .section-title {
    color: #222;
}

/* 4. Education Card Titles */
body.light-mode .education-card h3 {
    color: #1a1a1a;
    font-weight: 700;
}

body.light-mode .education-card h4 {
    color: #444;
}

body.light-mode .education-card {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

body.light-mode .university {
    color: #09C895 !important;
    /* Requested Green/Cyan Variant */
    font-weight: 500;
    margin-bottom: 0.5rem;
}

/* 5. Certifications Text */
body.light-mode .section-title {
    color: #111;
}

/* Specific cert card text if needed, relying on global text update mostly */

/* 6. Connect Widget Text */
body.light-mode .connect-label {
    color: #959595;
    font-weight: 600;
    text-shadow: none;
}

body.light-mode .hero-social-btn {
    border: 1px solid rgba(0, 0, 0, 0.829);
    color: #1d1d1d;
}

body.light-mode .hero-social-btn:hover {
    background: var(--color-primary);
    color: white;
}

/* Performance Optimization Hints */
.education-card,
.project-card,
.cert-card,
.skill-item {
    will-change: transform;
    /* Hint browser to optimize for movement */
    /* backface-visibility: hidden; Optional: can help reduce flickering */
}

/* 7. Specific Education & Journey Text Fixes */
body.light-mode .degree-title {
    background: none;
    -webkit-text-fill-color: initial;
    color: #1a1a1a;
}

body.light-mode .university {
    color: #d35400;
    /* Darker orange for visibility */
}

body.light-mode .education-header .subsection-title-large {
    background: none;
    -webkit-text-fill-color: initial;
    color: #222;
}

/* 8. Tech Text matching Stack */
/* "Tech" text inside .subsection-title-large needs to be visible */
body.light-mode .subsection-title-large {
    background: none;
    -webkit-text-fill-color: initial;
    color: #222;
}

/* Ensure the span (Stack) keeps its gradient or becomes visible */
body.light-mode .subsection-title-large .text-gradient {
    /* Gradient usually works on light, but if it's too light, darken it */
    background: linear-gradient(135deg, #111 0%, var(--color-secondary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Light Mode Specific Overrides */
body.light-mode .tech-item {
    color: var(--color-text-main);
}

body.light-mode .tech-item:hover {
    color: var(--color-primary);
    text-shadow: none;
    /* Cleaner look for light mode or custom shadow */
}

body.light-mode .tech-ticker-wrap {
    background: linear-gradient(to right,
            var(--color-bg-dark) 0%,
            transparent 10%,
            transparent 90%,
            var(--color-bg-dark) 100%);
    /* Since bg-dark changes in light mode, this should auto-update, 
        but ensure text is visible */
}

body.light-mode .hero-subtitle {
    color: #444;
    /* Ensure good contrast */
}

body.light-mode .connect-label {
    color: #333;
}

body.light-mode .hero-social-btn {
    border-color: rgba(0, 0, 0, 0.1);
    color: #333;
}

body.light-mode .hero-social-btn:hover {
    background: var(--color-primary) !important;
    /* Full Blue Force */
    color: white !important;
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.5) !important;
    /* Blue Glow Force */
    border-color: var(--color-primary) !important;
}

/* =========================================
   STEP 5: HERO SECTION
   ========================================= */

.hero-section {
    position: relative;
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    padding-left: 255px;
    /* Increased padding to sit beside sidebar */
    padding-right: var(--spacing-md);
    padding-right: var(--spacing-md);
    overflow: hidden;
}

#orb-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    /* Behind text (z-index 10) but above bg */
    pointer-events: none;
    /* Let clicks pass through, but we serve mousemove on window */
    /* Or if we want canvas specific interaction: pointer-events: auto; but main logic uses window listener */
}

.hero-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: flex-start;
    /* Align left */
    align-items: center;
    text-align: left;
    /* Text left */
    z-index: 10;
    position: relative;
}

.hero-content {
    max-width: 45%;
    /* Limit width to create space on right */
}

/* Typography */
.hero-title {
    /* ADJUST TITLE SIZE HERE */
    font-size: clamp(2.1rem, 5vw, 3.7rem);
    /* Slightly larger for impact since it's left aligned */
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: var(--spacing-md);
    letter-spacing: -0.02em;
}

.reveal-text {
    display: inline-block;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.reveal-text.delay-200 {
    animation-delay: 0.2s;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.text-gradient {
    background: linear-gradient(135deg, var(--color-text-main) 0%, var(--color-secondary) 50%, var(--color-primary) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

@keyframes gradientFlow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.hero-subtitle {
    font-size: 1.2rem;
    color: var(--color-text-muted);
    max-width: 600px;
    /* Increased to fit text in 2 lines */
    text-wrap: balance;
    /* Modern CSS for balanced lines */
    margin-bottom: var(--spacing-lg);
    margin-left: 0;
    margin-right: 0;
    line-height: 1.6;
}

/* Button */
@keyframes btnPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7);
    }

    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 15px rgba(99, 102, 241, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
    }
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    background: var(--color-primary);
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 500;
    transition: all 0.3s ease;
    overflow: hidden;
    position: relative;
    z-index: 10;
    /* Ensure high z-index for interactions */
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.5);
    /* Glowing effect */
}

/* ... existing before pseudo-element ... */
.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, var(--color-secondary), var(--color-accent));
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.btn-primary:hover::before {
    opacity: 1;
}

.btn-primary:hover {
    animation: btnPulse 1.5s infinite;
    box-shadow: 0 0 30px rgba(99, 102, 241, 0.8);
}

/* Visual / Iframe */
.hero-visual {
    flex: 1;
    position: relative;
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

/* Hero Connect Widget (Right Edge) */
.hero-connect-bar {
    position: absolute;
    right: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem 1rem;
    border-radius: 50px;

    /* Transparent Glass Design */
    background: rgba(59, 59, 60, 0.1);
    /* Very transparent */
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);

    z-index: 20;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);

    /* Restore Floating Animation */
    animation: floatWidget 4s ease-in-out infinite;
    /* Ensure opacity is handled by GSAP, but visibility is visible for float */
}

@keyframes floatWidget {

    0%,
    100% {
        transform: translateY(-50%);
    }

    50% {
        transform: translateY(calc(-50% - 10px));
    }
}

/* Default (Dark Mode) - Neon Cyan */
.hero-connect-bar:hover {
    background: rgba(59, 59, 60, 0.2);
    border-color: rgba(57, 201, 241, 0.39);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 0 20px rgba(99, 102, 241, 0.2);
    transform: translateY(-50%) scale(1.02);
}

/* Light Mode - Blue Glow */
body.light-mode .hero-connect-bar:hover {
    border-color: #2962FF;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 0 25px rgba(41, 98, 255, 0.6);
}

.connect-label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    font-size: 0.9rem;
    letter-spacing: 0.2em;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: 0.5rem;
}

.connect-line {
    width: 1.5px;
    /* Slightly thicker for visibility */
    height: 60px;
    background: linear-gradient(to bottom, var(--color-secondary), transparent);
    /* Neon Cyan Gradient */
    margin: 0.5rem 0;
    box-shadow: 0 0 10px var(--color-secondary), 0 0 5px #046b85;
    /* Strong Glow */
    border-radius: 2.5px;
}

.hero-socials {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.hero-social-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-text-muted);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    font-size: 1.2rem;
    text-decoration: none;
}

.hero-social-btn:hover {
    background: #00f0ff !important;
    /* Force Hardcoded Neon Cyan */
    border-color: #00f0ff !important;
    /* Force Pure Cyan */
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.6) !important;
    /* Force Pure Cyan Glow */
    color: #fff !important;
    transform: translateY(-3px);
}

/* Missing selector fixed */
.hero-visual-wrapper {
    width: 100%;
    height: 80vh;
    /* Prominent height */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.spline-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    opacity: 0;
    /* Animated via GSAP */
}

/* Background Glow */
.hero-bg-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    background: var(--gradient-glow);
    border-radius: 50%;
    filter: blur(80px);
    z-index: -1;
    opacity: 0.6;
}

.glow-1 {
    top: -20%;
    left: -10%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.2), transparent 70%);
}

.glow-2 {
    bottom: -10%;
    right: -10%;
    background: radial-gradient(circle, rgba(0, 240, 255, 0.15), transparent 70%);
}

/* Responsive */
/* Responsive */
/* (Duplicates removed) */


.connect-line {
    width: 2px;
    height: 60px;
    background: linear-gradient(to bottom, var(--color-secondary), transparent);
    box-shadow: 0 0 10px var(--color-secondary);
    border-radius: 2px;
}

/* Tech Ticker */
.tech-ticker-wrap {
    position: absolute;
    bottom: 2rem;
    left: 0;
    width: 100%;
    overflow: hidden;
    z-index: 10;
    background: linear-gradient(to right,
            var(--color-bg-dark) 0%,
            transparent 10%,
            transparent 90%,
            var(--color-bg-dark) 100%);
    padding: 1rem 0;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.tech-ticker-track {
    display: flex;
    gap: 4rem;
    width: max-content;
    animation: scrollTicker 30s linear infinite;
}

.tech-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: var(--color-text-muted);
    font-size: 1.1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    transition: all 0.3s ease;
    cursor: default;
    padding: 0.5rem 1rem;
    border-radius: 4px;
}

.tech-item i {
    font-size: 1.4rem;
    color: var(--color-secondary);
    filter: drop-shadow(0 0 5px rgba(0, 240, 255, 0.4));
    transition: all 0.3s ease;
}

/* Default (Dark Mode) - Pure Neon Cyan Glow (No Box) */
.tech-item:hover {
    color: #fff;
    /* White text for contrast */
    text-shadow: 0 0 10px #00F0FF, 0 0 20px #00F0FF, 0 0 40px #00F0FF;
    /* Pure Neon Cyan Text Glow */
    transform: scale(1.1);
    background: transparent;
    /* Remove box background */
    box-shadow: none;
    /* Remove box border */
}

.tech-item:hover i {
    transform: scale(1.2);
    filter: drop-shadow(0 0 15px #00F0FF);
    /* Intensified Icon Glow */
    color: #fff;
}

/* Light Mode - Full Electric Blue Glow */
body.light-mode .tech-item:hover {
    text-shadow: 0 0 10px rgba(41, 98, 255, 0.8);
    box-shadow: 0 0 0 1px #2962FF, 0 0 20px rgba(41, 98, 255, 0.4);
    /* Blue Border+Glow */
}

body.light-mode .tech-item:hover i {
    filter: drop-shadow(0 0 12px rgba(41, 98, 255, 0.9));
}

@keyframes scrollTicker {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }

    /* Move half length (since duplicated) */
}

.hero-socials {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.hero-social-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-text-muted);
    font-size: 1.3rem;
    /* Control icon size via font-size */
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hero-social-btn i {
    display: block;
    /* Ensure it's not inline-collapsed */
    font-size: 1.3rem;
    line-height: 1;
}

.hero-social-btn:hover {
    color: var(--color-bg-dark);
    background: var(--color-secondary);
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.4);
    transform: scale(1.1);
    border-color: var(--color-secondary);
}

/* Hide on mobile */
@media (max-width: 968px) {
    .hero-connect-bar {
        display: none;
    }

    .hero-section {
        padding-left: var(--spacing-md);
        padding-top: 80px;
        /* Space for mobile header usually, here just top spacing */
        align-items: flex-start;
    }

    .hero-title {
        font-size: 3rem;
    }
}

/* =========================================
   STEP 6: ABOUT SECTION
   ========================================= */

/* =========================================
   STEP 6: ABOUT SECTION
   ========================================= */

.about-section {
    padding: var(--spacing-lg) 0;
    position: relative;
    padding-left: 100px;
    padding-right: var(--spacing-md);
    overflow: hidden;
    /* Prevent glow overflow */
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.section-title {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-md);
    color: var(--color-text-main);
    position: relative;
    display: inline-block;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    align-items: center;
}

/* Visual Side */
.about-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.profile-frame {
    width: 320px;
    height: 320px;
    border-radius: 50%;
    position: relative;
    z-index: 2;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.profile-frame:hover {
    transform: rotate(2deg) scale(1.02);
    box-shadow: 0 0 30px rgba(0, 240, 255, 0.6), 0 0 60px rgba(0, 240, 255, 0.4);
    /* Neon Cyan Glow */
    border-color: #00f0ff;
    backdrop-filter: blur(20px);
    /* Enhanced Blur */
}

/* Light Mode Override for Profile Glow */
body.light-mode .profile-frame:hover {
    box-shadow: 0 0 30px rgba(41, 98, 255, 0.6), 0 0 60px rgba(41, 98, 255, 0.4);
    /* Blue Blur Glow */
    border-color: #2962FF;
    backdrop-filter: blur(20px);
}

/* Profile Image Style */
.profile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Ensures image fills the circle without stretching */
    display: block;
}

.profile-glow {
    position: absolute;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.4) 0%, rgba(0, 240, 255, 0.1) 50%, transparent 70%);
    filter: blur(40px);
    animation: rotateGlow 10s linear infinite;
    z-index: 1;
}

@keyframes rotateGlow {
    0% {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(180deg) scale(1.1);
    }

    100% {
        transform: rotate(360deg) scale(1);
    }
}

/* Content Side */
.about-bio {
    font-size: 1.1rem;
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-md);
    line-height: 1.8;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    text-align: justify;
}

/* Skills Grid (Enhanced) */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: var(--spacing-md);
    perspective: 1000px;
}

.skill-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    overflow: hidden;
}

/* Float handled by GSAP now */

.skill-item i {
    font-size: 2.5rem;
    margin-bottom: 12px;
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.4s ease;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.1));
}

.skill-item span {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text-muted);
    transition: color 0.3s ease;
}

/* Hover Effects */
.skill-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: #00f0ff;
    /* Neon Cyan */
    box-shadow: 0 0 30px #00f0ff, inset 0 0 20px rgba(0, 240, 255, 0.2);
    /* Full Neon Cyan Glow */
    /* transform handled by GSAP usually, but hover scale is okay if GSAP isn't actively tweening scale constantly,
       but for safety we'll use GSAP for hover or be careful.
       Let's keep hover scale for now, GSAP takes priority on 'transform' so css hover might fail if GSAP set it.
       Better to use GSAP for hover? For simplicity, let's try CSS !important or just see.
       Actually, if GSAP sets matrix, CSS transform: scale(1.05) might be ignored or overwrite the float.
       Safest is to remove CSS transform on hover and use color/shadow only, or use a wrapper.
       I will use a wrapper in HTML for the hover scale? No, too much HTML edit.
       I will just focus on shadow/color for hover to avoid transform conflict.
    */
    /* transform: translateY(-5px) scale(1.05); REMOVED to avoid conflict */
}

.skill-item:hover i {
    color: var(--color-secondary);
    filter: drop-shadow(0 0 15px var(--color-secondary));
    transform: scale(1.1);
}

.skill-item:hover span {
    color: var(--color-text-main);
}

/* Responsive */
@media (max-width: 968px) {
    .about-section {
        padding-left: var(--spacing-md);
    }

    .about-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .about-visual {
        margin-bottom: var(--spacing-lg);
    }

    .skills-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .skills-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .profile-frame {
        width: 250px;
        height: 250px;
    }

    .profile-glow {
        width: 280px;
        height: 280px;
    }
}

/* =========================================
   STEP 7: EDUCATION SECTION
   ========================================= */

/* =========================================
   STEP 7: EDUCATION SECTION (ACADEMIC JOURNEY)
   ========================================= */

.education-section {
    padding: var(--spacing-lg) 0;
    padding-left: 100px;
    padding-right: var(--spacing-md);
    position: relative;
}

.education-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: var(--spacing-lg);
}

.section-icon {
    font-size: 2.5rem;
    color: var(--color-primary);
    filter: drop-shadow(0 0 10px var(--color-primary));
}

.education-layout {
    display: grid;
    grid-template-columns: 50px 1fr;
    gap: var(--spacing-md);
    position: relative;
}

/* Timeline Left */
.timeline-progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding-top: 20px;
}

.progress-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--color-primary), transparent);
    box-shadow: 0 0 10px var(--color-primary);
}

.progress-node {
    width: 16px;
    height: 16px;
    background: var(--color-secondary);
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0 0 15px var(--color-secondary);
}

/* Glass Card */
.education-card {
    position: relative;
    padding: 2rem;
    /* Reduced from 2.5rem */
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    overflow: hidden;
    margin-bottom: 2rem;
    /* Add spacing for stacked cards */
}

/* ... existing hover styles ... */

.badge-pill {
    padding: 6px 16px;
    background: rgba(99, 102, 241, 0.15);
    color: var(--color-primary);
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid rgba(99, 102, 241, 0.3);
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.2);
}

.badge-secondary {
    background: rgba(255, 95, 31, 0.15);
    /* Neon Orange */
    color: #e85820;
    border-color: rgba(255, 95, 31, 0.3);
    box-shadow: 0 0 15px rgba(255, 95, 31, 0.2);
}

.education-card:hover {
    box-shadow: 0 0 35px rgba(0, 240, 255, 0.5), 0 0 10px rgba(0, 240, 255, 0.5) !important;
    border-color: #00F0FF !important;
}

.education-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.05), transparent 70%);
    z-index: -1;
    pointer-events: none;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.badge-pill {
    padding: 6px 16px;
    background: rgba(99, 102, 241, 0.15);
    color: var(--color-primary);
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid rgba(99, 102, 241, 0.3);
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.2);
}

.duration {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text-muted);
    font-size: 0.95rem;
}

.duration i {
    color: var(--color-secondary);
}

.degree-title {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    background: linear-gradient(90deg, #fff, #ccc);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.university {
    font-size: 1.1rem;
    color: var(--color-secondary);
    /* Revert to Cyan */
    margin-bottom: 1.5rem;
    font-weight: 500;
}

body.light-mode .university {
    color: #8B0000;
    /* Dark Red in Light Mode */
    font-weight: 600;
    /* Slightly bolder for readability */
}

.degree-description {
    color: var(--color-text-muted);
    line-height: 1.7;
    font-size: 1rem;
    max-width: 600px;
}

/* Responsive */
@media (max-width: 968px) {
    .education-section {
        padding-left: var(--spacing-md);
    }

    .education-layout {
        grid-template-columns: 30px 1fr;
    }

    .degree-title {
        font-size: 1.5rem;
    }
}

/* Subsection Styling */
.subsection-title-large {
    font-size: 1.8rem;
    font-weight: 600;
    margin: 0;
    background: linear-gradient(90deg, #fff, #ccc);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Certifications */
.cert-section {
    position: relative;
    padding-top: var(--spacing-md);
}

.cert-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.cert-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    text-align: center;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.03);
    /* Slightly stronger base */
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    /* Increased blur */
    -webkit-backdrop-filter: blur(20px);
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    /* Subtle depth */
}

.cert-card:hover {
    transform: translateY(-8px) scale(1.02);
    background: rgba(255, 255, 255, 0.08);
    /* Slightly brighter bg */
    border-color: rgba(99, 102, 241, 0.9);
    /* Vibrant Blue Border */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(99, 102, 241, 0.6);
    /* Brighter Blue Glow */
}



/* Image Wrapper & Image */
.cert-img-wrapper {
    height: 160px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s ease;
}

.cert-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.cert-card:hover .cert-img-wrapper {
    border-color: var(--color-primary);
}

.cert-card:hover .cert-img {
    transform: scale(1.05);
}

.cert-card h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-main);
    margin-bottom: 0.5rem;
}

.cert-issuer {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin-bottom: 1.5rem;
    /* Increased spacing */
}

.cert-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 50px;
    background: rgba(99, 102, 241, 0.1);
    color: var(--color-primary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.cert-view-btn:hover {
    background: var(--color-primary);
    color: #fff;
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.4);
    transform: translateY(-2px);
}

.cert-view-btn i {
    font-size: 1.1rem;
    transition: transform 0.3s ease;
}

.cert-view-btn:hover i {
    transform: translate(2px, -2px);
}

/* =========================================
   STEP 8: PROJECTS SECTION
   ========================================= */

.projects-section {
    padding: var(--spacing-lg) 0;
    /* Full width - no side padding on section */
    margin-bottom: var(--spacing-lg);
}

/* Specific Spacing for Projects Title */
.projects-section .section-title {
    margin-bottom: 3.5rem;
    padding-left: var(--spacing-md);
    /* Keep title aligned */
}

.projects-container {
    /* Grid Layout Container - Safe Zone for Pop-Ups */
    padding: 40px;
    /* Padding to prevent hover clipping */
    overflow: visible;
    /* Allow pop-ups to show */
}

.projects-container::-webkit-scrollbar {
    display: none;
}

.projects-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 2 Columns */
    gap: 25px;
    /* Minimal necessary space */
    width: 100%;
    justify-items: center;
    /* Center cards in their cells */
}

@media (max-width: 900px) {
    .projects-wrapper {
        grid-template-columns: 1fr;
        /* Stack on mobile */
    }

    .project-card {
        width: 100% !important;
        min-width: unset !important;
    }
}

/* Remove Spacer */
.projects-wrapper::after {
    display: none;
}

.project-card {
    /* Fluid Dimensions for Grid */
    width: 100%;
    max-width: 550px;
    /* Wider card (was 380px) */
    /* min-width removed to allow responsiveness */
    height: 510px;
    /* Fixed height */

    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    /* Premium Glass Effect */
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Slightly faster spring */
    position: relative;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    z-index: 1;
    /* Base z-index */
}

.project-card:hover {
    transform: translateY(-15px) scale(1.08);
    /* Stronger Pop */
    z-index: 100 !important;
    /* Force on top */
    background: rgba(255, 255, 255, 0.1);
    /* Brighter glass */
    border-color: var(--color-secondary);
    /* Neon Cyan Border */
    border-radius: 20px;
    /* Enforce rounded corners */
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5),
        /* Deep float shadow */
        0 0 30px rgba(0, 240, 255, 0.3);
    /* Neon Cyan Glow */
}



.project-image {
    height: 210px;
    background: #0f0f1a;
    position: relative;
    overflow: hidden;
}

.project-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.project-card:hover .project-img {
    transform: scale(1.15);
    /* Slightly stronger zoom */
}

/* Add a gloss overlay effect */
.project-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    /* Match card radius */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.project-card:hover::after {
    opacity: 1;
}

.hero-socials {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.hero-social-btn {
    width: 60px;
    /* Matched size */
    height: 60px;
    border-radius: 20px;
    /* Matched border radius */
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-text-muted);
    font-size: 1.5rem;
    /* Matched font size */
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Bouncy spring */
    position: relative;
    overflow: hidden;
}

.hero-social-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(99, 102, 241, 0.6), transparent 70%);
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.4s ease;
}

.hero-social-btn:hover {
    transform: translateY(-5px) scale(1.1) rotate(5deg);
    /* Lift, Scale, Tilt */
    background: rgba(255, 255, 255, 0.03);
    /* Keep consistent or update if needed */
    border-color: var(--color-secondary);
    box-shadow: 0 10px 25px rgba(0, 240, 255, 0.3);
    color: #fff;
}

.hero-social-btn:hover::before {
    opacity: 1;
    transform: scale(1.2);
}

.hero-social-btn i {
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease;
}

.hero-social-btn:hover i {
    transform: scale(1.2);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

.project-info {
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.project-title {
    font-size: 1.5rem;
    color: var(--color-text-main);
    transition: color 0.3s ease;
}

.project-card:hover .project-title {
    color: var(--color-secondary);
}

.tech-stack {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.tech-stack span {
    font-size: 0.75rem;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    color: var(--color-secondary);
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.project-card:hover .tech-stack span {
    background: rgba(0, 240, 255, 0.1);
    border-color: rgba(0, 240, 255, 0.2);
}

.btn-sm {
    align-self: flex-start;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    text-decoration: none;
    font-size: 0.9rem;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.btn-sm:hover {
    background: var(--color-primary);
    color: #fff;
    box-shadow: 0 0 10px var(--color-primary);
}

/* Responsive */
@media (max-width: 768px) {
    .projects-section {
        padding-left: var(--spacing-md);
    }

    .projects-wrapper {
        flex-direction: column;
    }

    .project-card {
        min-width: 100%;
    }
}

/* =========================================
   STEP 9: CONTACT SECTION
   ========================================= */

.contact-section {
    padding: var(--spacing-lg) 0;
    padding-left: 100px;
    padding-right: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    /* Reduced from spacing-lg for tighter layout */
}

.contact-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    max-width: 600px;
    margin: 0 auto;
}

/* Form Styles */
.contact-form {
    padding: var(--spacing-md);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    /* Smooth Animation for Form */
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.contact-form:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.2);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.contact-form input,
.contact-form textarea {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--color-glass-border);
    padding: 12px 16px;
    border-radius: 8px;
    color: var(--color-text-main);
    font-family: var(--font-main);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.2);
    background: rgba(99, 102, 241, 0.05);
}

/* Social Links */
.social-links {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-sm);
}

.social-item {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-text-muted);
    font-size: 1.8rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-item:hover {
    color: var(--color-secondary);
    transform: translateY(-5px);
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
    border-color: var(--color-secondary);
}

/* Responsive */
@media (max-width: 768px) {
    .contact-section {
        padding-left: var(--spacing-md);
    }
}

/* =========================================
   STEP 10: LET'S CONNECT SECTION
   ========================================= */

.connect-section {
    padding: var(--spacing-md) 0;
    margin-bottom: var(--spacing-sm);
    position: relative;
    z-index: 5;
}

.connect-card {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding: 2.5rem 2rem;
    border-radius: 30px;
    /* Match Contact Glass Style */
    background: var(--color-glass);
    border: 1px solid var(--color-glass-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: hidden;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    /* Smooth Transition for Hover */
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Dark Mode Only Glow */
body:not(.light-mode) .connect-card:hover {
    transform: translateY(-5px) scale(1.01);
    background: rgba(255, 255, 255, 0.08);
    /* Slightly lighter on hover */
    border-color: #00eeffca;
    /* Neon Cyan */
    box-shadow: 0 0 35px rgba(0, 240, 255, 0.6), 0 0 10px rgba(0, 240, 255, 0.4);
    /* Neon Cyan Glow */
}

/* Base Light Mode Override (Prevent default if used previously, or just ensure cleanliness) */
body.light-mode .connect-card:hover {
    /* Keep it simple or different for light mode if it was previously matching */
    transform: translateY(-5px) scale(1.01);
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Remove breathe animation if it conflicts with hover transform, 
   or keep it if subtle. Let's remove it to focus on the hover interaction 
   requested by "smooth animation while place the cursor on it". */

.connect-content {
    position: relative;
    z-index: 2;
    text-align: left;
    max-width: 600px;
}

.connect-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--color-secondary);
    /* Neon Cyan */
    text-shadow: 0 0 15px rgba(21, 80, 85, 0.5);
    /* Glowing Effect */
    transition: text-shadow 0.3s ease;
}

body.light-mode .connect-title {
    color: #000;
    text-shadow: none;
}

.connect-title:hover {
    text-shadow: 0 0 25px rgba(29, 143, 151, 0.8), 0 0 50px rgba(0, 240, 255, 0.3);
}

.connect-text {
    font-size: 1.1rem;
    color: var(--color-text-muted);
    margin-bottom: 1.5rem;
    /* Reduced from 2.5rem */
    line-height: 1.6;
}

.connect-socials {
    display: flex;
    gap: 1.5rem;
    justify-content: flex-start;
}

.connect-icon-btn {
    width: 60px;
    height: 60px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-main);
    font-size: 1.5rem;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Bouncy spring */
    position: relative;
    overflow: hidden;
    text-decoration: none;
}

.connect-icon-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, var(--color-primary), transparent 70%);
    /* Synced color */
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.4s ease;
}

.connect-icon-btn:hover {
    transform: translateY(-5px) scale(1.1) rotate(5deg);
    /* Lift, Scale, Tilt */
    background: #00f0ff;
    /* Hardcoded Neon Cyan */
    border-color: #00f0ff;
    /* Pure Cyan */
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.6);
    /* Pure Cyan Glow */
    color: #fff;
}

.connect-icon-btn:hover::before {
    opacity: 1;
    transform: scale(1.2);
}

.connect-icon-btn i {
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease;
}

.connect-icon-btn:hover i {
    transform: scale(1.2);
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}

/* Ambient Glow Pulse */
.ambient-glow {
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.15), transparent 70%);
    filter: blur(60px);
    z-index: 1;
    pointer-events: none;
    animation: ambientPulse 10s infinite alternate;
}

body.light-mode .connect-icon-btn {
    border-color: rgba(0, 0, 0, 0.1);
    color: #333;
}

body.light-mode .connect-icon-btn:hover {
    background: var(--color-primary);
    /* Full Blue */
    color: white;
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.5);
    /* Blue Glow */
    border-color: var(--color-primary);
}

@keyframes ambientPulse {
    0% {
        opacity: 0.5;
        transform: scale(1);
    }

    100% {
        opacity: 0.8;
        transform: scale(1.2);
    }
}

.simple-footer {
    text-align: center;
    padding-top: 1.5rem;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    opacity: 0.6;
    transition: all 0.3s ease;
    cursor: default;
}

.simple-footer:hover {
    opacity: 1;
    color: var(--color-primary);
    text-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .connect-card {
        padding: 2rem;
        text-align: center;
        align-items: center;
        /* Center on mobile */
    }

    .connect-content {
        align-items: center;
        text-align: center;
        margin: 0 auto;
    }

    .connect-socials {
        justify-content: center;
    }
}

/* =========================================
   PROJECT MODAL (GALLERY)
   ========================================= */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    /* Dark overlay */
    backdrop-filter: blur(10px);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    /* Hidden by default */
    transition: all 0.4s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    width: 90%;
    max-width: 900px;
    background: rgba(20, 20, 22, 0.6);
    /* Glass card */
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
    border-radius: 20px;
    padding: 2rem;
    position: relative;
    transform: translateY(50px) scale(0.9);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal-overlay.active .modal-content {
    transform: translateY(0) scale(1);
}

.modal-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    transition: color 0.3s ease;
    z-index: 10;
}

.modal-close-btn:hover {
    color: var(--color-primary);
    transform: rotate(90deg);
}

.modal-gallery-img {
    width: 100%;
    height: auto;
    max-height: 70vh;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    margin-bottom: 1.5rem;
}

.modal-details {
    text-align: center;
}

.modal-title {
    font-size: 2rem;
    color: #fff;
    margin-bottom: 0.5rem;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.modal-desc {
    color: var(--color-text-muted);
    font-size: 1rem;
    max-width: 700px;
    margin: 0 auto 1.5rem auto;
}

/* Light Mode Overrides for Modal */
body.light-mode .modal-content {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

body.light-mode .modal-title {
    color: #333;
    text-shadow: none;
}

/* Modal Navigation Buttons */
.modal-nav {
    position: absolute;
    top: auto;
    /* Disable top centering */
    bottom: 20px;
    /* Move to bottom */
    transform: none;
    /* Disable Y translate */
    background: rgba(255, 255, 255, 0.2);
    /* More visible default */
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    backdrop-filter: blur(5px);
}

.modal-nav:hover {
    background: var(--color-primary);
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.6);
    border-color: var(--color-primary);
    transform: scale(1.1);
}

.modal-nav.prev {
    left: 20px;
}

.modal-nav.next {
    right: 20px;
}

.modal-gallery-img {
    transition: opacity 0.2s ease;
}

/* Hide nav on mobile if needed, or adjust size */
@media (max-width: 768px) {
    .modal-nav {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
        top: auto;
        bottom: 20px;
        /* Move to bottom on mobile */
        transform: none;
    }

    .modal-nav.prev {
        left: 30%;
    }

    .modal-nav.next {
        right: 30%;
    }
}

/* =========================================
   LIGHT MODE PROJECT CARD OVERRIDES
   ========================================= */

/* Project Title Hover */
.project-title {
    transition: color 0.3s ease;
}

/* Dark Mode Default (Cyan Hover) */
.project-card:hover .project-title {
    color: var(--color-secondary);
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

/* Light Mode Project Card Hover (Blue) */
body.light-mode .project-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1),
        /* Softer deep shadow for light mode */
        0 0 30px rgba(99, 102, 241, 0.4);
    /* Blue Glow */
}

/* Light Mode (Blue Hover) */
body.light-mode .project-card:hover .project-title {
    color: var(--color-primary);
    /* Blue */
    text-shadow: 0 0 10px rgba(99, 102, 241, 0.3);
}

/* Tech Stack Items default is handled in base styles, here we override for Light Mode */
/* Light Mode Tech Stack (Blue) */
body.light-mode .tech-stack span {
    background: rgba(99, 102, 241, 0.1);
    color: var(--color-primary) !important;
    /* Force Blue text */
    border: 1px solid rgba(99, 102, 241, 0.3);
}

/* Live Button Class */
.btn-live {
    background: rgba(0, 240, 255, 0.1);
    border-color: var(--color-secondary);
    color: var(--color-secondary);
}

.btn-live:hover {
    background: var(--color-secondary);
    color: #000;
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.4);
}

/* Light Mode Live Button (Blue) */
body.light-mode .btn-live {
    background: rgba(99, 102, 241, 0.1);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

body.light-mode .btn-live:hover {
    background: var(--color-primary);
    color: #fff;
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.4);
}

/* Light Mode Gallery Navigation Buttons */
body.light-mode .modal-nav {
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.3);
    color: var(--color-primary);
}

body.light-mode .modal-nav:hover {
    background: var(--color-primary);
    color: #fff;
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.5);
}

/* =========================================
   STEP 9: NEW HERO BUTTONS
   ========================================= */

/* Hero Buttons Wrapper */
.hero-buttons {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    margin-top: 2rem;
}

/* Download CV Button */
.btn-cv {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    z-index: 10;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.btn-cv:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--color-secondary);
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
    transform: translateY(-2px);
}

.btn-cv i {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.btn-cv:hover i {
    transform: translateY(2px);
    color: var(--color-secondary);
}

/* Light Mode Override for CV Button */
body.light-mode .btn-cv {
    background: rgba(255, 255, 255, 0.6);
    color: #333;
    border-color: rgba(0, 0, 0, 0.1);
}

body.light-mode .btn-cv:hover {
    background: rgba(255, 255, 255, 0.9);
    border-color: var(--color-primary);
    color: var(--color-primary);
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
}

/* =========================================
   STEP 10: EXPERIENCE SECTION (Relocated & Redesigned)
   ========================================= */

.experience-section-inner {
    margin-top: 4rem;
    position: relative;
    z-index: 2;
}

.experience-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 2rem;
}

.experience-card {
    padding: 2.5rem;
    border-radius: 24px;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    /* Default col (mobile) */
    gap: 2rem;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
}

/* Horizontal Layout for Desktop */
@media (min-width: 900px) {
    .experience-card.horizontal {
        flex-direction: row;
        align-items: flex-start;
        gap: 2.5rem;
    }
}

.experience-card:hover {
    transform: translateY(-5px) scale(1.01);
    border-color: rgba(99, 102, 241, 0.5);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 20px rgba(99, 102, 241, 0.2);
}

.exp-logo-wrapper {
    width: 80px;
    height: 80px;
    min-width: 80px;
    /* Prevent shrink */
    border-radius: 20px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.exp-logo-wrapper.icon-only {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(236, 72, 153, 0.2));
    color: #fff;
    font-size: 2.5rem;
    border-color: rgba(255, 255, 255, 0.2);
}

.exp-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Changed to cover to fill border */
    padding: 0;
    /* Remove padding for perfect match */
    background: #fff;
    border-radius: 18px;
    /* Slightly less than wrapper to account for border if needed, or match wrapper */
}

/* Specific styling if full image cover is needed, override via JS or specific class if needed. 
   Assuming logos prefer white bg. */

.exp-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.exp-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    font-weight: 500;
}

.exp-date {
    background: rgba(255, 255, 255, 0.05);
    padding: 4px 12px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

/* Dark Mode Hover */
.experience-card:hover .exp-date {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.1);
}

.exp-role {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.3;
}

.exp-company {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--color-primary);
    margin: 0;
    cursor: pointer;
    transition: color 0.3s ease;
}

.exp-company:hover {
    color: var(--color-secondary);
    text-decoration: underline;
}

.exp-desc {
    font-size: 1rem;
    color: var(--color-text-muted);
    line-height: 1.7;
    margin: 0.5rem 0;
}

.exp-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-secondary);
    text-decoration: none;
    margin-top: auto;
    /* Push to bottom if content stretches (not relevant in col layout but good practice) */
    transition: all 0.3s ease;
}

.exp-link i {
    transition: transform 0.3s ease;
}

.exp-link:hover {
    color: #fff;
}

.exp-link:hover i {
    transform: translate(2px, -2px);
}


/* Light Mode Overrides */
body.light-mode .experience-card {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(99, 102, 241, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

body.light-mode .experience-card:hover {
    background: #fff;
    box-shadow: 0 20px 40px rgba(99, 102, 241, 0.15);
    border-color: var(--color-primary);
}

body.light-mode .exp-role {
    color: #111;
}

body.light-mode .exp-img {
    background: transparent;
    /* Or keep white if logos need it */
}

/* Light Mode Specific Hovers */
body.light-mode .exp-link {
    color: var(--color-primary);
    /* Blue color by default */
}

body.light-mode .exp-link:hover {
    color: var(--color-secondary);
    /* or a brighter blue */
    text-shadow: 0 0 10px rgba(99, 102, 241, 0.4);
    /* Glow effect */
}

body.light-mode .experience-card:hover .exp-date {
    background: rgba(99, 102, 241, 0.1);
    /* Light Blue bg */
    color: var(--color-primary);
    /* Blue text */
    border-color: rgba(99, 102, 241, 0.2);
}

/* =========================================
   STEP 11: EDUCATION ACHIEVEMENTS
   ========================================= */
.education-achievements {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.achievement-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.95rem;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.achievement-item i {
    color: var(--color-secondary);
    font-size: 1.2rem;
    margin-top: 2px;
    filter: drop-shadow(0 0 5px rgba(236, 72, 153, 0.4));
}

.achievement-item strong {
    color: #fff;
    font-weight: 600;
}

/* Light Mode Override */
body.light-mode .education-achievements {
    border-top-color: rgba(0, 0, 0, 0.05);
}

body.light-mode .achievement-item strong {
    color: var(--color-primary);
}

/* =========================================
   MOBILE RESPONSIVENESS OVERRIDES
   ========================================= */

@media (max-width: 900px) {

    /* 1. Global Layout Resets */
    .hero-section,
    .about-section,
    .education-section,
    .projects-section,
    .contact-section,
    .experience-section-inner {
        padding-left: 20px !important;
        padding-right: 20px !important;
        padding-top: 80px;
        /* Space for top mobile menu if needed */
    }

    /* 2. Sidebar Navigation */
    .sidebar {
        width: 100%;
        height: 100vh;
        left: -100%;
        top: 0;
        bottom: 0;
        border-radius: 0;
        background: rgba(5, 5, 10, 0.98);
        border: none;
        z-index: 9999;
        transform: none;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .sidebar.active {
        left: 0;
    }

    .nav-links {
        align-items: center;
        gap: 2rem;
    }

    .nav-link {
        font-size: 1.5rem;
        justify-content: center;
        padding: 10px;
    }

    .menu-toggle {
        display: block;
        top: 20px;
        right: 20px;
    }

    /* 3. Hero Section */
    .hero-section {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        padding-top: 120px;
        /* More space for hero */
    }

    .hero-container {
        flex-direction: column;
        align-items: center;
    }

    .hero-content {
        max-width: 100%;
        margin-bottom: 2rem;
    }

    .hero-title {
        font-size: 2.5rem;
        line-height: 1.2;
    }

    .hero-subtitle {
        font-size: 1rem;
        margin: 0 auto 2rem auto;
    }

    /* Hide complex desktop elements on mobile */
    .hero-connect-bar,
    .hero-bg-glow {
        display: none;
    }

    /* Adjust ticker */
    .tech-ticker-wrap {
        bottom: 10px;
    }

    /* Hero Buttons - Center them */
    .hero-buttons {
        justify-content: center;
    }

    /* 4. About Section */
    .about-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .about-visual {
        margin-bottom: 1rem;
    }

    .profile-frame {
        width: 200px;
        height: 200px;
    }

    .profile-glow {
        width: 220px;
        height: 220px;
    }

    .skills-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 cols for mobile is better than 1 */
        gap: 1rem;
    }

    /* 5. Education Section */
    .education-layout {
        grid-template-columns: 20px 1fr;
        /* Shrink timeline gutter */
        gap: 15px;
    }

    .education-card {
        padding: 1.5rem;
    }

    .card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .duration {
        margin-left: 0 !important;
    }

    /* 6. Projects Section */
    .projects-container {
        padding: 10px;
    }

    .projects-wrapper {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .project-card {
        max-width: 100%;
        height: auto;
        /* Allow flexible height */
        min-height: 500px;
    }

    .project-image {
        height: 200px;
    }

    /* 7. Contact Section */
    .contact-container {
        grid-template-columns: 1fr;
    }

    .contact-form {
        padding: 1.5rem;
    }

    /* 8. Connect/Footer */
    .connect-card {
        padding: 2rem 1.5rem;
        flex-direction: column;
        text-align: center;
        gap: 2rem;
    }

    .connect-content {
        max-width: 100%;
    }

    .connect-socials {
        justify-content: center;
        width: 100%;
    }

    .simple-footer {
        padding-bottom: 80px;
        /* Space for bottom interaction if needed */
    }

    /* Modal adjustments */
    .modal-content {
        width: 95%;
        padding: 1.5rem;
    }

    .modal-nav {
        bottom: 10px;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem;
    }

    .skills-grid {
        grid-template-columns: 1fr;
        /* 1 col for very small screens */
    }

    .project-card {
        min-height: auto;
    }
}

/* Contact Form Loading Spinner */
.animate-spin {
    animation: spin 1s linear infinite;
    display: inline-block;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}