.navbar{

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 9999;

    background: rgba(10, 15, 25, 0.75);

    backdrop-filter: blur(20px);

    border-bottom: 1px solid rgba(255,255,255,.08);

    transition: .35s ease;

}

.navbar-container{

    height: 80px;

    display: flex;

    justify-content: space-between;

    align-items: center;

}

.logo{

    font-size: 1.5rem;

    font-weight: 700;

    color: var(--white);

    letter-spacing: .5px;

}

.logo span{

    color: var(--primary-color);

}

.nav-links{

    display: flex;

    align-items: center;

    gap: 40px;

}

.nav-links li{

    list-style: none;

}

.nav-links a{

    position: relative;

    color: var(--text-secondary);

    font-size: .95rem;

    font-weight: 500;

    transition: .3s ease;

}

.nav-links a:hover{

    color: var(--white);

}

.nav-links a::after{

    content: "";

    position: absolute;

    left: 0;

    bottom: -8px;

    width: 0;

    height: 2px;

    background: var(--primary-color);

    transition: .3s;

}

.nav-links a:hover::after{

    width: 100%;

}

.menu-toggle{

    display: none;

    border: none;

    background: transparent;

    color: var(--white);

    font-size: 1.6rem;

    cursor: pointer;

}

.navbar.scrolled{

    background: rgba(7,12,20,.95);

    box-shadow: 0 10px 30px rgba(0,0,0,.35);

}