:root {
    /* Midnight Purple Theme */
    --bg-color: #0c0616;
    /* Deep Night Purple */
    --text-primary: #f5f3f7;
    /* Very light lilac/white */
    --text-secondary: #d1c9db;
    /* Subtle Purple Grey */
    --accent-blue: #6d28d9;
    /* Deep Purple */
    --accent-cyan: #a855f7;
    /* Neon Purple/Amethyst */
    --soft-blue: #d946ef;
    /* Soft Fuchsia for links */
    --glass-bg: rgba(168, 85, 247, 0.05);
    /* Purple Tint */
    --glass-border: rgba(168, 85, 247, 0.15);
    --card-bg: rgba(26, 11, 46, 0.7);
    /* Dark Purple Card */

    --font-primary: 'Outfit', sans-serif;
    --font-code: 'JetBrains Mono', monospace;
    /* Coding Font */
}

/* Import JetBrains Mono */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap');


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

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

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #050505;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--accent-blue), var(--accent-cyan));
    border-radius: 5px;
    border: none;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-cyan);
}

::selection {
    background: var(--accent-cyan);
    color: white;
}

/* Scroll Progress Bar */
.scroll-progress-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    z-index: 1002;
    background: rgba(255, 255, 255, 0.05);
}

.scroll-progress-bar {
    height: 100%;
    background: linear-gradient(to right, var(--accent-blue), var(--accent-cyan));
    width: 0%;
    box-shadow: 0 0 10px var(--accent-cyan);
}

/* Custom Cursor REMOVED */

/* Utilities */
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

.section {
    padding: 130px 0 100px;
    /* Fixed top padding matches "Education" preference */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* Align content to top */
}

#skills.section,
#projects.section,
#experience.section,
#education.section,
#certifications.section {
    padding-top: 80px;
}

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

.accent {
    color: var(--accent-cyan);
}

.btn-primary,
.btn-secondary {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    /* For loader positioning */
    overflow: hidden;
    /* To contain the loader */
}

/* Button Loading State */
.btn-loading {
    color: transparent !important;
    /* Hide text */
    pointer-events: none;
    /* Prevent multiple clicks */
}

.btn-loading::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
    margin-left: -10px;
    margin-top: -10px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: btn-spin 0.8s infinite linear;
}

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

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--accent-cyan);
    color: #000000 !important;
    /* Black Text for Contrast */
    font-weight: 600;
    border: none;
    box-shadow: 0 0 15px var(--glass-border);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 25px rgba(168, 85, 247, 0.5);
    color: #000000 !important;
}

.btn-secondary {
    background: transparent;
    color: var(--text-primary);
    border: 2px solid var(--accent-cyan);
}

.btn-secondary:hover {
    background: var(--glass-bg);
    transform: translateY(-3px);
}

/* Transparent Navbar */
/* Navbar - Always Solid/Dark */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: all 0.4s ease;
    padding: 0;
    background: #0a0a10 !important;
    /* Solid Dark Background */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.nav-container {
    background: transparent !important;
    padding: 15px 20px;
    /* Match Hero Padding */
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    /* Match Hero Max-Width */
    margin: 0 auto;
    gap: 20px;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.logo {
    color: var(--accent-cyan);
    /* Purple */
    display: flex;
    align-items: center;
    transition: transform 0.3s;
}

.logo svg {
    width: 32px;
    height: 32px;
    stroke-width: 2.5;
}

.logo:hover {
    transform: scale(1.1);
}

/* Scrolled State - Solid Full-Width "Card" */
.navbar.scrolled {
    top: 0;
    /* Stick to top */
    width: 100%;
    /* Full Width */
    max-width: 100%;
    background: #0a0a10 !important;
    /* Solid Dark Background */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 0;
}

.navbar.scrolled .nav-container {
    background: transparent !important;
    /* Container follows parent */
    padding: 15px 20px;
    /* Match Hero Padding */
    max-width: 1200px;
    /* Match Hero Max-Width */
    margin: 0 auto;
    width: 100%;
    border: none !important;
    backdrop-filter: none !important;
    border-radius: 0;
    box-shadow: none !important;
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    text-decoration: none;
    font-family: var(--font-primary);
    /* coding font */
    letter-spacing: -1px;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 25px;
}

.nav-links a {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
    position: relative;
    font-family: var(--font-primary);
}

.nav-links a::after {
    content: '';
    position: absolute;
    width: 0%;
    height: 2px;
    bottom: -4px;
    left: 0;
    background-color: var(--accent-cyan);
    transition: width 0.3s;
}

.nav-links a:hover::after {
    width: 100%;
}

/* FIX: Specific Navbar Link Button Sizing */
.nav-links li a.btn-primary::after {
    display: none;
}

.nav-links li a.btn-primary {
    padding: 8px 20px !important;
    font-size: 0.9rem !important;
    line-height: 1.2 !important;
    display: inline-flex !important;
    align-items: center !important;
    height: auto !important;
    margin-left: 10px !important;
    border-radius: 50px !important;
    transform: none !important;
    width: auto !important;
}

.menu-toggle {
    display: none;
}

/* Hero Section */
/* Hero Section */
.hero-section {
    min-height: 100vh;
    padding: 120px 0 60px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Hero Sections Background */
.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    /* Dot Pattern Overlay */
    background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 30px 30px;
    mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
}

/* Floating Shapes REMOVED */

/* Hero Content Left-Aligned */
.hero-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    z-index: 1;
}

/* Desktop Hero Grid */
.hero-text {
    display: grid;
    grid-template-columns: 1fr 400px;
    grid-template-areas:
        "header image"
        "bio image"
        "buttons image"
        "actions image";
    align-items: center;
    gap: 12px 60px;
    width: 100%;
    text-align: left;
    position: relative;
    z-index: 2;
}

.hero-header-info { grid-area: header; }
.hero-visuals-wrapper {
    display: contents; /* Children image/actions act as grid items */
}

.hero-image-container { grid-area: image; }
.hero-bio { grid-area: bio; }
.hero-highlights { grid-area: highlights; }
.hero-buttons-container { grid-area: buttons; }
.hero-actions-wrapper { 
    grid-area: actions;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.hero-buttons-container {
    display: flex;
    gap: 20px;
    align-items: center;
}

.hero-btn-projects, .hero-btn-resume {
    width: fit-content;
    border-radius: 50px;
}

/* Greeting */
.greeting {
    font-size: 1.2rem;
    color: var(--accent-cyan);
    font-weight: 600;
    margin-bottom: 10px;
    display: block;
    font-family: var(--font-primary);
    letter-spacing: 0.5px;
}

.hero-name {
    font-size: 4.5rem; /* Reduced from 5rem to fit single line */
    font-weight: 800;
    margin-bottom: 0;
    line-height: 1.1;
    color: #ffffff;
    /* Solid White */
    letter-spacing: -2px; /* Tighter for a modern look */
    word-spacing: 8px; /* Reduced from 12px */
    white-space: nowrap; /* Prevent wrapping */
}

.hero-title {
    font-size: 2rem;
    color: #ffffff;
    /* Solid White for Title */
    margin-bottom: 0;
    /* Changed from 15px since it's empty */
    font-weight: 700;
    line-height: 1.3;
}

/* Typewriter Cursor */
.typewriter-cursor {
    display: inline-block;
    color: var(--accent-cyan);
    font-weight: 300;
    opacity: 1;
    margin-left: 2px;
}

.typewriter-cursor.blink {
    animation: blink-cursor 0.75s step-end infinite;
}

@keyframes blink-cursor {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

.hero-bio {
    font-size: 1.25rem;
    color: var(--text-secondary);
    max-width: 750px;
    margin-top: 0;
    margin-bottom: 12px;
    /* Reduced from 35px */
    line-height: 1.7;
    font-weight: 500;
}

/* Bio Highlights */
.hl-cyan {
    color: #06b6d4;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(6, 182, 212, 0.3);
}

.hl-purple {
    color: #a855f7;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(168, 85, 247, 0.3);
}

.hl-blue {
    color: #3d5afe;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(61, 90, 254, 0.3);
}

/* Hero Highlights List Left-Aligned */
.hero-highlights {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 10px;
    /* Reduced from 40px */
    align-items: flex-start;
    /* Left Align */
}

/* Hide empty hero elements to avoid extra spacing */
.hero-title:empty,
.hero-subtitle:empty,
.hero-highlights:empty {
    display: none;
    margin-bottom: 0;
}

.highlight-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 500;
    justify-content: flex-start;
    /* Left Align */
}

/* Remove Ticker Styles */
.skills-ticker {
    display: none;
}

/* Hero Buttons Left-Aligned */
.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
    justify-content: flex-start;
    /* Left Align */
}

/* Hero Social Icons (Circular Brand Colors) */
.hero-socials {
    display: flex;
    gap: 15px;
    margin-top: 0;
    justify-content: flex-start;
    /* Left Align */
}

/* Hero Social Icons (Pill Style) */
.hero-socials {
    display: flex;
    gap: 15px;
    margin-top: 0;
    justify-content: flex-start;
    /* Left Align */
}

.social-pill {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 6px 20px 6px 6px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.1);
    text-decoration: none;
    transition: all 0.3s ease;
    color: var(--text-primary);
}

.icon-container {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #333;
    color: white;
    transition: all 0.3s ease;
}

.social-label {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.social-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* LinkedIn */
.social-pill.linkedin .icon-container {
    background: #0077b5;
}

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

/* GitHub */
.social-pill.github .icon-container {
    background: #24292e;
}

.social-pill.github:hover {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

/* Email */
.social-pill.email .icon-container {
    background: #ea4335;
}

.social-pill.email:hover {
    border-color: #ea4335;
    background: rgba(234, 67, 53, 0.1);
}

.hero-image-container {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    z-index: 2;
}

.hero-image-wrapper {
    position: relative;
    width: 300px;
    height: 420px;
    border-radius: 150px;
    border: 1px solid var(--accent-cyan);
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.08); /* Tighter, softer glow */
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: transparent;
}

.hero-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 150px;
}

.hero-image-wrapper:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.2); /* Sharper hover glow */
}

.icon-container svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

/* Dot Grid Pattern for Hero Text - Left Aligned */
.hero-text::before {
    content: '';
    position: absolute;
    top: -60px;
    left: -40px;
    /* Left Position */
    transform: none;
    /* Remove center transform */
    width: 150px;
    height: 150px;
    background-image: radial-gradient(var(--text-secondary) 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.15;
    z-index: -1;
}

/* Hero Image Styles REMOVED */





/* Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
}

.mouse {
    width: 30px;
    height: 50px;
    border: 2px solid var(--text-secondary);
    border-radius: 15px;
    position: relative;
}

.wheel {
    width: 4px;
    height: 8px;
    background-color: var(--accent-cyan);
    border-radius: 2px;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    animation: scroll 1.5s infinite;
}

@keyframes scroll {
    0% {
        top: 8px;
        opacity: 1;
    }

    100% {
        top: 25px;
        opacity: 0;
    }
}

/* General Animations */
/* General Animations */
.fade-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Glass Card Enhanced & Neon Borders */
/* Glass Card with 3D Tilt */
.glass-card {
    background: rgba(20, 20, 25, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 25px;
    /* Reduced from 30px to decrease height */
    transition: transform 0.3s ease-out, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.credential-link-inline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--soft-blue);
    text-decoration: none;
    font-weight: 500;
    /* Lighter weight as requested (was 600) */
    font-size: 0.9rem;
    transition: all 0.3s;
}

.credential-link-inline:hover {
    transform: translateX(3px);
    /* Restore hover animation */
    text-decoration: none;
    text-shadow: none;
    /* Remove glow */
}

.credential-link-inline svg {
    width: 14px;
    height: 14px;
}

/* Glass Card Hover - Universal Lift */
.glass-card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 119, 255, 0.2);
    /* Reduced glow from 30px to 20px */
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-5px);
}

/* Specific Style for Education Cards (Neutral Glow only) */
.education-card:hover {
    /* Neutral Shadow (Black/White mix), Reduced Intensity */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3), 0 0 10px rgba(255, 255, 255, 0.1) !important;
    /* Reduced glow from 15px to 10px */
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Specific Style for Contact Form (Minimal/Green Glow) */
.contact-form.glass-card:hover {
    /* Minimal Green Shadow */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3), 0 0 15px rgba(168, 85, 247, 0.15) !important;
    /* Faint Green Glow */
    border-color: rgba(168, 85, 247, 0.5) !important;
    /* Increased Border Intensity */
    transform: translateY(-5px) !important;
    /* Ensure lift is consistent */
}

/* Remove old pseudo-elements for gradient border */
.glass-card::before,
.glass-card::after {
    display: none;
}

/* About Section Redesign (What Do I Know?) */
.about-redesign {
    padding: 100px 0;
}

.knowledge-container {
    display: flex;
    flex-direction: column;
    gap: 120px;
    margin-top: 60px;
}

.knowledge-row {
    display: flex;
    align-items: center;
    gap: 80px;
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.knowledge-row.visible {
    opacity: 1;
    transform: translateY(0);
}

.knowledge-row.reverse {
    flex-direction: row-reverse;
}

.row-illustration {
    flex: 1;
    max-width: 450px;
    display: flex;
    justify-content: center;
    position: relative;
}

.row-illustration::before {
    content: '';
    position: absolute;
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, var(--accent-cyan) 0%, transparent 70%);
    opacity: 0.05;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.row-illustration img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.3));
    border-radius: 15px;
}

.row-content {
    flex: 1.2;
}

.row-content h3 {
    font-size: 2.5rem;
    margin-bottom: 25px;
    color: var(--text-primary);
    font-weight: 700;
    letter-spacing: -0.5px;
}

.domain-tech-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 35px;
    color: var(--accent-cyan);
}

.domain-tech-icons i {
    font-size: 2.2rem;
    transition: all 0.3s ease;
    filter: drop-shadow(0 0 5px rgba(168, 85, 247, 0.2));
}

.domain-tech-icons i:hover {
    transform: scale(1.2) translateY(-5px);
    color: #ffffff;
    filter: drop-shadow(0 0 15px var(--accent-cyan));
}

.row-bullets {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.row-bullets li {
    position: relative;
    padding-left: 35px;
    color: var(--text-secondary);
    font-size: 1.15rem;
    line-height: 1.6;
    font-weight: 400;
}

.row-bullets li::before {
    content: '⚡';
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.2rem;
    color: #f1c40f;
    /* Lightning Gold */
    filter: drop-shadow(0 0 5px rgba(241, 196, 15, 0.5));
}

@media (max-width: 1024px) {

    .knowledge-row,
    .knowledge-row.reverse {
        flex-direction: column;
        text-align: center;
        gap: 50px;
    }

    .row-illustration {
        max-width: 350px;
    }

    .domain-tech-icons {
        justify-content: center;
    }

    .row-bullets {
        align-items: center;
    }

    .row-bullets li {
        text-align: left;
        max-width: 90%;
    }
}

/* Education Layout Cleanup */
.education-grid {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.edu-logo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-cyan);
    /* Neon icon */
    background: var(--glass-bg);
    /* Glassy tint */
}

.edu-logo-placeholder svg {
    width: 30px;
    /* Smaller for footer */
    height: 30px;
    stroke-width: 1.5;
}

.edu-card-split {
    display: flex;
    background-color: #13001f;
    /* Single dark background */
    border: 0.5px solid rgba(168, 85, 247, 0.4);
    /* Subtle purple border */
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    margin-bottom: 30px;
}

.edu-card-split:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(168, 85, 247, 0.1);
    border-color: rgba(168, 85, 247, 0.6);
}

/* Left Panel - Logo & Short Name */
.edu-left-panel {
    flex: 0 0 100px;
    /* Exactly enough for logo + short name padding */
    background-color: #1e0a35;
    /* Slightly lighter dark background */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 25px 15px;
    border-right: 1px solid rgba(168, 85, 247, 0.2);
    /* Subtle divider */
    text-align: center;
}

.edu-logo-circle {
    width: 65px;
    height: 65px;
    background: #ffffff;
    /* White background for the logo circle */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    margin-bottom: 12px;
    border: 2px solid rgba(168, 85, 247, 0.3);
    overflow: hidden;
}

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

.edu-logo-circle i {
    font-size: 2rem;
    color: var(--accent-cyan);
}

.edu-short-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent-cyan);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Right Content Area */
.edu-right-content {
    flex: 1;
    padding: 25px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.edu-right-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.edu-institution-full {
    font-size: 1.3rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    line-height: 1.2;
}

.edu-date-pill {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent-cyan);
    border: 1px solid rgba(168, 85, 247, 0.4);
    background: rgba(168, 85, 247, 0.1);
    padding: 4px 12px;
    border-radius: 20px;
    white-space: nowrap;
}

.edu-degree-subtitle {
    font-size: 1rem;
    font-weight: 500;
    color: rgba(168, 85, 247, 0.8);
    /* Muted purple */
    margin-bottom: 12px;
}

.edu-content-divider {
    height: 1px;
    background: linear-gradient(90deg, rgba(168, 85, 247, 0.3), transparent);
    margin-bottom: 15px;
}

.edu-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.edu-bullets li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 10px;
}

.edu-bullets li .bullet-icon {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.1rem;
    color: var(--accent-cyan);
}

.edu-footer {
    margin-top: auto;
    display: flex;
    justify-content: flex-end;
}

.edu-visit-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #1a1025;
    /* Darker filled */
    color: #ffffff;
    padding: 8px 18px;
    border-radius: 6px;
    border: 1px solid rgba(168, 85, 247, 0.5);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.edu-visit-btn:hover {
    background-color: #2D1B69;
    /* Branding purple on hover */
    border-color: rgba(168, 85, 247, 0.8);
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .edu-card-split {
        flex-direction: column;
    }

    .edu-left-panel {
        flex: auto;
        width: 100%;
        border-right: none;
        border-bottom: 1px solid rgba(168, 85, 247, 0.2);
        padding: 20px;
    }

    .edu-right-header {
        flex-direction: column;
        gap: 10px;
    }

    .edu-date-pill {
        align-self: flex-start;
    }
}

@media (max-width: 768px) {
    .edu-row {
        flex-direction: column;
        align-items: center;
        text-align: left;
    }

    .edu-logo-container {
        width: 120px;
        height: 120px;
        margin-bottom: -15px;
        /* Pull the card slightly up */
        z-index: 2;
        background: var(--bg-color);
        /* Ensure opaque over card */
    }

    .edu-top-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
}


.credential-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.95rem;
    color: var(--soft-blue);
    text-decoration: none;
    margin-top: 10px;
    font-weight: 500;
    transition: all 0.3s;
}

.credential-link:hover {
    color: var(--soft-blue);
    /* Keep soft blue */
    transform: translateX(5px);
    text-shadow: none;
    /* Remove glow */
}

.credential-link svg {
    width: 16px;
    height: 16px;
}

.project-link-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* Slightly more gap */
    font-size: 0.9rem;
    /* Slightly smaller text maybe? 0.95rem was before. Let's keep 0.95 or 0.9. User said text is small. So maybe keep text 0.95rem and make icon smaller. */
    color: var(--soft-blue);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s;
}

.project-link-item:hover {
    color: var(--soft-blue);
    transform: translateX(5px);
    text-shadow: none;
}

.project-link-item svg {
    width: 14px;
    /* Reduced from 16px */
    height: 14px;
    margin-top: 1px;
    /* Optical alignment */
}

/* Timeline */
.timeline {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
}

.timeline::after {
    content: '';
    position: absolute;
    width: 2px;
    background: var(--glass-border);
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -1px;
}

.timeline-item {
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 50%;
    margin-bottom: 20px;
}

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

.timeline-item:nth-child(even) {
    left: 50%;
}

.timeline-dot {
    width: 16px;
    height: 16px;
    background: var(--accent-cyan);
    border-radius: 50%;
    position: absolute;
    top: 20px;
    right: -8px;
    z-index: 10;
    box-shadow: 0 0 4px rgba(168, 85, 247, 0.4);
}

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

.timeline-item:odd .glass-card {
    margin-right: 0;
}

.timeline-content.glass-card {
    padding: 20px;
}

/* Experience Card Typography */
.exp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.exp-role {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.exp-type-badge {
    padding: 6px 14px;
    background: rgba(168, 85, 247, 0.1);
    color: var(--accent-cyan);
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid rgba(168, 85, 247, 0.2);
}

.exp-subheader {
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--text-secondary);
    /* Muted */
    margin-bottom: 4px;
}

.exp-duration {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.45);
    /* Muted/Tertiary */
    font-weight: 500;
    margin-bottom: 12px;
    display: block;
}

/* Metrics Row */
.exp-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

.exp-stat-box {
    background: rgba(255, 255, 255, 0.03);
    padding: 6px 10px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.stat-val {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-cyan);
    line-height: 1.2;
}

.stat-label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.exp-desc {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 12px;
    text-align: left;
}

.exp-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.exp-tag {
    font-size: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    padding: 4px 12px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Projects Grid */
/* Project Card Layout Refinement */
/* Projects Redesign: Alternating Rows */
.projects-rows {
    display: flex;
    flex-direction: column;
    gap: 0;
    /* Gap handled by padding and separators */
}

.project-row {
    display: flex;
    align-items: center;
    gap: 60px;
    padding: 60px 0;
    border-bottom: 1px solid rgba(168, 85, 247, 0.1);
    /* Subtle divider */
}

.project-row:last-child {
    border-bottom: none;
}

.project-row:nth-child(even) {
    flex-direction: row-reverse;
}

/* Image Box */
.project-image-box {
    flex: 0 0 45%;
    height: 320px;
    /* Fixed height for absolute uniformity across all cards */
    border-radius: 12px;
    overflow: hidden;
    /* Removed box-shadow for open layout feel */
}

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

.project-row:hover .project-img {
    transform: scale(1.05);
}

/* Content Box */
.project-details-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
}

.project-category-tag {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 6px 16px;
    border-radius: 20px;
    display: inline-block;
    width: fit-content;
    margin-bottom: 8px;
    transition: all 0.3s ease;
}

/* Category Specific Colors */
.cat-cloud {
    color: #a855f7;
    /* Brand Purple */
    border: 2px solid rgba(168, 85, 247, 0.4);
    background: rgba(168, 85, 247, 0.1);
}

.cat-data-analysis {
    color: #06b6d4;
    /* Cyan */
    border: 2px solid rgba(6, 182, 212, 0.4);
    background: rgba(6, 182, 212, 0.1);
}

.cat-ai {
    color: #ec4899;
    /* Pink/Magenta */
    border: 2px solid rgba(236, 72, 153, 0.4);
    background: rgba(236, 72, 153, 0.1);
}

.project-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.project-tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0;
}

.project-tech-tag {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--accent-cyan);
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid rgba(168, 85, 247, 0.3);
    background: rgba(168, 85, 247, 0.05);
}

.project-description {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    /* Increased from 2 to 4 lines */
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Action Buttons */
.project-actions {
    display: flex;
    gap: 15px;
}

.btn-code {
    padding: 10px 22px;
    border: 1px solid var(--accent-cyan);
    color: var(--accent-cyan);
    background: transparent;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-code:hover {
    background: rgba(168, 85, 247, 0.1);
    transform: translateY(-2px);
}

.btn-demo {
    padding: 10px 22px;
    background-color: var(--accent-cyan);
    color: #ffffff;
    border: 1px solid var(--accent-cyan);
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(168, 85, 247, 0.3);
}

.btn-demo:hover {
    background-color: #9333ea;
    /* Darker purple */
    border-color: #9333ea;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(168, 85, 247, 0.4);
}

@media (max-width: 900px) {

    .project-row,
    .project-row:nth-child(even) {
        flex-direction: column;
        gap: 30px;
        padding: 40px 0;
    }

    .project-image-box {
        flex: 0 0 auto;
        width: 100%;
        height: 200px;
    }

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

/* Header: Title Only */
.project-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.project-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
}

/* Tags (Pills) - Single Line */
.tech-stack {
    display: flex;
    flex-wrap: nowrap;
    /* Single line */
    gap: 8px;
    margin-bottom: 0;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* IE/Edge */
    padding-bottom: 2px;
}

.tech-stack::-webkit-scrollbar {
    display: none;
}

.tech-stack span {
    font-size: 0.75rem;
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.05);
    /* Darker/Neutral */
    color: var(--text-secondary);
    /* Grey text */
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-weight: 500;
    flex-shrink: 0;
    /* Prevent shrinking */
}

.tech-stack span:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.3);
}

/* Description */
.project-desc {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
    flex-grow: 1;
}

/* Footer Links */
.project-links {
    display: flex;
    gap: 15px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Skills Section */
.skills-category {
    margin-bottom: 40px;
    text-align: center;
}

.category-title {
    font-size: 1.5rem;
    color: var(--text-primary);
    margin-bottom: 20px;
}

.skills-flex {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
}

.skill-badge {
    padding: 10px 20px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s;
    cursor: default;
}

.skill-badge:hover {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
    transform: scale(1.05);
}

/* Refined Certifications Section */
.cert-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    width: 100%;
}

.cert-card-refined {
    background-color: #13001f;
    border: 0.5px solid rgba(168, 85, 247, 0.4);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    width: calc(33.333% - 8px);
    /* 3 columns with 12px gaps */
    min-height: 200px;
    /* Base uniformity */
}

@media (max-width: 1024px) {
    .cert-card-refined {
        width: calc(50% - 6px);
        /* 2 columns */
    }
}

@media (max-width: 650px) {
    .cert-grid {
        justify-content: center;
    }

    .cert-card-refined {
        width: 100%;
        /* 1 column */
        min-width: auto;
    }
}

.cert-card-refined:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(168, 85, 247, 0.1);
    border-color: var(--accent-cyan);
}

.cert-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.cert-purple-icon {
    width: 32px;
    height: 32px;
    background-color: #2D1B69;
    /* Branding Purple Box */
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    /* Better emoji sizing */
}

.cert-purple-icon i {
    width: 16px;
    height: 16px;
}

.cert-date-pill {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent-cyan);
    border: 1px solid rgba(168, 85, 247, 0.6);
    padding: 3px 10px;
    border-radius: 20px;
}

.cert-middle-content {
    margin-bottom: 20px;
    flex-grow: 1;
}

.cert-title-refined {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 4px;
    line-height: 1.4;
}

.cert-issuer-refined {
    font-size: 12px;
    font-weight: 500;
    color: rgba(168, 85, 247, 0.7);
    /* Muted purple */
}

.cert-action-link {
    display: inline-flex;
    align-items: center;
    color: var(--accent-cyan);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.cert-action-link:hover {
    opacity: 0.8;
}

/* Contact */
.contact-container {
    display: flex;
    gap: 50px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.contact-info,
.contact-form {
    flex: 1;
    min-width: 300px;
}

.contact-info h3 {
    font-size: 2rem;
    margin-bottom: 20px;
}

.contact-info p {
    color: var(--text-secondary);
    margin-bottom: 30px;
}

.contact-links {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 30px;
}

.contact-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 1.1rem;
    transition: color 0.3s;
}

.contact-link:hover {
    color: var(--accent-cyan);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-secondary);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: inherit;
    transition: border-color 0.3s;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent-cyan);
}

/* Footer */
.footer {
    padding: 10px 0;
    border-top: 1px solid var(--glass-border);
    background: #050505;
    position: relative;
    color: var(--text-secondary);
}

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
}

.footer-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

.footer-socials {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.footer-social-link {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all 0.3s ease;
    text-decoration: none;
}

/* Branded Colors for Footer Socials (Always On) */
.footer-social-link.linkedin {
    background: #0077b5;
    border-color: #0077b5;
    color: white;
}

.footer-social-link.github {
    background: #333;
    border-color: #fff;
    color: white;
}

.footer-social-link.email {
    background: #ea4335;
    border-color: #ea4335;
    color: white;
}

.footer-social-link:hover {
    transform: translateY(-3px);
    opacity: 0.9;
}

.footer-social-link.linkedin:hover {
    box-shadow: 0 4px 15px rgba(0, 119, 181, 0.4);
}

.footer-social-link.github:hover {
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
}

.footer-social-link.email:hover {
    box-shadow: 0 4px 15px rgba(234, 67, 53, 0.4);
}

.footer-social-link i {
    width: 18px;
    height: 18px;
}

@media (max-width: 768px) {
    .footer-container {
        flex-direction: column-reverse;
        text-align: center;
        gap: 25px;
    }

    .footer-actions {
        flex-direction: row;
        /* Keep horizontal */
        justify-content: center;
        gap: 20px;
        width: 100%;
    }
}

.back-to-top {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--glass-bg);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--accent-cyan);
    transition: all 0.3s;
}

.back-to-top:hover {
    background: var(--accent-blue);
    color: white;
}

/* Tablet Styles (max-width: 1200px) */
/* Tablet Styles (max-width: 1200px) */
@media (max-width: 1200px) {
    .navbar {
        width: 100%;
        top: 0;
        left: 0;
        transform: none;
    }

    .nav-container {
        padding: 5px 15px;
        width: 100%;
        max-width: 100%;
        gap: 5px;
        /* Minimal gap */
        flex-wrap: nowrap;
        justify-content: space-between;
        /* Ensure logo and links spread */
    }

    .logo {
        font-size: 1.1rem;
        white-space: nowrap;
        flex-shrink: 0;
        /* Don't shrink logo */
    }

    .nav-links {
        gap: 5px;
        flex-wrap: nowrap;
        margin: 0;
        padding: 0;
        justify-content: flex-end;
        width: auto;
        flex-shrink: 1;
        /* Allow links container to shrink if needed */
        overflow: visible;
        /* Show all content */
    }

    .nav-links li {
        flex-shrink: 0;
        /* Don't shrink individual li */
    }

    .nav-links a {
        font-size: 0.8rem;
        white-space: nowrap;
        padding: 5px;
    }

    .nav-links li a.btn-primary {
        padding: 5px 10px !important;
        margin-left: 5px !important;
        font-size: 0.75rem !important;
        white-space: nowrap;
    }
}

/* Tighter Tablet Fix (iPad Air / Portrait Tablets) */
@media (max-width: 900px) {
    /* Logo is now short "Somenath.", so no need to hide parts */

    .nav-links a {
        font-size: 0.75rem;
        padding: 3px;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .hero-section {
        padding-bottom: 80px;
        padding-top: 60px;
        /* Aggressively reduced */
    }

    .scroll-arrows {
        bottom: 50px;
        /* Move arrows up on mobile */
    }

    .navbar {
        position: fixed;
        top: 0;
        left: 0;
        transform: none;
        width: 100%;
        border-radius: 0;
        background: rgba(8, 2, 2, 0.95) !important;
        /* Dark background */
        padding: 10px 0;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    }

    .nav-container {
        padding: 0 20px;
        width: 100%;
    }

    .logo {
        font-size: 1.2rem;
    }

    .hero-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0;
        padding-top: 30px;
    }

    .hero-text {
        display: grid;
        grid-template-columns: 1.2fr 1fr;
        grid-template-areas:
            "header header"
            "image actions"
            "bio bio";
        align-items: center;
        text-align: center;
        width: 100%;
        gap: 20px 15px;
    }

    .hero-header-info { 
        grid-area: header; 
        text-align: center;
    }

    .hero-image-container {
        grid-area: image;
        margin: 0;
        justify-content: flex-end;
    }

    .hero-image-wrapper {
        width: 160px;
        height: 240px;
        border-radius: 80px;
        border: 1px solid var(--accent-cyan);
    }

    .hero-text {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "header header"
            "visuals visuals"
            "bio bio"
            "buttons buttons";
        align-items: center;
        text-align: center;
        width: 100%;
        gap: 15px 10px;
    }

    .hero-header-info { 
        grid-area: header; 
        text-align: center;
    }

    .hero-visuals-wrapper {
        grid-area: visuals;
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        width: 100%;
        margin: 15px 0;
    }

    .hero-image-container {
        grid-column: 2;
        display: flex;
        justify-content: center;
        margin: 0;
    }

    .hero-image-wrapper {
        width: 150px;
        height: 220px;
        border-radius: 75px;
        border: 1px solid var(--accent-cyan);
    }

    .hero-actions-wrapper {
        grid-column: 3;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 10px;
        margin-left: 12px;
    }

    .hero-buttons-container {
        grid-area: buttons;
        display: flex;
        gap: 15px;
        justify-content: center;
        width: 100%;
        margin-top: 15px;
    }

    /* Standard Pill Style for buttons on mobile - as requested "as earlier" */
    .hero-btn-projects, 
    .hero-btn-resume {
        padding: 10px 20px !important;
        border-radius: 50px !important;
        font-size: 0.9rem !important;
        min-width: 140px !important;
        text-align: center;
        margin: 0 !important;
    }

    .hero-btn-projects::before,
    .hero-btn-resume::before {
        display: none !important; /* Remove speech bubble point on mobile */
    }

    .hero-btn-projects {
        background: var(--accent-cyan) !important;
        color: black !important;
    }

    .hero-btn-resume {
        background: transparent !important;
        border: 2px solid var(--accent-cyan) !important;
        color: var(--text-primary) !important;
    }

    .hero-btn-resume::before {
        background: var(--bg-color);
        border: 2px solid var(--accent-cyan);
        border-right: none;
        left: -17px;
    }

    .hero-name {
        font-size: 2.5rem;
        margin-bottom: 5px;
    }

    .hero-bio {
        grid-area: bio;
        margin-top: 10px;
        font-size: 1rem;
        text-align: center;
    }

    /* Social Icons in Vertical Column in Center */
    .hero-socials {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        margin: 0;
        width: fit-content;
        justify-content: center;
    }

    /* Hide labels on mobile socials */
    .social-label {
        display: none;
    }

    .social-pill {
        width: 40px;
        height: 40px;
        padding: 0;
        border-radius: 50%;
        justify-content: center;
        align-items: center;
    }

    .social-pill .icon-container {
        width: 100%;
        height: 100%;
        background: transparent; /* Clean circle */
    }

    /* Override dynamic background in JS for clean circles if needed */
    .social-pill.linkedin .icon-container { background: #0077b5; }
    .social-pill.github .icon-container { background: #24292e; }
    .social-pill.email .icon-container { background: #ea4335; }

    /* Mobile social pills — icon only, true circle */
    .social-pill {
        padding: 5px;
        gap: 0;
        border-radius: 50%;
        width: 46px;
        height: 46px;
        aspect-ratio: 1 / 1;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
    }

    /* Make the inner icon container fill the pill */
    .social-pill .icon-container {
        width: 34px;
        height: 34px;
        flex-shrink: 0;
    }

    .social-label {
        display: none;
    }

    .btn-primary,
    .btn-secondary {
        padding: 10px 20px;
        font-size: 0.9rem;
        width: auto;
        min-width: 140px;
    }

    .social-icon {
        width: 50px;
        /* Restore size */
        height: 50px;
        font-size: 1.2rem;
    }

    .nav-links {
        display: none;
    }

    /* Simplified mobile menu for now */

    .timeline::after {
        left: 31px;
    }

    .timeline-item {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
    }

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

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

    .timeline-dot {
        left: 22px !important;
        right: auto;
    }

    .contact-container {
        flex-direction: column;
    }

    /* Mobile Menu Toggle Logic needed in JS to show links */
    .cursor-dot {
        display: none !important;
    }

    /* Hamburger Animation */
    .menu-toggle {
        display: block;
        cursor: pointer;
    }

    .bar {
        display: block;
        width: 25px;
        height: 3px;
        background: white;
        margin: 5px auto;
        transition: all 0.3s ease-in-out;
    }

    .menu-toggle .bar {
        transition: all 0.3s ease-in-out;
    }

    .menu-toggle.active .bar:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

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

    .nav-links.active {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        background: black;
        padding: 20px;
        text-align: center;
    }
}

/* --- Sticky Overlay Removed --- */

/* --- Card Hover Color Overlay (FINAL ROBUST FIX) --- */
.project-card,
.glass-card,
.tech-item {
    position: relative !important;
    overflow: hidden !important;
    z-index: 1;
    transition: all 0.3s ease !important;
}

/* 
   Refined Hover Effect:
   - translateY(-4px)
   - Slight shadow increase
   - Brighter border
   - NO strong red halo
*/
.project-card:hover,
.glass-card:hover,
.tech-item:hover {
    transform: translateY(-4px) !important;

    /* Subtle Shadow */
    box-shadow:
        0 10px 20px rgba(0, 0, 0, 0.4),
        0 0 15px rgba(255, 255, 255, 0.1) !important;

    /* Brighter Border */
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Force Text Color Change for Contrast - keeping this for legibility on dark cards if needed, but removing the forced white if it clashes. 
   Actually, without the red overlay, we might not need to force white text. 
   I'll comment it out or make it less aggressive. 
   User didn't ask to change text color, so I'll leave it alone for now OR only brighten it slightly.
   Let's remove the forced white text to keep it natural, unless it was there for a specific reason.
   Original had it. I'll keep it but maybe less "text-shadowy".
*/
/*
.project-card:hover h3,
.project-card:hover p,
.project-card:hover span,
.glass-card:hover h3,
.glass-card:hover p,
.tech-item:hover {
    color: #ffffff !important; 
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
*/

/* Base style for project links (Code/Demo) */
.project-links a {
    color: var(--soft-blue);
    text-decoration: none;
    font-weight: 600;
    margin-right: 15px;
    /* Spacing between links */
    transition: color 0.3s;
}

/* Ensure links stay clickable and distinct */
/* Ensure links stay clickable and distinct */
.project-links a:hover,
.credential-link:hover {
    color: var(--soft-blue) !important;
    text-shadow: none;
    /* Remove glow */
}

/* --- RESTORED STYLES --- */

/* Section Titles */
/* Section Titles */
.section-title {
    font-size: 2.5rem;
    margin: 0 auto 50px;
    /* Center block */
    text-align: center;
    /* Center text */
    position: relative;
    display: block;
    /* Block level for centering */
    text-shadow: 0 0 15px rgba(0, 119, 255, 0.4);
}

.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: linear-gradient(to right, var(--accent-blue), var(--accent-cyan));
    margin: 10px auto 0;
    /* Center underline */
    border-radius: 2px;
}

/* Glass Card - Essential for Visibility */
.glass-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    padding: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-card,
.tech-item {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    padding: 20px;
    transition: all 0.3s ease;
}

/* Stagger Delays for Fade Up */
.stagger-delay-1 {
    transition-delay: 0.1s;
}

.stagger-delay-2 {
    transition-delay: 0.2s;
}

.stagger-delay-3 {
    transition-delay: 0.3s;
}

.stagger-delay-4 {
    transition-delay: 0.4s;
}

/* --- Section Dividers --- */


/* Line Divider (Gradient) */
.section-divider {
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-blue), var(--accent-cyan), transparent);
    opacity: 0.3;
    margin: 0;
    /* Dividers sit between sections which already have padding */
}

@media (min-width: 1024px) {

    .projects-grid,
    .education-grid,
    .cert-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Skills Section Redesign */
.skills-category {
    margin-bottom: 50px;
    display: flex;
    align-items: flex-start;
    gap: 40px;
}

.skill-cat-header {
    flex: 0 0 250px;
    text-align: right;
    position: relative;
    padding-right: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.category-title {
    font-size: 1.4rem;
    color: var(--accent-cyan);
    margin-bottom: 0;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* The Line & Arrow */
.category-line {
    position: absolute;
    top: 5px;
    right: 0;
    width: 2px;
    height: 100%;
    min-height: 40px;
    background: linear-gradient(to bottom, var(--accent-cyan), transparent);
}

/* Arrowhead */
.category-line::before {
    content: '';
    position: absolute;
    top: 0;
    right: -4px;
    width: 10px;
    height: 10px;
    background: var(--accent-cyan);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--accent-cyan);
}

.skills-flex {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 15px;
    padding-top: 5px;
}

@media (max-width: 768px) {
    .skills-category {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        text-align: center;
    }

    .skill-cat-header {
        flex: auto;
        width: 100%;
        text-align: center;
        align-items: center;
        padding-right: 0;
        border-bottom: 1px solid var(--accent-cyan);
        padding-bottom: 10px;
    }

    .category-line {
        display: none;
    }

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

/* Skills Section Redesign: Tiered Hierarchy */
.skills-redesign-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.skill-tier-block {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.skill-tier-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent-cyan);
    text-transform: uppercase;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.skill-tier-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(168, 85, 247, 0.2);
}

.skill-items-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

/* Tier Specific Styles */
.tier-primary .skill-items-grid {
    display: grid;
    /* Force 6 in a row on desktop as per special instruction; ensure gap is small enough */
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

@media (min-width: 1100px) {
    .tier-primary .skill-items-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

.skill-card-primary {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(6, 182, 212, 0.15));
    border: 2px solid var(--accent-cyan);
    padding: 18px 30px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    text-align: center;
}

.skill-card-primary:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 30px rgba(168, 85, 247, 0.3);
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(6, 182, 212, 0.2));
}

.skill-card-primary i {
    font-size: 2rem;
    color: var(--accent-cyan);
}

.skill-card-primary .skill-name {
    font-size: 1.1rem;
    font-weight: 700;
}

.skill-pill-competitive {
    background: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.4);
    padding: 10px 18px;
    border-radius: 30px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.skill-pill-competitive:hover {
    background: rgba(168, 85, 247, 0.2);
    transform: scale(1.05);
}

.skill-pill-supporting {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.skill-pill-basic {
    background: transparent;
    border: 1px dashed rgba(255, 255, 255, 0.2);
    padding: 6px 12px;
    border-radius: 5px;
    font-size: 0.85rem;
    opacity: 0.6;
    filter: grayscale(0.5);
    transition: all 0.3s ease;
}

.skill-pill-basic:hover {
    opacity: 1;
    filter: grayscale(0);
    border-style: solid;
    border-color: var(--text-secondary);
}

@media (max-width: 768px) {
    .tier-primary .skill-items-grid {
        /* Switch to 2 columns to give enough space for name + emoji */
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .skill-card-primary {
        padding: 15px;
        min-height: auto;
    }

    .skill-card-primary .skill-name {
        font-size: 0.9rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
}

.skill-content:hover {
    background: rgba(0, 255, 255, 0.1);
    border-color: var(--accent-cyan);
    transform: translateX(5px);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.2);
}

.skill-content i {
    color: var(--accent-cyan);
}

/* Remove the last part of the vertical line if needed */
/* .tree-skill-item:last-child { margin-bottom: 0; } */


/* --- Refined Horizontal Tree Layout --- */

.tree-skills-list {
    /* Override Block to Flex for Horizontal Layout */
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    /* Space between items */
    padding-left: 30px;
    /* Indent for L-bracket */
    border-left: 2px solid var(--glass-border);
    /* Main vertical line */
    position: relative;
    padding-bottom: 20px;
    /* Extend line slightly */
    margin-left: 10px;
    /* Align with title icon */
}

/* The Horizontal Connector (One big L-bracket for the group) */
.tree-skills-list::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20px;
    /* Align with row center approx */
    width: 20px;
    /* Length of horizontal arm */
    height: 2px;
    background: var(--glass-border);
}

.tree-skill-item {
    /* Remove Individual Lines */
    padding-left: 0;
    margin-bottom: 0;
    /* Reset from previous */
}

.tree-skill-item::before,
.tree-skill-item::after {
    display: none;
    /* Hide per-item connectors */
}

/* Adjust the vertical line height to stop at the last row if needed, 
   but for CSS-only 'Folder' look, a continuous line is fine. 
   To cut it short at the L-arm is tricky without JS or complex CSS, 
   so the continuous line acts as a 'branch' indicator. */


/* Experience Company Name - Red Underline */
.timeline-content .company {
    display: inline-block;
    border-bottom: 2px solid #a855f7bd;
    /* Bright Red */
    padding-bottom: 3px;
    margin-top: 5px;
    margin-bottom: 10px;
    font-weight: 600;
    color: var(--text-primary);
}

/* --- New Section Heading Style REMOVED to restore underline --- */

/* Scroll Arrows Animation */
.scroll-arrows {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    opacity: 0.8;
    z-index: 10;
}

.scroll-arrows span {
    display: block;
    width: 15px;
    height: 15px;
    border-bottom: 3px solid var(--accent-cyan);
    border-right: 3px solid var(--accent-cyan);
    transform: rotate(45deg);
    animation: scrollMethod 2s infinite;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

.scroll-arrows span:nth-child(1) {
    animation-delay: -0.2s;
}

.scroll-arrows span:nth-child(2) {
    animation-delay: 0s;
}

@keyframes scrollMethod {
    0% {
        opacity: 0;
        transform: rotate(45deg) translate(-10px, -10px);
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: rotate(45deg) translate(10px, 10px);
    }
}

/* SPA Dynamic Page Management */
.hidden-section {
    display: none !important;
}

/* Hide section dividers globally when using SPA pages to prevent empty gaps */
.section-divider {
    display: none !important;
}

/* Footer Layout & Mobile Centering */
.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-connect-btn {
    padding: 8px 20px;
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .footer-container {
        justify-content: center;
        flex-direction: column-reverse;
        text-align: center;
        gap: 20px;
    }

    /* Force all sections and dividers to be visible for single-page scrolling on mobile */
    .hidden-section {
        display: flex !important; /* Most sections use flex */
    }
    
    section.hidden-section {
        display: flex !important;
    }

    .section-divider {
        display: block !important;
        height: 1px;
        width: 100%;
        background: linear-gradient(to right, transparent, var(--glass-border), transparent);
        margin: 0;
    }

    .section {
        min-height: auto !important; /* Sections fit content on mobile */
        padding: 60px 0 !important; /* tighter spacing for mobile scroll */
    }
    
    .hero-section {
        min-height: 100vh !important; /* Keep hero full height */
    }
}