/* Navigation Links */
.nav-links {
    display: flex;
    gap: 2rem;
}

.nav-link {
    text-decoration: none;
    color: var(--bamboo-green-dark);
    font-weight: 500;
    font-size: 1.1rem;
    position: relative;
    transition: color 0.3s ease;
}

.nav-link:hover, .nav-link.active {
    color: var(--bamboo-green-medium);
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 0;
    background-color: var(--bamboo-green-medium);
    transition: width 0.3s ease;
}

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

@media (max-width: 768px) {
    .nav-links {
        display: none; /* For simplicity in this iteration, or use a hamburger menu */
    }
    /* Simple mobile fallback: show links below logo or similar? 
       For now, let's keep it simple. If user asks for mobile menu, we add it.
       Actually, let's make them visible but smaller or stacked if needed.
    */
    .glass-nav {
        flex-direction: column;
        gap: 1rem;
    }
    .nav-links {
        display: flex;
        gap: 1rem;
        font-size: 0.9rem;
    }
}