body {
    font-family: 'Poppins', sans-serif;

}


@media (max-width: 750px) {
    /* Style untuk sidebar saat ditutup */
    .mobile-style {
        left: 8px !important;
        /* width: 20% !important; Lebar sidebar kecil saat ditutup */
        z-index: 1000;
    }

    /* Memperbesar sidebar saat dibuka */
    .mobile-style.open {
        width: 70% !important; /* Lebar sidebar lebih besar saat terbuka */
    }

    /* Mengubah ukuran font untuk perangkat mobile */
    .mobile-style .text-sm {
        font-size: 0.75rem; /* Ukuran font lebih kecil */
    }

    .mobile-style .font-bold {
        font-weight: normal; /* Mengurangi ketebalan font */
    }

    .mobile-style .text-gray-800 {
        font-size: 0.625rem; /* Ukuran font lebih kecil untuk teks */
    }

    .mobile-style .text-yellow-500 {
        font-size: 0.625rem; /* Ukuran font lebih kecil untuk teks berwarna */
    }

    .mobile-style .text-gray-600 {
        font-size: 0.625rem; /* Ukuran font lebih kecil untuk teks berwarna */
    }

    /* Mengatur ukuran font untuk ikon agar tetap konsisten di mobile */
    .mobile-style i {
        font-size: 0.875rem; /* Ukuran ikon lebih kecil pada mobile */
    }

    /* Menyesuaikan margin dan padding di mobile */
    .mobile-style .flex-1 {
        padding-top: 1rem; /* Memberikan jarak lebih saat sidebar terbuka */
    }

}

@media (max-width: 750px) {
    .dashboard-header {
        flex-direction: column; /* Ubah layout jadi kolom */
        align-items: flex-start; /* Pastikan rata kiri */
    }
    .dashboard-header .calendar {
        margin-top: 1rem; /* Beri jarak antara header dan calendar */
        justify-content: flex-start; /* Pastikan elemen calendar rata kiri */
        width: 100%; /* Pastikan elemen memenuhi lebar penuh */
    }
}

@media (max-width: 750px) {
    .main-course-mobile {
        left: 8px !important;
    }
    .main-course-mobile-margin {
        margin-left: 63px !important;

    }
    /* Bagian Admin */
    .main-course-mobile-margin-admin{
        margin-left: 63px !important;

    }
}



/* // bagian navbar */
.responsive-padding {
    padding-left: 0.9rem; /* px-4 untuk layar kecil */
    padding-right: 0.9rem;
}

@media (min-width: 640px) {
    .responsive-padding {
    padding-left: 1.9rem; /* sm:px-8 */
    padding-right: 1.9rem;
    }
}

@media (max-width: 760px) {
    .responsive-padding {
    padding-left: 1rem !important; /* md:px-16 */
    padding-right: 1rem !important;
    }
    .footer-style {
        padding-left: 0px !important;
    }
}

/* // bagian view_course */
/* Gaya untuk mobile dan scroll horizontal */
/* Gaya khusus untuk tampilan mobile */
@media (max-width: 576px) {
    .view_course-container {
        display: flex;
        flex-wrap: nowrap; /* Jangan patah baris */
        overflow-x: auto; /* Aktifkan scroll horizontal */
        -webkit-overflow-scrolling: touch; /* Smooth scrolling pada mobile */
    }
    .view_course-container::-webkit-scrollbar {
        display: none; /* Sembunyikan scrollbar */
    }
    .view_course-content {
        flex: 0 0 auto; /* Pastikan elemen tidak meluas */
    }
    .view_course-btn {
        flex: 0 0 auto; /* Pastikan tombol tidak meluas */
    }
}


/* // BAGIAN 1024 */
@media (min-width: 760px) and (max-width: 1000px) {


}

@media (min-width: 761px) and (max-width: 1000px) {
    .main-course-mobile {
        left: 8px !important;
    }
    .main-course-mobile-margin {
        margin-left: 89px !important;
    }
    .main-course-mobile-margin-admin {
        margin-left: 89px !important;
    }
    /* admin margin */
    .main-course-mobile-margin-admin{
        margin-left: 110px !important;
    }
        /* Style untuk sidebar saat ditutup pada layar 768 x 1024 */
        .mobile-style {
            left: 20px !important;
            width: 10% !important; /* Lebar sidebar kecil saat ditutup pada layar 768 x 1024 */
            z-index: 1000;
        }
            /* Memperbesar sidebar saat dibuka pada layar 768 x 1024 */
    .mobile-style.open {
        width: 25% !important; /* Lebar sidebar lebih besar saat terbuka pada layar 768 x 1024 */
    }

     /* Mengubah ukuran font untuk perangkat mobile */
     .mobile-style .text-sm {
        font-size: 0.75rem; /* Ukuran font lebih kecil */
    }

    .mobile-style .font-bold {
        font-weight: normal; /* Mengurangi ketebalan font */
    }

    .mobile-style .text-gray-800 {
        font-size: 0.625rem; /* Ukuran font lebih kecil untuk teks */
    }

    .mobile-style .text-yellow-500 {
        font-size: 0.625rem; /* Ukuran font lebih kecil untuk teks berwarna */
    }

    .mobile-style .text-gray-600 {
        font-size: 0.625rem; /* Ukuran font lebih kecil untuk teks berwarna */
    }

    /* Mengatur ukuran font untuk ikon agar tetap konsisten di mobile */
    .mobile-style i {
        font-size: 0.875rem; /* Ukuran ikon lebih kecil pada mobile */
    }

    /* Menyesuaikan margin dan padding di mobile */
    .mobile-style .flex-1 {
        padding-top: 1rem; /* Memberikan jarak lebih saat sidebar terbuka */
    }


}

@media (min-width: 761px) and (max-width: 1000px) {
    .footer {
        padding: 1rem; /* Padding footer untuk layar 768 x 1024 */
        text-align: center; /* Rata tengah untuk footer */
    }

    .footer .social-icons {
        display: flex; /* Menampilkan ikon sosial secara horizontal */
        justify-content: center; /* Rata tengah untuk ikon sosial */
    }

    .footer .social-icons a {
        margin: 0 10px; /* Jarak antar ikon sosial */
    }
    .footer-style {
        padding-left: 0px !important;
    }
    /* Nitip bagian admin */
    .asede-admin {
        left: 45px !important;
    }
    /* nITIP BAGIAN COURSE DETAIL */
    .hero-area-detail-course .image-content {
        width: 100%;
        margin-left: 0;
        position: absolute;
        bottom: 0;
        left: 65% !important; /* Sesuaikan nilai ini untuk menggeser lebih ke kiri */
        transform: translateX(-50%);
    }
    .hero-area-detail-course {
        background-size: cover !important; /* Sesuaikan ukuran background */
        background-position: center !important; /* Pusatkan background */
    }
}

/* // bagian 1024 x 600 */
@media (min-width: 1024px) and (max-height: 600px) {
    .main-course-mobile {
        left: 5px !important;
    }

    .main-course-mobile-margin {
        margin-left: 130px !important;
    }
    .main-course-mobile-margin-admin {
        margin-left: 130px !important;
    }
}

@media (min-width: 1024px) and (max-height: 1366px) {
    .main-course-mobile {
        left: 5px !important;
    }

    .main-course-mobile-margin {
        margin-left: 120px !important;
    }
    .main-course-mobile-margin-admin {
        margin-left: 120px !important;
    }
}


/* Bagian ini adalah bagian Admin */
@media (max-width: 750px) {
    /* Style untuk sidebar saat ditutup */
    .asede-admin {
        left: 8px !important;
        width: 20% !important;
        z-index: 1000;
    }

    /* Memperbesar sidebar saat dibuka */
    .asede-admin.open {
        width: 70% !important;
    }

    /* Mengubah ukuran font untuk perangkat mobile */
    .asede-admin .text-xs {
        font-size: 0.625rem;
    }

    /* Menyesuaikan ikon */
    .asede-admin i {
        font-size: 0.875rem;
    }

    /* Menyesuaikan margin dan padding */
    .asede-admin .flex-1 {
        padding-top: 1rem;
    }
}


/* bagian landingpage about  */
    /* Media Query untuk 768px hingga 1024px */
    @media (max-width: 1024px) {
        .feature-area-bannerlandingpage .info-box {
            padding: 1rem; /* Kurangi padding untuk box */
        }
        .feature-area-bannerlandingpage .info-box i {
            font-size: 1.8rem; /* Kurangi ukuran ikon */
            margin-bottom: 0.5rem; /* Kurangi jarak bawah ikon */
        }
        .feature-area-bannerlandingpage .info-box p.h5 {
            font-size: 1rem; /* Kurangi ukuran teks heading */
        }
        .feature-area-bannerlandingpage .info-box .info-text {
            font-size: 0.85rem; /* Kurangi ukuran teks deskripsi */
        }
    }

    /* Media Query untuk 820px */
    @media (max-width: 820px) {
        .feature-area-bannerlandingpage .info-box {
            padding: 0.75rem; /* Padding lebih kecil */
        }
        .feature-area-bannerlandingpage .info-box i {
            font-size: 1.5rem; /* Ukuran ikon lebih kecil */
        }
        .feature-area-bannerlandingpage .info-box p.h5 {
            font-size: 0.9rem !important; /* Ukuran heading lebih kecil */
        }
        .feature-area-bannerlandingpage .info-box .info-text {
            font-size: 0.6rem; /* Ukuran teks lebih kecil */
            line-height: 1;
        }
    }



/* BAGIAN  COURSE DETAIL*/

@media (max-width: 768px) {
    .margin-style{
        margin-bottom: 10px;
    }
    .hero-area-detail-course {
        background-size: cover !important; /* Sesuaikan ukuran background */
        background-position: center !important; /* Pusatkan background */
    }

    .container.d-flex.flex-lg-row {
        flex-direction: column; /* Susun secara vertikal */
    }
    .hero-area-detail-course .image-content {
        width: 100%;
        margin-left: 0;
        position: absolute;
        bottom: 0;
        left: 37%; /* Sesuaikan nilai ini untuk menggeser lebih ke kiri */
        transform: translateX(-50%);
    }

    .hero-area-detail-course {
        position: relative;
        padding-bottom: 6rem; /* Tambahkan ruang untuk video di bawah */
    }

    .hero-area-detail-course .text-content {
        padding-bottom: 6rem; /* Tambahkan ruang untuk memastikan teks tidak bertumpuk dengan video */
    }
}

@media (min-width: 912px) and (max-height: 1368px) {
    .hero-area-detail-course {
        background-size: cover !important; /* Sesuaikan ukuran background */
        background-position: center !important; /* Pusatkan background */
    }
}

@media (max-height: 1024px) {
    .hidden-scroll {
        overflow-x: hidden !important;
    }

}

@media (min-width: 540px) and (max-width: 720px) {
    .hero-area-detail-course .image-content {
        width: 100%;
        margin-left: 0;
        position: absolute;
        bottom: 0;
        left: 53%; /* Sesuaikan nilai ini untuk menggeser lebih ke kiri */
        transform: translateX(-50%);
    }
}