/* --- Variables based on Modern Palette --- */
:root {
    /* Fonts - Unified */
    --font-heading: 'Satoshi', sans-serif;
    --font-body: 'Satoshi', sans-serif;
    /* Unified Font */

    /* Colors - Dark Mode (Default) */
    --primary-bg: #020617;
    /* Deeper black-blue */
    --secondary-bg: #0f172a;
    /* Panel background */

    /* Enhanced Teal Accent */
    --accent: #2dd4bf;
    --accent-dark: #115e59;
    --accent-light: #99f6e4;

    /* Glows */
    --accent-glow: rgba(45, 212, 191, 0.3);
    --accent-glow-strong: rgba(45, 212, 191, 0.7);

    --text-main: #f8fafc;
    /* Off-white */
    --text-muted: #94a3b8;
    /* Muted blue-grey */

    /* Modern Glassmorphism variables */
    --card-bg: rgba(15, 23, 42, 0.6);
    /* More opaque for readability */
    --card-border: rgba(255, 255, 255, 0.06);
    --card-border-hover: rgba(45, 212, 191, 0.4);

    --nav-bg: rgba(2, 6, 23, 0.0);
    /* Initially transparent */
    --nav-blur: 0px;
    /* Initially no blur */

    /* Gradients */
    --gradient-text: linear-gradient(135deg, #e2e8f0 30%, #ffffff 50%, #99f6e4 100%);
    --gradient-primary: linear-gradient(135deg, #14b8a6 0%, #2dd4bf 50%, #5eead4 100%);
    --gradient-surface: linear-gradient(180deg, rgba(30, 41, 59, 0.2) 0%, rgba(15, 23, 42, 0.2) 100%);
}

/* Light Mode Variables */
[data-theme="light"] {
    --primary-bg: #ffffff;
    --secondary-bg: #f1f5f9;

    --accent: #0f766e;
    --accent-dark: #134e4a;
    --accent-light: #2dd4bf;

    --accent-glow: rgba(15, 118, 110, 0.2);
    --accent-glow-strong: rgba(15, 118, 110, 0.5);

    --text-main: #0f172a;
    --text-muted: #64748b;

    --card-bg: rgba(255, 255, 255, 0.85);
    --card-border: rgba(0, 0, 0, 0.06);
    --card-border-hover: rgba(15, 118, 110, 0.3);

    --nav-bg: rgba(255, 255, 255, 0.0);

    --gradient-text: linear-gradient(135deg, #0f172a 0%, #334155 100%);
    --gradient-primary: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
    --gradient-surface: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.5s ease,
        box-shadow 0.5s ease,
        transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    overflow-x: hidden;
    /* Fix mobile overflow */
    width: 100%;
}

body {
    background-color: var(--primary-bg);
    color: var(--text-main);
    font-family: var(--font-body);
    overflow-x: hidden;
    width: 100%;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

/* --- Dynamic Background Shapes (Vibrant) --- */
.bg-shape {
    position: fixed;
    border-radius: 50%;
    filter: blur(80px);
    /* Reduced from 120px for performance */
    z-index: -1;
    opacity: 0.25;
    mix-blend-mode: screen;
    will-change: transform;
    /* Force Hardware Acceleration */
    transform: translate3d(0, 0, 0);
    animation: float-blob 25s infinite alternate ease-in-out;
    transition: transform 0.1s linear;
}

[data-theme="light"] .bg-shape {
    opacity: 0.15;
    mix-blend-mode: multiply;
}

.shape-1 {
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, var(--accent) 0%, transparent 60%);
    top: -200px;
    left: -200px;
}

.shape-2 {
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, #818cf8 0%, transparent 60%);
    bottom: -150px;
    right: -150px;
    animation-delay: -5s;
}

/* Grain Overlay */
.hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
    opacity: 0.4;
    z-index: -1;
    pointer-events: none;
}

@keyframes float-blob {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(40px, -40px) scale(1.1);
    }
}

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

.section {
    padding: 140px 0;
    position: relative;
}

.section-title {
    margin-bottom: 80px;
    position: relative;
}

.section-title h2 {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--text-main);
    letter-spacing: -0.02em;
    position: relative;
    z-index: 2;
    background: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-title .line {
    width: 60px;
    height: 6px;
    background: var(--gradient-primary);
    margin-top: 16px;
    border-radius: 4px;
}

/* --- Navbar (Glassmorphism) --- */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 24px 0;
    z-index: 1000;
    background: var(--nav-bg);
    backdrop-filter: blur(var(--nav-blur));
    -webkit-backdrop-filter: blur(var(--nav-blur));
    border-bottom: 0;
    /* Clean look */
    transition: all 0.4s ease;
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar.scrolled {
    background: rgba(3, 7, 18, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
    padding: 16px 0;
}

[data-theme="light"] .navbar.scrolled {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
}

.logo {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 900;
    color: var(--text-main);
    text-decoration: none;
    letter-spacing: -0.04em;
    display: flex;
    align-items: center;
    gap: 4px;
}

.logo .dot {
    color: var(--accent);
    font-size: 2rem;
    line-height: 0;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 48px;
    background: rgba(255, 255, 255, 0.03);
    /* Subtle pill bg for menu items */
    padding: 10px 32px;
    border-radius: 100px;
    border: 1px solid var(--card-border);
}

.nav-links a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: 0.3s;
    position: relative;
    text-transform: uppercase;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--text-main);
}

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

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

/* Nav Controls */
.nav-controls {
    display: flex;
    align-items: center;
    gap: 24px;
}

.theme-btn {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-main);
    cursor: pointer;
    transition: all 0.3s ease;
}

.theme-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: rotate(15deg);
    box-shadow: 0 0 15px var(--accent-glow);
}

.hamburger {
    display: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-main);
}

/* --- Hero Section (Ultra Modern) --- */
.hero {
    min-height: 105vh;
    /* Slightly taller */
    display: flex;
    align-items: center;
    position: relative;
    padding-top: 80px;
    overflow: hidden;
}

.hero-content {
    position: relative;
    z-index: 10;
    max-width: 1100px;
    /* Wider to allow massive text */
}

/* "Hello" Badge */
.hero-content h3 {
    color: var(--accent-light);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 32px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 24px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    backdrop-filter: blur(10px);
}

.hero-content h3::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--accent);
}

/* Massive Animated Title */
.hero-content h1 {
    font-size: 7.5rem;
    /* Massive */
    font-weight: 800;
    line-height: 0.95;
    margin-left: -4px;
    /* Optical alignment */
    margin-bottom: 32px;
    letter-spacing: -0.04em;
    color: var(--text-main);
    background: linear-gradient(to right, #ffffff 20%, #99f6e4 50%, #ffffff 80%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 5s linear infinite;
}

[data-theme="light"] .hero-content h1 {
    background: linear-gradient(to right, #0f766e 20%, #334155 50%, #0f766e 80%);
    /* Teal & Slate */
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

@keyframes shine {
    to {
        background-position: 200% center;
    }
}

/* Subtitle */
.hero-content h2 {
    font-size: 2rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-bottom: 40px;
    max-width: 800px;
    line-height: 1.4;
}

.hero-content .highlight {
    color: var(--accent);
    font-weight: 600;
    position: relative;
    z-index: 1;
}

/* Underline decoration for highlight */
.hero-content .highlight::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 100%;
    height: 8px;
    background: var(--accent);
    opacity: 0.2;
    z-index: -1;
    transform: rotate(-1deg);
}

.hero-content p {
    max-width: 580px;
    color: var(--text-muted);
    font-size: 1.15rem;
    font-weight: 400;
    line-height: 1.8;
    margin-bottom: 56px;
    border-left: 2px solid var(--card-border);
    /* Subtle border */
    padding-left: 24px;
}

/* Buttons */
.hero-btns {
    display: flex;
    gap: 24px;
    align-items: center;
}

.btn {
    padding: 18px 48px;
    border-radius: 100px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.primary-btn {
    background: var(--text-main);
    /* White/Black */
    color: var(--primary-bg);
    /* Inverse text */
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.1);
}

.primary-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 40px var(--accent-glow);
    background: var(--accent);
    color: #fff;
}

.secondary-btn {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-main);
    backdrop-filter: blur(10px);
}

.secondary-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(45, 212, 191, 0.05);
}

.secondary-btn i {
    transition: transform 0.3s;
}

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

.scroll-down {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0.6;
    transition: opacity 0.3s;
}

.scroll-down:hover {
    opacity: 1;
}

.scroll-down span {
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    color: var(--text-muted);
}

.scroll-down i {
    color: var(--accent);
    font-size: 1.2rem;
    animation: bounce 2s infinite;
}

@keyframes bounce {

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

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

    60% {
        transform: translateY(-5px);
    }
}



/* --- Skills / Expertise (Modern Cards) --- */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

.skill-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    backdrop-filter: blur(20px);
    padding: 48px 40px;
    border-radius: 32px;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    z-index: 1;
    will-change: transform;
}

/* Hover glow effect */
.skill-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(800px circle at var(--mouse-x) var(--mouse-y), rgba(45, 212, 191, 0.06), transparent 40%);
    z-index: -1;
    opacity: 0;
    /* JS can trigger this if implemented, for now pure CSS hover */
    transition: opacity 0.4s;
}

.skill-card:hover {
    transform: translateY(-10px);
    border-color: var(--card-border-hover);
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.5);
}

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

.skill-card i {
    font-size: 3rem;
    color: var(--accent);
    margin-bottom: 32px;
    transition: 0.4s;
    filter: drop-shadow(0 0 10px var(--accent-glow));
}

.skill-card:hover i {
    transform: scale(1.1);
    color: var(--accent-light);
}

.skill-card h3 {
    font-size: 1.5rem;
    margin-bottom: 16px;
    color: var(--text-main);
}

.skill-card p {
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.7;
}

/* --- Timeline (Professional Layout) --- */
.timeline {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
}

.timeline::before {
    content: '';
    position: absolute;
    width: 2px;
    background: linear-gradient(to bottom, transparent, var(--card-border), var(--card-border), transparent);
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.timeline-item {
    margin-bottom: 60px;
    position: relative;
    width: 50%;
}

.timeline-item:nth-child(odd) {
    left: 0;
    padding-right: 60px;
    text-align: right;
}

.timeline-item:nth-child(even) {
    left: 50%;
    padding-left: 60px;
    text-align: left;
}

/* Dot */
.timeline-dot {
    width: 20px;
    height: 20px;
    background: var(--primary-bg);
    border: 4px solid var(--accent);
    border-radius: 50%;
    position: absolute;
    top: 30px;
    right: -10px;
    z-index: 10;
    box-shadow: 0 0 0 6px rgba(45, 212, 191, 0.1);
    transition: 0.3s;
}

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

.timeline-item:hover .timeline-dot {
    background: var(--accent);
    box-shadow: 0 0 0 10px rgba(45, 212, 191, 0.2);
}

.timeline-content {
    background: var(--gradient-surface);
    border: 1px solid var(--card-border);
    padding: 40px;
    border-radius: 24px;
    transition: 0.4s;
    position: relative;
}

.timeline-content:hover {
    transform: translateY(-5px);
    border-color: var(--card-border-hover);
    box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.3);
}

.date {
    display: inline-block;
    padding: 6px 16px;
    background: rgba(45, 212, 191, 0.1);
    color: var(--accent);
    border: 1px solid rgba(45, 212, 191, 0.2);
    border-radius: 100px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.timeline-content h3 {
    font-size: 1.6rem;
    color: var(--text-main);
    margin-bottom: 8px;
}

.timeline-content h4 {
    font-size: 1.1rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: inherit;
    /* Align icon with text direction */
}

.timeline-content h4::before {
    content: '\f219';
    /* Font Awesome icon for variety */
    font-family: 'Font Awesome 6 Pro';
    color: var(--accent);
    font-size: 0.9em;
}

.timeline-content ul li {
    font-size: 1rem;
    color: var(--text-muted);
    margin-bottom: 12px;
    list-style: none;
    position: relative;
    padding-left: 24px;
    text-align: left;
    /* Always align text left for readability inside the card */
}

/* Fix text alignment inside right-side cards to be left-aligned for lists */
.timeline-item:nth-child(odd) .timeline-content {
    text-align: right;
}

/* But the list itself should probably be readable, so forcing left align on list items is often better, 
   but for pure symmetry, let's keep it aligned. 
   Actually, typically list items look bad right-aligned. Let's fix that.
*/
.timeline-item:nth-child(odd) ul li {
    text-align: right;
    padding-left: 0;
    padding-right: 24px;
}

.timeline-item:nth-child(even) ul li::before {
    content: '▹';
    position: absolute;
    left: 0;
    color: var(--accent);
}

.timeline-item:nth-child(odd) ul li::after {
    content: '◃';
    position: absolute;
    right: 0;
    color: var(--accent);
}

/* --- Education & Certs --- */
.row {
    display: flex;
    gap: 80px;
}

.col-half {
    flex: 1;
}

.col-half h2 {
    font-size: 2rem;
    margin-bottom: 48px;
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--text-main);
}

.edu-card {
    background: var(--gradient-surface);
    border: 1px solid var(--card-border);
    padding: 32px;
    border-radius: 20px;
    margin-bottom: 32px;
    transition: 0.3s;
    border-left: 4px solid var(--accent);
}

.edu-card:hover {
    transform: translateX(10px);
    border-color: var(--card-border-hover);
    background: var(--card-bg);
}

.edu-card h3 {
    font-size: 1.35rem;
    margin-bottom: 8px;
    color: var(--text-main);
}

.edu-card .institution {
    color: var(--accent);
    font-weight: 500;
    font-size: 1rem;
}

.cert-grid {
    display: grid;
    gap: 24px;
}

.cert-item {
    display: flex;
    align-items: center;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    padding: 24px;
    border-radius: 16px;
    transition: 0.3s;
}

.cert-item:hover {
    border-color: var(--accent);
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.2);
}

.cert-item i {
    color: var(--accent);
    font-size: 1.8rem;
    margin-right: 24px;
    width: 40px;
    text-align: center;
}

.cert-item span {
    font-weight: 600;
    color: var(--text-main);
    font-size: 1.05rem;
}

.highlight-cert {
    background: linear-gradient(135deg, rgba(45, 212, 191, 0.1), transparent);
    border-color: var(--accent);
    box-shadow: 0 0 20px rgba(45, 212, 191, 0.15);
}

.highlight-cert i {
    color: var(--accent-light);
    animation: pulse-glow 2s infinite alternate;
}

@keyframes pulse-glow {
    from {
        text-shadow: 0 0 10px rgba(45, 212, 191, 0.2);
    }

    to {
        text-shadow: 0 0 20px rgba(45, 212, 191, 0.6);
    }
}

.contact-container {
    max-width: 600px;
    margin: 0 auto;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    padding: 60px 50px;
    border-radius: 40px;
    backdrop-filter: blur(20px);
    box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
}

.contact-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--gradient-primary);
}

.contact-container h2 {
    font-size: 2.5rem;
    margin-bottom: 12px;
    text-align: center;
    color: var(--text-main);
}

.contact-container p {
    text-align: center;
    color: var(--text-muted);
    margin-bottom: 40px;
}

.form-group {
    margin-bottom: 24px;
    position: relative;
}

.form-control {
    width: 100%;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    color: var(--text-main);
    font-family: var(--font-body);
    font-size: 1rem;
    transition: all 0.3s ease;
    outline: none;
}

.form-control:focus {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.1);
}

textarea.form-control {
    resize: vertical;
    min-height: 120px;
}

.form-btn {
    width: 100%;
    margin-top: 10px;
}

.form-status {
    text-align: center;
    margin-bottom: 16px;
    /* Space above button */
    font-weight: 600;
    min-height: 24px;
    font-size: 0.95rem;
}

.success-msg {
    color: var(--accent);
}

.error-msg {
    color: #ef4444;
}

.social-links {
    margin-top: 60px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.social-icon-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-muted);
    font-size: 1.2rem;
    text-decoration: none;
    transition: all 0.3s;
}

.social-icon-btn:hover {
    background: var(--accent);
    color: #fff;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px -5px var(--accent-glow);
}

/* --- Footer (Redesigned) --- */
footer {
    text-align: center;
    padding: 80px 0 40px;
    color: var(--text-muted);
    border-top: 1px solid var(--card-border);
    margin-top: 120px;
    background: linear-gradient(to bottom, var(--secondary-bg), var(--primary-bg));
    position: relative;
    overflow: hidden;
}

footer p {
    font-size: 0.95rem;
    opacity: 0.8;
}

/* Add a glow to footer top */
footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: radial-gradient(circle, var(--accent) 0%, transparent 80%);
    opacity: 0.5;
}

/* --- Mobile Responsiveness --- */
@media (max-width: 968px) {
    .navbar .container {
        padding: 0 24px;
    }

    .nav-links {
        display: none;
    }

    .hamburger {
        display: block;
    }

    /* Tablet Responsiveness */
    .hero-content h1 {
        font-size: 4.5rem;
    }

    .section {
        padding: 100px 0;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 24px;
    }

    .hero-content h1 {
        font-size: 3.8rem;
    }

    .skills-grid {
        grid-template-columns: 1fr;
    }


    .hero-content h2 {
        font-size: 1.5rem;
    }

    .hero {
        min-height: auto;
        padding: 140px 0 80px;
    }

    .shape-1 {
        width: 500px;
        height: 500px;
        top: -100px;
        left: -100px;
    }

    .shape-2 {
        width: 400px;
        height: 400px;
        bottom: 0;
        right: 0;
    }

    .timeline::before {
        left: 20px;
    }

    .timeline-item {
        width: 100%;
        padding-left: 50px;
        padding-right: 0;
        margin-bottom: 40px;
        /* Tighter spacing */
    }

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

    /* Fix Specificity Override for Mobile */
    .timeline-item:nth-child(odd),
    .timeline-item:nth-child(even) {
        text-align: left;
        padding-left: 50px;
        padding-right: 0;
    }

    .timeline-dot {
        left: 10px;
        right: auto;
    }

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

    .timeline-content {
        padding: 24px;
        /* Reduce from 40px for more text space */
    }

    .timeline-item:nth-child(odd) ul li,
    .timeline-item:nth-child(even) ul li {
        text-align: left;
        padding-left: 24px;
        padding-right: 0;
    }

    .timeline-item:nth-child(odd) ul li::after {
        content: none;
    }

    .timeline-item:nth-child(odd) ul li::before {
        content: '▹';
        position: absolute;
        left: 0;
        color: var(--accent);
    }

    .row {
        flex-direction: column;
        gap: 60px;
    }

    .section-title h2 {
        font-size: 2.8rem;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 20px;
    }

    .section {
        padding: 100px 0;
    }

    .hero-btns {
        flex-direction: column;
        gap: 16px;
    }

    .btn {
        width: 100%;
    }

    .hero-content h1 {
        font-size: 3rem;
    }
}