.navbar-custom {
    background: linear-gradient(90deg, rgba(5, 0, 92, 1) 0%, rgba(0, 23, 63, 1) 50%, rgba(0, 0, 0, 1) 100%) !important;
    transition: background-color 0.3s ease;
}

.navbar-custom.scrolled {
    background-color: rgba(0, 19, 38, 0.4);
}

.navbar-custom .navbar-nav .nav-link {
    color: var(--text-color);
}

.navbar-custom .navbar-nav .nav-link:hover {
    color: var(--accent-color-start);
}

.navbar-toggler {
    border: none !important;
}

.navbar-toggler-icon {
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"%3E%3Cpath stroke="rgba(255,215,0,.5)" stroke-width="2" d="M5 7h20M5 15h20M5 23h20" /%3E%3C/svg%3E');
}

.navbar-collapse {
    transition: opacity 0.3s ease;
}

.navbar {
    background: linear-gradient(90deg, rgba(5, 0, 92, 1) 0%, rgba(0, 23, 63, 1) 50%, rgba(0, 0, 0, 1) 100%);

    /* Warna latar belakang penuh */
    /* padding: 20px 0px; */
    transition: background-color 0.5s ease, padding 0.3s ease;
}

.navbar.shrink {
    background: linear-gradient(90deg, rgba(5, 0, 92, 1) 0%, rgba(0, 23, 63, 1) 50%, rgba(0, 0, 0, 1) 100%);
    /* Warna latar belakang dengan opacity berkurang */
    padding: 0px 0px;
    /* Kurangi padding saat scroll */
}

.navbar-custom.shrink {
    background: linear-gradient(90deg, rgba(5, 0, 92, 1) 0%, rgba(0, 23, 63, 1) 50%, rgba(0, 0, 0, 1) 100%);
    /* Warna latar belakang dengan opacity berkurang */
    padding: 0px 0px;
    /* Kurangi padding saat scroll */
}

.navbar.shrink .nav-link {
    color: #fff !important;
}


.navbar-brand {
    font-size: 1.3rem;
    font-weight: bold;
    color: #fff;
}

.nav-link {
    position: relative;
    font-size: .85rem;
    /* color: #fff; */
    color: var(--text-color) !important;
    font-weight: bolder;
    margin-right: 20px;
    transition: color 0.5s ease;

}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    background-color: var(--accent-color);
    left: 0;
    bottom: -1px;
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 250px;
    background: linear-gradient(144deg, rgba(5, 0, 92, 1) 0%, rgba(0, 23, 63, 1) 50%, rgba(0, 0, 0, 1) 100%) !important;
    color: var(--text-color);
    padding: 1rem;
    transform: translateX(-250px);
    transition: transform 0.3s ease;
    z-index: 1050;
}

.sidebar.show {
    transform: translateX(0);
}

.sidebar .nav-link {
    color: var(--text-color) !important;
}

.sidebar .nav-link:hover {
    color: var(--accent-color-start);
}

.sidebar .nav-item {
    margin-bottom: 1rem;
}

.sidebar-header {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.sidebar .close-btn {
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 1.5rem;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
}



.hover-links-navbar {
    position: relative;
    padding: 0 0px;
    color: white;
    /* Optional: adds some space around the words */
    transition: color 0.3s ease;
}

.hover-links-navbar::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: currentColor;
    left: 0;
    bottom: -3px;
    /* Adjust the position of the underline */
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease;
}

.hover-links-navbar:hover::after {
    transform: scaleX(1);
}

.hover-links-navbar:hover {
    color: var(--accent-color);
    /* Optional: change the text color on hover */
}

@media (max-width: 900px) {

    .navbar-custom {
        padding: 30px 0px;
    }

    .navbar-custom.shrink {
        background: linear-gradient(90deg, rgba(5, 0, 92, 1) 0%, rgba(0, 23, 63, 1) 50%, rgba(0, 0, 0, 1) 100%);
        background-color: rgba(var(--primary-color-rgb), 1);
        /* Warna latar belakang dengan opacity berkurang */
        padding: 30px 0px;
        /* Kurangi padding saat scroll */
    }

    /* .navbar {
        padding: 30px 0px;
    } */

    .navbar-nav {
        display: none;
    }

    .navbar-toggler {
        display: block;
    }

    .navbar-custom .navbar-toggler {
        position: absolute;
        left: 10px;
        top: 10px;

        /* Tambahkan top untuk menyesuaikan padding atas */
    }

    .navbar-hamburger {
        color: var(--accent-color);
    }




    .navbar-custom .navbar-brand {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 10px;
        /* Atur top untuk menghindari berantakan */
    }
}