.nav-item {
    font-family: "SF UI Text", sans-serif;
    transition: transform 0.3s ease;
    margin-left: 1rem;
    margin-right: 1rem;
}

.nav-item:hover {
    transform: translateY(-3px);
}

.nav-item .active {
    font-weight: bold;
    color: #06c0f9 !important;
}

.navbar {
    animation: fadeIn 1.5s ease-out;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(10.2px);
    -webkit-backdrop-filter: blur(10.2px);
}


@media (min-width: 360px) and (max-width: 478px) {
    .navbar-brand img{
        max-width: 60%;
    }
}