/* Add this at the beginning of the style section */
:root {
    /* Spacing Variables */
    --navbar-height: 70px;
    --section-spacing: 30px;  /* Reduced from 60px */
    --section-padding: 40px;  /* Reduced from 60px */
    --title-spacing: 25px;    /* Reduced from 40px */
    --content-spacing: 15px;  /* Reduced from 20px */
    --section-title-gap: 5px; /* Reduced from 10px */
    /* Add these gallery configuration variables at the start of your styles */
    --gallery-height-desktop: 350px;  /* Reduced from 520px */
    --gallery-height-tablet: 350px;
    --gallery-height-mobile: 250px;
    --gallery-border-radius: 24px;
    --thumbnail-size: 110px;
    --thumbnail-height: 75px;
}

body {
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(to bottom,
        #0a0a0a,
        #12121f 25%,
        #1a1a2e 50%,
        #12121f 75%,
        #0a0a0a 100%
    );
    color: #e0e0e0;
    scroll-behavior: smooth;
    overflow-x: hidden;
    background-attachment: fixed;
    background-size: 100% 400%;
    animation: gradientFlow 15s ease infinite;
    overscroll-behavior: none;
}

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

/* Update navbar and logo styles */
.navbar {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    width: auto;
    height: var(--navbar-height);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
}

.mobile-menu-btn {
    display: none; /* Hide by default */
    background: linear-gradient(145deg, rgba(10, 10, 10, 0.9), rgba(20, 20, 20, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    padding: 0;
    border-radius: 50px;
    width: 45px;
    height: 45px;
    cursor: pointer;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: scale(1);
}

.mobile-menu-btn i {
    font-size: 1.2rem;
    line-height: 1;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-menu-btn:hover {
    transform: scale(1.1);
}

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

.nav-menu {
    display: flex;
    gap: 1rem;
    height: auto;
    background: rgba(10, 10, 10, 0.8);
    backdrop-filter: blur(10px);
    padding: 15px 30px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top;
}

.nav-link {
    color: #e0e0e0;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 25px;
    transition: all 0.3s ease;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    opacity: 1;
    transform: translateY(0);
}

/* Desktop hover effect */
.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #00d2ff, #3a7bd5);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.nav-link:hover::after {
    width: 80%;
}

.nav-link:hover {
    color: #ffffff;
}

/* Update section spacing */
.section {
    position: relative;
    min-height: 100vh;
    padding: var(--section-padding) 0;
    margin-bottom: var(--section-spacing);
    background: transparent;
}

/* Add subtle overlay gradients for each section */
.section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, 
        rgba(10, 10, 10, 0) 0%,
        rgba(26, 26, 46, 0.1) 50%,
        rgba(10, 10, 10, 0) 100%
    );
    pointer-events: none;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

/* Remove explicit background colors from sections that had them */
#projects.section,
#education.section {
    background: transparent;
}

/* Update the glass-card effects to be more consistent */
.project-card,
.experience-card,
.contact-info,
.contact-form {
    background: linear-gradient(145deg, 
        rgba(26, 26, 26, 0.6), 
        rgba(13, 13, 13, 0.8)
    );
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Modern Footer Styles */
.modern-footer {
    position: relative;
    padding: 3rem 2rem 2rem;
    background: linear-gradient(to bottom, 
        rgba(10, 10, 10, 0) 0%,
        rgba(13, 13, 20, 0.95) 30%,
        rgba(10, 10, 15, 0.98) 100%
    );
    backdrop-filter: blur(15px);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.modern-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(0, 210, 255, 0.4) 25%, 
        rgba(58, 123, 213, 0.6) 50%, 
        rgba(142, 45, 226, 0.4) 75%, 
        transparent 100%
    );
    animation: gradientShift 3s ease-in-out infinite alternate;
}

@keyframes gradientShift {
    0% {
        background: linear-gradient(90deg, 
            transparent 0%, 
            rgba(0, 210, 255, 0.4) 25%, 
            rgba(58, 123, 213, 0.6) 50%, 
            rgba(142, 45, 226, 0.4) 75%, 
            transparent 100%
        );
    }
    100% {
        background: linear-gradient(90deg, 
            transparent 0%, 
            rgba(142, 45, 226, 0.4) 25%, 
            rgba(58, 123, 213, 0.6) 50%, 
            rgba(0, 210, 255, 0.4) 75%, 
            transparent 100%
        );
    }
}

.footer-glow {
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 100px;
    background: radial-gradient(ellipse at center, 
        rgba(0, 210, 255, 0.15) 0%, 
        rgba(58, 123, 213, 0.1) 30%, 
        transparent 70%
    );
    filter: blur(20px);
    animation: footerGlow 4s ease-in-out infinite alternate;
}

@keyframes footerGlow {
    0% {
        opacity: 0.6;
        transform: translateX(-50%) scale(1);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) scale(1.2);
    }
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    max-width: 600px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.footer-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.footer-logo-text {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 3px;
    background: linear-gradient(135deg, #00d2ff, #3a7bd5, #8e2de2);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    position: relative;
    text-shadow: 0 0 30px rgba(0, 210, 255, 0.3);
}

.footer-logo-text::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, #00d2ff, #3a7bd5);
    border-radius: 1px;
    animation: logoUnderline 2s ease-in-out infinite alternate;
}

@keyframes logoUnderline {
    0% {
        width: 30px;
        opacity: 0.6;
    }
    100% {
        width: 50px;
        opacity: 1;
    }
}

.footer-copyright {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.copyright-text {
    font-size: 0.95rem;
    color: #b0b0b0;
    margin: 0;
    font-weight: 400;
    letter-spacing: 0.5px;
}

.made-with-text {
    font-size: 0.85rem;
    color: #888888;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    font-weight: 300;
}

.heart-icon {
    display: inline-flex;
    align-items: center;
    color: #ff4757;
    animation: heartBeat 2s ease-in-out infinite;
}

.heart-icon i {
    font-size: 0.9rem;
    filter: drop-shadow(0 0 8px rgba(255, 71, 87, 0.5));
}

@keyframes heartBeat {
    0% {
        transform: scale(1);
    }
    14% {
        transform: scale(1.15);
    }
    28% {
        transform: scale(1);
    }
    42% {
        transform: scale(1.15);
    }
    70% {
        transform: scale(1);
    }
}

.code-icon {
    display: inline-flex;
    align-items: center;
    color: #00d2ff;
    animation: codeFlicker 3s ease-in-out infinite;
}

.code-icon i {
    font-size: 0.9rem;
    filter: drop-shadow(0 0 8px rgba(0, 210, 255, 0.5));
}

@keyframes codeFlicker {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

.footer-border {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.1) 50%, 
        transparent 100%
    );
}

/* Mobile responsiveness for footer */
@media (max-width: 768px) {
    .modern-footer {
        padding: 2rem 1rem 1.5rem;
    }
    
    .footer-logo-text {
        font-size: 1.5rem;
        letter-spacing: 2px;
    }
    
    .footer-content {
        gap: 1rem;
    }
    
    .copyright-text {
        font-size: 0.9rem;
    }
    
    .made-with-text {
        font-size: 0.8rem;
    }
    
    .footer-glow {
        width: 150px;
        height: 75px;
    }
}

@media (max-width: 480px) {
    .modern-footer {
        padding: 1.5rem 0.75rem 1rem;
    }
    
    .footer-logo-text {
        font-size: 1.3rem;
        letter-spacing: 1.5px;
    }
    
    .copyright-text {
        font-size: 0.85rem;
        line-height: 1.4;
    }
    
    .made-with-text {
        font-size: 0.75rem;
        flex-wrap: wrap;
    }

    /* Make 'Expérience professionnelle' heading smaller on mobile */
    #experience h2 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }
}

/* Add specific spacing for home section */
#home {
    padding-top: calc(var(--navbar-height) + var(--section-padding));
    margin-bottom: 8rem;
}

/* Update section titles spacing */
.section h2 {
    margin-bottom: var(--title-spacing);
}

/* Update content spacing */
.section > .container {
    margin-top: var(--content-spacing);
}

.accent-text {
    background: linear-gradient(90deg, #00d2ff, #3a7bd5, #8e2de2);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.skill-badge {
    background: linear-gradient(145deg, rgba(26, 26, 26, 0.8), rgba(13, 13, 13, 0.9));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.skill-badge:hover {
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 15px 30px rgba(0, 210, 255, 0.3);
    border-color: rgba(0, 210, 255, 0.5);
}

.project-card {
    background: linear-gradient(145deg, rgba(26, 26, 26, 0.8), rgba(13, 13, 13, 0.9));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    overflow: hidden;
    transform-style: preserve-3d;
    perspective: 1000px;
    transition: all 0.3s ease;
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-font-smoothing: subpixel-antialiased;
    contain: layout style;
}

.js-tilt-glare {
    border-radius: 1rem !important;
    overflow: hidden !important;
    will-change: opacity;
    pointer-events: none;
}

.project-card .js-tilt-glare,
.experience-card .js-tilt-glare {
    border-radius: 1rem !important;
    overflow: hidden !important;
}

.project-card:hover, .experience-card:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 210, 255, 0.3);
    box-shadow: 0 15px 30px rgba(0, 210, 255, 0.15);
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -30px;
    top: 0;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: linear-gradient(90deg, #00d2ff, #3a7bd5);
}

.timeline::before {
    content: '';
    position: absolute;
    left: -23px;
    top: 0;
    height: 100%;
    width: 2px;
    background: linear-gradient(to bottom, #00d2ff, #8e2de2);
}

#galaxy-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.home-content {
    position: relative;
    z-index: 1;
    margin-top: 2rem; /* Add spacing between navbar and card */
}

.cursor-trail {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(138, 43, 226, 0.5);
    pointer-events: none;
    transform: translate(-50%, -50%);
    mix-blend-mode: screen;
    z-index: 0;
}

.contact-input {
    background-color: rgba(30, 30, 30, 0.8);
    border: 1px solid rgba(138, 43, 226, 0.3);
    transition: all 0.3s ease;
}

.contact-input:focus {
    border-color: #8e2de2;
    box-shadow: 0 0 0 2px rgba(138, 43, 226, 0.3);
}

.btn-primary {
    background: linear-gradient(90deg, #00d2ff, #3a7bd5);
    transition: all 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 210, 255, 0.4);
}

.btn-secondary {
    background: linear-gradient(90deg, #8e2de2, #4b00e0);
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(142, 45, 226, 0.4);
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}

.floating {
    animation: float 6s ease-in-out infinite;
}

/* Enhanced animations */
.animate-float {
    animation: float 6s ease-in-out infinite;
}

/* Particle effect */
#particles-js {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    will-change: transform;
}

/* 3D card effect */
.tilt-card {
    transform-style: preserve-3d;
    perspective: 1000px;
}

.tilt-card-inner {
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.tilt-card:hover .tilt-card-inner {
    transform: rotateX(10deg) rotateY(10deg);
}

.glowing-card {
    background: rgba(10, 10, 10, 0.5);
    box-shadow: 0 0 30px rgba(0, 210, 255, 0.2);
    animation: glow 3s ease-in-out infinite alternate;
}

@keyframes glow {
    from {
        box-shadow: 0 0 20px rgba(0, 210, 255, 0.2);
    }
    to {
        box-shadow: 0 0 40px rgba(0, 210, 255, 0.4);
    }
}

.typing-text {
    border-right: 2px solid;
    animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
}

@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: #00d2ff }
}

.animate-fade-in {
    opacity: 0;
    animation: fadeIn 1s ease-out forwards;
}

.animate-fade-in-delay {
    opacity: 0;
    animation: fadeIn 1s ease-out 0.5s forwards;
}

.animate-fade-in-delay-2 {
    opacity: 0;
    animation: fadeIn 1s ease-out 1s forwards;
}

.animate-fade-in-delay-3 {
    opacity: 0;
    animation: fadeIn 1s ease-out 1.5s forwards;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.hover-float {
    transition: all 0.3s ease;
}

.hover-float:hover {
    transform: scale(1.02);
}

/* Project card enhancements */
.project-card {
    transform-style: preserve-3d;
    perspective: 1000px;
}

.project-card-inner {
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.project-card:hover .project-card-inner {
    transform: rotateY(10deg) rotateX(5deg);
}

.project-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(0,210,255,0.1), rgba(142,45,226,0.1));
    border-radius: inherit;
    z-index: -1;
    transition: opacity 0.3s ease;
    opacity: 0;
}

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

/* Mobile Responsiveness for Project Tabs */
@media (max-width: 768px) {
    .project-tabs {
        flex-direction: column;
        border-radius: 1rem;
        padding: 12px;
    }
    
    .project-tab {
        justify-content: center;
        padding: 16px;
        border-radius: 0.5rem;
        margin-bottom: 4px;
    }
    
    .project-tab:last-child {
        margin-bottom: 0;
    }
    
    .tools-grid {
        grid-template-columns: 1fr;
    }
    
    .tool-category {
        padding: 1.5rem;
    }
    
    .skill-level {
        width: 80px;
    }
}

@media (max-width: 480px) {
    .project-tab span {
        display: none;
    }
    
    .project-tab {
        padding: 12px;
        min-width: 50px;
        justify-content: center;
    }
    
    .project-tabs {
        flex-direction: row;
        justify-content: space-around;
    }
}

/* Enhanced Mobile Navigation */
@media (max-width: 900px) {
    .logo-pill {
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
        transition: all 0.3s ease;
    }

    .navbar {
        top: 15px;
        left: 50%;
        transform: translateX(-50%);
        width: auto;
        display: flex;
        justify-content: center;
        z-index: 1001;
    }

    .mobile-menu-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        background: linear-gradient(145deg, rgba(10, 10, 10, 0.95), rgba(20, 20, 20, 0.98));
        border: 1px solid rgba(255, 255, 255, 0.15);
        color: white;
        padding: 0;
        border-radius: 50px;
        width: 50px;
        height: 50px;
        cursor: pointer;
        backdrop-filter: blur(15px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
    }

    .mobile-menu-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(0, 210, 255, 0.2), transparent);
        transition: left 0.5s;
    }

    .mobile-menu-btn:hover::before {
        left: 100%;
    }

    .mobile-menu-btn:hover {
        transform: scale(1.05);
        border-color: rgba(0, 210, 255, 0.3);
        box-shadow: 0 12px 35px rgba(0, 210, 255, 0.2);
    }

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

    .mobile-menu-btn i {
        font-size: 1.3rem;
        transition: all 0.3s ease;
        z-index: 1;
        position: relative;
    }

    .nav-menu {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: 85vw;
        max-width: 350px;
        background: linear-gradient(145deg, 
            rgba(10, 10, 10, 0.98), 
            rgba(20, 20, 30, 0.98));
        backdrop-filter: blur(20px);
        padding: 80px 20px 30px;
        border-radius: 0;
        border-left: 1px solid rgba(255, 255, 255, 0.1);
        display: flex;
        flex-direction: column;
        gap: 12px;
        transform: translateX(100%);
        opacity: 0;
        visibility: hidden;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
    }

    .nav-menu.active {
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
    }

    .nav-menu::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(5px);
        opacity: 0;
        visibility: hidden;
        transition: all 0.4s ease;
        z-index: -1;
    }

    .nav-menu.active::before {
        opacity: 1;
        visibility: visible;
    }

    .nav-link {
        position: relative;
        font-size: 1rem;
        font-weight: 500;
        padding: 16px 24px;
        margin: 0;
        text-align: left;
        width: 100%;
        border-radius: 15px;
        background: transparent;
        border: none;
        display: flex;
        align-items: center;
        gap: 15px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        overflow: hidden;
        transform: translateX(30px);
        opacity: 0;
        animation: slideInNav 0.5s ease forwards;
    }

    .nav-link:nth-child(1) { animation-delay: 0.1s; }
    .nav-link:nth-child(2) { animation-delay: 0.15s; }
    .nav-link:nth-child(3) { animation-delay: 0.2s; }
    .nav-link:nth-child(4) { animation-delay: 0.25s; }
    .nav-link:nth-child(5) { animation-delay: 0.3s; }
    .nav-link:nth-child(6) { animation-delay: 0.35s; }

    @keyframes slideInNav {
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }

    .nav-link::before {
        content: '';
        width: 6px;
        height: 6px;
        background: linear-gradient(45deg, #00d2ff, #3a7bd5);
        border-radius: 50%;
        transition: all 0.3s ease;
        box-shadow: 0 0 10px rgba(0, 210, 255, 0.3);
    }

    .nav-link::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, 
            transparent, 
            rgba(0, 210, 255, 0.1), 
            transparent);
        transition: left 0.5s ease;
    }

    .nav-link:hover {
        background: linear-gradient(145deg, 
            rgba(35, 35, 45, 0.8), 
            rgba(45, 45, 55, 0.8));
        transform: translateX(8px);
        border-color: rgba(0, 210, 255, 0.2);
        box-shadow: 0 8px 25px rgba(0, 210, 255, 0.15);
    }

    .nav-link:hover::after {
        left: 100%;
    }

    .nav-link:hover::before {
        width: 8px;
        height: 8px;
        box-shadow: 0 0 15px rgba(0, 210, 255, 0.6);
    }

    .nav-link:active {
        transform: translateX(4px) scale(0.98);
    }

    .project-card {
        margin: 1rem 0;
    }
    
    .skill-badge {
        font-size: 0.9rem;
    }
    
    .timeline::before {
        left: 0;
    }
    
    .timeline-item {
        padding-left: 2rem;
    }

    .contact-container {
        grid-template-columns: 1fr;
        padding: 1rem;
    }

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

    .section {
        padding: 60px 1rem;
    }

    .about-content {
        flex-direction: column;
        text-align: center;
    }

    .skill-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .experience-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .experience-company {
        margin-top: 1rem;
    }
}

/* Enhanced Mobile Responsiveness */
@media (max-width: 768px) {
    .section {
        padding: 80px 1rem 60px;
        margin-bottom: 40px;
    }

    .home-content {
        padding: 0 1rem;
    }

    .glowing-card {
        padding: 2rem 1.5rem;
        margin: 0 0.5rem;
    }

    .main-title {
        font-size: 2.5rem !important;
        line-height: 1.2;
        margin-bottom: 1.5rem;
    }

    .project-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .project-card {
        margin: 0;
        padding: 1.5rem;
    }

    .skill-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 1rem;
    }

    .contact-container {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 1rem;
    }

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

    .timeline-item {
        padding-left: 3rem;
    }

    .timeline-item::before {
        left: 10px;
    }

    .about-content {
        flex-direction: column;
        text-align: center;
        gap: 2rem;
    }

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

@media (max-width: 480px) {
    .nav-menu {
        width: 90vw;
        padding: 70px 15px 25px;
    }

    .mobile-menu-btn {
        width: 45px;
        height: 45px;
    }

    .main-title {
        font-size: 2rem !important;
    }

    .glowing-card {
        padding: 1.5rem 1rem;
        margin: 0 0.25rem;
    }

    .section {
        padding: 70px 0.75rem 50px;
    }

    .skill-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }

    .nav-link {
        padding: 14px 20px;
        font-size: 0.95rem;
    }
}

/* Improved touch targets for mobile */
@media (hover: none) and (pointer: coarse) {
    .nav-link {
        min-height: 48px;
    }

    .mobile-menu-btn {
        min-width: 48px;
        min-height: 48px;
    }

    .project-card,
    .experience-card {
        transition: none;
    }

    .project-card:hover,
    .experience-card:hover {
        transform: none;
    }
}

/* Easter Egg Styles */
.konami-mode {
    animation: rainbow-bg 5s linear infinite;
}

@keyframes rainbow-bg {
    0% { background: linear-gradient(45deg, #ff0000, #ff7f00); }
    25% { background: linear-gradient(45deg, #ff7f00, #ffff00); }
    50% { background: linear-gradient(45deg, #00ff00, #0000ff); }
    75% { background: linear-gradient(45deg, #0000ff, #4b0082); }
    100% { background: linear-gradient(45deg, #4b0082, #ff0000); }
}

.secret-click {
    position: relative;
    cursor: pointer;
}

.secret-click::after {
    content: '🚀';
    position: absolute;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

.secret-click.activated::after {
    opacity: 1;
    transform: translateY(0);
}

/* Updated background styles */
#space-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: #000;
}

.space-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, 
        rgba(0,0,0,0) 0%, 
        rgba(0,0,0,0.5) 50%, 
        rgba(0,0,0,0.8) 100%);
    pointer-events: none;
    z-index: -1;
}

/* Add nebula effect */
.nebula {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, 
        rgba(76, 0, 153, 0.1), 
        rgba(153, 0, 153, 0.1), 
        rgba(0, 76, 153, 0.1));
    filter: blur(80px);
    opacity: 0.5;
    mix-blend-mode: screen;
    animation: nebula-move 20s ease infinite;
}

@keyframes nebula-move {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(5%, 5%) rotate(5deg); }
    50% { transform: translate(0, 10%) rotate(0deg); }
    75% { transform: translate(-5%, 5%) rotate(-5deg); }
}

#scene-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: radial-gradient(circle at center, #1a1a2e 0%, #0a0a1a 100%);
    overflow: hidden;
}

.glass-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        circle at center,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.05) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    pointer-events: none;
    z-index: -1;
    backdrop-filter: blur(5px);
}

#motion-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: linear-gradient(to bottom right, #0a0a0a, #1a1a2e);
}

.gradient-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, transparent 0%, rgba(10, 10, 10, 0.8) 100%);
    pointer-events: none;
    z-index: -1;
}

.section-particles {
    position: absolute;
    width: 100%;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
}

#particles-js-2 {
    top: 100vh;
}

#particles-js-3 {
    top: 200vh;
}

/* Professional Loading Screen */
.professional-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #0a0a0a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

.professional-loader.fade-out {
    opacity: 0;
    visibility: hidden;
}

.loader-content {
    text-align: center;
    max-width: 600px;
    padding: 2rem;
}

.loader-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 3rem;
    opacity: 0;
    animation: fadeInUp 0.8s ease forwards 0.2s;
}

.loader-line {
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #00d2ff, transparent);
    margin: 0 1rem;
}

.loader-label {
    font-size: 0.9rem;
    letter-spacing: 3px;
    color: #888;
    font-weight: 300;
}

.name-reveal {
    margin-bottom: 3rem;
}

.loader-name {
    font-size: clamp(2.5rem, 8vw, 4rem);
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.name-part {
    display: inline-block;
    opacity: 0;
    transform: translateY(30px);
    animation: nameReveal 0.8s ease forwards;
    margin-right: 0.5rem;
}

.name-part:nth-child(odd) {
    background: linear-gradient(135deg, #00d2ff, #3a7bd5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.name-part:nth-child(even) {
    color: #ffffff;
}

.profession-reveal {
    opacity: 0;
    animation: fadeInUp 0.8s ease forwards 1.2s;
}

.profession-text {
    font-size: 1.2rem;
    color: #ccc;
    font-weight: 300;
    letter-spacing: 1px;
}

.profession-underline {
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #00d2ff, #3a7bd5);
    margin: 0.5rem auto 0;
    animation: expandLine 1s ease forwards 1.5s;
}

.loader-progress {
    opacity: 0;
    animation: fadeInUp 0.8s ease forwards 1.8s;
}

.progress-bar {
    width: 200px;
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 auto 1rem;
    border-radius: 1px;
    overflow: hidden;
}

.progress-fill {
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, #00d2ff, #3a7bd5);
    animation: progressFill 2s ease forwards 2s;
}

.progress-text {
    font-size: 0.9rem;
    color: #888;
    letter-spacing: 1px;
}

/* Background Elements */
.bg-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.3;
}

.floating-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.floating-dot {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #00d2ff;
    border-radius: 50%;
    opacity: 0.6;
    animation: float var(--duration) ease-in-out infinite var(--delay);
}

.floating-dot:nth-child(1) { top: 20%; left: 15%; }
.floating-dot:nth-child(2) { top: 60%; right: 20%; }
.floating-dot:nth-child(3) { bottom: 30%; left: 25%; }

/* Hide main content initially */
.main-content-hidden {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease 0.3s, visibility 0.8s ease 0.3s;
}

.main-content-visible {
    opacity: 1;
    visibility: visible;
}

/* Add loading screen styles */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0a0a0a;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease-out;
}

.loading-content {
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s ease forwards;
}

.typing-animation {
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid;
    width: 0;
    animation: typing 3s steps(40) forwards,
               blink 0.75s step-end infinite;
}

@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

@keyframes blink {
    from, to { border-color: transparent }
    50% { border-color: #00d2ff }
}

/* Animations */
@keyframes nameReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes expandLine {
    to {
        width: 150px;
    }
}

@keyframes progressFill {
    to {
        width: 100%;
    }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .loader-content {
        padding: 1rem;
    }
    
    .loader-name {
        font-size: 2.5rem;
    }
    
    .profession-text {
        font-size: 1rem;
    }
    
    .loader-line {
        width: 40px;
    }
}

/* Updated experience section styles */
.experience-card {
    background: linear-gradient(145deg, rgba(26, 26, 26, 0.8), rgba(13, 13, 13, 0.9));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    overflow: hidden;
    transform-style: preserve-3d;
    perspective: 1000px;
    transition: all 0.3s ease;
}

.experience-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.experience-company {
    margin-left: 20px;
}

.experience-date {
    color: #00d2ff;
    font-size: 0.9em;
    margin-bottom: 5px;
}

.experience-title {
    font-size: 1.4em;
    margin-bottom: 10px;
    background: linear-gradient(90deg, #00d2ff, #3a7bd5);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.experience-description {
    color: #e0e0e0;
    line-height: 1.6;
}

.experience-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
}

.experience-skill {
    background: rgba(0, 210, 255, 0.1);
    padding: 5px 15px;
    border-radius: 15px;
    font-size: 0.9em;
    color: #00d2ff;
}

/* Updated contact section styles */
.contact-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px;
}

.contact-info {
    background: linear-gradient(145deg, rgba(26, 26, 26, 0.8), rgba(13, 13, 13, 0.9));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    overflow: hidden;
    padding: 30px;
}

.contact-form {
    background: linear-gradient(145deg, rgba(26, 26, 26, 0.8), rgba(13, 13, 13, 0.9));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    overflow: hidden;
    padding: 30px;
}

.contact-input {
    width: 100%;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    transition: all 0.3s ease;
}

.contact-input:focus {
    border-color: #00d2ff;
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.2);
    outline: none;
}

.contact-submit {
    width: 100%;
    padding: 15px;
    border-radius: 10px;
    background: linear-gradient(90deg, #00d2ff, #3a7bd5);
    color: white;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.contact-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 210, 255, 0.3);
}

/* Contact Options Styling */
.contact-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 30px;
}

.contact-option-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    background: linear-gradient(145deg, rgba(26, 26, 26, 0.8), rgba(13, 13, 13, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #e0e0e0;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

.contact-option-btn:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 210, 255, 0.3);
    box-shadow: 0 8px 25px rgba(0, 210, 255, 0.15);
    color: #ffffff;
}

.contact-option-btn i {
    font-size: 1.2rem;
    color: #00d2ff;
}

.contact-form-wrapper {
    margin-top: 20px;
}

.simple-contact-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.simple-contact-form input,
.simple-contact-form textarea {
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #ffffff;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.simple-contact-form input:focus,
.simple-contact-form textarea:focus {
    outline: none;
    border-color: #00d2ff;
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.2);
}

.simple-contact-form textarea {
    resize: vertical;
    min-height: 100px;
}

.submit-btn {
    padding: 15px 25px;
    background: linear-gradient(90deg, #00d2ff, #3a7bd5);
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 210, 255, 0.3);
}

/* Professional Contact Container - Compact */
.professional-contact-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px 20px;
}

/* Contact Card Compact */
.contact-card-compact {
    background: linear-gradient(145deg, rgba(26, 26, 26, 0.9), rgba(13, 13, 13, 0.95));
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 30px;
    position: relative;
    overflow: hidden;
}

.contact-card-compact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 210, 255, 0.5), transparent);
}

/* Header Compact */
.contact-header-compact {
    text-align: center;
    margin-bottom: 25px;
}

.contact-title-compact {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #00d2ff, #3a7bd5, #8e2de2);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.contact-subtitle-compact {
    font-size: 0.95rem;
    color: #a0a0a0;
    line-height: 1.5;
    max-width: 400px;
    margin: 0 auto;
}

/* Contact Content Grid */
.contact-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 30px;
}

/* Contact Actions Column */
.contact-actions-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.primary-contact-actions-compact {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.primary-contact-btn-compact {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 18px 20px;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.primary-contact-btn-compact.email {
    background: linear-gradient(135deg, rgba(0, 210, 255, 0.1), rgba(58, 123, 213, 0.1));
}

.primary-contact-btn-compact.calendar {
    background: linear-gradient(135deg, rgba(142, 45, 226, 0.1), rgba(75, 0, 224, 0.1));
}

.primary-contact-btn-compact:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.primary-contact-btn-compact.email:hover {
    border-color: rgba(0, 210, 255, 0.3);
    box-shadow: 0 10px 25px rgba(0, 210, 255, 0.1);
}

.primary-contact-btn-compact.calendar:hover {
    border-color: rgba(142, 45, 226, 0.3);
    box-shadow: 0 10px 25px rgba(142, 45, 226, 0.1);
}

.btn-icon-compact {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.primary-contact-btn-compact.email .btn-icon-compact {
    background: linear-gradient(45deg, #00d2ff, #3a7bd5);
    color: white;
}

.primary-contact-btn-compact.calendar .btn-icon-compact {
    background: linear-gradient(45deg, #8e2de2, #4b00e0);
    color: white;
}

.btn-content-compact h5 {
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
}

/* Contact Info Column */
.contact-info-column {
    display: flex;
    align-items: center;
}

.contact-info-bar-compact {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

.info-item-compact {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #e0e0e0;
    font-size: 0.9rem;
    padding: 12px 15px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.info-item-compact i {
    color: #00d2ff;
    font-size: 1rem;
    width: 16px;
    text-align: center;
}

/* Social Section Compact */
.social-section-compact {
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 25px;
}

.social-title-compact {
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 20px;
}

.social-links-grid-compact {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.social-link-compact {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    background: linear-gradient(145deg, rgba(35, 35, 45, 0.8), rgba(25, 25, 35, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    text-decoration: none;
    color: #e0e0e0;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    gap: 10px;
}

.social-link-compact::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.social-link-compact:hover::before {
    left: 100%;
}

.social-link-compact:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 210, 255, 0.3);
    box-shadow: 0 6px 15px rgba(0, 210, 255, 0.1);
}

.social-link-compact i {
    font-size: 1.1rem;
    color: #00d2ff;
}

.social-link-compact span {
    font-weight: 500;
    flex: 1;
    margin-left: 10px;
    text-align: left;
    font-size: 0.9rem;
}

/* Specific social platform colors */
.social-link-compact.github:hover {
    border-color: rgba(102, 102, 102, 0.3);
}

.social-link-compact.linkedin:hover {
    border-color: rgba(0, 119, 181, 0.3);
}

.social-link-compact.instagram:hover {
    border-color: rgba(225, 48, 108, 0.3);
}

.social-link-compact.resume:hover {
    border-color: rgba(220, 53, 69, 0.3);
}

/* Mobile Responsiveness for Compact Layout */
@media (max-width: 768px) {
    .professional-contact-container {
        padding: 15px 10px;
    }
    
    .contact-card-compact {
        padding: 20px 15px;
    }
    
    .contact-title-compact {
        font-size: 1.6rem;
    }
    
    .contact-subtitle-compact {
        font-size: 0.9rem;
    }
    
    .contact-content-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .primary-contact-actions-compact {
        gap: 12px;
    }
    
    .primary-contact-btn-compact {
        padding: 15px 18px;
    }
    
    .btn-icon-compact {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }
    
    .btn-content-compact h5 {
        font-size: 0.95rem;
    }
    
    .contact-info-bar-compact {
        gap: 12px;
    }
    
    .info-item-compact {
        padding: 10px 12px;
        font-size: 0.85rem;
    }
    
    .social-links-grid-compact {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .social-link-compact {
        padding: 10px 14px;
    }
    
    .social-link-compact span {
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .contact-title-compact {
        font-size: 1.4rem;
    }
    
    .contact-card-compact {
        padding: 15px 12px;
    }
}

.contact-method {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.contact-method:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(10px);
}

.contact-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(45deg, #00d2ff, #3a7bd5);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
}

/* Icon animations */
.animate-icon {
    opacity: 0;
    transform: scale(0.5);
    animation: scaleIn 0.5s ease forwards;
    animation-play-state: paused;
}

.animate-icon.visible {
    animation-play-state: running;
}

@keyframes scaleIn {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Particle system updates */
.particles-js {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

.experience-card, .project-card {
    transform-style: preserve-3d;
    perspective: 1000px;
    transition: transform 0.3s ease;
}

.experience-card:hover, .project-card:hover {
    transform: translateY(-10px) scale(1.02);
}

.experience-card .experience-icon,
.project-card .project-icon {
    transform: translateZ(30px);
}

.experience-card .experience-title,
.project-card .project-title {
    transform: translateZ(20px);
}

.experience-card .experience-description,
.project-card .project-description {
    transform: translateZ(10px);
}

.js-tilt-glare {
    border-radius: 1rem !important;
    overflow: hidden !important;
}

.js-tilt-glare-inner {
    border-radius: 1rem !important;
    background: radial-gradient(
        circle at 50% 50%,
        rgba(255, 255, 255, 0.15),
        transparent 70%
    ) !important;
    mix-blend-mode: screen !important;
}

/* Logo styles with enhanced animations */
@keyframes logoSlideIn {
    0% {
        opacity: 0;
        transform: translateX(-50px) scale(0.8);
    }
    60% {
        transform: translateX(10px) scale(1.1);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes logoSlideOut {
    0% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateX(-50px) scale(0.8);
    }
}

@keyframes navItemDrop {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    60% {
        transform: translateY(5px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.logo-pill {
    position: fixed;
    top: 25px;
    left: 30px;
    background: rgba(10, 10, 10, 0.7);
    backdrop-filter: blur(10px);
    border-radius: 50px;
    padding: 32px 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 1000;
    text-decoration: none;
    height: 50px;
    display: flex;
    align-items: center;
    opacity: 0;
    transform: translateX(-50px) scale(0.8);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 901px) {
    .logo-pill {
        animation: logoSlideIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }
}

@media (max-width: 900px) {
    .logo-pill {
        left: 20px;
        transform: translateX(0);
        animation: logoSlideIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        padding: 25px 20px;
        height: 40px;
    }

    .logo-text {
        font-size: 1.2rem;
    }
}

.logo-pill:hover {
    background: rgba(10, 10, 10, 0.8);
    transform: translateY(-2px) scale(1.02);
    border-color: rgba(0, 210, 255, 0.3);
    box-shadow: 0 5px 15px rgba(0, 210, 255, 0.2);
}

.logo-text {
    font-family: 'Orbitron', sans-serif;
    background: linear-gradient(90deg, #00d2ff, #3a7bd5);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 2px;
}

/* Language Switcher - Exact same styling as logo pill */
.language-switcher {
    position: fixed;
    top: 25px;
    right: 30px;
    background: rgba(10, 10, 10, 0.7);
    backdrop-filter: blur(10px);
    border-radius: 50px;
    padding: 32px 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 1000;
    text-decoration: none;
    height: 50px;
    display: flex;
    align-items: center;
    opacity: 0;
    transform: translateX(50px) scale(0.8);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

@media (min-width: 901px) {
    .language-switcher {
        animation: languageSwitcherSlideIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }
}

@media (max-width: 900px) {
    .language-switcher {
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
        transition: all 0.3s ease;
    }
}

.language-switcher:hover {
    background: rgba(10, 10, 10, 0.8);
    transform: translateY(-2px) scale(1.02);
    border-color: rgba(0, 210, 255, 0.3);
    box-shadow: 0 5px 15px rgba(0, 210, 255, 0.2);
}

.language-text {
    font-family: 'Orbitron', sans-serif;
    background: linear-gradient(90deg, #00d2ff, #3a7bd5);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 2px;
}

@keyframes languageSwitcherSlideIn {
    0% {
        opacity: 0;
        transform: translateX(50px) scale(0.8);
    }
    60% {
        transform: translateX(-10px) scale(1.1);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* Mobile Language Switcher - Only visible in mobile view */
@media (max-width: 900px) {
    .mobile-language-switcher {
        cursor: pointer;
        background: linear-gradient(145deg, rgba(0, 210, 255, 0.2), rgba(58, 123, 213, 0.2)) !important;
        border: 1px solid rgba(0, 210, 255, 0.3) !important;
        color: #00d2ff !important;
    }
    
    .mobile-language-switcher:hover {
        background: linear-gradient(145deg, rgba(0, 210, 255, 0.3), rgba(58, 123, 213, 0.3)) !important;
        border-color: rgba(0, 210, 255, 0.5) !important;
        box-shadow: 0 5px 15px rgba(0, 210, 255, 0.2) !important;
    }
}

@media (min-width: 901px) {
    .mobile-language-switcher {
        display: none !important;
    }
}



/* Enhanced Navbar Animations */
.nav-menu {
    display: flex;
    gap: 1rem;
    background: rgba(10, 10, 10, 0.8);
    backdrop-filter: blur(10px);
    padding: 15px 30px;
    border-radius: 50px;
    
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link {
    color: #e0e0e0;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 25px;
    transition: all 0.3s ease;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    animation: navItemDrop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

/* Stagger nav items drop animation */
.nav-link:nth-child(1) { animation-delay: 0.1s; }
.nav-link:nth-child(2) { animation-delay: 0.2s; }
.nav-link:nth-child(3) { animation-delay: 0.3s; }
.nav-link:nth-child(4) { animation-delay: 0.4s; }
.nav-link:nth-child(5) { animation-delay: 0.5s; }
.nav-link:nth-child(6) { animation-delay: 0.6s; }

/* Mobile menu animations */
@media (max-width: 900px) {
    .navbar {
        top: 20px;
        right: 20px;
        left: auto;
        transform: none;
        display: flex;
        justify-content: flex-end;
        width: auto;
        z-index: 1001;
    }

    .mobile-menu-btn {
        position: relative;
        z-index: 1001;
        margin-left: auto;
        width: 40px;
        height: 40px;
        transform: translateZ(0);
        will-change: transform;
        backface-visibility: hidden;
    }

    .nav-menu {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: 75vw;
        max-width: 300px;
        background: linear-gradient(145deg, rgba(15, 15, 15, 0.95), rgba(25, 25, 25, 0.98));
        backdrop-filter: blur(10px);
        padding: 80px 20px 40px;
        border-radius: 0 0 0 25px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        justify-content: flex-start;
        align-items: stretch;
        transform: translateX(100%);
        opacity: 0;
        visibility: hidden;
        transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1),
                    opacity 0.2s ease,
                    visibility 0s linear 0.3s;
        will-change: transform;
        backface-visibility: hidden;
        box-sizing: border-box;
    }

    .nav-menu.active {
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
        transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1),
                    opacity 0.2s ease,
                    visibility 0s linear 0s;
    }

    .nav-link {
        position: relative;
        font-size: 0.95rem;
        padding: 14px 20px;
        margin: 0 5px;
        text-align: left;
        width: auto;
        border-radius: 12px;
        background: linear-gradient(145deg, rgba(25, 25, 25, 0.4), rgba(35, 35, 35, 0.4));
        border: 1px solid rgba(255, 255, 255, 0.05);
        display: flex;
        align-items: center;
        gap: 12px;
        transform: translateX(30px);
        opacity: 0;
        transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1),
                    opacity 0.3s ease;
        will-change: transform, opacity;
    }

    .nav-menu.active .nav-link {
        transform: translateX(0);
        opacity: 1;
    }

    .nav-menu.active .nav-link:nth-child(1) { transition-delay: 0.05s; }
    .nav-menu.active .nav-link:nth-child(2) { transition-delay: 0.1s; }
    .nav-menu.active .nav-link:nth-child(3) { transition-delay: 0.15s; }
    .nav-menu.active .nav-link:nth-child(4) { transition-delay: 0.2s; }
    .nav-menu.active .nav-link:nth-child(5) { transition-delay: 0.25s; }
    .nav-menu.active .nav-link:nth-child(6) { transition-delay: 0.3s; }

    .nav-link::before {
        content: '';
        width: 4px;
        height: 4px;
        background: #00d2ff;
        border-radius: 50%;
        transition: all 0.2s ease;
    }

    .nav-link:active {
        transform: scale(0.98);
    }
}

/* Desktop hover effects */
@media (min-width: 901px) {
    .nav-link::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 2px;
        background: linear-gradient(90deg, #00d2ff, #3a7bd5);
        transition: all 0.3s ease;
        transform: translateX(-50%);
    }

    .nav-link:hover::before {
        width: 80%;
    }

    .nav-link::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, rgba(0, 210, 255, 0.1), rgba(58, 123, 213, 0.1));
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 0.3s ease;
        border-radius: 25px;
        z-index: -1;
    }

    .nav-link:hover::after {
        transform: scaleX(1);
        transform-origin: left;
    }
}

/* Project thumbnail styles */
.project-thumbnail {
    width: 100%;
    height: 200px;
    border-radius: 10px;
    margin-bottom: 20px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
    background-size: cover;
    background-position: center;
    height: 180px;
    margin-bottom: 1rem;
    border-radius: 0.5rem;
    position: relative;
    overflow: hidden;
    contain: paint;
}

.project-thumbnail::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.2),
        rgba(0, 0, 0, 0.6)
    );
    opacity: 0;
    transition: opacity 0.3s ease;
}

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

.project-card:hover .project-thumbnail {
    transform: scale(1.05);
    border-color: rgba(0, 210, 255, 0.3);
}

/* Additional Experience Section Styles */
.experience-timeline {
    position: relative;
    padding-left: 2rem;
}

.experience-timeline::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 2px;
    background: linear-gradient(to bottom, #00d2ff, #3a7bd5);
}

.experience-card {
    position: relative;
    margin-bottom: 3rem;
    background: linear-gradient(145deg, rgba(26, 26, 26, 0.8), rgba(13, 13, 13, 0.9));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    overflow: hidden;
    transform-style: preserve-3d;
    perspective: 1000px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.experience-card::before {
    content: '';
    position: absolute;
    left: -2rem;
    top: 2rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: linear-gradient(45deg, #00d2ff, #3a7bd5);
    box-shadow: 0 0 20px rgba(0, 210, 255, 0.5);
}

.experience-header {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.experience-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 12px;
    background: linear-gradient(45deg, #00d2ff20, #3a7bd520);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transform: translateZ(20px);
}

.experience-company {
    flex: 1;
}

.experience-date {
    font-size: 0.9rem;
    color: #00d2ff;
    margin-bottom: 0.5rem;
    transform: translateZ(15px);
}

.experience-title {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    background: linear-gradient(90deg, #00d2ff, #3a7bd5);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    transform: translateZ(25px);
}

.experience-description {
    color: #e0e0e0;
    line-height: 1.6;
    transform: translateZ(10px);
}

.experience-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.5rem;
    transform: translateZ(15px);
}

.experience-skill {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    background: rgba(0, 210, 255, 0.1);
    color: #00d2ff;
    font-size: 0.9rem;
    border: 1px solid rgba(0, 210, 255, 0.2);
    transition: all 0.3s ease;
}

.experience-skill:hover {
    background: rgba(0, 210, 255, 0.2);
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .experience-timeline {
        padding-left: 1.5rem;
    }

    .experience-card::before {
        left: -1.5rem;
    }

    .experience-header {
        flex-direction: column;
    }

    .experience-icon {
        margin-bottom: 1rem;
    }
}

/* Add new animations */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes typewriter {
    from { width: 0; }
    to { width: 100%; }
}

.code-text {
    position: relative;
    display: inline-block;
}

.code-text::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #0a0a0a;
    animation: typewriter 1s steps(20) forwards;
    animation-delay: 1.5s;
}

/* Update navbar styles for mobile */
@media (max-width: 768px) {
    .navbar {
        width: 90%;
        padding: 15px 20px;
    }

    .nav-links {
        display: none;
        width: 100%;
        padding: 1rem 0;
        background: rgba(10, 10, 10, 0.95);
        backdrop-filter: blur(10px);
        border-radius: 15px;
        margin-top: 10px;
    }

    .nav-links.active {
        display: flex;
    }

    .nav-link {
        width: 100%;
        text-align: center;
        padding: 0.75rem;
    }

    .mobile-menu-btn {
        display: block !important;
    }
}

/* Update project and experience cards for mobile */
@media (max-width: 768px) {
    .project-card, .experience-card {
        padding: 1.5rem;
    }

    .project-thumbnail {
        height: 150px;
    }

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

/* Split text animation styles */
.split-text {
    opacity: 0;
    display: inline-block;
    animation: revealText 0.5s forwards;
    margin: 0 0.1em;
}

.split-text.accent-text {
    background: linear-gradient(90deg, #00d2ff, #3a7bd5);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.split-text span {
    display: inline-block;
    transform-origin: bottom;
    animation: rotateIn 0.5s forwards;
    opacity: 0;
}

@keyframes revealText {
    to {
        opacity: 1;
    }
}

@keyframes rotateIn {
    from {
        transform: rotateX(90deg);
        opacity: 0;
    }
    to {
        transform: rotateX(0);
        opacity: 1;
    }
}

/* Update title styles */
.main-title {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.3em;
}

.main-title span {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
}

.main-title .accent-word {
    color: #e0e0e0;
    animation: fadeInUp 0.5s ease forwards;
}

.main-title .gradient-text {
    background: linear-gradient(90deg, #00d2ff, #3a7bd5);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: fadeInUp 0.5s ease forwards;
}

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

/* Update home section specific styles */
#home.section {
    min-height: calc(100vh - var(--navbar-height));
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: calc(var(--navbar-height) + var(--section-padding) * 0.3); /* Slightly reduced from 0.5 */
    margin-bottom: var(--section-spacing);
}

/* Update section title styles */
.section h2.text-4xl {
    padding-top: calc(var(--section-title-gap));
    margin-bottom: var(--title-spacing);
    position: relative;
}

/* Add spacing for grid layouts */
.grid {
    gap: var(--content-spacing);
}

/* Update container spacing */
.container.mx-auto {
    padding-top: var(--content-spacing);
    padding-bottom: var(--content-spacing);
}

/* Update mobile menu spacing */
@media (max-width: 768px) {
    .nav-menu {
        padding-top: calc(var(--navbar-height) + 0px); /* Reduced from 20px */
    }

    .section h2.text-4xl {
        padding-top: calc(var(--navbar-height) * 0.3); /* Reduced from 0.5 */
    }

    #home.section {
        padding-top: calc(var(--navbar-height) * 1.2); /* Reduced from 1.5 */
    }
}

/* Add smooth scroll offset */
html {
    scroll-padding-top: calc(var(--navbar-height) + 20px);
    scroll-behavior: smooth;
}

/* Add social media button styles */
.social-links {
    margin-top: 2rem;
}

.social-links h4 {
    color: #e0e0e0;
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
}

.social-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.social-button {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #fff;
    background: linear-gradient(145deg, #00d2ff20, #3a7bd520);
    border: 2px solid rgba(58, 123, 213, 0.2);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.social-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #00d2ff, #3a7bd5);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.social-button i {
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease, color 0.3s ease;
}

.social-button:hover {
    transform: translateY(-5px);
    border-color: #3a7bd5;
    box-shadow: 0 10px 20px rgba(58, 123, 213, 0.3);
}

.social-button:hover::before {
    opacity: 1;
}

.social-button:hover i {
    transform: scale(1.1);
    color: #ffffff;
}

.social-button:active {
    transform: translateY(-2px);
}

        /* Update tech stack spacing */
.project-tech-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 25px 0;
}

.tech-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(42%) sepia(93%) saturate(1352%) hue-rotate(175deg) brightness(119%) contrast(119%);
    transition: all 0.3s ease;
}

.tool-item:hover .tech-logo {
    filter: brightness(0) saturate(100%) invert(42%) sepia(93%) saturate(1352%) hue-rotate(175deg) brightness(150%) contrast(150%);
    transform: scale(1.1);
}

/* Add mobile-specific styles for project tech stack */
@media (max-width: 768px) {
    .project-tech-stack {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 15px 0;
        padding: 0 10px;
    }

    .project-tech-stack .tech-tag {
        font-size: 0.85rem;
        padding: 6px 12px;
        border-radius: 20px;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 210, 255, 0.1);
        color: #00d2ff;
        border: 1px solid rgba(0, 210, 255, 0.2);
        flex: 0 1 auto;
        min-width: auto;
        max-width: calc(50% - 8px);
        margin: 0;
    }

    .project-tech-stack .tech-tag:hover {
        transform: translateY(-2px);
        background: rgba(0, 210, 255, 0.15);
    }
}

/* Update video behavior styles */
.gallery-main.video-active {
    pointer-events: auto;
}

.gallery-main.video-active video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--gallery-border-radius);
}

.video-thumbnail {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    border-radius: calc(var(--gallery-border-radius) / 2);
}

.video-thumbnail i {
    font-size: 1.5rem;
    color: #00d2ff;
    transition: transform 0.3s ease;
}

.video-thumbnail:hover i {
    transform: scale(1.2);
}

/* Add animation for social buttons */
@keyframes socialButtonPop {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    70% {
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.social-button {
    animation: socialButtonPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.social-button:nth-child(1) { animation-delay: 0.1s; }
.social-button:nth-child(2) { animation-delay: 0.2s; }
.social-button:nth-child(3) { animation-delay: 0.3s; }
.social-button:nth-child(4) { animation-delay: 0.4s; }

/* Add hover effect for icon */
@keyframes iconSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.social-button:hover i.fa-github {
    animation: iconSpin 0.8s ease-in-out;
}

/* Add scroll indicator styles */
.scroll-indicator {
    position: fixed;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.scroll-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

.scroll-dot::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(45deg, #00d2ff, #3a7bd5);
    opacity: 0;
    transform: scale(0);
    transition: all 0.3s ease;
}

.scroll-dot:hover::before,
.scroll-dot.active::before {
    opacity: 1;
    transform: scale(1.2);
}

.scroll-line {
    width: 2px;
    height: 40px;
    background: linear-gradient(to bottom, #00d2ff, transparent);
    margin: 10px 0;
    animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
    0% {
        transform: scaleY(0.5);
        opacity: 0;
    }
    50% {
        transform: scaleY(1);
        opacity: 1;
    }
    100% {
        transform: scaleY(0.5);
        opacity: 0;
    }
}

/* Add scroll mouse animation */
.scroll-mouse {
    width: 30px;
    height: 50px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    position: absolute;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    padding-top: 10px;
}

.scroll-mouse::before {
    content: '';
    width: 4px;
    height: 8px;
    background: linear-gradient(to bottom, #00d2ff, #3a7bd5);
    border-radius: 2px;
    animation: scrollWheel 2s ease infinite;
}

@keyframes scrollWheel {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(15px);
        opacity: 0;
    }
}

@media (max-width: 768px) {
    .scroll-indicator {
        display: none;
    }
}

/* Enhanced Project Modal Styles */
.project-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(15px);
    z-index: 9999;
    display: none;
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.project-modal.active {
    display: flex;
    opacity: 1;
    align-items: center;
    justify-content: center;
}

.project-modal .modal-content {
    background: linear-gradient(165deg, 
        rgba(26, 26, 26, 0.98), 
        rgba(13, 13, 13, 0.95)
    );
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 30px;
    position: relative;
    width: 92%;
    max-width: 1400px;
    height: 92vh;
    margin: auto;
    overflow: hidden;
    transform: translateY(30px) scale(0.95);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 25px 50px -12px rgba(0, 0, 0, 0.6),
        0 0 50px rgba(0, 210, 255, 0.1);
}

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

.project-modal .modal-body {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 45px;
    padding: 45px;
    height: 100%;
    position: relative;
}

.project-modal .project-info {
    padding-right: 25px;
    overflow-y: auto;
    max-height: calc(92vh - 135px);
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 210, 255, 0.5) rgba(0, 0, 0, 0.2);
}

/* Customize scrollbar for Webkit browsers */
.project-modal .project-info::-webkit-scrollbar {
    width: 6px;
}

.project-modal .project-info::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.project-modal .project-info::-webkit-scrollbar-thumb {
    background: rgba(0, 210, 255, 0.5);
    border-radius: 3px;
}

.project-modal .project-info::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 210, 255, 0.7);
}

/* Hide main modal scrollbar */
.project-modal .modal-content::-webkit-scrollbar {
    display: none;
}

.project-modal .modal-content {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Update responsive styles */
@media (max-width: 992px) {
    .project-modal .modal-content {
        width: 95%;
        height: 95vh;
    }

    .project-modal .modal-body {
        grid-template-columns: 1fr;
        padding: 30px;
        gap: 30px;
        height: 100%;
        overflow-y: auto;
    }

    .project-modal .project-info {
        padding-right: 0;
        max-height: none;
        overflow-y: visible;
    }
}

/* Enhanced About Section Styles - Matching Page Theme */

/* About Profile Container */
.about-profile-container {
    position: relative;
    width: 280px;
    height: 280px;
    margin: 2rem 4rem 2rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Orbital Rings - Professional and clean */
.orbit-ring {
    position: absolute;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(0, 210, 255, 0.2);
    animation: orbitRotate 25s linear infinite;
}

.orbit-ring-1 {
    width: 300px;
    height: 300px;
    animation-duration: 12s;
    border-width: 2px;
}

.orbit-ring-2 {
    width: 350px;
    height: 350px;
    animation-duration: 18s;
    animation-direction: reverse;
    border-width: 2px;
    opacity: 0.8;
}

.orbit-ring-3 {
    width: 400px;
    height: 400px;
    animation-duration: 24s;
    border-width: 2px;
    opacity: 0.6;
}

.orbit-ring-4 {
    width: 450px;
    height: 450px;
    animation-duration: 30s;
    animation-direction: reverse;
    border-style: dashed;
    border-width: 2px;
    opacity: 0.4;
}

/* Rotating Electrons - Exactly 3 electrons */
.orbit-electron {
    position: absolute;
    width: 10px;
    height: 10px;
    background: linear-gradient(45deg, #00d2ff, #3a7bd5);
    border-radius: 50%;
    box-shadow: 
        0 0 15px rgba(0, 210, 255, 0.8),
        0 0 30px rgba(0, 210, 255, 0.4);
    animation: electronOrbit 8s linear infinite;
}

.electron-1 {
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    animation-duration: 8s;
}

.electron-2 {
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    animation-duration: 12s;
    animation-direction: reverse;
    animation-delay: -3s;
}

.electron-3 {
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    animation-duration: 16s;
    animation-delay: -6s;
}

/* Profile Image Wrapper - Using glowing-card theme */
.about-profile-wrapper {
    position: relative;
    width: 280px;
    height: 280px;
    z-index: 5;
}

.about-profile-border {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(45deg, #00d2ff, #3a7bd5, #8e2de2, #00d2ff);
    background-size: 400% 400%;
    animation: gradientShift 4s ease infinite;
    padding: 4px;
    position: relative;
}

.about-profile-image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #0a0a0a;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.about-profile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Social Links - Matching Contact Section Style */
.about-social-links {
    position: absolute;
    bottom: -70px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 1rem;
    z-index: 15;
}

.about-social-link {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #fff;
    background: linear-gradient(145deg, #00d2ff20, #3a7bd520);
    border: 2px solid rgba(58, 123, 213, 0.2);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    text-decoration: none;
}

.about-social-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #00d2ff, #3a7bd5);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.about-social-link i {
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease, color 0.3s ease;
}

.about-social-link:hover {
    transform: translateY(-5px);
    border-color: #3a7bd5;
    box-shadow: 0 10px 20px rgba(58, 123, 213, 0.3);
}

.about-social-link:hover::before {
    opacity: 1;
}

.about-social-link:hover i {
    transform: scale(1.1);
    color: #ffffff;
}

.about-social-link:active {
    transform: translateY(-2px);
}

/* Clean Skills Grid */
.clean-skills-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 30px;
}

/* Clean Skill Card */
.clean-skill-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 20px;
    background: linear-gradient(145deg, rgba(26, 26, 26, 0.8), rgba(13, 13, 13, 0.9));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(30px);
}

.clean-skill-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.6s ease;
}

.clean-skill-card i {
    font-size: 20px;
    width: 24px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    z-index: 2;
}

.clean-skill-card span {
    font-size: 14px;
    font-weight: 500;
    color: #e0e0e0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    z-index: 2;
}

/* Unity & Unreal Engine - Blue */
.clean-skill-card:nth-child(1) i {
    color: #00d2ff;
    text-shadow: 0 0 10px rgba(0, 210, 255, 0.5);
}

/* AI & Machine Learning - Purple */
.clean-skill-card:nth-child(2) i {
    color: #a855f7;
    text-shadow: 0 0 10px rgba(168, 85, 247, 0.5);
}

/* Full Stack Development - Green */
.clean-skill-card:nth-child(3) i {
    color: #10b981;
    text-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}

/* Embedded Systems - Orange */
.clean-skill-card:nth-child(4) i {
    color: #f59e0b;
    text-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
}

/* Hover Effects */
.clean-skill-card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(0, 210, 255, 0.2);
}

.clean-skill-card:hover::before {
    left: 100%;
}

.clean-skill-card:hover i {
    transform: scale(1.2) rotate(5deg);
    filter: brightness(1.3);
}

.clean-skill-card:hover span {
    color: #ffffff;
    transform: translateX(2px);
}

/* Specific hover colors for borders */
.clean-skill-card:nth-child(1):hover {
    border-color: rgba(0, 210, 255, 0.4);
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(0, 210, 255, 0.3);
}

.clean-skill-card:nth-child(2):hover {
    border-color: rgba(168, 85, 247, 0.4);
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(168, 85, 247, 0.3);
}

.clean-skill-card:nth-child(3):hover {
    border-color: rgba(16, 185, 129, 0.4);
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(16, 185, 129, 0.3);
}

.clean-skill-card:nth-child(4):hover {
    border-color: rgba(245, 158, 11, 0.4);
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(245, 158, 11, 0.3);
}

/* Pulse animation on hover */
.clean-skill-card:hover i {
    animation: iconPulse 0.6s ease;
}

@keyframes iconPulse {
    0% { transform: scale(1.2) rotate(5deg); }
    50% { transform: scale(1.4) rotate(10deg); }
    100% { transform: scale(1.2) rotate(5deg); }
}

/* Hover Float Animation */
.hover-float:hover {
    transform: scale(1.02);
}

/* Professional Animations */
@keyframes orbitRotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes electronOrbit {
    from { 
        transform: translateX(-50%) rotate(0deg);
        opacity: 1;
    }
    25% {
        opacity: 0.8;
    }
    50% {
        opacity: 1;
    }
    75% {
        opacity: 0.8;
    }
    to { 
        transform: translateX(-50%) rotate(360deg);
        opacity: 1;
    }
}

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

.circle-1 {
    width: 12px;
    height: 12px;
    top: 10%;
    left: 15%;
    animation-delay: 0s;
    animation-duration: 8s;
}

.circle-2 {
    width: 8px;
    height: 8px;
    top: 80%;
    right: 20%;
    animation-delay: -2s;
    animation-duration: 12s;
}

.circle-3 {
    width: 6px;
    height: 6px;
    bottom: 15%;
    left: 25%;
    animation-delay: -4s;
    animation-duration: 10s;
}

.circle-4 {
    width: 10px;
    height: 10px;
    top: 30%;
    right: 10%;
    animation-delay: -6s;
    animation-duration: 14s;
}

@keyframes floatCircle {
    0%, 100% { 
        transform: translateY(0px) translateX(0px) scale(1);
        opacity: 0.4;
    }
    25% { 
        transform: translateY(-20px) translateX(10px) scale(1.2);
        opacity: 0.7;
    }
    50% { 
        transform: translateY(-10px) translateX(-5px) scale(0.8);
        opacity: 0.5;
    }
    75% { 
        transform: translateY(-30px) translateX(-10px) scale(1.1);
        opacity: 0.6;
    }
}

/* Enhanced Profile Image */
.profile-image-wrapper {
    position: relative;
    width: 280px;
    height: 280px;
    z-index: 5;
}

.profile-gradient-border {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(45deg, #00d2ff, #3a7bd5, #8e2de2, #00d2ff);
    background-size: 400% 400%;
    animation: gradientShift 4s ease infinite;
    padding: 4px;
    position: relative;
}

.profile-image-container {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #0a0a0a;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

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

.profile-image-wrapper:hover .profile-image {
    transform: scale(1.05);
}

.profile-pulse-ring {
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border: 2px solid rgba(0, 210, 255, 0.3);
    border-radius: 50%;
    animation: pulseRing 3s ease-in-out infinite;
}

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

@keyframes pulseRing {
    0% {
        transform: scale(1);
        opacity: 0;
    }
    50% {
        opacity: 0.4;
    }
    100% {
        transform: scale(1.1);
        opacity: 0;
    }
}

/* Enhanced Social Links */
.profile-social-links {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 1rem;
    z-index: 10;
}

.profile-social-link {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.profile-social-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: transform 0.4s ease;
    z-index: 1;
}

.profile-social-link i {
    position: relative;
    z-index: 2;
    color: #fff;
    transition: all 0.4s ease;
}

.github-link::before {
    background: linear-gradient(45deg, #24292e, #4a5568);
    transform: translateY(100%);
}

.linkedin-link::before {
    background: linear-gradient(45deg, #0077b5, #00a0dc);
    transform: translateY(100%);
}

.resume-link::before {
    background: linear-gradient(45deg, #8e2de2, #4a00e0);
    transform: translateY(100%);
}

.profile-social-link:hover::before {
    transform: translateY(0);
}

.profile-social-link:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.3);
}

.social-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.8rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 20;
}

.social-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.9);
}

.profile-social-link:hover .social-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* About Content Styling */
.about-content {
    padding-left: 2rem;
}

.about-section-title {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    background: linear-gradient(90deg, #00d2ff, #3a7bd5);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    position: relative;
}

.about-section-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #00d2ff, #3a7bd5);
    border-radius: 2px;
}

.about-description {
    margin-bottom: 2rem;
}

/* Enhanced Skills Grid */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.enhanced-skill-badge {
    position: relative;
    background: linear-gradient(145deg, rgba(26, 26, 26, 0.8), rgba(13, 13, 13, 0.9));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    padding: 1.5rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    overflow: hidden;
}

.enhanced-skill-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 210, 255, 0.1), transparent);
    transition: left 0.6s ease;
}

.enhanced-skill-badge:hover::before {
    left: 100%;
}

.enhanced-skill-badge:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 210, 255, 0.3);
    box-shadow: 0 10px 30px rgba(0, 210, 255, 0.2);
}

.skill-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.enhanced-skill-badge[data-skill="unity"] .skill-icon i { color: #00d2ff; }
.enhanced-skill-badge[data-skill="ai"] .skill-icon i { color: #8e2de2; }
.enhanced-skill-badge[data-skill="embedded"] .skill-icon i { color: #00ff88; }
.enhanced-skill-badge[data-skill="fullstack"] .skill-icon i { color: #ff6b35; }

.skill-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.skill-title {
    font-weight: 600;
    font-size: 1.1rem;
    color: #fff;
}

.skill-subtitle {
    font-size: 0.9rem;
    color: #a0a0a0;
}

.skill-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 1rem;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.enhanced-skill-badge[data-skill="unity"]:hover .skill-glow {
    background: radial-gradient(circle at center, rgba(0, 210, 255, 0.1), transparent 70%);
    opacity: 1;
}

.enhanced-skill-badge[data-skill="ai"]:hover .skill-glow {
    background: radial-gradient(circle at center, rgba(142, 45, 226, 0.1), transparent 70%);
    opacity: 1;
}

.enhanced-skill-badge[data-skill="embedded"]:hover .skill-glow {
    background: radial-gradient(circle at center, rgba(0, 255, 136, 0.1), transparent 70%);
    opacity: 1;
}

.enhanced-skill-badge[data-skill="fullstack"]:hover .skill-glow {
    background: radial-gradient(circle at center, rgba(255, 107, 53, 0.1), transparent 70%);
    opacity: 1;
}

/* Stats Section */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 2rem;
}

.stat-item {
    text-align: center;
    padding: 1.5rem;
    background: linear-gradient(145deg, rgba(26, 26, 26, 0.6), rgba(13, 13, 13, 0.8));
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.stat-item:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 210, 255, 0.3);
    box-shadow: 0 8px 25px rgba(0, 210, 255, 0.15);
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    background: linear-gradient(90deg, #00d2ff, #3a7bd5);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 0.9rem;
    color: #a0a0a0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Enhanced CTA Buttons */
.about-cta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.enhanced-btn-primary,
.enhanced-btn-secondary {
    position: relative;
    padding: 1rem 2rem;
    border-radius: 2rem;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    border: 2px solid transparent;
}

.enhanced-btn-primary {
    background: linear-gradient(45deg, #00d2ff, #3a7bd5);
    color: white;
}

.enhanced-btn-secondary {
    background: linear-gradient(145deg, rgba(26, 26, 26, 0.8), rgba(13, 13, 13, 0.9));
    color: white;
    border-color: rgba(255, 255, 255, 0.2);
}

.btn-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.enhanced-btn-primary:hover,
.enhanced-btn-secondary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

.enhanced-btn-primary:hover .btn-shine,
.enhanced-btn-secondary:hover .btn-shine {
    left: 100%;
}

.enhanced-btn-secondary:hover {
    border-color: rgba(0, 210, 255, 0.3);
    box-shadow: 0 12px 30px rgba(0, 210, 255, 0.2);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .profile-container {
        width: 240px;
        height: 240px;
    }
    
    .orbit-ring-1 { width: 280px; height: 280px; }
    .orbit-ring-2 { width: 320px; height: 320px; }
    .orbit-ring-3 { width: 360px; height: 360px; }
    
    .about-content {
        padding-left: 0;
        text-align: center;
    }
    
    .skills-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}

@media (max-width: 768px) {
    .profile-container {
        width: 200px;
        height: 200px;
    }
    
    .orbit-ring-1 { width: 240px; height: 240px; }
    .orbit-ring-2 { width: 280px; height: 280px; }
    .orbit-ring-3 { width: 320px; height: 320px; }
    
    .profile-social-links {
        bottom: -25px;
        gap: 0.75rem;
    }
    
    .profile-social-link {
        width: 45px;
        height: 45px;
        font-size: 1.2rem;
    }
    
    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
    
    .stat-item {
        padding: 1rem;
    }
    
    .stat-number {
        font-size: 2rem;
    }
    
    .about-cta {
        flex-direction: column;
        align-items: center;
    }
    
    .enhanced-btn-primary,
    .enhanced-btn-secondary {
        width: 100%;
        justify-content: center;
        max-width: 280px;
    }
}

@media (max-width: 480px) {
    .orbit-ring-2,
    .orbit-ring-3 {
        display: none;
    }
    
    .floating-circle {
        display: none;
    }
    
    .skills-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .enhanced-skill-badge {
        padding: 1rem;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

/* Compact Experience Cards */
.compact-experience-card {
    background: linear-gradient(145deg, rgba(26, 26, 26, 0.8), rgba(13, 13, 13, 0.9));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    height: auto;
    min-height: 180px;
    display: flex;
    flex-direction: column;
}

.compact-experience-card:hover {
    transform: translateY(-8px);
    border-color: rgba(0, 210, 255, 0.3);
    box-shadow: 0 15px 35px rgba(0, 210, 255, 0.2);
}

.compact-experience-card .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    max-height: calc(1.4em * 3);
}

/* Skills Overview Grid */
.skills-overview-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin: 0 auto;
}

.skills-overview-grid-sidebar {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.skill-overview-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    background: linear-gradient(145deg, rgba(26, 26, 26, 0.6), rgba(13, 13, 13, 0.8));
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
}

.skill-overview-item:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 210, 255, 0.3);
    box-shadow: 0 8px 25px rgba(0, 210, 255, 0.15);
}

.skill-overview-item[data-skill="unity"] i { color: #00d2ff; }
.skill-overview-item[data-skill="ai"] i { color: #8e2de2; }
.skill-overview-item[data-skill="embedded"] i { color: #00ff88; }
.skill-overview-item[data-skill="fullstack"] i { color: #ff6b35; }

.skill-overview-item span {
    color: #e0e0e0;
    font-weight: 500;
    text-align: center;
}

/* Compact CTA Buttons */
.enhanced-btn-primary-compact,
.enhanced-btn-secondary-compact {
    position: relative;
    padding: 0.75rem 1.5rem;
    border-radius: 1.5rem;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    border: 2px solid transparent;
}

.enhanced-btn-primary-compact {
    background: linear-gradient(45deg, #00d2ff, #3a7bd5);
    color: white;
}

.enhanced-btn-secondary-compact {
    background: linear-gradient(145deg, rgba(26, 26, 26, 0.8), rgba(13, 13, 13, 0.9));
    color: white;
    border-color: rgba(255, 255, 255, 0.2);
}

.enhanced-btn-primary-compact:hover,
.enhanced-btn-secondary-compact:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.enhanced-btn-primary-compact:hover .btn-shine,
.enhanced-btn-secondary-compact:hover .btn-shine {
    left: 100%;
}

.enhanced-btn-secondary-compact:hover {
    border-color: rgba(0, 210, 255, 0.3);
    box-shadow: 0 8px 25px rgba(0, 210, 255, 0.2);
}

/* About Section Adjustments */
#about.section {
    padding: 3rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-container {
    width: 260px;
    height: 260px;
    margin: 0 auto;
}

.orbit-ring-1 { width: 300px; height: 300px; }
.orbit-ring-2 { width: 340px; height: 340px; }
.orbit-ring-3 { width: 380px; height: 380px; }

/* Responsive Design for Compact Layout */
@media (max-width: 1024px) {
    .compact-experience-card {
        min-height: 160px;
    }
    
    .skills-overview-grid {
        gap: 1rem;
    }
    
    .skills-overview-grid-sidebar {
        gap: 0.5rem;
    }
    
    .skill-overview-item {
        padding: 0.75rem;
    }
    
    /* Stack layout on medium screens */
    .about-layout {
        flex-direction: column;
        align-items: center;
    }
    
    .about-left-side,
    .about-right-side {
        width: 100%;
        max-width: 600px;
    }
}

@media (max-width: 768px) {
    #about .grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .compact-experience-card {
        min-height: 180px;
        padding: 1rem;
    }
    
    .skills-overview-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .skill-overview-item {
        padding: 0.5rem;
    }
    
    .skill-overview-item i {
        font-size: 1.5rem;
    }
    
    .enhanced-btn-primary-compact,
    .enhanced-btn-secondary-compact {
        padding: 0.6rem 1.2rem;
        font-size: 0.85rem;
    }
    
    .profile-container {
        width: 200px;
        height: 200px;
    }
    
    .orbit-ring-1 { width: 240px; height: 240px; }
    .orbit-ring-2 { width: 280px; height: 280px; }
    .orbit-ring-3 { width: 320px; height: 320px; }
}

@media (max-width: 480px) {
    .compact-experience-card {
        min-height: 160px;
        padding: 0.75rem;
    }
    
    .compact-experience-card h4 {
        font-size: 1rem;
    }
    
    .compact-experience-card p {
        font-size: 0.8rem;
    }
    
    .skills-overview-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    
    .skill-overview-item {
        padding: 0.5rem;
    }
    
    .skill-overview-item i {
        font-size: 1.2rem;
        margin-bottom: 0.25rem;
    }
    
    .skill-overview-item span {
        font-size: 0.75rem;
    }
}

.project-modal .modal-body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(to bottom, 
        rgba(13, 13, 13, 0.9) 0%,
        rgba(13, 13, 13, 0) 100%
    );
    pointer-events: none;
    z-index: 1;
    opacity: 0.8;
}
.project-modal .gallery-main,
.project-modal .gallery-thumbnail,
.project-modal .modal-content,
.project-modal .gallery-item {
    /* Add hardware acceleration hints */
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}
.project-modal .gallery-section {
    position: relative;
}

.project-modal .gallery-main {
    position: relative;
    width: 100%;
    height: var(--gallery-height-desktop);
    border-radius: var(--gallery-border-radius);
    overflow: hidden;
    background: rgba(0, 0, 0, 0.3);
    box-shadow: 
        0 15px 35px -10px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(0, 210, 255, 0.1);
    transition: all 0.4s ease;
}

.project-modal .gallery-main::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.2) 100%
    );
    pointer-events: none;
}



.project-modal .gallery-main img,
.project-modal .gallery-main video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px;
    transition: transform 0.6s ease;
}



.project-modal .gallery-thumbnails {
    display: flex;
    gap: 18px;
    margin-top: 25px;
    padding: 12px 0;
    padding-left: 5px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.project-modal .gallery-thumbnail {
    width: var(--thumbnail-size);
    height: var(--thumbnail-height);
    border-radius: calc(var(--gallery-border-radius) / 2);
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    position: relative;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.project-modal .gallery-thumbnail::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    transition: opacity 0.3s ease;
    z-index: 1;
}

.project-modal .gallery-thumbnail::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid rgba(0, 210, 255, 0.5);
    border-radius: 14px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
}

.project-modal .gallery-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.project-modal .gallery-thumbnail:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.4);
}

.project-modal .gallery-thumbnail:hover::before {
    opacity: 0;
}


.project-modal .gallery-thumbnail.active {
    border-color: #00d2ff;
    transform: translateY(-3px) scale(1.05);
    box-shadow: 
        0 12px 20px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(0, 210, 255, 0.3);
}

.project-modal .gallery-thumbnail.active::before {
    opacity: 0;
}

.project-modal .project-info {
    padding-right: 25px;
}

.project-modal .project-title {
    font-size: 2.75rem;
    margin-bottom: 25px;
    background: linear-gradient(135deg, #00d2ff, #3a7bd5, #8e2de2);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1.2;
    position: relative;
}

.project-modal .project-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #00d2ff, #3a7bd5);
    border-radius: 2px;
}

.project-modal .project-meta {
    display: flex;
    gap: 20px;
    margin: 30px 0;
}

.project-modal .meta-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    font-size: 0.95rem;
    color: #e0e0e0;
    transition: all 0.3s ease;
}

.project-modal .meta-item:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}

.project-modal .meta-item i {
    color: #00d2ff;
    font-size: 1.1rem;
}

.project-modal .project-description {
    color: #e0e0e0;
    line-height: 1.8;
    margin: 30px 0;
    font-size: 1.05rem;
    position: relative;
    padding-left: 20px;
    border-left: 2px solid rgba(0, 210, 255, 0.3);
}

/* Update tech stack spacing */
.project-modal .tech-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 8px; /* Reduced gap for tighter spacing */
    margin: 30px 0;
}

.project-modal .tech-tag {
    padding: 8px 16px;
    border-radius: 20px;
    background: rgba(0, 210, 255, 0.1);
    color: #00d2ff;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 210, 255, 0.2);
    white-space: nowrap; /* Prevent text wrapping */
}

.project-modal .tech-tag:hover {
    transform: translateY(-2px);
    background: rgba(0, 210, 255, 0.15);
}

/* Update gallery image/video styles */
.project-modal .gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px;
    transition: transform 0.6s ease;
}

.project-modal .gallery-main:not(.video-active):hover img {
    transform: scale(1.05);
}

.project-modal .gallery-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

/* Add class when video is active */
.project-modal .gallery-main.video-active {
    transform: none !important;
}

.project-modal .gallery-main.video-active:hover {
    transform: none !important;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .project-modal .tech-stack {
        gap: 10px;
    }
    
    .project-modal .tech-tag {
        padding: 8px 16px;
        font-size: 0.9rem;
    }
}

.project-modal .project-links {
    display: flex;
    gap: 20px;
    margin-top: 35px;
}

.project-modal .project-link {
    padding: 14px 28px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    font-size: 1.05rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.project-modal .project-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.project-modal .project-link.github {
    background: linear-gradient(45deg, #24292e, #2b3137);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.project-modal .project-link.demo {
    background: linear-gradient(45deg, #00d2ff, #3a7bd5);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.project-modal .project-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.project-modal .project-link:hover::before {
    transform: translateX(100%);
}

.project-modal .modal-close {
    position: absolute;
    top: 25px;
    right: 25px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 10;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.project-modal .modal-close:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: rotate(90deg);
    box-shadow: 0 0 20px rgba(0, 210, 255, 0.2);
}

/* Enhanced Responsive Styles */
@media (max-width: 1200px) {
    .project-modal .modal-body {
        grid-template-columns: 1.3fr 1fr;
        padding: 35px;
        gap: 35px;
    }

    .project-modal .gallery-main {
        height: var(--gallery-height-tablet);
    }

    .project-modal .project-title {
        font-size: 2.25rem;
    }
}

@media (max-width: 992px) {
    .project-modal .modal-content {
        width: 95%;
        height: 95vh;
    }

    .project-modal .modal-body {
        grid-template-columns: 1fr;
        padding: 30px;
        gap: 30px;
        height: 100%;
        overflow-y: auto;
    }

    .project-modal .gallery-main {
        height: var(--gallery-height-mobile);
    }

    .project-modal .project-info {
        padding-right: 0;
    }

    .project-modal .project-title {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .project-modal .modal-content {
        width: 100%;
        height: 100%;
        max-height: 100vh;
        border-radius: 0;
        margin: 0;
        overflow-y: auto;
        overflow-x: hidden;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
    }

    .project-modal .modal-body {
        padding: 25px;
        gap: 25px;
        height: auto;
        min-height: 100%;
        overflow: visible;
        display: flex;
        flex-direction: column;
    }

    .project-modal .gallery-section {
        width: 100%;
        margin-bottom: 20px;
    }

    .project-modal .gallery-main {
        height: var(--gallery-height-mobile);
        border-radius: 20px;
        width: 100%;
    }

    .project-modal .gallery-thumbnails {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
        gap: 10px;
        margin-top: 15px;
        padding: 0;
        overflow: visible;
        width: 100%;
    }

    .project-modal .gallery-thumbnail {
        width: 100%;
        height: 60px;
        border-radius: 12px;
        margin: 0;
    }

    .project-modal .project-info {
        width: 100%;
        padding-right: 0;
        padding-bottom: 80px; /* Add padding at bottom to prevent content being cut off */
    }

    .project-modal .project-meta {
        flex-wrap: wrap;
        gap: 10px;
    }

    .project-modal .meta-item {
        flex: 1;
        min-width: calc(50% - 5px);
        justify-content: center;
    }

    .project-modal .tech-stack {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 10px;
    }

    .project-modal .tech-tag {
        width: 100%;
        text-align: center;
        justify-content: center;
        padding: 8px 10px;
    }

    .project-modal .project-links {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 15px;
        background: linear-gradient(to top, 
            rgba(13, 13, 13, 0.95) 0%,
            rgba(13, 13, 13, 0.8) 100%
        );
        backdrop-filter: blur(10px);
        margin: 0;
        gap: 10px;
        z-index: 100;
    }

    .project-modal .project-link {
        margin: 0;
        padding: 12px 20px;
    }

    /* Hide scrollbars but keep functionality */
    .project-modal .modal-content::-webkit-scrollbar,
    .project-modal .modal-body::-webkit-scrollbar,
    .project-modal .gallery-thumbnails::-webkit-scrollbar {
        display: none;
    }

    .project-modal .modal-content,
    .project-modal .modal-body,
    .project-modal .gallery-thumbnails {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    /* Ensure content is not cut off at the bottom */
    .project-modal .modal-content {
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* Adjust modal close button position */
    .project-modal .modal-close {
        top: 15px;
        right: 15px;
        width: 35px;
        height: 35px;
    }
}

/* Add smooth scroll behavior for mobile */
@supports (-webkit-touch-callout: none) {
    .project-modal .modal-content {
        -webkit-overflow-scrolling: touch;
    }
}

/* Enhanced Loading Animation */
.project-modal .gallery-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    border: 3px solid rgba(0, 210, 255, 0.1);
    border-radius: 50%;
    border-top-color: #00d2ff;
    animation: spin 1s linear infinite;
}

.project-modal .gallery-loading::before,
.project-modal .gallery-loading::after {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border: 3px solid transparent;
    border-top-color: rgba(0, 210, 255, 0.5);
    border-radius: 50%;
    animation: spin 2s linear infinite reverse;
}

.project-modal .gallery-loading::after {
    border-top-color: rgba(0, 210, 255, 0.2);
    animation-duration: 3s;
}

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

/* Enhanced Image Transition Effects */
.project-modal .gallery-item {
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.project-modal .gallery-item.active {
    opacity: 1;
    transform: scale(1);
}

/* Remove shine effects from project modal */
.project-modal .tech-tag::before,
.project-modal .project-link::before {
    display: none;
}

/* Center video thumbnail icon */
.project-modal .video-thumbnail {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00d2ff;
    font-size: 1.5rem;
}

.project-modal .video-thumbnail i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Update mobile styles */
@media (max-width: 768px) {
    .project-modal .modal-content {
        width: 100%;
        height: 100%;
        max-height: 100vh;
        border-radius: 0;
        margin: 0;
        overflow-y: auto;
        overflow-x: hidden;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
    }

    .project-modal .modal-body {
        padding: 20px;
        gap: 20px;
        height: auto;
        overflow: visible;
        display: flex;
        flex-direction: column;
    }

    .project-modal .gallery-section {
        width: 100%;
        margin-bottom: 15px;
    }

    .project-modal .gallery-main {
        height: var(--gallery-height-mobile); /* Reduced height */
        border-radius: 16px;
        width: 100%;
    }

    .project-modal .gallery-thumbnails {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
        gap: 8px;
        margin-top: 12px;
        padding: 0;
        overflow: visible;
        width: 100%;
    }

    .project-modal .gallery-thumbnail {
        width: 100%;
        height: 50px;
        border-radius: 8px;
        margin: 0;
    }

    .project-modal .project-info {
        width: 100%;
        padding-right: 0;
    }

    .project-modal .project-title {
        font-size: 1.75rem;
        margin-bottom: 15px;
    }

    .project-modal .project-meta {
        flex-wrap: wrap;
        gap: 8px;
        margin: 15px 0;
    }

    .project-modal .meta-item {
        flex: 1;
        min-width: calc(50% - 4px);
        padding: 8px 12px;
        font-size: 0.9rem;
    }

    .project-modal .project-description {
        font-size: 0.95rem;
        line-height: 1.6;
        margin: 15px 0;
    }

    .project-modal .tech-stack {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 8px;
        margin: 15px 0;
    }

    .project-modal .tech-tag {
        width: 100%;
        text-align: center;
        padding: 6px 10px;
        font-size: 0.9rem;
    }

    /* Fixed bottom buttons */
    .project-modal .project-links {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 15px;
        background: linear-gradient(to top, 
            rgba(13, 13, 13, 0.98) 0%,
            rgba(13, 13, 13, 0.95) 100%
        );
        backdrop-filter: blur(10px);
        display: flex;
        flex-direction: row;
        gap: 10px;
        z-index: 100;
        margin: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .project-modal .project-link {
        flex: 1;
        margin: 0;
        padding: 12px 16px;
        font-size: 0.95rem;
        justify-content: center;
        border-radius: 12px;
    }

    .project-modal .project-link i {
        margin-right: 8px;
    }

    /* Ensure content is not cut off */
    .project-modal .modal-content {
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* Adjust close button */
    .project-modal .modal-close {
        top: 15px;
        right: 15px;
        width: 32px;
        height: 32px;
        font-size: 1.1rem;
    }

    /* Hide scrollbars but keep functionality */
    .project-modal .modal-content::-webkit-scrollbar,
    .project-modal .modal-body::-webkit-scrollbar,
    .project-modal .gallery-thumbnails::-webkit-scrollbar {
        display: none;
    }

    .project-modal .modal-content,
    .project-modal .modal-body,
    .project-modal .gallery-thumbnails {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
}

/* Add smooth scroll behavior for mobile */
@supports (-webkit-touch-callout: none) {
    .project-modal .modal-content {
        -webkit-overflow-scrolling: touch;
    }
}

/* Mobile adjustments for project modal */
@media (max-width: 768px) {
    .project-modal .modal-content {
        width: 100%;
        height: 100%;
        max-height: 100vh;
        border-radius: 0;
        margin: 0;
        overflow-y: auto;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
    }

    .project-modal .modal-body {
        padding: 20px;
        gap: 20px;
        height: auto;
        overflow-y: auto;
        padding-bottom: 120px; /* Increased padding to prevent content being hidden behind buttons */
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    }

    .project-modal .project-links {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 15px;
        background: linear-gradient(to top, 
            rgba(13, 13, 13, 0.98),
            rgba(13, 13, 13, 0.95)
        );
        backdrop-filter: blur(10px);
        display: flex;
        gap: 10px;
        z-index: 1000;
        margin: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.3);
    }

    .project-modal .project-link {
        flex: 1;
        margin: 0;
        padding: 14px 16px;
        font-size: 0.95rem;
        justify-content: center;
        border-radius: 12px;
        white-space: nowrap;
        display: flex;
        align-items: center;
        transition: transform 0.2s ease;
    }

    .project-modal .project-link:active {
        transform: scale(0.98);
    }

    .project-modal .project-link i {
        margin-right: 8px;
        font-size: 1.1rem;
    }

    /* Safe area padding for modern mobile devices */
    @supports (padding: max(0px)) {
        .project-modal .project-links {
            padding-bottom: max(15px, env(safe-area-inset-bottom));
            padding-left: max(15px, env(safe-area-inset-left));
            padding-right: max(15px, env(safe-area-inset-right));
        }
    }

    /* Hide scrollbars but keep functionality */
    .project-modal .modal-content::-webkit-scrollbar,
    .project-modal .modal-body::-webkit-scrollbar {
        display: none;
    }

    .project-modal .modal-content,
    .project-modal .modal-body {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
}

/* Update project card styles to only apply hover effects to Professional Projects section */
#projects .project-card:hover {
    transform: translateY(-10px);
    border-color: rgba(0, 210, 255, 0.3);
    box-shadow: 0 20px 40px rgba(0, 210, 255, 0.2);
}

#projects .project-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(0,210,255,0.1), rgba(142,45,226,0.1));
    border-radius: inherit;
    z-index: -1;
    transition: opacity 0.3s ease;
    opacity: 0;
}

#projects .project-card:hover::before {
    opacity: 1;
}

/* Replace with new styles */
.experience-card:hover,
#education .project-card:hover,
#experience .project-card:hover {
    transform: translateY(-10px);
    border-color: rgba(0, 210, 255, 0.3);
    box-shadow: 0 20px 40px rgba(0, 210, 255, 0.2);
    cursor: pointer;
}

.experience-card::before,
#education .project-card::before,
#experience .project-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(0,210,255,0.1), rgba(142,45,226,0.1));
    border-radius: inherit;
    z-index: -1;
    transition: opacity 0.3s ease;
    opacity: 0;
}

.experience-card:hover::before,
#education .project-card:hover::before,
#experience .project-card:hover::before {
    opacity: 1;
}

/* Shared card styles */
.project-card,
.experience-card,
.personal-project-card {
    background: linear-gradient(145deg, rgba(26, 26, 26, 0.8), rgba(13, 13, 13, 0.9));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

/* Card hover effects */
.project-card:hover,
.experience-card:hover,
.personal-project-card:hover {
    transform: translateY(-10px);
    border-color: rgba(0, 210, 255, 0.3);
    box-shadow: 0 20px 40px rgba(0, 210, 255, 0.2);
    cursor: pointer;
}
.project-description ul {
    list-style-type: disc;
    padding-left: 1.5rem;
  }

.project-card::before,
.experience-card::before,
.personal-project-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(0,210,255,0.1), rgba(142,45,226,0.1));
    border-radius: inherit;
    z-index: -1;
    transition: opacity 0.3s ease;
    opacity: 0;
}

.project-card:hover::before,
.experience-card:hover::before,
.personal-project-card:hover::before {
    opacity: 1;
}

/* Experience Section Mobile Responsiveness */
@media (max-width: 768px) {
    .experience-card {
        padding: 1.5rem !important;
    }

    .experience-card .flex {
        flex-direction: column;
    }

    .experience-card .w-16 {
        margin-bottom: 1rem;
    }

    .experience-card .flex-1 {
        width: 100%;
    }

    .experience-card .flex.items-center.justify-between {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .experience-card .text-2xl {
        font-size: 1.5rem;
        line-height: 1.2;
    }

    .experience-card .text-xl {
        font-size: 1.25rem;
    }

    .experience-card .space-y-3 {
        margin: 1rem 0;
    }

    .experience-card .flex.flex-wrap.gap-3 {
        gap: 0.5rem;
    }

    .experience-card .px-4.py-2 {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }
}

/* Enhanced Contact Section Mobile Responsiveness */
@media (max-width: 768px) {
    .contact-container {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        padding: 1rem;
        max-width: 100%;
        margin: 0 auto;
    }

    .contact-info, 
    .contact-form {
        width: 100%;
        padding: 1.5rem;
        border-radius: 1rem;
        background: linear-gradient(145deg, rgba(26, 26, 26, 0.9), rgba(13, 13, 13, 0.95));
        backdrop-filter: blur(15px);
        border: 1px solid rgba(255, 255, 255, 0.15);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    }

    /* Enhanced contact method styling for mobile */
    .contact-method {
        display: flex;
        align-items: center;
        padding: 1rem;
        margin-bottom: 1rem;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.1);
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }

    .contact-method::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(0, 210, 255, 0.1), transparent);
        transition: left 0.5s ease;
    }

    .contact-method:hover::before {
        left: 100%;
    }

    .contact-method:hover {
        background: rgba(255, 255, 255, 0.12);
        transform: translateY(-2px);
        box-shadow: 0 4px 20px rgba(0, 210, 255, 0.2);
        border-color: rgba(0, 210, 255, 0.3);
    }

    /* Enhanced contact icon for mobile */
    .contact-icon {
        width: 3.5rem;
        height: 3.5rem;
        min-width: 3.5rem;
        border-radius: 12px;
        background: linear-gradient(135deg, #00d2ff, #3a7bd5);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 1rem;
        font-size: 1.4rem;
        color: white;
        box-shadow: 0 4px 15px rgba(0, 210, 255, 0.3);
        transition: all 0.3s ease;
    }

    .contact-method:hover .contact-icon {
        transform: scale(1.1) rotate(5deg);
        box-shadow: 0 6px 20px rgba(0, 210, 255, 0.4);
    }

    /* Enhanced text styling for mobile */
    .contact-method div {
        flex: 1;
    }

    .contact-method h4 {
        font-size: 1.1rem;
        font-weight: 600;
        color: #ffffff;
        margin-bottom: 0.25rem;
        letter-spacing: 0.5px;
    }

    .contact-method p {
        font-size: 0.95rem;
        color: #b0b0b0;
        word-break: break-word;
        line-height: 1.4;
        transition: color 0.3s ease;
    }

    .contact-method:hover p {
        color: #e0e0e0;
    }

    /* Enhanced social links section for mobile */
    .social-links {
        margin-top: 2rem;
        padding-top: 1.5rem;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .social-links h4 {
        font-size: 1.2rem;
        color: #ffffff;
        margin-bottom: 1rem;
        text-align: center;
    }

    .social-buttons {
        display: flex;
        justify-content: center;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .social-button {
        width: 3rem;
        height: 3rem;
        border-radius: 10px;
        background: linear-gradient(145deg, rgba(0, 210, 255, 0.1), rgba(58, 123, 213, 0.1));
        border: 1px solid rgba(58, 123, 213, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        color: #00d2ff;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
    }

    .social-button::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(45deg, #00d2ff, #3a7bd5);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .social-button:hover {
        transform: translateY(-3px) scale(1.05);
        box-shadow: 0 8px 25px rgba(0, 210, 255, 0.4);
        border-color: #00d2ff;
    }

    .social-button:hover::before {
        opacity: 1;
    }

    .social-button i {
        position: relative;
        z-index: 2;
        transition: all 0.3s ease;
    }

    .social-button:hover i {
        color: #ffffff;
        transform: scale(1.1);
    }

    /* Enhanced contact form for mobile */
    .contact-form h3 {
        text-align: center;
        margin-bottom: 1.5rem;
        color: #ffffff;
        font-size: 1.4rem;
    }

    .contact-input {
        width: 100%;
        padding: 1rem;
        margin-bottom: 1rem;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.15);
        color: #ffffff;
        font-size: 0.95rem;
        transition: all 0.3s ease;
        backdrop-filter: blur(10px);
    }

    .contact-input::placeholder {
        color: #888;
        opacity: 1;
    }

    .contact-input:focus {
        border-color: #00d2ff;
        box-shadow: 0 0 20px rgba(0, 210, 255, 0.3);
        background: rgba(255, 255, 255, 0.12);
        outline: none;
        transform: translateY(-1px);
    }

    .contact-submit {
        width: 100%;
        padding: 1rem;
        border-radius: 10px;
        background: linear-gradient(135deg, #00d2ff, #3a7bd5);
        color: white;
        border: none;
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
        box-shadow: 0 4px 15px rgba(0, 210, 255, 0.3);
    }

    .contact-submit::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.5s ease;
    }

    .contact-submit:hover::before {
        left: 100%;
    }

    .contact-submit:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 210, 255, 0.4);
        background: linear-gradient(135deg, #00b8e6, #3366bb);
    }

    .contact-submit:active {
        transform: translateY(0);
    }
}

/* Additional enhancements for smaller mobile screens */
@media (max-width: 480px) {
    .contact-container {
        padding: 0.75rem;
        gap: 1.25rem;
    }

    .contact-info, 
    .contact-form {
        padding: 1.25rem;
    }

    .contact-method {
        padding: 0.875rem;
    }

    .contact-icon {
        width: 3rem;
        height: 3rem;
        min-width: 3rem;
        font-size: 1.2rem;
    }

    .contact-method h4 {
        font-size: 1rem;
    }

    .contact-method p {
        font-size: 0.875rem;
    }

    .social-button {
        width: 2.75rem;
        height: 2.75rem;
        font-size: 1.1rem;
    }

    .contact-input {
        padding: 0.875rem;
        font-size: 0.9rem;
    }

    .contact-submit {
        padding: 0.875rem;
        font-size: 0.95rem;
    }
}

/* Ultra-small screens optimization */
@media (max-width: 360px) {
    .contact-container {
        padding: 0.5rem;
    }

    .contact-info, 
    .contact-form {
        padding: 1rem;
    }

    .contact-method {
        padding: 0.75rem;
        margin-bottom: 0.75rem;
    }

    .contact-icon {
        width: 2.75rem;
        height: 2.75rem;
        min-width: 2.75rem;
        margin-right: 0.75rem;
    }

    .social-buttons {
        gap: 0.75rem;
    }

    .social-button {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1rem;
    }
}

/* Experience Section Checkmark Alignment */
@media (max-width: 768px) {
    .experience-card .flex.items-center.gap-3 {
        flex-direction: row; /* Keep items in row */
        align-items: flex-start; /* Align to top */
        gap: 0.75rem;
    }

    .experience-card .fa-check-circle {
        margin-top: 0.25rem; /* Fine-tune vertical alignment with text */
    }

    .experience-card .space-y-3 > div {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .experience-card .space-y-3 i {
        margin-top: 0.25rem; /* Align icon with first line of text */
    }
}

/* Project Tabs Styles */
.project-tabs-container {
    position: relative;
    margin-bottom: 3rem;
    display: flex;
    justify-content: center;
}

.project-tabs {
    display: flex;
    background: linear-gradient(145deg, rgba(26, 26, 26, 0.8), rgba(13, 13, 13, 0.9));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    padding: 8px;
    position: relative;
    overflow: hidden;
}

.project-tab {
    background: transparent;
    border: none;
    color: #e0e0e0;
    padding: 12px 24px;
    border-radius: 40px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    position: relative;
    z-index: 2;
    white-space: nowrap;
}

.project-tab i {
    font-size: 1.1rem;
    transition: transform 0.3s ease;
}

.project-tab:hover {
    color: #ffffff;
    transform: translateY(-1px);
}

.project-tab:hover i {
    transform: scale(1.1);
}

.project-tab.active {
    color: #ffffff;
    background: linear-gradient(90deg, #00d2ff, #3a7bd5);
    box-shadow: 0 4px 15px rgba(0, 210, 255, 0.3);
}

.tab-indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #00d2ff, #3a7bd5);
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
}

/* Tab Content */
.project-content {
    position: relative;
    min-height: 600px;
}

.tab-content {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.tab-content.active {
    opacity: 1;
    visibility: visible;
    position: relative;
    transform: translateY(0);
}

/* Tools Grid Styles */
.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
}

.tool-category {
    background: linear-gradient(145deg, rgba(26, 26, 26, 0.6), rgba(13, 13, 13, 0.8));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    padding: 2rem;
    transition: all 0.3s ease;
}

.tool-category:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 210, 255, 0.3);
    box-shadow: 0 10px 30px rgba(0, 210, 255, 0.1);
}

.tool-category-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: #ffffff;
}

.tool-category-title i {
    font-size: 1.8rem;
    background: linear-gradient(90deg, #00d2ff, #3a7bd5);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.tool-items {
    display: grid;
    gap: 1rem;
}

.tool-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 1rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

.tool-item:hover {
    transform: translateX(5px);
    background: linear-gradient(145deg, rgba(35, 35, 35, 0.6), rgba(20, 20, 20, 0.8));
}

.tool-item i {
    font-size: 1.5rem;
    width: 24px;
    text-align: center;
    color: #00d2ff;
}

.tool-item span {
    flex: 1;
    font-weight: 500;
    color: #e0e0e0;
}

.skill-level {
    width: 100px;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.skill-bar {
    height: 100%;
    background: linear-gradient(90deg, #00d2ff, #3a7bd5);
    border-radius: 3px;
    transition: width 0.8s ease;
    position: relative;
}

.skill-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Mobile optimization styles */
.mobile-device .project-card,
.mobile-device .experience-card {
    transform: none !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.mobile-device .project-card:active,
.mobile-device .experience-card:active {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2) !important;
}

    /* Enable background animations on mobile */
    @media (max-width: 768px) {
        /* Ensure background elements are visible */
        #particles-js {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            opacity: 1 !important; /* Full opacity for full effect */
        }
        
        .section-particles {
            position: absolute;
            width: 100%;
            height: 100vh;
            z-index: -1;
            pointer-events: none;
            opacity: 1 !important; /* Full opacity for full effect */
        }    /* Enable hero canvas on mobile */
    #hero-canvas {
        opacity: 0.7 !important;
        display: block !important;
    }
    
    /* Enable nebula and space effects on mobile */
    .nebula {
        opacity: 0.4;
        animation: nebula-move 25s ease infinite;
    }
    
    /* Enable gradient animations */
    body {
        animation: gradientFlow 20s ease infinite !important;
    }
    
    /* Enable background overlays with reduced intensity */
    .space-overlay {
        opacity: 0.4;
        background: radial-gradient(circle at center, 
            rgba(0,0,0,0) 0%, 
            rgba(0,0,0,0.3) 50%, 
            rgba(0,0,0,0.5) 100%);
    }
    
    .glass-overlay {
        opacity: 0.6;
        backdrop-filter: blur(3px);
    }
}

@media (max-width: 480px) {
    /* Slightly reduce effects on very small screens for performance */
    .mobile-device #particles-js {
        opacity: 0.9 !important; /* Slightly reduced but still full effect */
    }
    
    .mobile-device #particles-js-2,
    .mobile-device #particles-js-3 {
        opacity: 0.9 !important; /* Slightly reduced but still full effect */
        transform: scale(0.9) !important; /* Slightly smaller only for very small screens */
    }
    
    #hero-canvas {
        opacity: 0.6 !important;
    }
}

/* Disable or simplify animations on mobile */
.mobile-device .floating {
    animation: none !important;
    transform: none !important;
}

.mobile-device .hover-float:hover {
    transform: none !important;
}

/* Enable particles on mobile with better performance */
.mobile-device #particles-js {
    opacity: 1 !important; /* Increased from 0.5 */
    display: block !important;
}

/* Show secondary particles on mobile with full intensity */
.mobile-device #particles-js-2,
.mobile-device #particles-js-3 {
    display: block !important; /* Changed from none */
    opacity: 1 !important; /* Full opacity for full effect */
    transform: scale(1) !important; /* Normal scale */
}

/* Enable glowing effects on mobile */
.mobile-device .glowing-card {
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.4) !important;
    animation: glow 3s ease-in-out infinite alternate !important;
}

/* Optimize images for mobile */
.mobile-device .project-thumbnail {
    background-size: cover;
    background-position: center;
    transform: none !important;
}

/* Reduce animation complexity on mobile */
.mobile-device .gradient-text,
.mobile-device .accent-word {
    animation-duration: 0.5s !important;
    background-size: 100% !important;
}

/* Disable hover effects on mobile */
@media (max-width: 768px) {
    .project-card:hover,
    .experience-card:hover {
        transform: none !important;
    }
    
    .skill-badge:hover {
        transform: none !important;
    }
    
    /* Simplify modal for better performance */
    .project-modal .modal-content {
        max-width: 95% !important;
        padding: 15px !important;
    }
    
    /* Reduce animation complexity */
    .typing-text::after {
        animation: blink 1s step-end infinite !important;
    }
}

/* Optimize scroll performance */
.mobile-device {
    scroll-behavior: smooth !important;
}

/* Reduce shadow complexity for better rendering performance */
.mobile-device .project-card,
.mobile-device .experience-card,
.mobile-device .contact-form,
.mobile-device .contact-info {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

/* Project card optimizations for better scrolling performance */
.project-card {
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-font-smoothing: subpixel-antialiased;
}

/* Optimize project thumbnails for better performance */
.project-thumbnail {
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
    background-size: cover;
    background-position: center;
    height: 180px;
    margin-bottom: 1rem;
    border-radius: 0.5rem;
    position: relative;
    overflow: hidden;
}

/* Reduce complexity of animations during scroll */
@media (min-width: 769px) {
    .project-card:hover {
        transform: translateY(-10px) translateZ(0);
    }
    
    /* Use hardware acceleration for card hover effects */
    .project-card::before {
        will-change: opacity;
    }
}

/* Optimize project cards section for better scrolling */
#projects {
    contain: content;
}

/* Specific optimizations for project cards in the projects section */
#projects .project-card {
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-font-smoothing: subpixel-antialiased;
    contain: layout style paint;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Reduce transform complexity for project cards */
#projects .project-card:hover {
    transform: translateY(-5px) translateZ(0); /* Reduced from -10px */
    box-shadow: 0 10px 20px rgba(0, 210, 255, 0.2); /* Reduced from 0 20px 40px */
}

/* Optimize project thumbnails in the projects section */
#projects .project-thumbnail {
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
    background-size: cover;
    background-position: center;
    height: 180px;
    margin-bottom: 1rem;
    border-radius: 0.5rem;
    position: relative;
    overflow: hidden;
    contain: paint;
}

/* Optimize project cards layout */
#projects .grid {
    contain: layout style;
}

/* Reduce hover effect complexity */
#projects .project-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(0,210,255,0.05), rgba(142,45,226,0.05)); /* Reduced opacity */
    border-radius: inherit;
    z-index: -1;
    transition: opacity 0.3s ease;
    opacity: 0;
    will-change: opacity;
    pointer-events: none;
}

/* Optimize the entire projects section */
#projects {
    contain: content;
    position: relative;
    z-index: 1;
}

/* Optimize rendering during scroll */
@media (min-width: 768px) {
    #projects .container {
        contain: layout style;
    }
    
    /* Reduce animation complexity */
    #projects .project-card-inner {
        transition: transform 0.3s ease;
    }
    
    #projects .project-card:hover .project-card-inner {
        transform: rotateY(5deg) rotateX(2deg); /* Reduced from rotateY(10deg) rotateX(5deg) */
    }
}

/* Remove 3D tilt effect from project cards but keep hover effects */
#projects .project-card {
    transform-style: flat;
    perspective: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

#projects .project-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 210, 255, 0.2);
}

/* Remove 3D transforms from project card inner elements */
#projects .project-card-inner {
    transform-style: flat;
    transition: none;
}

#projects .project-card:hover .project-card-inner {
    transform: none;
}

/* Remove 3D transforms from project card content */
#projects .project-card .project-icon,
#projects .project-card .project-title,
#projects .project-card .project-description {
    transform: none !important;
}

/* Ensure glare is removed */
#projects .js-tilt-glare {
    display: none !important;
}

/* Add class for cards with tilt disabled but hover effects kept */
.no-tilt {
    transform-style: flat !important;
    perspective: none !important;
}

/* Fix mobile responsiveness issues */
@media (max-width: 768px) {
    /* Ensure logo pill is visible on mobile */
    .logo-pill {
        display: flex !important;
        position: fixed;
        top: 20px;
        left: 20px;
        transform: translateX(0);
        z-index: 1001;
        opacity: 1;
        visibility: visible;
    }

    /* Fix text overflow in project cards */
    .project-card {
        overflow: hidden;
        word-wrap: break-word;
    }

    /* Fix text overflow in personal project cards */
    .personal-project-card p {
        overflow: hidden;
        max-height: none;
        display: -webkit-box;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
    }

    /* Fix overlapping text in experience cards */
    .experience-card .flex.items-center.justify-between {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 5px;
    }

    /* Fix footer white glitching */
    footer {
        position: relative;
        background: rgba(10, 10, 10, 0.9);
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        overflow: hidden;
    }

    /* Fix contact section on mobile */
    .contact-container {
        flex-direction: column;
        gap: 30px;
    }

    /* Improve spacing in mobile menu */
    .nav-menu.active {
        padding: 80px 20px 20px;
    }

    /* Fix any text overflow in skill badges */
    .skill-badge {
        word-break: break-word;
    }

    /* Ensure body background is visible on mobile */
    body {
        background: linear-gradient(to bottom,
            #0a0a0a,
            #12121f 25%,
            #1a1a2e 50%,
            #12121f 75%,
            #0a0a0a 100%
        ) !important;
        background-attachment: fixed;
        background-size: 100% 400%;
        animation: gradientFlow 15s ease infinite;
        min-height: 100vh;
    }

    /* Make space background transparent on mobile to show body gradient */
    #space-background {
        background: transparent !important;
        opacity: 0.3;
    }

    /* Reduce opacity of overlays on mobile */
    .space-overlay {
        opacity: 0.3;
        background: radial-gradient(circle at center, 
            rgba(0,0,0,0) 0%, 
            rgba(0,0,0,0.2) 50%, 
            rgba(0,0,0,0.4) 100%);
    }

    .glass-overlay {
        opacity: 0.5;
    }

    .gradient-overlay {
        opacity: 0.3;
        background: radial-gradient(circle at center, transparent 0%, rgba(10, 10, 10, 0.3) 100%);
    }

    /* Ensure scene container doesn't override body background */
    #scene-container {
        background: transparent !important;
        opacity: 0.4;
    }

    /* Make section overlays more transparent on mobile */
    .section::before {
        opacity: 0.2;
    }

    /* Ensure motion background doesn't interfere */
    #motion-background {
        opacity: 0.3;
        background: transparent;
    }
}

/* Additional fixes for very small screens */
@media (max-width: 480px) {
    /* Fix text overlapping in project cards */
    .project-card h3 {
        font-size: 1.1rem;
        line-height: 1.3;
    }

    /* Fix project thumbnail spacing */
    .project-thumbnail {
        height: 150px;
    }

    /* Fix experience card spacing */
    .experience-card {
        padding: 15px !important;
    }

    /* Fix tech stack tags wrapping */
    .flex.flex-wrap.gap-2,
    .flex.flex-wrap.gap-3 {
        gap: 0.25rem !important;
    }

    /* Fix tech stack tag sizing */
    .px-3.py-1.bg-blue-900.bg-opacity-50.rounded-full.text-sm,
    .px-3.py-1.bg-pink-900.bg-opacity-50.rounded-full.text-sm,
    .px-3.py-1.bg-purple-900.bg-opacity-50.rounded-full.text-sm,
    .px-2.py-1.bg-gray-700.rounded-full.text-xs {
        padding: 0.15rem 0.5rem;
        font-size: 0.65rem;
        white-space: nowrap;
    }

    /* Fix contact form inputs */
    .contact-input {
        padding: 10px;
    }
}

/* Additional mobile fixes */
@media (max-width: 768px) {
    /* Fix white glitching in footer by forcing background color */
    footer {
        background-color: #0a0a0a !important;
        background-image: none !important;
    }

    /* Improve project card text display */
    .project-card p {
        font-size: 0.85rem;
        line-height: 1.4;
    }

    /* Fix project thumbnails */
    .project-thumbnail {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    /* Ensure proper spacing in mobile menu */
    .nav-menu.active .nav-link {
        margin: 10px 0;
        padding: 10px;
        text-align: center;
        width: 100%;
    }

    /* Fix social buttons in contact section */
    .social-buttons {
        justify-content: center;
    }

    /* Fix contact form on mobile */
    .contact-form form {
        width: 100%;
    }

    /* Fix contact input fields */
    .contact-input {
        width: 100%;
        margin-bottom: 15px;
    }
}

@media (max-width: 480px) {
    /* Further reduce overlay opacity on very small screens */
    .space-overlay,
    .glass-overlay,
    .gradient-overlay {
        opacity: 0.2;
    }

    #space-background,
    #scene-container {
        opacity: 0.2;
    }

    .section::before {
        opacity: 0.1;
    }
}

/* Fix very small screens */
@media (max-width: 360px) {
    /* Adjust font sizes for very small screens */
    .text-4xl {
        font-size: 1.75rem !important;
    }
    
    .text-2xl {
        font-size: 1.25rem !important;
    }
    
    /* Fix logo pill position on very small screens */
    .logo-pill {
        top: 15px;
        left: 15px;
        transform: scale(0.9);
    }
    
    /* Adjust navbar position */
    .navbar {
        top: 15px;
    }
}

/* Fix mobile-specific issues */
@media (max-width: 768px) {
    /* Fix project thumbnails not showing on mobile */
    .project-thumbnail {
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        height: 180px !important;
        width: 100% !important;
        display: block !important;
        position: relative !important;
        overflow: hidden !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Fix white flash when scrolling */
    body::after {
        content: "";
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100vh;
        background-color: #0a0a0a;
        z-index: -2;
    }
    
    /* Ensure background color consistency */
    body, html {
        background-color: #0a0a0a !important;
    }
    
    /* Fix footer white glitching */
    footer {
        background-color: #0a0a0a !important;
        background-image: none !important;
        position: relative;
        z-index: 1;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
    }
    
    /* Fix section transitions */
    .section {
        background-color: transparent !important;
        position: relative;
        z-index: 1;
    }
    
    /* Fix section background */
    .section::before {
        background: none !important;
    }
    
    /* Ensure personal project cards show thumbnails */
    .personal-project-card .project-thumbnail {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* Fix thumbnail display specifically for personal projects */
@media (max-width: 768px) {
    .personal-project-card {
        overflow: hidden !important;
    }
    
    #projects .project-thumbnail {
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
        background-size: cover !important;
        background-position: center !important;
    }
}

/* Fix thumbnails disappearing on mobile */
@media (max-width: 768px) {
    /* Ensure project thumbnails remain visible */
    .project-thumbnail {
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        height: 180px !important;
        min-height: 180px !important;
        width: 100% !important;
        display: block !important;
        position: relative !important;
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 1 !important;
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
    
    /* Prevent any hover effects that might hide thumbnails */
    .project-card:hover .project-thumbnail,
    .project-card:active .project-thumbnail,
    .project-card:focus .project-thumbnail {
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
        transform: none !important;
    }
    
    /* Fix for project cards to ensure thumbnails remain visible */
    .project-card {
        overflow: visible !important;
    }
    
    /* Prevent any animations or transitions that might affect visibility */
    .project-thumbnail::after,
    .project-thumbnail::before {
        display: none !important;
    }
    
    /* Ensure specific project thumbnails are visible */
    #projects .project-thumbnail,
    .personal-project-card .project-thumbnail,
    .professional-project-card .project-thumbnail {
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
    }
}

/* Add styles for the newly added projectModal */
.project-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    z-index: 9999;
    display: none;
    opacity: 0;
    transition: opacity 0.4s ease, background 0.4s ease;
}

.project-modal.active {
    display: flex;
    opacity: 1;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.9);
    /* Apply backdrop-filter only after animation completes */
    animation: modalFadeIn 0.4s ease forwards;
}

.project-modal .modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.project-modal .modal-content {
    background: linear-gradient(165deg, 
        rgba(26, 26, 26, 0.98), 
        rgba(13, 13, 13, 0.95)
    );
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 30px;
    position: relative;
    width: 92%;
    max-width: 1400px;
    height: 92vh;
    margin: auto;
    overflow: hidden;
    transform: translateY(30px) scale(0.95);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 25px 50px -12px rgba(0, 0, 0, 0.6),
        0 0 50px rgba(0, 210, 255, 0.1);
    z-index: 10000;
}

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

.project-modal .modal-body {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 45px;
    padding: 45px;
    height: 100%;
    position: relative;
}

.project-modal .modal-close {
    position: absolute;
    top: 25px;
    right: 25px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 10;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.project-modal .modal-close:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: rotate(90deg);
    box-shadow: 0 0 20px rgba(0, 210, 255, 0.2);
}

.project-modal .gallery-section {
    position: relative;
}

.project-modal .gallery-main {
    position: relative;
    width: 100%;
    height: var(--gallery-height-desktop);
    border-radius: var(--gallery-border-radius);
    overflow: hidden;

    transition: all 0.4s ease;
}

.project-modal .gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 2;
}

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

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



.project-modal .gallery-thumbnails {
    display: flex;
    gap: 18px;
    margin-top: 25px;
    padding: 12px 0;
    padding-left: 5px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.project-modal .gallery-thumbnail {
    width: var(--thumbnail-size);
    height: var(--thumbnail-height);
    border-radius: calc(var(--gallery-border-radius) / 2);
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    position: relative;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.project-modal .gallery-indicators {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
}

.project-modal .gallery-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
}

.project-modal .gallery-indicator.active {
    background: rgba(0, 210, 255, 0.7);
    transform: scale(1.2);
}

/* Mobile adjustments */
@media (max-width: 992px) {
    .project-modal .modal-body {
        grid-template-columns: 1fr;
        padding: 30px;
        gap: 30px;
        height: 100%;
        overflow-y: auto;
    }

    .project-modal .gallery-main {
        height: var(--gallery-height-mobile);
    }
    
    .project-modal .gallery-nav {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    .project-modal .modal-content {
        width: 100%;
        height: 100%;
        border-radius: 0;
        margin: 0;
    }
    
    .project-modal .modal-body {
        padding: 20px;
        gap: 20px;
        padding-bottom: 100px;
    }
    
    .project-modal .gallery-thumbnails {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
        gap: 8px;
    }
}

.project-modal .gallery-main iframe {
    border: none;
    width: 100%;
    height: 100%;
    border-radius: var(--gallery-border-radius);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.project-modal .video-thumbnail {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    height: 100%;
    position: relative;
    border-radius: calc(var(--gallery-border-radius) / 2);
}

.project-modal .video-thumbnail::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(248, 4, 4, 0.5), rgba(0, 0, 0, 0.7));
    border-radius: calc(var(--gallery-border-radius) / 2);
    z-index: 0;
}

.project-modal .video-thumbnail i {
    color: #fff;
    font-size: 2rem;
    
    z-index: 1;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
    transition: transform 0.3s ease, color 0.3s ease;
}

.project-modal .video-thumbnail:hover i {
    transform: scale(1.2);
    color: #ff0000;
}

 /* Add this CSS to ensure thumbnails are responsive */
    @media (max-width: 768px) {
        .project-modal .gallery-thumbnails {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); /* Adjusts the number of columns based on screen size */
            gap: 8px; /* Space between thumbnails */
            margin-top: 12px;
            padding: 0;
            overflow: visible; /* Ensure overflow is visible */
        }

        .project-modal .gallery-thumbnail {
            width: 100%; /* Ensure each thumbnail takes full width */
            height: auto; /* Maintain aspect ratio */
            border-radius: 8px; /* Adjust border radius */
        }
    }

    @media (max-width: 900px) {
        .nav-menu {
            height: auto; /* Set height to auto for mobile view */
            max-height: 80vh; /* Optional: you can keep this if you want to limit the height */
        }
    }

/* Enhanced Project Modal Animations */
.project-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    z-index: 9999;
    display: none;
    opacity: 0;
    transition: opacity 0.4s ease, backdrop-filter 0.4s ease, background 0.4s ease;
}

.project-modal.active {
    display: flex;
    opacity: 1;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(15px);
    animation: modalFadeIn 0.4s ease forwards;
}

@keyframes modalFadeIn {
    from {
        background: rgba(0, 0, 0, 0);
    }
    to {
        background: rgba(0, 0, 0, 0.9);
        backdrop-filter: blur(15px);
    }
}

.project-modal .modal-content {
    background: linear-gradient(165deg, 
        rgba(26, 26, 26, 0.98), 
        rgba(13, 13, 13, 0.95)
    );
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 30px;
    position: relative;
    width: 92%;
    max-width: 1400px;
    height: 92vh;
    margin: auto;
    overflow: hidden;
    transform: translateY(50px) scale(0.95);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
    box-shadow: 
        0 25px 50px -12px rgba(0, 0, 0, 0.6),
        0 0 50px rgba(0, 210, 255, 0.1);
    z-index: 10000;
}

.project-modal.active .modal-content {
    transform: translateY(0) scale(1);
    opacity: 1;
    animation: contentPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes contentPop {
    0% {
        transform: translateY(50px) scale(0.95);
        opacity: 0;
    }
    70% {
        transform: translateY(-5px) scale(1.01);
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* Animate modal close */
.project-modal.closing {
    opacity: 0;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    transition: opacity 0.3s ease, backdrop-filter 0.3s ease, background 0.3s ease;
}

.project-modal.closing .modal-content {
    transform: translateY(20px) scale(0.95);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Animate gallery thumbnails when modal opens */
.project-modal.active .gallery-thumbnail {
    opacity: 0;
    transform: translateY(20px);
    animation: thumbFadeIn 0.3s ease forwards;
}

.project-modal.active .gallery-thumbnail:nth-child(1) { animation-delay: 0.1s; }
.project-modal.active .gallery-thumbnail:nth-child(2) { animation-delay: 0.15s; }
.project-modal.active .gallery-thumbnail:nth-child(3) { animation-delay: 0.2s; }
.project-modal.active .gallery-thumbnail:nth-child(4) { animation-delay: 0.25s; }
.project-modal.active .gallery-thumbnail:nth-child(5) { animation-delay: 0.3s; }
.project-modal.active .gallery-thumbnail:nth-child(6) { animation-delay: 0.35s; }

@keyframes thumbFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Slight pulse animation for the modal close button */
.project-modal.active .modal-close {
    animation: pulseFade 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
}

@keyframes pulseFade {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    70% {
        opacity: 1;
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Simple Tools Grid Styles */
.simple-tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1.5rem;
    padding: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

.simple-tool-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background: linear-gradient(145deg, rgba(26, 26, 26, 0.6), rgba(13, 13, 13, 0.8));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    transition: all 0.3s ease;
    cursor: pointer;
    text-align: center;
}

.simple-tool-item:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.simple-tool-item i {
    font-size: 2.5rem;
    color: #00d2ff !important;
}

.simple-tool-item .tech-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.simple-tool-item span {
    font-weight: 500;
    color: #e0e0e0;
    font-size: 0.9rem;
}

/* About Section Responsive Styles */
@media (max-width: 1024px) {
    .about-profile-container {
        width: 240px;
        height: 240px;
    }
    
    .orbit-ring-1 { width: 260px; height: 260px; }
    .orbit-ring-2 { width: 300px; height: 300px; }
    .orbit-ring-3 { width: 340px; height: 340px; }
    .orbit-ring-4 { width: 380px; height: 380px; }
    
    .about-profile-wrapper {
        width: 240px;
        height: 240px;
    }
}

@media (max-width: 768px) {
    .about-profile-container {
        width: 220px;
        height: 220px;
        margin: 1rem auto;
    }
    
    .orbit-ring-1 { width: 240px; height: 240px; }
    .orbit-ring-2 { width: 270px; height: 270px; }
    .orbit-ring-3 { width: 300px; height: 300px; }
    .orbit-ring-4 { width: 330px; height: 330px; }
    
    .about-profile-wrapper {
        width: 220px;
        height: 220px;
    }
    
    .clean-skills-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .about-social-links {
        bottom: -60px;
        gap: 0.8rem;
    }
    
    .about-social-link {
        width: 3rem;
        height: 3rem;
        font-size: 1.2rem;
    }
}

@media (max-width: 480px) {
    .about-profile-container {
        width: 200px;
        height: 200px;
        margin: 1rem auto;
    }
    
    .orbit-ring-1 { width: 220px; height: 220px; }
    .orbit-ring-2 { width: 250px; height: 250px; }
    .orbit-ring-3 { width: 280px; height: 280px; }
    .orbit-ring-4 { width: 310px; height: 310px; }
    
    .about-profile-wrapper {
        width: 200px;
        height: 200px;
    }
    
    .orbit-electron {
        width: 8px;
        height: 8px;
    }
    
    .about-social-links {
        bottom: -55px;
        gap: 0.6rem;
    }
    
    .about-social-link {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1rem;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .simple-tools-grid {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 1rem;
        padding: 1rem;
    }
    
    .simple-tool-item {
        padding: 0.75rem;
    }
    
    .simple-tool-item i {
        font-size: 2rem;
        color: #00d2ff !important;
    }
    
    .simple-tool-item .tech-logo {
        width: 32px;
        height: 32px;
    }
}

/* Animated Calendly Quick Chat Button */
.calendly-badge-widget {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    z-index: 1000 !important;
    opacity: 0;
    transform: translateY(100px) scale(0.8);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.calendly-badge-widget.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.calendly-badge-widget.hide {
    opacity: 0;
    transform: translateY(100px) scale(0.8);
}

/* Override Calendly default styles */
.calendly-badge-widget .calendly-badge-content {
    background: linear-gradient(135deg, #00d2ff, #3a7bd5) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 60px !important;
    height: 60px !important;
    box-shadow: 0 8px 25px rgba(0, 210, 255, 0.4) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
}

.calendly-badge-widget .calendly-badge-content::before {
    content: '\f274'; /* FontAwesome calendar-plus (schedule) icon */
    font-family: 'FontAwesome' !important;
    font-size: 24px !important;
    color: white !important;
    font-weight: normal !important;
    position: relative !important;
    z-index: 2 !important;
}

.calendly-badge-widget .calendly-badge-content:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 12px 35px rgba(0, 210, 255, 0.6) !important;
}

.calendly-badge-widget .calendly-badge-content:hover::after {
    transform: scale(1.5) !important;
    opacity: 0 !important;
}

/* Pulse animation */
@keyframes pulse-glow {
    0% {
        box-shadow: 0 8px 25px rgba(0, 210, 255, 0.4), 0 0 0 0 rgba(0, 210, 255, 0.7);
    }
    50% {
        box-shadow: 0 8px 25px rgba(0, 210, 255, 0.4), 0 0 0 10px rgba(0, 210, 255, 0);
    }
    100% {
        box-shadow: 0 8px 25px rgba(0, 210, 255, 0.4), 0 0 0 0 rgba(0, 210, 255, 0);
    }
}

.calendly-badge-widget .calendly-badge-content {
    animation: pulse-glow 3s ease-in-out infinite !important;
}

/* Bounce animation on hover */
@keyframes bounce-in {
    0% {
        transform: scale(0.8);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

.calendly-badge-widget .calendly-badge-content:hover {
    animation: bounce-in 0.6s ease-out !important;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .calendly-badge-widget {
        bottom: 15px !important;
        right: 15px !important;
    }
    
    .calendly-badge-widget .calendly-badge-content {
        width: 55px !important;
        height: 55px !important;
    }
    
    .calendly-badge-widget .calendly-badge-content::before {
        font-size: 20px !important;
    }
}

/* Remove body background only on mobile for particles visibility */
@media (max-width: 768px) {
    body {
        background: transparent !important;
    }
    
    /* Prevent horizontal scrolling on mobile */
    body, html {
        overflow-x: hidden !important;
        max-width: 100vw;
        width: 100%;
    }
    
    /* Ensure all containers fit within viewport */
    * {
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* Ensure particles are fully visible on mobile */
    #particles-js {
        opacity: 1 !important;
        z-index: -1 !important;
        display: block !important;
        visibility: visible !important;
    }
    
    /* Ensure section particles are visible */
    .section-particles {
        opacity: 0.8 !important;
        display: block !important;
        visibility: visible !important;
    }
    
    /* Make sure no background elements block particles */
    .space-overlay,
    .glass-overlay,
    .gradient-overlay {
        opacity: 0.1 !important;
    }
    
    #space-background,
    #scene-container,
    #motion-background {
        opacity: 0.1 !important;
        background: transparent !important;
    }
    
    /* Ensure sections don't have solid backgrounds */
    .section {
        background: transparent !important;
    }
    
    .section::before {
        opacity: 0.05 !important;
    }
}