.nav-link {
            position: relative;
            padding-bottom: 4px;
            overflow: hidden;
        }
        .nav-link::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 2px;
            background-color: #38bdf8;
            bottom: 0;
            left: -100%;
            transition: left 0.3s ease-in-out;
        }
        .nav-link:hover::after {
            left: 0;
        }
        .nav-link:hover {
            color: #38bdf8;
            transform: translateY(-1px);
        }
        .nav-link.active {
            color: #f59e0b;
            font-weight: 600;
        }
        .nav-link.active::after {
            left: 0;
            background-color: #f59e0b;
        }
        /* Enhanced navbar */
        #navbar {
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            background: rgba(17, 24, 39, 0.8);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.3s ease;
        }
        #navbar.scrolled {
            background: rgba(17, 24, 39, 0.95);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        }
        .navbar-logo {
            background: linear-gradient(135deg, #06b6d4, #f59e0b);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-weight: 800;
            letter-spacing: 1px;
        }
        .mobile-menu-btn {
            transition: all 0.3s ease;
        }
        .mobile-menu-btn:hover {
            transform: scale(1.1);
        }
        .mobile-menu-btn.active {
            transform: rotate(90deg);
        }
        .navbar-fixed {
            background-color: white;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: background-color 0.3s ease, box-shadow 0.3s ease;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
        }
        .skill-card {
            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
        }
        .skill-card:hover {
            transform: scale(1.05);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }
        /* Add safe top spacing for sections on this page too */
        section { scroll-margin-top: 6rem; }
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 10000;
        }
        .loading-text {
            font-size: 2rem;
            color: #38bdf8;
            font-weight: bold;
        }
   
    .nav-link {
        position: relative;
        padding-bottom: 4px;
        overflow: hidden;
    }
    .nav-link::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 2px;
        background-color: #38bdf8;
        bottom: 0;
        left: -100%;
        transition: left 0.3s ease-in-out;
    }
    .nav-link:hover::after {
        left: 0;
    }
    .header-text {
        font-size: 2rem;
        font-weight: bold;
        color: #38bdf8;
        text-align: center;
        height: 50px;
        overflow: hidden;
        position: relative;
    }
    /* Style de la navbar fixée avec fond blanc */
    .navbar-fixed {
        background-color: white;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        transition: background-color 0.3s ease, box-shadow 0.3s ease;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
    }