/* --- Navigation Bar Styles --- */
.navbar {
    overflow: hidden;

    border-bottom: 1px solid var(--light_gray, rgba(0, 0, 0, 0.10));
    background: var(--white, #FFF);
}

.nav-links-container {
    display: flex;
    justify-content: left;
    margin: 0 auto; 
    width: 90%;
    max-width: 73rem;
    padding-bottom: 0.5625rem;
}

/* Style the links themselves */
.navbar a {
    text-align: center;
    text-decoration: none;

    display: flex;
    padding: 1rem 1.3125rem;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;

    color: var(--dark_gray, #666);
    font-family: var(--font-family-font);
    font-size: var(--font-size-sm);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.navbar a.active {
    border-bottom: 3px solid var(--yellow);
}

.navbar a:hover {
    background-color: #ddd;
    color: black;
}

/* --- Media Query for Mobile Responsiveness --- */
@media screen and (max-width: 600px) {
    .nav-links-container {
        flex-direction: column;
    }
    
    .navbar a {
        flex-grow: initial;
        text-align: left;
    }
}