/* Always show hamburger menu on mobile */
    .hamburger-btn {
        display: none;
    }
@media (max-width: 768px) {
    .navbar {
        position: relative;
        /* Keep default flex alignment: space-between */
    }
    .nav-logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        margin: 0;
    }
    .hamburger-btn {
        position: absolute;
        left: 1.5rem;
        top: 1rem;
        z-index: 1001;
        display: block !important;
    }
    /* No positioning for .settings-btn/theme-toggle-btn, let flexbox keep it on the right */
}
/* --- THEME VARIABLES --- */
:root { --bg-color: #ffffff; --bg-secondary: #f0f2f5; --text-primary: #1c1e21; --text-secondary: #606770; --accent-color: #007bff; --border-color: #dddfe2; --shadow: 0 4px 20px rgba(0, 0, 0, 0.08); --gradient-1: linear-gradient(45deg, #007bff, #38BDF8); }
body.dark-theme { --bg-color: #121212; --bg-secondary: #1e1e1e; --text-primary: #e0e0e0; --text-secondary: #a0a0a0; --accent-color: #38BDF8; --border-color: #333333; --shadow: 0 4px 20px rgba(0, 0, 0, 0.2); --gradient-1: linear-gradient(45deg, #38BDF8, #007bff); }

/* --- GLOBAL & LAYOUT --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; background-color: var(--bg-color); color: var(--text-primary); min-height: 100vh; overflow-x: hidden; position: relative; }
body.no-scroll { overflow: hidden; }

/* --- PRELOADER --- */
#preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: #10121a; display: flex; justify-content: center; align-items: center; z-index: 9999; transition: opacity 0.6s ease, visibility 0.6s ease; transition-delay: 0.2s; }
#preloader.hidden { opacity: 0; visibility: hidden; }
.preloader-container { position: relative; width: 600px; height: 400px; }
.code-window { position: absolute; background: #1e212b; border-radius: 8px; box-shadow: 0 20px 50px rgba(0,0,0,0.5); border: 1px solid #333; opacity: 0; animation: slideIn 1s ease-out forwards; }
#python-window { width: 320px; height: 140px; top: 0; left: 0; animation-delay: 0.2s; }
#js-window { width: 280px; height: 140px; top: 50px; right: 0; animation-delay: 0.4s; }
#html-window { width: 400px; height: 140px; bottom: 0; left: 50%; transform: translateX(-50%); animation-delay: 0.6s; }
@keyframes slideIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.code-window header { padding: 8px 12px; background: #2a2d3a; border-radius: 8px 8px 0 0; color: #a9adc1; font-family: 'Inter', sans-serif; font-size: 0.9rem; display: flex; align-items: center; gap: 8px; }
.code-window header i { color: var(--accent-color); }
.code-content { padding: 15px; font-family: 'Fira Code', monospace; font-size: 0.9rem; margin: 0; }
.line { display: block; white-space: nowrap; overflow: hidden; width: 0; border-right: 2px solid transparent; animation: typing 1s steps(40, end), blink .5s step-end infinite; animation-fill-mode: forwards; }
@keyframes typing { from { width: 0; } to { width: 100%; } }
@keyframes blink { 50% { border-color: var(--accent-color); } }
#py-line1 { animation-delay: 1.0s; } #py-line2 { animation-delay: 1.8s; } #py-line3 { animation-delay: 2.6s; }
#js-line1 { animation-delay: 1.2s; } #js-line2 { animation-delay: 2.0s; } #js-line3 { animation-delay: 2.8s; }
#html-line1 { animation-delay: 1.4s; } #html-line2 { animation-delay: 2.2s; } #html-line3 { animation-delay: 3.0s; }
.c-keyword { color: #c678dd; } .c-class { color: #e5c07b; } .c-function { color: #61afef; } .c-variable { color: #e06c75; } .c-string { color: #98c379; } .c-tag { color: #e06c75; } .c-attr { color: #d19a66; }
.final-name { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 5rem; font-weight: 700; color: white; letter-spacing: 5px; opacity: 0; animation: fadeInName 1s ease forwards; animation-delay: 4s; }
@keyframes fadeInName { from { opacity: 0; transform: translate(-50%, -40%); } to { opacity: 1; transform: translate(-50%, -50%); } }

/* --- BACKGROUNDS --- */
.background-shape { position: fixed; border-radius: 50%; opacity: 0.08; filter: blur(80px); z-index: -10; animation: morphMove1 25s infinite ease-in-out; }
.shape1 { width: 35vw; height: 35vw; background: var(--gradient-1); top: 10%; left: 15%; }
.shape2 { width: 28vw; height: 28vw; background: var(--gradient-2); bottom: 15%; right: 20%; animation-name: morphMove2; }
@keyframes morphMove1 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(60px, -40px); } }
@keyframes morphMove2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-50px, 50px); } }
#particle-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -9; }

/* --- HEADER & NAVIGATION --- */
.header { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(15px); border-bottom: 1px solid var(--border-color); padding: 0 5%; position: fixed; width: 100%; top: 0; z-index: 100; }
body.dark-theme .header { background: rgba(18, 18, 18, 0.8); }
body.is-homepage .header, body.is-homepage .main-container { opacity: 1; transition: opacity 0.8s ease-in-out; }
.header.visible, .main-container.visible { opacity: 1; }
.navbar { display: flex; justify-content: space-between; align-items: center; height: 60px; }
.nav-logo { font-size: 1.5rem; font-weight: 600; color: var(--text-primary); text-decoration: none; }
.nav-links a { color: var(--text-secondary); text-decoration: none; margin-left: 25px; font-weight: 500; padding-bottom: 5px; position: relative; }
.nav-links a::after { content: ''; position: absolute; width: 0; height: 2px; bottom: 0; left: 50%; transform: translateX(-50%); background-color: var(--accent-color); transition: width 0.3s ease; }
.nav-links a:hover, .nav-links a.active { color: var(--accent-color); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.theme-toggle-btn { background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-primary); width: 40px; height: 40px; border-radius: 50%; font-size: 1.2rem; cursor: pointer; display: flex; align-items: center; justify-content: center; }

/* --- MAIN LAYOUT CONTAINERS --- */
.main-container, .page-container { width: 100%; margin: 0 auto; padding: 120px 20px 60px; }
.main-container { max-width: 600px; text-align: center; }
.page-container { max-width: 1000px; }
.page-title { font-size: 2.5rem; text-align: center; margin-bottom: 40px; }
.gradient-text { background: var(--gradient-1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* --- HOMEPAGE & CHAT --- */
.avatar-container { margin-bottom: 20px; }
.greeting { font-size: 1.5rem; font-weight: 600; margin-bottom: 15px; }
.avatar { width: 180px; height: 180px; border-radius: 50%; border: 3px solid var(--bg-secondary); box-shadow: var(--shadow); }
.chat-interface { border: 1px solid var(--border-color); border-radius: 15px; padding: 20px; background: var(--bg-secondary); }
.answer-display { margin-bottom: 0; opacity: 0; max-height: 0; overflow: hidden; transition: all 0.4s ease; }
.answer-display.active { opacity: 1; margin-bottom: 25px; max-height: 500px; }
.answer-bubble { display: flex; align-items: flex-start; gap: 15px; text-align: left; background: var(--bg-color); padding: 20px; border-radius: 12px; }
.answer-avatar { width: 40px; height: 40px; border-radius: 50%; }
.questions-toggle { width: 100%; background: none; border: none; padding: 0 0 15px 0; margin-bottom: 20px; border-bottom: 1px solid var(--border-color); color: var(--text-secondary); font-size: 0.9rem; font-weight: 500; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.questions-toggle i { transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); }
.questions-toggle.active i { transform: rotate(180deg); }
.questions-list { overflow: hidden; transition: max-height 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease-in-out; max-height: 1000px; opacity: 1; display: flex; flex-direction: column; gap: 10px; margin-bottom: 25px; }
.questions-list.hidden { max-height: 0; opacity: 0; margin-bottom: 0; }
.questions-category { font-size: 1rem; font-weight: 600; color: var(--text-secondary); margin-top: 15px; text-align: left; display: flex; align-items: center; gap: 8px; }
.quick-question-btn { display: flex; justify-content: space-between; align-items: center; background: var(--bg-color); border: 1px solid var(--border-color); color: var(--text-primary); box-shadow: none; font-weight: 500; border-radius: 12px; padding: 15px; cursor: pointer; }
.quick-question-btn:hover { border-color: var(--text-primary); }
.quick-question-btn.active { background: var(--text-primary); color: var(--bg-color); }
body.dark-theme .quick-question-btn.active { color: var(--bg-color); background: var(--text-primary); }
.query-form { position: relative; }
#query-input { width: 100%; padding: 15px 60px 15px 25px; border-radius: 30px; border: 1px solid var(--border-color); background-color: var(--bg-color); color: var(--text-primary); font-size: 1rem; box-shadow: var(--shadow); outline: none; }
.submit-btn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--gradient-1); color: white; font-size: 1.2rem; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: transform 0.3s ease; }
.submit-btn:hover { transform: translateY(-50%) scale(1.1); }

/* --- GENERIC CARD & GRID --- */
.card { background: var(--bg-color); border-radius: 12px; padding: 25px; box-shadow: var(--shadow); border: 1px solid var(--border-color); height: 100%; }
.content-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.card-subtitle { color: var(--text-secondary); margin: 5px 0 10px; }
.card h3 i { margin-right: 10px; color: var(--accent-color); }

/* --- NEURAL PATHWAY HOVER --- */
.neural-card-wrapper { position: relative; border-radius: 12px; overflow: hidden; transition: transform 0.3s ease; }
.neural-card-wrapper .card { position: relative; z-index: 2; }
.neural-card-wrapper:hover { transform: translateY(-5px); }
.neural-card-wrapper::before { content: ''; position: absolute; top: 50%; left: 50%; width: 200%; height: 200%; z-index: 1; background: conic-gradient(transparent, var(--accent-color), transparent 30%); opacity: 0; animation: rotate 4s linear infinite paused; transition: opacity 0.4s ease; }
.neural-card-wrapper:hover::before { opacity: 1; animation-play-state: running; }
@keyframes rotate { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }

/* --- OTHER PAGES (PROJECTS, CONTACT, ETC.) --- */
.project-links { margin-top: 20px; }
.project-link { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border-radius: 20px; background-color: var(--bg-secondary); color: var(--accent-color); text-decoration: none; font-weight: 500; font-size: 0.9rem; border: 1px solid var(--border-color); }
.contact-subtitle { text-align: center; font-size: 1.1rem; color: var(--text-secondary); max-width: 600px; margin: 0 auto 40px; }
.contact-layout { display: flex; flex-direction: column; align-items: center; gap: 40px; }
.contact-form-container { width: 100%; max-width: 600px; position: relative; }
.form-wrapper { background: var(--bg-secondary); padding: 30px; border-radius: 12px; position: relative; z-index: 2; }
.form-wrapper::before { content: ''; position: absolute; top: 50%; left: 50%; width: 150%; height: 150%; z-index: -1; background: radial-gradient(circle, var(--accent-color) 0%, transparent 70%); transform: translate(-50%, -50%); opacity: 0.15; animation: form-glow 8s ease-in-out infinite; }
@keyframes form-glow { 50% { transform: translate(-50%, -50%) scale(1.1); } }
.form-wrapper h3 { margin-bottom: 20px; color: var(--text-primary); }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; font-weight: 500; color: var(--text-secondary); }
.form-group input, .form-group textarea { width: 100%; padding: 12px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-color); color: var(--text-primary); font-size: 1rem; font-family: 'Inter', sans-serif; }
.form-submit-btn { text-decoration: none; width: 100%; padding: 15px; border: none; border-radius: 8px; background: var(--gradient-1); color: white; font-size: 1rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.form-submit-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 123, 255, 0.3); }
body.dark-theme .form-submit-btn:hover { box-shadow: 0 8px 20px rgba(56, 189, 248, 0.3); }
.contact-socials-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; margin-top: 20px; }
.social-link { display: flex; align-items: center; gap: 10px; padding: 10px 20px; border-radius: 25px; background: var(--bg-secondary); color: var(--text-secondary); text-decoration: none; font-weight: 500; transition: all 0.3s ease; }
.social-link:hover { background: var(--accent-color); color: white; transform: translateY(-3px); }
.social-link i { font-size: 1.2rem; }

/* --- CAROUSEL 3D EFFECT --- */
.carousel-container-3d { position: relative; width: 280px; height: 390px; margin: 60px auto; perspective: 1200px; }
.carousel-container-3d .carousel-track { width: 100%; height: 100%; position: absolute; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1); }
.carousel-container-3d .carousel-slide { position: absolute; left: 10px; top: 10px; width: 250px; border-radius: 8px; overflow: hidden; box-shadow: 0 10px 20px rgba(0,0,0,0.2); background-color: #fff; filter: brightness(0.5); opacity: 0.8; }
.carousel-container-3d .carousel-slide.active-slide { filter: brightness(1); opacity: 1; }
.carousel-container-3d .carousel-slide img { width: 100%; display: block; }
.carousel-container-3d .carousel-caption { font-size: 0.8rem; padding: 8px; position: absolute; bottom: 0; background: rgba(0,0,0,0.6); color: white; width: 100%; text-align: center; }
.carousel-container-3d .carousel-btn { z-index: 10; background: rgba(0, 0, 0, 0.5); color: white; position: absolute; top: 50%; transform: translateY(-50%); border: none; border-radius: 50%; width: 40px; height: 40px; font-size: 1.2rem; cursor: pointer; }
.carousel-container-3d .prev { left: 15px; } .carousel-container-3d .next { right: 15px; }
.skill-pods-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.skill-pod { position: relative; padding: 25px; border-radius: 15px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); overflow: hidden; }
body.dark-theme .skill-pod { background: rgba(28, 28, 32, 0.5); border: 1px solid rgba(255, 255, 255, 0.1); }
.skill-pod:hover { transform: translateY(-5px); }
.skill-pod::before { content: ''; position: absolute; top: 0; left: 0; width: 200%; height: 200%; z-index: -1; background: radial-gradient(circle at 50% 50%, var(--accent-color), transparent 40%); opacity: 0.15; animation: aurora-glow 10s linear infinite; }
.skill-pod:hover::before { opacity: 0.3; }
@keyframes aurora-glow { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } }
.skill-pod h3 { margin-bottom: 20px; }
.skill-pod ul { list-style: none; padding: 0; margin: 0; }
.skill-pod li { display: flex; align-items: center; padding: 10px 0; font-weight: 500; color: var(--text-secondary); }
.skill-icon { font-size: 1.1rem; color: var(--accent-color); margin-right: 15px; width: 20px; text-align: center; }

/* --- ANIMATIONS & HELPERS --- */
.reveal-on-scroll { opacity: 0; transform: translateY(50px); transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.reveal-on-scroll.revealed { opacity: 1; transform: translateY(0); }
.magnetic-element { transition: transform 0.1s linear; }
.glitch-wrapper { position: relative; display: inline-block; }
.glitch-wrapper > .avatar { position: relative; z-index: 2; }
.glitch-wrapper::before, .glitch-wrapper::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('Images/avatar.png'); background-size: cover; border-radius: 50%; opacity: 0; z-index: 1; }
.glitch-wrapper:hover::before { opacity: 1; clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%); animation: glitch 0.5s infinite; mix-blend-mode: color-dodge; }
.glitch-wrapper:hover::after { opacity: 1; clip-path: polygon(0 65%, 100% 65%, 100% 70%, 0 70%); animation: glitch 0.5s infinite reverse; mix-blend-mode: multiply; }
@keyframes glitch { 0%, 100% { transform: translate(-3px, -3px); } 50% { transform: translate(3px, 3px); } }

/* --- RESPONSIVE DESIGN --- */
@media (max-width: 768px) {
    .nav-links { display: none; }
    .page-container, .main-container { padding-top: 100px; }
    .preloader-container { width: 90%; height: auto; display: flex; flex-direction: column; }
    .final-name { font-size: 3rem; position: relative; animation: none; opacity: 1; margin-top: 20px; }
    .code-window { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}


/* --- ENHANCED NEURAL PATHWAY HOVER --- */
.neural-card-wrapper {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.neural-card-wrapper .card {
    position: relative;
    z-index: 2; /* Keeps content clickable */
    width: 100%;
    height: 100%;
    /* Make card background slightly transparent on hover to see the grid */
    transition: background-color 0.4s ease;
}

.neural-card-wrapper:hover {
    transform: translateY(-5px);
}

body.dark-theme .neural-card-wrapper:hover .card {
    background-color: rgba(30, 30, 30, 0.8); /* Darken card on hover */
}
body:not(.dark-theme) .neural-card-wrapper:hover .card {
    background-color: rgba(255, 255, 255, 0.9); /* Lighten card on hover */
}


/* Effect 1: The original rotating border */
.neural-card-wrapper::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    z-index: 1; 
    background: conic-gradient(
        transparent,
        var(--accent-color),
        transparent 30%
    );
    opacity: 0;
    animation: rotate 4s linear infinite paused;
    transition: opacity 0.4s ease;
}

/* Effect 2: The new scrolling grid background */
.neural-card-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Sits behind the card content but in front of the border */
    background-image: 
        linear-gradient(var(--accent-color) 1px, transparent 1px),
        linear-gradient(to right, var(--accent-color) 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    animation: scroll-grid 5s linear infinite;
}


.neural-card-wrapper:hover::before,
.neural-card-wrapper:hover::after {
    opacity: 1;
    animation-play-state: running;
}

/* Keyframes for the rotating border */
@keyframes rotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Keyframes for the scrolling grid */
@keyframes scroll-grid {
    from { background-position: 0 0; }
    to { background-position: -30px -30px; }
}

/* --- 3D FLIPPING Q&A CARDS --- */
.qa-section {
    margin-top: 60px;
    text-align: center;
}

.section-title {
    font-size: 1.8rem;
    margin-bottom: 40px;
    color: var(--text-primary);
}

.qa-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.flip-card {
    background-color: transparent;
    height: 220px;
    perspective: 1000px; /* Needed for 3D effect */
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.flip-card-front {
    background: var(--bg-secondary);
}

.flip-card-front h4 {
    font-size: 1.2rem;
    color: var(--text-primary);
}

.flip-card-back {
    background: var(--gradient-1);
    color: white;
    transform: rotateY(180deg);
}

.flip-card-back p {
    font-size: 1rem;
    line-height: 1.5;
}

.profile-picture {
    width: 250px;
    height: 300px;
    border-radius: 16px;
    border: 5px solid var(--bg-secondary);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    margin-bottom: 20px;
    /* Add these two lines to center the image */
    margin-left: auto;
    margin-right: auto;
    display: block;
}

/* --- MOBILE NAVIGATION (HAMBURGER MENU) --- */
.hamburger-btn {
    display: none; /* Hidden by default on desktop */
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 1001; /* Above the header */
}

.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: -250px; /* Start off-screen */
    width: 250px;
    height: 100vh; /* Full viewport height */
    min-height: 100vh; /* Ensure it always fills the page */
    background: linear-gradient(135deg, 
        rgba(76, 175, 80, 0.1) 0%,
        rgba(33, 150, 243, 0.1) 25%,
        rgba(156, 39, 176, 0.1) 50%,
        rgba(255, 193, 7, 0.1) 75%,
        rgba(244, 67, 54, 0.1) 100%
    );
    backdrop-filter: blur(20px) saturate(1.5);
    padding-top: 80px; /* Keep if you want links below header, set to 0 for flush top */
    z-index: 1100; /* Ensure above header */
    transition: left 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-right: 1px solid var(--border-color);
    overflow-y: auto; /* Allow vertical scrolling if needed */
    overflow-x: hidden; /* Only hide horizontal overflow */
    box-shadow: 5px 0 30px rgba(0, 0, 0, 0.3);
}

body.dark-theme .sidebar {
    background: linear-gradient(135deg, 
        rgba(0, 150, 136, 0.15) 0%,
        rgba(63, 81, 181, 0.15) 25%,
        rgba(233, 30, 99, 0.15) 50%,
        rgba(255, 152, 0, 0.15) 75%,
        rgba(121, 85, 72, 0.15) 100%
    );
    backdrop-filter: blur(25px) saturate(1.8);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

/* Dynamic Aurora Wave Animation */
.sidebar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(76, 175, 80, 0.2) 40%,
        rgba(33, 150, 243, 0.2) 50%,
        rgba(156, 39, 176, 0.2) 60%,
        transparent 70%
    );
    background-size: 200% 200%;
    animation: aurora-wave 8s ease-in-out infinite;
}

/* Floating Particles Effect */
.sidebar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.3) 0%, transparent 50%);
    animation: floating-particles 12s linear infinite;
}

body.dark-theme .sidebar::before {
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(0, 150, 136, 0.3) 40%,
        rgba(63, 81, 181, 0.3) 50%,
        rgba(233, 30, 99, 0.3) 60%,
        transparent 70%
    );
}

body.dark-theme .sidebar::after {
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(0, 229, 255, 0.4) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 20, 147, 0.4) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(138, 43, 226, 0.4) 0%, transparent 50%);
}

/* Aurora Wave Animation */
@keyframes aurora-wave {
    0% {
        background-position: 0% 0%;
        transform: rotate(0deg);
    }
    25% {
        background-position: 100% 0%;
        transform: rotate(1deg);
    }
    50% {
        background-position: 100% 100%;
        transform: rotate(0deg);
    }
    75% {
        background-position: 0% 100%;
        transform: rotate(-1deg);
    }
    100% {
        background-position: 0% 0%;
        transform: rotate(0deg);
    }
}

/* Floating Particles Animation */
@keyframes floating-particles {
    0% {
        transform: translateY(0px) rotate(0deg);
        opacity: 1;
    }
    33% {
        transform: translateY(-10px) rotate(120deg);
        opacity: 0.8;
    }
    66% {
        transform: translateY(5px) rotate(240deg);
        opacity: 0.6;
    }
    100% {
        transform: translateY(0px) rotate(360deg);
        opacity: 1;
    }
}

.sidebar.open {
    left: 0; /* Slide in */
    box-shadow: 5px 0 50px rgba(0, 0, 0, 0.4);
}

.sidebar-link {
    padding: 15px 25px;
    text-decoration: none;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 1.1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 10;
    border-radius: 8px;
    margin: 0 10px;
    backdrop-filter: blur(10px);
}

/* Glassmorphism effect for links */
.sidebar-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.sidebar-link:hover::before {
    opacity: 1;
}

/* ADDED: More specific rule to ensure text is visible in dark mode */
body.dark-theme .sidebar-link {
    color: #e0e0e0; 
}

.sidebar-link:hover,
.sidebar-link.active {
    background: linear-gradient(135deg, 
        rgba(var(--accent-color-rgb), 0.8) 0%, 
        rgba(var(--accent-color-rgb), 0.6) 100%
    );
    color: white !important;
    transform: translateX(5px);
    box-shadow: 0 5px 20px rgba(var(--accent-color-rgb), 0.3);
}

/* --- Responsive adjustments for Mobile --- */
@media (max-width: 768px) {

    /* 1. PUSH THE MAIN CONTENT DOWN */
    body {
        padding-top: 5rem; /* Adjust this value as needed */
    }

    /* Hide desktop-only navigation */
    .nav-links {
        display: none;
    }

    /* 2. POSITION THE HAMBURGER ON THE LEFT */
    .hamburger-btn {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%); /* Perfect vertical centering */
    }

    /* THEME TOGGLE - RIGHT SIDE */
    .theme-toggle {
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%); /* Perfect vertical centering */
    }

    .hamburger-btn:hover {
        background: rgba(255, 255, 255, 0.2);
        transform: scale(1.05);
    }


    /* Hide theme toggle and settings button on mobile */
    .theme-toggle,
    .theme-toggle-btn,
    .settings-btn {
        display: none !important;
    }

    /* Dark theme adjustments for mobile buttons */
    body.dark-theme .hamburger-btn,
    body.dark-theme .settings-btn {
        background: rgba(0, 0, 0, 0.3);
        color: #e0e0e0;
    }

    body.dark-theme .hamburger-btn:hover,
    body.dark-theme .settings-btn:hover {
        background: rgba(0, 0, 0, 0.5);
    }

    /* Ensure header content is properly spaced */
    .header-content {
    position: relative; /* This is crucial */
    justify-content: center;
    padding: 0;
    }
}


/* --- RESUME DOWNLOAD BUTTON --- */
.resume-section {
    margin-top: 60px;
    text-align: center;
}

.resume-download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 400px;
    padding: 20px 25px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.resume-download-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-color: var(--accent-color);
}

.resume-download-btn .btn-text {
    text-align: left;
}

.resume-download-btn h4 {
    color: var(--text-primary);
    margin-bottom: 5px;
    font-size: 1.1rem;
}

.resume-download-btn span {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.resume-download-btn .btn-icon {
    font-size: 2rem;
    color: var(--accent-color);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.resume-download-btn:hover .btn-icon {
    transform: scale(1.2) rotate(-10deg);
}

/* --- ABOUT PAGE SPACING ENHANCEMENTS --- */

/* Increases the vertical space between lines in the main summary */
.about-summary {
    line-height: 1.7;
}

/* Increases the gap between each card in the grid */
.about-content {
    gap: 30px; /* This increases space BETWEEN cards */
}

/* Increases the internal padding inside all cards */
.card {
    padding: 30px;
    margin : 20px;
}

/* FIX: Adds space between the card header and the content below it */
.card h3 {
    margin-bottom: 25px;
}

/* Increases the vertical space between each certificate list item */
.certificate-list li {
    margin-bottom: 15px;
}

/* --- PUBLICATIONS SECTION --- */
.publications-section {
    margin-top: 60px;
}

.publication-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.publication-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    cursor: pointer;
}

.publication-header h4 {
    font-size: 1.2rem;
    color: var(--text-primary);
}

.publication-toggle {
    font-size: 1.2rem;
    color: var(--accent-color);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.publication-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.25, 1, 0.5, 1), padding 0.5s ease;
    padding: 0 25px;
}

.publication-body p {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 20px;
}

.publication-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 0.9rem;
    color: var(--text-secondary);
    border-top: 1px solid var(--border-color);
    padding-top: 15px;
}

.publication-meta a {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 500;
}
.publication-meta a i {
    margin-left: 5px;
}

/* Active state for the accordion */
.publication-card.active .publication-toggle {
    transform: rotate(45deg);
}

.publication-card.active .publication-body {
    max-height: 1000px; /* Large enough to fit content */
    padding: 0 25px 25px 25px;
}