/* Gaya default navbar */
#navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    transition: background-color 0.3s, box-shadow 0.3s;
    background-color: transparent;  /* Awalnya transparan */
}

/* Gaya saat di-scroll */
#navbar.scrolled {
    background-color: white !important; /* Background putih sepenuhnya saat di-scroll */
    box-shadow: 0 4px 2px -2px gray; /* Tambahkan bayangan */
}

/* Ubah warna teks saat di-scroll */
#navbar.scrolled .bookmark-wrapper p {
    color: black !important; /* Ubah teks menjadi hitam saat di-scroll */
}

#navbar.scrolled .user-name,
#navbar.scrolled .user-status,
#navbar.scrolled .user-log {
    color: black !important; /* Ubah warna nama dan status pengguna menjadi hitam */
}

#navbar.scrolled .user-log {
    border: 1px solid black !important;
}
#navbar.scrolled .user-log:hover {
    color: black !important;
}

/* Teks warna putih untuk keadaan default (belum di-scroll) */
.bookmark-wrapper p,
.user-name,
.user-status {
    color: white !important;
}

.bab {
    margin-top: -100px !important;
}





@media (max-width: 768px) {

    body {
        box-sizing: border-box !important;
        margin-right: 0 !important;
    }

    .container {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;


    }

    .navbar-header {
        position: fixed !important;
        top: 0 !important;
        z-index: 99999 !important;
    }

    .navbar-container {
        padding: 5px 5px !important;
        margin: 5px 5px !important;


    }

    .container img {
        margin-right: 0px !important;
    }

    .navbar-nav {
        margin-left: auto !important;
        display: flex !important;
        align-items: center !important;

    }

    .navbar-nav .nav-item .btn {
        padding: 0.4rem 1rem !important;
    }

    .avatar {
        margin-left: auto !important;
    }

    .container-xxl {
        display: flex !important;
        margin-top: 80px !important;
        padding: 0 !important;

    }

    .container-xxl .col-xl-6 {
        width: 400px !important;
        text-align: left !important;
    }

    .container-xxl .col-xl-6 p:nth-child(1) {
        font-size: 15px;
    }
    .container-xxl .col-xl-6 p:nth-child(3) {
        font-size: 13px;
    }

    .dropdown-menu {
        max-width: 100px;
        margin-left: 320px;
    }

    .content-wrapper {
        margin-top: -70px !important;
    }

    .col-md-3 {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    }

    .card {
        width: 350px !important;
    }

    #dashboard-ecommerce {
        margin-top: 100px !important;


    }

    .content-body {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .col-xl-6 {
        margin-top: 10px !important;
    }

    .col-md-6:first-child {
        order: 1;
    }

    .col-md-6:last-child {
        order: 3;
    }

    /* Mengatur tampilan iframe agar lebih sesuai di mobile */
    iframe {
        width: 420px;

    }

    /* Menyusun card secara vertikal

    /* Mengatur margin dan padding untuk tampilan kecil */
    .content-wrapper.container-xl.bab {
        padding: 0 !important;
        margin-top: -45px !important;
    }

    .row.match-height {
        margin: 0 !important;
        padding: 0 15px !important;
    }

    .col-xl-6, .col-md-6 {
        margin-top: 20px !important;
    }

    .container-xxl {
        display: flex !important;
        max-width: 100% !important;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap !important;
        padding: 0 !important;
        margin: 0 !important;

    }

    #content-contact {
        display: flex !important;
        max-width: 100% !important;
        align-items: center !important;
        justify-content: center !important;
        flex-wrap:  wrap !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    #content-contact h1 {
        margin-top: 12px;
    }

    #persyaratan {
        margin: auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        max-width: 400px !important;

    }

    iframe {
        max-width: 350px !important;
        overflow: hidden !important;

    }

    .content-wrapper.container-xl.my-3.contact {
        overflow: hidden;
    }


    .col-6 {
        display: flex !important;
        width: 100% !important;
        align-items: center !important;
        justify-content: center !important;
        margin: auto !important;

    }


    #row-res {
        display: flex !important;
        flex-direction: column !important; /* Atur card menjadi kolom vertikal */
    }



    .col-md-6 {
        width: 100% !important; /* Pastikan card mengambil lebar penuh pada layar kecil */
    }

    .card {
        margin-bottom: 15px; /* Beri ruang antar card */
    }

    /* Hapus margin-top tambahan yang ada pada card kedua */
    .card.py-2.mt-5 {
        margin-top: 0 !important;
    }

    .col-xl-6.col-md-6.col-12.my-auto {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .footer {
        margin-bottom: 5px !important;
    }

    /* Tambahkan pengaturan spesifik lainnya untuk elemen-elemen yang perlu disesuaikan di mobile */
}