.navbar-nav li {
    margin: 0 15px;
}

/* Desktop (expanded) navbar: spread items to container edges */
@media (min-width: 1200px) {
    .navbar-expand-xl .navbar-nav {
        width: 100%;
        justify-content: space-between;
    }

    .navbar-expand-xl .navbar-nav li {
        margin: 0;
    }
}

.navbar-nav .nav-link:hover {
    color: white;
}

.navbar-nav .nav-item {
    position: relative;
}

.nav-active::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0; /* Jarak dari bawah item navbar */
    height: 2px; /* Tinggi garis bawah */
    width: 100%; /* Lebar garis bawah */
    background-color: white; /* Warna garis bawah */
    transition: width 0.3s ease; /* Transisi untuk garis bawah */
}

/* Hover efek: garis bawah meluas dari kiri ke kanan */
.navbar-nav .nav-item:hover::after {
    width: 100%;
    /* Membuat garis bawah memanjang penuh saat hover */
}

/* Navbar auth buttons */
.navbar-auth {
    white-space: nowrap;
}

.navbar-auth .btn {
    border-radius: 20px;
    font-size: 12px;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.navbar-auth .btn-light {
    color: #0059ab;
}

.navbar-auth .btn-light:hover {
    background-color: #e9ecef;
    color: #003d75;
}

/* Match navbar-expand-xl collapse breakpoint (<1200px) */
@media (max-width: 1199.98px) {
    .navbar .navbar-nav {
        margin-top: 5px;
        background-color: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(50px);
        width: 100%;
    }

    .navbar-auth {
        margin-top: 10px;
        justify-content: center;
    }
}

/* Elemen yang sebelumnya memakai atribut style inline */
.navbar-logo {
    height: 40px;
}

.navbar-nav li.navbar-auth-item {
    margin-top: 3px;
}