.navbar {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0;
    position: fixed;
    top: 1vh;
    left: 0;
    background: none;
    box-shadow: none;
    z-index: 2000;
}

.navbar ul {
    background: rgba(255, 245, 232, 0.85);
    border-radius: 1.0rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    list-style-type: none;
    margin: 0 auto;
    padding: 0.5rem 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.25rem; 
    max-width: 1100px; 
    width: calc(100% - 40px);
}

.navbar li {
    margin: 0; 
    font-family: 'IBM Plex Sans Condensed';
}

.navbar li {
    margin: 0;
    font-family: 'IBM Plex Sans Condensed';
    transition: transform 160ms ease;
}

.navbar li:hover {
    transform: scale(1.03); 
}

.navbar li:first-child:hover {
    transform: none;
}

.navbar a {
    text-decoration: none;
    color: rgb(16,71,85);
    font-weight: bold;
    font-size: 1.1rem;
    transition: color 0.15s ease, transform 0.12s ease;
    display: inline-block;
    padding: 0.35rem 0.85rem;
    background: transparent; 
    border-radius: 0;
}

.navbar a:hover {
        color: rgba(44, 68, 94, 0.86);
}

.nav-text {
    text-decoration: none;
    color: rgba(255, 255, 255, 1);
    font-weight: bold;
    font-size: 1.1rem;
    transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
    display: inline-block;
    padding: 0.35rem 0.85rem;
    background: rgba(44, 68, 94, 0.86);
    border-radius: 0.6rem;
}

.nav-text:hover {
    background: rgba(34, 54, 76, 0.93);
    transform: translateY(-1px); 
    transition: background 160ms ease, transform 160ms ease;
}

.navbar.active ul {
    display: flex;
}

.navbar ul { display: flex; }

.navbar.mobile-device ul,
body.is-mobile-device .navbar ul {
    padding: 0.4rem 0.75rem;
    gap: 0.4rem;
    width: calc(100% - 16px);
}

.navbar.mobile-device a,
body.is-mobile-device .navbar a {
    font-size: 0.82rem;
    padding: 0.25rem 0.45rem;
}

.navbar.mobile-device li,
body.is-mobile-device .navbar li {
    font-size: 0.82rem;
}

.navbar.mobile-device li:first-child img,
body.is-mobile-device .navbar li:first-child img {
    height: 28px;
    width: auto;
}

.navbar.mobile-device.small-screen ul,
body.is-mobile-device.is-small-screen .navbar ul {
    padding: 0.3rem 0.5rem;
    gap: 0.2rem;
}

.navbar.mobile-device.small-screen a,
body.is-mobile-device.is-small-screen .navbar a {
    font-size: 0.72rem;
    padding: 0.2rem 0.3rem;
}

@media (max-width: 600px) {
    .navbar ul {
        padding: 0.4rem 0.75rem;
        gap: 0.4rem;
        width: calc(100% - 16px);
    }

    .navbar a {
        font-size: 0.82rem;
        padding: 0.25rem 0.45rem;
    }

    .navbar li {
        font-size: 0.82rem;
    }

    .navbar li:first-child img {
        height: 28px;
        width: auto;
    }
}

@media (max-width: 400px) {
    .navbar ul {
        padding: 0.3rem 0.5rem;
        gap: 0.2rem;
    }

    .navbar a {
        font-size: 0.72rem;
        padding: 0.2rem 0.3rem;
    }
}