#navbar.nav-loading {    
    background-color: var(--navbar-bg); /* or a neutral color */
    opacity: 0.5;
}

.nav-logo {
    height: 32px;
    vertical-align: middle;
    margin-right: 0.4rem;
    border-radius: 4px;
}



/* Navbar Container */
.navbar {
    background-color: var(--navbar-bg);
    padding: 1rem 2rem;
    margin-bottom: 1rem;
    border-radius: 0.75rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    border-top-left-radius: 0; /* No rounding on top left */
    border-top-right-radius: 0; /* No rounding on top right */
}

    /* Navbar Links */
    .navbar a {
        position: relative;
        text-decoration: none;
        color: var(--text-color);
        font-weight: 500;
        font-size: 1rem;
        padding: 0.25rem 0.5rem;
        transition: color 0.3s ease;
    }

        /* Fancy Underline Animation on Hover */
        .navbar a::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -4px;
            width: 100%;
            height: 2px;
            background-color: var(--accent-color);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.3s ease;
        }

        .navbar a:hover {
            color: var(--accent-color);
        }

            .navbar a:hover::after {
                transform: scaleX(1);
            }

/* Ensure navbar wraps on small screens */
.navbar {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
}


/* Media Queries for small screens */
@media (max-width: 600px) {
    .navbar a {
        display: block;
        margin: 0.5rem 0;
    }
}

nav a.active {
    background-color: var(--accent-color, #008080); /* or any color you like */
    color: white;
    border-radius: 6px;
    padding: 0.3rem 0.6rem;
    transition: background-color 0.3s ease;
}

    nav a.active:hover {
        background-color: #006666;
        color: white;
    }