/* Design System & Variables */
:root {
    /* Colors */
    --bg-color: #0a0a0a;
    --bg-secondary: #111111;
    --text-primary: #ededed;
    --text-secondary: #a1a1a1;
    --accent-primary: #6366f1;
    /* Indigo */
    --accent-secondary: #a855f7;
    /* Purple */
    --accent-tertiary: #10b981;
    /* Emerald */
    --accent-quaternary: #facc15;
    /* Yellow */
    --accent-red: #ef4444;
    /* Red */
    --accent-pink: #ec4899;
    /* Pink */
    --accent-glow: rgba(99, 102, 241, 0.15);

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));

    /* Typography */
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* Spacing */
    --container-width: 1200px;
    --header-height: 80px;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-medium: 0.3s ease;
}

[data-theme="light"] {
    --bg-color: #ffffff;
    --bg-secondary: #f3f4f6;
    --text-primary: #111827;
    --text-secondary: #4b5563;
    --accent-glow: rgba(99, 102, 241, 0.05);
}

/* Light Mode Card Overrides */
[data-theme="light"] .about-card,
[data-theme="light"] .tech-stack-card,
[data-theme="light"] .achievement-card {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .navbar {
    background: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .nav-links {
    background: rgba(255, 255, 255, 0.98);
    border-left: 1px solid rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .dropdown-content {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .dropdown-content a {
    color: var(--text-primary);
}

[data-theme="light"] .dropdown-content a:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-color);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
}

#cursor-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-fast);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

.text-highlight {
    color: var(--accent-secondary);
    font-weight: 700;
}

.text-highlight-secondary {
    color: var(--accent-primary);
    font-weight: 700;
}

.text-highlight-tertiary {
    color: var(--accent-tertiary);
    font-weight: 700;
}

.text-highlight-yellow {
    color: var(--accent-quaternary);
    font-weight: 700;
}

.text-highlight-red {
    color: var(--accent-red);
    font-weight: 700;
}

.text-highlight-pink {
    color: var(--accent-pink);
    font-weight: 700;
    text-shadow: 0 0 10px rgba(255, 16, 240, 0.5);
}

/* Utilities */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 2rem;
}

.section {
    padding: 5rem 0;
}

/* Navbar */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    background: rgba(10, 10, 10, 0.8);
    backdrop-filter: blur(10px);
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Dropdown Menu */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: rgba(10, 10, 10, 0.95);
    min-width: 160px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    top: 100%;
    right: 0;
    padding: 0.5rem 0;
}

.dropdown-content li {
    display: block;
    margin: 0;
}

.dropdown-content a {
    color: var(--text-primary);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    transition: var(--transition-fast);
    font-size: 0.95rem;
}

.dropdown-content a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--accent-primary);
    padding-left: 20px;
    /* Slide effect */
}

.dropdown:hover .dropdown-content {
    display: block;
    animation: fadeIn 0.2s ease;
}

.dropbtn i {
    margin-left: 5px;
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.dropdown:hover .dropbtn i {
    transform: rotate(180deg);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.logo {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.nav-links {
    display: flex;
    gap: 2rem;
}

.nav-links a {
    font-size: 0.95rem;
    color: var(--text-secondary);
    font-weight: 500;
    color: var(--text-secondary);
    font-weight: 500;
}

.nav-links a:hover {
    color: var(--text-primary);
}

.theme-toggle {
    background: none;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hamburger {
    display: none;
    cursor: pointer;
}

/* Hero Section */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding-top: 80px;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('assets/hero_bg_laptop.jpg') no-repeat center center/cover;
    opacity: 0.15;
    /* Subtle visibility */
    filter: blur(8px);
    z-index: 0;
}

.hero .container {
    position: relative;
    z-index: 1;
    /* Ensure content is above the background */
}

.hero-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero-content {
    max-width: 600px;
    z-index: 2;
}

.hero-intro {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.5rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    width: 100%;
    text-align: center;
    /* Center the block in the blob */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Center items horizontally */
    gap: 0.5rem;
    z-index: 10;
}

.intro-greeting {
    font-size: 1.2rem;
    font-family: 'Courier New', monospace;
    color: #d8b4fe;
    /* Light purple */
    font-weight: 600;
    letter-spacing: 1px;
    align-self: flex-start;
    /* Left align relative to container if we want, but let's center for now to match blob */
    /* Wait, image shows left alignment. Let's try to make the whole block left aligned but centered in blob? */
    /* Actually, let's keep it centered for symmetry with the blob, unless user complains. */
    /* User said "just like in the image". Image is left aligned. */
    /* Let's change hero-intro to align items flex-start but keep it centered in blob? */
    /* If we align left, it might look off-center in the round blob. */
    /* Let's try centering first, but make the text block cohesive. */
}

/* Let's override alignment to match image better */
.hero-intro {
    align-items: flex-start;
    /* Left align text */
    text-align: left;
    padding-left: 15%;
    /* Offset slightly to center visually */
}

.intro-greeting {
    font-size: 1.5rem;
    color: #e879f9;
    margin-bottom: -10px;
}

.name-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
}

.intro-name {
    font-size: 3rem;
    /* Decreased from 4rem */
    font-weight: bold;
    background: linear-gradient(90deg, #D65db1 0%, #845EC2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.2;
    margin-bottom: 5px;
    white-space: nowrap;
    /* Ensure one line */
}

.hero-decoration-img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(214, 93, 177, 0.5));
    animation: float 3s ease-in-out infinite;
}

@keyframes float {

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

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

.intro-dynamic {
    font-size: 2rem;
    color: #fff;
}

.dynamic-text {
    font-weight: 700;
}

.cursor {
    display: inline-block;
    width: 2px;
    background-color: var(--text-primary);
    animation: blink 1s infinite;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

.hero-title {
    font-size: 4.5rem;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.gradient-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: var(--text-secondary);
    margin-bottom: 2.5rem;
    max-width: 500px;
}

.hero-cta {
    display: flex;
    gap: 1rem;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 2rem;
    border-radius: 50px;
    font-weight: 500;
    transition: var(--transition-medium);
    font-size: 1rem;
}

.btn-primary {
    background: var(--gradient-primary);
    color: white;
    box-shadow: 0 4px 20px var(--accent-glow);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--accent-glow);
}

.btn-outline {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-primary);
}

.btn-outline:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

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

.gradient-blob {
    width: 400px;
    height: 400px;
    background: var(--gradient-primary);
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
    animation: blob-bounce 10s infinite ease-in-out;
}

@keyframes blob-bounce {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(30px, -50px) scale(1.1);
    }

    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }
}

/* About Section */
.about-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.about-image {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.image-placeholder {
    width: 100%;
    aspect-ratio: 1/1;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.about-img-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.img-decoration {
    position: absolute;
    width: 440px;
    height: 440px;
    border: 2px dashed rgba(99, 102, 241, 0.3);
    border-radius: 50%;
    animation: spin 20s linear infinite;
}

.img-decoration::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: var(--accent-secondary);
    border-bottom-color: var(--accent-tertiary);
    animation: spin-reverse 15s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes spin-reverse {
    to {
        transform: rotate(-360deg);
    }
}

.about-img {
    width: 400px;
    height: 400px;
    object-fit: cover;
    object-position: center top;
    border-radius: 50%;
    border: 4px solid var(--bg-secondary);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 2;
    transition: var(--transition-medium);
}

.about-img:hover {
    transform: scale(1.02);
    border-color: var(--accent-primary);
    box-shadow: 0 0 50px rgba(99, 102, 241, 0.3);
}

.social-badges {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    justify-content: center;
}

.social-badge {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    font-size: 1.2rem;
    transition: var(--transition-fast);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.social-badge:hover {
    transform: translateY(-3px);
}

.social-badge.linkedin {
    background: rgba(0, 119, 181, 0.1);
    color: #0077b5;
    border-color: rgba(0, 119, 181, 0.3);
}

.social-badge.linkedin:hover {
    background: #0077b5;
    color: white;
    border-color: #0077b5;
    box-shadow: 0 5px 15px rgba(0, 119, 181, 0.3);
}

.social-badge.github {
    background: rgba(255, 255, 255, 0.05);
    color: #f0f6fc;
    border-color: rgba(240, 246, 252, 0.3);
}

.social-badge.github:hover {
    background: #24292e;
    color: white;
    border-color: #24292e;
    box-shadow: 0 5px 15px rgba(255, 255, 255, 0.1);
}

.social-badge.gmail {
    background: rgba(255, 255, 255, 0.05);
    color: white;
    border-color: rgba(255, 255, 255, 0.1);
}

.social-badge.gmail i {
    background: linear-gradient(135deg, #4285F4, #EA4335, #FBBC05, #34A853);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    /* Required for background-clip to work on some elements */
}

.social-badge.gmail:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 5px 15px rgba(234, 67, 53, 0.2);
}

.social-badge.medium {
    background: rgba(0, 171, 108, 0.1);
    color: #00ab6c;
    border-color: rgba(0, 171, 108, 0.3);
}

.social-badge.medium:hover {
    background: #00ab6c;
    color: white;
    border-color: #00ab6c;
    box-shadow: 0 5px 15px rgba(0, 171, 108, 0.3);
}

.social-badge.instagram {
    background: rgba(225, 48, 108, 0.1);
    color: #e1306c;
    border-color: rgba(225, 48, 108, 0.3);
}

.social-badge.instagram:hover {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 5px 15px rgba(225, 48, 108, 0.3);
}

.section-title {
    font-size: 3rem;
    margin-bottom: 2rem;
}

.about-text {
    color: var(--text-secondary);
    margin-bottom: 2.5rem;
    font-size: 1.1rem;
}

.sk.intro-greeting {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.skills-title {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.skills-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.skill-tag {
    padding: 0.5rem 1.2rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50px;
    font-size: 0.9rem;
    color: var(--text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: var(--transition-fast);
}

.skill-tag:hover {
    background: rgba(99, 102, 241, 0.1);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    transform: translateY(-2px);
}



/* Education Section */
/* Research Section */
#research {
    position: relative;
    overflow: hidden;
    /* Fallback background */
    background: var(--bg-primary);
}

/* Background Image with Blur & Blend */
#research::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('assets/research_bg.jpg') no-repeat center center/cover;
    filter: blur(8px) brightness(0.4);
    /* Blur and darken */
    z-index: 0;
    pointer-events: none;
}

/* Gradient Overlay for better text readability */
#research::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, var(--bg-primary), rgba(15, 23, 42, 0.8));
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: overlay;
    /* Blend with the image */
}

.research-timeline {
    position: relative;
    z-index: 2;
    /* Ensure content is above background */
    max-width: 800px;
    margin: 0 auto;
}

.education-timeline {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 0;
    display: flex;
    flex-wrap: wrap;
}

.education-timeline::after {
    content: '';
    position: absolute;
    width: 2px;
    background: rgba(255, 255, 255, 0.1);
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -1px;
}

.timeline-item {
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 50%;
    box-sizing: border-box;
    /* Ensure padding doesn't affect width */
}

.timeline-item:nth-child(odd) {
    /* left: 0; Removed absolute positioning logic */
    text-align: right;
    padding-right: 60px;
    /* Add space for dot */
}

.timeline-item:nth-child(even) {
    /* left: 50%; Removed absolute positioning logic */
    text-align: left;
    padding-left: 60px;
    /* Add space for dot */
    margin-top: 0;
    /* Ensure alignment */
}

.timeline-dot {
    width: 20px;
    height: 20px;
    background: var(--bg-color);
    border: 4px solid var(--accent-primary);
    border-radius: 50%;
    position: absolute;
    top: 30px;
    /* Adjusted for alignment */
    right: -10px;
    z-index: 1;
    box-shadow: 0 0 10px var(--accent-glow);
}

.timeline-item:nth-child(even) .timeline-dot {
    left: -10px;
    right: auto;
}

.timeline-content {
    padding: 20px 30px;
    background: transparent;
    /* Transparent to let ::after show */
    position: relative;
    border-radius: 15px;
    /* border: 1px solid rgba(255, 255, 255, 0.1); Removed border to let gradient show */
    transition: var(--transition-medium);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    /* Clip the rotating gradient */
    z-index: 1;
}

.timeline-content::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg,
            transparent 0deg,
            var(--accent-primary) 60deg,
            var(--accent-secondary) 120deg,
            var(--accent-tertiary) 180deg,
            var(--accent-red) 240deg,
            transparent 360deg);
    transform: translate(-50%, -50%);
    animation: rotate-border 4s linear infinite;
    z-index: -2;
}

.timeline-content::after {
    content: '';
    position: absolute;
    inset: 2px;
    /* Border width */
    background: linear-gradient(135deg, #1e293b, #0f172a);
    /* Slate 800 to Slate 900 */
    border-radius: 13px;
    /* Slightly smaller than parent */
    z-index: -1;
}

.timeline-content>* {
    position: relative;
    z-index: 2;
}

.timeline-content:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 50px rgba(99, 102, 241, 0.2);
}

.timeline-content:hover::before {
    animation-duration: 2s;
    /* Speed up on hover */
}

@keyframes rotate-border {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.timeline-date {
    color: var(--accent-secondary);
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.school-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    font-size: 2.2rem;
    /* Increased from 1.8rem */
    font-weight: 700;
    background: linear-gradient(to right, #fff, #cbd5e1);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.logo-wrapper {
    background: white;
    padding: 5px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.school-logo {
    width: 100px;
    /* Increased from 80px */
    height: auto;
    object-fit: contain;
}

.timeline-school {
    font-size: 1.8rem;
    color: var(--text-primary);
    font-weight: 700;
    margin-bottom: 0;
    letter-spacing: -0.5px;
    background: linear-gradient(to right, #fff, #ccc);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}



.fancy-font {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1.3rem;
    font-style: italic;
    white-space: nowrap;
    background: linear-gradient(to right, #ef4444, #f87171);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.no-bullet::before {
    content: none !important;
}

.degree-highlight {
    font-weight: 400;
    font-size: 1.1rem;
    color: var(--text-secondary);
    -webkit-text-fill-color: var(--text-secondary);
}

.timeline-minor {
    font-size: 1.2rem;
    color: var(--accent-tertiary);
    font-weight: 600;
    margin-bottom: 0.8rem;
    font-family: var(--font-heading);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.timeline-minor::before {
    content: '•';
    color: var(--accent-tertiary);
}

.timeline-desc {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.6;
    background: rgba(255, 255, 255, 0.03);
    padding: 0.8rem 1.2rem;
    border-radius: 8px;
    display: inline-block;
}

.courses-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
    /* Align left for readability */
}

.timeline-item:nth-child(odd) .courses-grid {
    justify-content: flex-end;
    /* Align right for left side items */
}

.course-tag {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.9rem;
    color: var(--text-secondary);
    transition: all 0.5s ease;
    opacity: 0;
    transform: translateY(10px);
}

.course-tag.visible {
    opacity: 1;
    transform: translateY(0);
}

.course-tag:hover {
    background: rgba(236, 72, 153, 0.1);
    /* Pink tint */
    border-color: var(--accent-pink);
    color: white;
    transform: translateY(-2px) scale(1.05);
    opacity: 1 !important;
    /* Ensure hover keeps it visible */
}

.course-header {
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.5s ease;
    position: relative;
    z-index: 10;
    /* Ensure it's above */
}

.course-header.visible {
    opacity: 1;
    transform: translateX(0);
}

.course-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-pink);
    animation: bounce-right 2s infinite;
    /* Ensure no clipping */
    overflow: visible;
}

.course-header-icon svg {
    stroke: #00f2ff;
    /* Neon Cyan */
    /* Stronger glow */
    filter: drop-shadow(0 0 8px #00f2ff) drop-shadow(0 0 15px #00f2ff);
    width: 40px;
    height: 40px;
    overflow: visible;
}

@keyframes bounce-right {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(10px);
    }
}

/* Responsive Education */
@media (max-width: 768px) {
    .education-timeline::after {
        left: -10px;
        /* Hide line or move it out of way for full width? Or just adjust. */
        display: none;
        /* Remove line on mobile to allow full width cards like Relevant Coursework might appear? */
    }

    .timeline-item {
        width: 100%;
        padding-left: 0;
        /* Remove padding to match full width */
        padding-right: 0;
    }

    .timeline-dot {
        display: none;
        /* Hide dots on mobile to maximize space */
    }

    .timeline-item:nth-child(odd) {
        text-align: left;
    }

    .timeline-item:nth-child(odd),
    .timeline-item:nth-child(even) {
        left: 0;
    }

    .timeline-dot {
        left: 10px;
        /* Adjusted to match line */
    }

    .timeline-item:nth-child(even) .timeline-dot {
        display: none;
    }
}

/* Projects Section - Marquee */
.projects-marquee {
    overflow: hidden;
    width: 100%;
    position: relative;
    padding: 2rem 0;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.projects-track {
    display: flex;
    gap: 2rem;
    width: max-content;
    animation: scroll 40s linear infinite;
}

.projects-track:hover {
    animation-play-state: paused;
}

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

    100% {
        transform: translateX(-50%);
        /* Move by half the width (original set) */
    }
}

.project-card {
    background: var(--bg-secondary);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: var(--transition-medium);
    width: 350px;
    /* Fixed width for marquee */
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.project-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.project-image {
    width: 100%;
    height: 200px;
    background: rgba(255, 255, 255, 0.05);
    overflow: hidden;
    flex-shrink: 0;
}

.project-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-medium);
}

.project-card:hover .project-img {
    transform: scale(1.1);
}

.project-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.project-title {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.project-description {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.project-tags span {
    font-size: 0.8rem;
    color: var(--accent-primary);
    background: rgba(99, 102, 241, 0.1);
    padding: 0.2rem 0.8rem;
    border-radius: 20px;
}

.project-links {
    display: flex;
    gap: 1rem;
    margin-top: auto;
    /* Push to bottom */
    justify-content: center;
    /* Center horizontally */
    width: 100%;
}

.btn-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.9rem;
    transition: var(--transition-medium);
}

.btn-link:hover {
    color: var(--accent-primary);
}

/* Achievements Section */
.achievements-marquee {
    overflow: hidden;
    width: 100%;
    position: relative;
    padding: 2rem 0;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.achievements-track {
    display: flex;
    gap: 2rem;
    width: max-content;
    animation: scroll 30s linear infinite;
    /* Slightly faster or different speed */
}

.achievements-track:hover {
    animation-play-state: paused;
}

.achievement-card {
    /* background: var(--bg-secondary); Removed default background */
    border-radius: 20px;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: var(--transition-medium);
    width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    /* For absolute positioning of year */
}

/* Color Palette Cycle */
.achievement-card:nth-child(4n+1) {
    background: #27296d;
}

.achievement-card:nth-child(4n+2) {
    background: #5e63b6;
}

.achievement-card:nth-child(4n+3) {
    background: #a393eb;
}

.achievement-card:nth-child(4n+4) {
    background: #f5c7f7;
    color: #1f2937;
    /* Dark text for light background */
}

/* Adjust text color for the light card */
.achievement-card:nth-child(4n+4) .achievement-title,
.achievement-card:nth-child(4n+4) .achievement-desc,
.achievement-card:nth-child(4n+4) .achievement-icon i {
    color: #1f2937;
}

.achievement-card:nth-child(4n+4) .achievement-year {
    border-color: rgba(0, 0, 0, 0.1);
    background-color: rgba(255, 255, 255, 0.3);
}

.achievement-year {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 0.9rem;
    background: linear-gradient(135deg, #ec4899, #ef4444);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    /* Fallback */
    background-color: rgba(236, 72, 153, 0.1);
    /* Subtle pink background */
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    border: 1px solid rgba(236, 72, 153, 0.2);
}

.achievement-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent-secondary);
    box-shadow: 0 10px 30px rgba(168, 85, 247, 0.2);
}

.achievement-icon {
    font-size: 2.5rem;
    color: var(--accent-secondary);
    margin-bottom: 1rem;
    background: rgba(168, 85, 247, 0.1);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-medium);
}

.achievement-card:hover .achievement-icon {
    background: var(--accent-secondary);
    color: white;
    transform: scale(1.1) rotate(10deg);
}

.achievement-title {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Default fallback */
    background-image: linear-gradient(to right, #fff, #ccc);
}

/* Unique Gradients for Achievement Titles */
.achievement-card:nth-child(1) .achievement-title {
    background-image: linear-gradient(135deg, #FFD700, #FFA500);
    /* Gold/Orange */
}

.achievement-card:nth-child(2) .achievement-title {
    background-image: linear-gradient(135deg, #60A5FA, #3B82F6);
    /* Blue */
}

.achievement-card:nth-child(3) .achievement-title {
    background-image: linear-gradient(135deg, #A855F7, #EC4899);
    /* Purple/Pink */
}

.achievement-card:nth-child(4) .achievement-title {
    background-image: linear-gradient(135deg, #34D399, #10B981);
    /* Green */
}

.achievement-card:nth-child(5) .achievement-title {
    background-image: linear-gradient(135deg, #F472B6, #DB2777);
    /* Pink/Red */
}

.achievement-card:nth-child(6) .achievement-title {
    background-image: linear-gradient(135deg, #22D3EE, #06B6D4);
    /* Cyan */
}

.achievement-card:nth-child(7) .achievement-title {
    background-image: linear-gradient(135deg, #FB923C, #EA580C);
    /* Orange/Red */
}

.achievement-card:nth-child(8) .achievement-title {
    background-image: linear-gradient(135deg, #818CF8, #6366F1);
    /* Indigo */
}

.achievement-desc {
    color: rgba(255, 255, 255, 0.9);
    /* Dark white for better visibility */
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Projects Text Gradient */
.projects-text {
    font-size: 3rem;
    font-weight: 700;
    margin: 0;
    background: linear-gradient(90deg, #4ade80 0%, #60a5fa 50%, #c084fc 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Ensure it displays inline-block or block to handle transform/spacing if needed, but inline is fine for text */
}

/* About Card */
.about-card {
    background: rgba(30, 41, 59, 0.4);
    /* Dark Slate tint */
    padding: 2rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    margin-bottom: 2rem;
    transition: transform 0.3s ease;
}

.about-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Tech Stack Card */
.tech-stack-card {
    background: rgba(49, 46, 129, 0.4);
    /* Indigo/Deep Purple tint */
    padding: 2rem;
    border-radius: 20px;
    border: 1px solid rgba(165, 180, 252, 0.1);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    margin-top: 2rem;
    transition: transform 0.3s ease;
}

.tech-stack-card:hover {
    transform: translateY(-5px);
    border-color: rgba(165, 180, 252, 0.2);
    box-shadow: 0 15px 40px rgba(49, 46, 129, 0.3);
}

.tech-stack-card .skills-title {
    margin-top: 0;
    /* Reset top margin inside card */
    margin-bottom: 1.5rem;
}

/* WhatsApp Badge */
.social-badge.whatsapp {
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: white;
}

.social-badge.whatsapp:hover {
    box-shadow: 0 0 15px rgba(37, 211, 102, 0.5);
    transform: translateY(-3px);
}

.social-badge.whatsapp i {
    font-size: 1.2rem;
}

/* Contact Section */
#contact {
    position: relative;
    overflow: hidden;
    /* Fallback background */
    background: var(--bg-primary);
}

/* Background Image with Blur & Blend */
#contact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('assets/contact_bg.jpg') no-repeat center center/cover;
    filter: blur(8px) brightness(0.4);
    /* Blur and darken */
    z-index: 0;
    pointer-events: none;
}

/* Gradient Overlay for better text readability */
#contact::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, var(--bg-primary), rgba(15, 23, 42, 0.8));
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: overlay;
    /* Blend with the image */
}

.contact-container {
    position: relative;
    z-index: 2;
    /* Ensure content is above background */
    max-width: 800px;
    text-align: center;
}

.contact-text {
    color: var(--text-secondary);
    margin-bottom: 3rem;
    font-size: 1.1rem;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    text-align: left;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 1rem;
    background: var(--bg-secondary);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 1rem;
    transition: var(--transition-fast);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
    background: rgba(255, 255, 255, 0.08);
}

.form-group textarea {
    resize: vertical;
}

/* Responsive */
@media (max-width: 968px) {
    .hero-title {
        font-size: 3.5rem;
    }

    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
    }

    .hero-content {
        order: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero-visual {
        order: 1;
    }

    .gradient-blob {
        width: 300px;
        height: 300px;
    }

    .hero-subtitle {
        margin-left: auto;
        margin-right: auto;
    }

    .about-container {
        grid-template-columns: 1fr;
    }

    .about-image {
        order: 1;
        max-width: 400px;
        margin: 0 auto;
    }

    .about-content {
        order: 2;
    }
}



/* Mobile Responsive */
.hamburger {
    display: none;
}

@media (max-width: 768px) {
    .nav-links {
        position: fixed;
        right: -100%;
        top: var(--header-height);
        height: calc(100vh - var(--header-height));
        background: rgba(10, 10, 10, 0.98);
        flex-direction: column;
        align-items: center;
        width: 100%;
        transition: right 0.3s ease;
        padding-top: 2rem;
        backdrop-filter: blur(10px);
        border-left: 1px solid rgba(255, 255, 255, 0.05);
    }

    .nav-links.active {
        right: 0;
    }

    .nav-links li {
        margin: 1.5rem 0;
    }

    .hamburger {
        display: block;
        z-index: 1001;
        cursor: pointer;
    }

    .hamburger span {
        display: block;
        width: 25px;
        height: 2px;
        background: var(--text-primary);
        margin: 5px 0;
        transition: var(--transition-fast);
    }

    .hamburger.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }

    /* Mobile Dropdown */
    .dropdown {
        display: block;
        text-align: center;
    }

    .dropdown-content {
        position: static;
        background: transparent;
        box-shadow: none;
        border: none;
        padding: 0;
        min-width: auto;
        display: none;
        animation: none;
    }

    .dropdown.active .dropdown-content {
        display: block;
    }

    .dropdown-content a {
        padding: 10px 0;
        color: var(--text-secondary);
        font-size: 0.9rem;
    }

    .dropdown-content a:hover {
        background: transparent;
        color: var(--accent-primary);
        padding-left: 0;
    }

    .dropbtn i {
        display: none;
    }
}

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

    .hero-cta {
        flex-direction: column;
        width: 100%;
    }

    .btn {
        width: 100%;
    }
}

.gradient-text-course {
    background: linear-gradient(135deg, #ec4899, #ef4444, #a855f7);
    /* Pink, Red, Purple */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

/* Research Experiences Section */
.research-timeline {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem 0;
    display: flex;
    flex-direction: column;
    gap: 4rem;
    /* Increased gap for better separation */
}

.research-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: linear-gradient(to bottom, var(--accent-primary), var(--accent-secondary), var(--accent-tertiary));
    transform: translateX(-50%);
}

.research-timeline-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: relative;
}

/* Odd Items: Card Left, Details Right */
.research-timeline-item:nth-child(odd) {
    flex-direction: row;
}

/* Even Items: Card Right, Details Left */
.research-timeline-item:nth-child(even) {
    flex-direction: row-reverse;
}

.research-card {
    background: rgba(30, 41, 59, 0.7);
    /* Glassmorphism base */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    /* Increased radius */
    padding: 1.5rem;
    width: 45%;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Bouncy transition */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 2;
    overflow: hidden;
    /* For the gradient border effect */
}

/* Gradient Border Effect using pseudo-element */
.research-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 2px;
    /* Border width */
    background: linear-gradient(90deg, #42A5F5, #A855F7, #EC4899, #FF8C69);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.5;
    /* Subtle by default */
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.research-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(168, 85, 247, 0.2);
    /* Purple glow */
}

.research-card:hover::before {
    opacity: 1;
    /* Full gradient border on hover */
}

/* Timeline Dots */
.research-card::after {
    content: '';
    position: absolute;
    top: 2rem;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--bg-color);
    border: 3px solid var(--accent-primary);
    z-index: 1;
}

.research-timeline-item:nth-child(odd) .research-card::after {
    right: -11.5%;
    /* Position relative to card width (45%) and gap */
    /* Calculation: 50% (center) - 45% (width) = 5% gap.
       We want dot at 5% + half dot width.
       Let's try absolute positioning relative to the item instead?
       No, keep it relative to card for now, but adjust.
       Actually, let's position relative to the timeline center line.
    */
    right: auto;
    left: 111%;
    /* 100% + gap to center */
    border-color: #3b82f6;
}

.research-timeline-item:nth-child(even) .research-card::after {
    left: auto;
    right: 111%;
    border-color: #a855f7;
}

.research-timeline-item:nth-child(3) .research-card::after {
    border-color: #10b981;
}

/* Research Details (Hidden by default) */
.research-details {
    width: 45%;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.4s ease;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.research-details.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.research-details ul {
    list-style: none;
    padding-left: 0;
}

.research-details li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.8rem;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
}

.research-details li::before {
    content: '▹';
    position: absolute;
    left: 0;
    background: linear-gradient(90deg, #42A5F5, #EC4899);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
    font-size: 1.2rem;
    line-height: 1.4;
}

/* Header & Body Styles (Same as before) */
.research-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.research-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    /* Circular */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    transition: transform 0.4s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.research-card:hover .research-icon-wrapper {
    transform: rotate(15deg) scale(1.1);
}

.icon-software {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
}

.icon-intern {
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    color: white;
}

.icon-research {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.logo-symbol {
    color: var(--accent-primary);
    margin-right: 0.5rem;
    font-weight: 800;
}

.research-role {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* Space between text and logo */
}

.research-role img {
    display: inline-block;
    /* Override global block style */
    margin-left: 0 !important;
    /* Let gap handle spacing */
}

.research-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.research-body div {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.research-body i {
    width: 20px;
    text-align: center;
    opacity: 0.7;
}

.research-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.research-tag {
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.tag-fulltime {
    background: #0ea5e9;
    color: white;
}

.tag-internship {
    background: #d946ef;
    color: white;
}

.tag-research {
    background: #10b981;
    color: white;
}

.research-details-btn {
    background: transparent;
    border: 1px solid var(--accent-primary);
    color: var(--accent-primary);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
}

.research-details-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Responsive Design for Research Timeline */
@media (max-width: 768px) {
    .research-timeline::before {
        left: 20px;
    }

    .research-timeline-item {
        flex-direction: column !important;
        /* Stack vertically */
        align-items: flex-start;
        gap: 1rem;
    }

    .research-card {
        width: calc(100% - 50px);
        margin-left: 50px;
    }

    .research-details {
        width: calc(100% - 50px);
        margin-left: 50px;
        transform: none;
        /* Reset transform for mobile */
        display: none;
        /* Hide completely on mobile until active */
    }

    .research-details.active {
        display: block;
        /* Hero Section Mobile */
    }

    .intro-greeting {
        font-size: 1.5rem;
    }

    .intro-name {
        font-size: 2.5rem;
        /* Smaller name on mobile */
    }

    .dynamic-text-wrapper {
        font-size: 1.2rem;
        height: auto;
        min-height: 60px;
        /* Ensure space for wrapping text */
    }

    .dynamic-text {
        white-space: normal;
        /* Allow text to wrap */
        display: block;
    }

    .hero-content {
        padding: 0 1rem;
        text-align: center;
    }

    .hero-buttons {
        justify-content: center;
    }

    .section-title {
        font-size: 2rem;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }

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

    .research-timeline-item:nth-child(odd) .research-card::after,
    .research-timeline-item:nth-child(even) .research-card::after {
        left: -38px;
        right: auto;
    }
}

.gradient-text-experiences {
    /* 1. Font Styling */
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    /* Matches the clean geometric look */
    font-weight: 700;
    /* Bold */
    /* font-size removed to inherit from parent */

    /* 2. The Gradient Magic */
    /* This gradient moves from Blue -> Purple -> Pink -> Orange */
    background: linear-gradient(90deg,
            #42A5F5 0%,
            #A855F7 35%,
            #EC4899 70%,
            #FF8C69 100%);

    /* 3. Clipping the background to the text */
    -webkit-background-clip: text;
    background-clip: text;

    /* 4. Making the text itself transparent so the background shows through */
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* --- Unique Research Card Palettes --- */

/* 1. Bachelor's Thesis (Blue/Cyan Theme) */
.research-timeline-item:nth-child(1) .research-card {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(59, 130, 246, 0.15));
}

.research-timeline-item:nth-child(1) .research-card::before {
    background: linear-gradient(90deg, #3b82f6, #06b6d4);
}

.research-timeline-item:nth-child(1) .research-card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(59, 130, 246, 0.3);
}

/* 2. Software Engineer Intern (Purple/Pink Theme) */
.research-timeline-item:nth-child(2) .research-card {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(168, 85, 247, 0.15));
}

.research-timeline-item:nth-child(2) .research-card::before {
    background: linear-gradient(90deg, #a855f7, #ec4899);
}

.research-timeline-item:nth-child(2) .research-card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(168, 85, 247, 0.3);
}

/* 3. Research Intern (Green/Teal Theme) */
.research-timeline-item:nth-child(3) .research-card {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(16, 185, 129, 0.15));
}

.research-timeline-item:nth-child(3) .research-card::before {
    background: linear-gradient(90deg, #10b981, #0ea5e9);
}

.research-timeline-item:nth-child(3) .research-card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(16, 185, 129, 0.3);
}

/* Intro Animation */
#intro-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

.intro-container {
    position: relative;
    width: 100%;
    height: 300px;
}

.intro-car {
    position: absolute;
    top: 50%;
    left: -50%;
    transform: translateY(-50%);
    width: 400px;
    height: auto;
    z-index: 2;
    /* Styling for the car image */
    filter: drop-shadow(0 0 10px rgba(66, 165, 245, 0.5));
    animation: drive-across 2.5s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

.nitro-trail {
    position: absolute;
    top: 50%;
    left: -50%;
    transform: translateY(-50%);
    width: 200px;
    height: 100px;
    background: linear-gradient(to right, transparent, rgba(66, 165, 245, 0.8), rgba(168, 85, 247, 0.8));
    filter: blur(20px);
    z-index: 1;
    opacity: 0;
    animation: nitro-boost 2.5s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

@keyframes drive-across {
    0% {
        left: -50%;
    }

    20% {
        left: 10%;
    }

    40% {
        left: 40%;
    }

    100% {
        left: 150%;
    }
}

@keyframes nitro-boost {
    0% {
        left: -60%;
        opacity: 0;
    }

    20% {
        left: 0%;
        opacity: 0.8;
    }

    40% {
        left: 30%;
        opacity: 1;
        width: 400px;
    }

    100% {
        left: 140%;
        opacity: 0;
        width: 600px;
    }
}

.fade-out {
    opacity: 0 !important;
    pointer-events: none;
}

/* Reveal Text Animation */
.reveal-char {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    animation: revealChar 1s forwards;
}

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

/* Experience Section */
.experience {
    padding: 4rem 0;
    position: relative;
    overflow: hidden;
}

/* Decorative Background Circles */
.experience::before {
    content: '';
    position: absolute;
    top: -10%;
    left: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 111, 207, 0.08), transparent 70%);
    border-radius: 50%;
    z-index: 0;
    filter: blur(80px);
    pointer-events: none;
}

.experience::after {
    content: '';
    position: absolute;
    bottom: -10%;
    right: -5%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(0, 196, 255, 0.05), transparent 70%);
    border-radius: 50%;
    z-index: 0;
    filter: blur(60px);
    pointer-events: none;
}

.experience .container {
    position: relative;
    z-index: 1;
}

.experience-timeline {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
}

.experience-card {
    background: rgba(30, 41, 59, 0.7);
    border-radius: 20px;
    padding: 0;
    /* Removed padding to handle header/body separation */
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.amex-card {
    /* Rich Amex Blue Gradient */
    background: linear-gradient(135deg, #001f3f, #003366);
}

.amex-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: #006FCF;
    /* Amex Blue Accent */
    z-index: 2;
}

.amex-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 111, 207, 0.3);
    border-color: rgba(0, 111, 207, 0.4);
}

.experience-header {
    padding: 2rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.exp-icon-wrapper {
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* Ensure image stays within bounds */
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    padding: 8px;
    /* Add some padding so logo isn't edge-to-edge */
    background: white;
    /* White background often looks better for logos */
}

.exp-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.exp-role-info {
    flex: 1;
}

.exp-role {
    font-size: 1.6rem;
    font-weight: 700;
    color: white;
    margin-bottom: 0.4rem;
    letter-spacing: -0.5px;
}

.exp-org {
    font-size: 1.1rem;
    color: #cbd5e1;
    font-weight: 500;
}

.exp-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}

.exp-location {
    font-size: 0.9rem;
    color: #F87171;
    /* Red Text */
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(239, 68, 68, 0.15);
    /* Red Background */
    padding: 0.4rem 0.8rem;
    border-radius: 8px;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.exp-date {
    font-size: 0.9rem;
    color: #FBBF24;
    /* Amber Text */
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(245, 158, 11, 0.15);
    /* Amber Background */
    padding: 0.4rem 0.8rem;
    border-radius: 8px;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.exp-location i {
    color: #F87171;
}

.exp-date i {
    color: #FBBF24;
}

/* Footer & Details */
.exp-footer {
    padding: 1rem 2rem;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.exp-tag {
    background: rgba(16, 185, 129, 0.15);
    /* Emerald Green Background */
    color: #34D399;
    /* Emerald Text */
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.exp-details-btn {
    background: transparent;
    border: none;
    color: #cbd5e1;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.3s ease;
}

.exp-details-btn:hover {
    color: white;
}

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

.exp-details-btn.active i {
    transform: rotate(180deg);
}

.exp-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
    background: rgba(30, 41, 59, 0.5);
    /* Dark Slate / Navy tint */
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 0 0 16px 16px;
    /* Rounded bottom corners */
}

.exp-details.active {
    max-height: 500px;
    /* Arbitrary large height for transition */
    transition: max-height 0.5s ease-in-out;
}

.exp-details ul {
    list-style: none;
    padding: 1.5rem 2rem 2rem 2rem;
    margin: 0;
}

.exp-details li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.8rem;
    color: #e2e8f0;
    line-height: 1.6;
}

.exp-details li::before {
    content: '▹';
    position: absolute;
    left: 0;
    color: #c084fc;
    /* Lavender/Purple bullet */
    font-size: 1.2rem;
    line-height: 1.4;
    text-shadow: 0 0 10px rgba(192, 132, 252, 0.4);
}

.gradient-text-experience {
    background: linear-gradient(90deg, #006FCF, #00C4FF);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

@media (max-width: 768px) {
    .experience-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .exp-meta {
        align-items: flex-start;
        margin-top: 1rem;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
    }

    .exp-location,
    .exp-date {
        font-size: 0.85rem;
    }

    /* Global Grid Stacking */
    .projects-grid,
    .research-grid,
    .achievements-grid {
        grid-template-columns: 1fr;
        /* Stack cards */
    }

    .contact-container {
        padding: 0 1rem;
    }

    .contact-form {
        padding: 1.5rem;
    }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {

    /* General Adjustments */
    :root {
        --header-height: 70px;
        --container-width: 100%;
    }

    .container {
        padding: 0 1.5rem;
    }

    .section {
        padding: 3rem 0;
    }

    .section-title {
        font-size: 2.2rem;
        text-align: center;
    }

    /* Navigation */
    .navbar {
        background: rgba(10, 10, 10, 0.95);
    }

    .hamburger {
        display: block;
        z-index: 1001;
    }

    .hamburger span {
        display: block;
        width: 25px;
        height: 3px;
        margin: 5px auto;
        -webkit-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        background-color: var(--text-primary);
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .nav-links {
        position: fixed;
        left: -100%;
        top: var(--header-height);
        gap: 0;
        flex-direction: column;
        background-color: var(--bg-secondary);
        width: 100%;
        height: calc(100vh - var(--header-height));
        text-align: center;
        transition: 0.3s;
        padding: 2rem 0;
        overflow-y: auto;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
    }

    .nav-links.active {
        left: 0;
    }

    .nav-links li {
        margin: 1.5rem 0;
    }

    .nav-links a {
        font-size: 1.2rem;
    }

    .dropdown-content {
        position: static;
        background: transparent;
        box-shadow: none;
        border: none;
        padding: 0;
        display: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        text-align: center;
    }

    .dropdown.active .dropdown-content {
        display: block;
        animation: fadeIn 0.3s ease;
    }

    .dropdown-content a {
        padding: 10px;
        font-size: 1.1rem;
        color: var(--text-secondary);
    }

    .dropdown:hover .dropdown-content {
        display: none;
        /* Disable hover on mobile */
    }

    .dropdown-content.active {
        display: block;
    }

    /* Hero Section */
    .hero {
        padding-top: 100px;
        min-height: auto;
        padding-bottom: 3rem;
    }

    .hero-container {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: center;
    }

    .hero-content {
        margin: 0 auto;
        order: 2;
        /* Visual below text? No, usually visual first on mobile or text first? Let's check design. */
        /* Standard is usually Visual first if it's an image, but here it's a name blob. */
        /* Let's keep text first for SEO/Importance, or Visual first for impact? */
        /* The user has "Intro Greeting" in the visual part. */
        /* Let's put visual first. */
        order: 1;
    }

    .hero-visual {
        order: 0;
        margin-bottom: 3rem;
        /* Increased from 1rem */
    }

    .intro-dynamic {
        font-size: 1.5rem;
        /* Smaller font size for mobile */
    }

    .hero-title {
        font-size: 2.2rem;
        /* Decreased from 2.8rem */
        word-wrap: break-word;
        /* Ensure long words break */
    }

    .hero-subtitle {
        font-size: 1rem;
        margin: 0 auto 2rem auto;
        padding: 0 1rem;
        /* Add padding to prevent edge touching */
    }

    .hero-cta {
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.8rem;
        /* Smaller gap */
    }

    .btn {
        padding: 0.7rem 1.5rem;
        /* Slightly smaller buttons */
        font-size: 0.95rem;
    }

    /* Fix Education Overflow */
    .timeline-degree {
        font-size: 1.1rem;
        /* Smaller font for mobile */
        white-space: normal;
        /* Allow wrapping */
        line-height: 1.4;
    }

    .school-header {
        font-size: 1.5rem;
        flex-wrap: wrap;
        /* Allow logo and text to wrap if needed */
        justify-content: center;
    }

    .timeline-school {
        font-size: 1.4rem;
    }

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

    .about-img {
        width: 280px;
        height: 280px;
    }

    .img-decoration {
        width: 310px;
        height: 310px;
    }

    .about-text {
        text-align: center;
    }

    .social-badges {
        justify-content: center;
    }

    .skills-grid {
        justify-content: center;
    }

    /* Experience Section */
    .experience-header {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .exp-icon-wrapper {
        margin: 0 auto;
    }

    .exp-meta {
        flex-direction: column;
        gap: 0.5rem;
        align-items: center;
    }

    .exp-footer {
        justify-content: center;
    }

    /* Research Section */
    .research-header {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .research-icon-wrapper {
        margin: 0 auto;
    }

    .research-header img {
        margin: 0 auto !important;
    }

    .research-body {
        text-align: center;
    }

    .research-footer {
        justify-content: center;
    }

    /* Projects Section */
    .project-card {
        width: 280px;
        /* Smaller width for mobile marquee if needed, or keep 350px if it fits */
    }

    /* Contact Section */
    .contact-form {
        padding: 1.5rem;
    }
}

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

    .intro-name {
        font-size: 2rem;
    }

    .btn {
        width: 100%;
    }

    .hero-cta {
        flex-direction: column;
        width: 100%;
    }

    .project-card {
        width: 85vw;
        /* Full width cards on very small screens? No, marquee needs fixed width usually. */
        width: 260px;
    }
}