.nav-container {

    display: flex;

    justify-content: space-between;

    align-items: center;

    background-color: var(--blue);

    padding: 10px 20px;

    color: white;

}



.nav-logo {

    font-size: 24px;

    font-weight: bold;

    color: white;

    text-decoration: none;

}



.nav-links {

    display: flex;

    gap: 20px;

}



.nav-link {

    color: white;

    text-decoration: none;

    padding: 10px 15px;

    border-radius: 5px;

    transition: color 0.3s;

}



.nav-link:hover {

    color: #ccc;

}



.nav-button {

    background-color: white;

    color: var(--blue);

    border: 2px solid white;

}



.nav-button:hover {

    background-color: var(--blue);

    color: white;

}



@media (max-width: 768px) {

    .nav-links {

        flex-direction: column;

        gap: 10px;

    }



    .nav-link {

        padding: 10px;

    }

}