/* CSS untuk Mega Menu */

/* Container untuk mega menu */
.mega-menu {
    display: none;
    position: absolute;
    width: 799px; /* Sesuaikan lebar mega menu */
    padding: 20px;
    background-color: #fff; /* Warna latar belakang */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Efek bayangan */
    border-radius: 2px;
}

/* Tampilkan mega menu ketika item menu dihover */
.menu-item-has-children:hover .mega-menu {
    display: block;
}

/* Mengurangi jarak antara baris */
.row {
    display: flex;
    justify-content: flex-start; /* Memulai konten dari sisi kiri */
    margin-bottom: -10px; /* Mengatur jarak antara baris */
}

/* Gaya untuk setiap kolom */
.col-md-3 {
    width: 49%; /* Lebar relatif untuk setiap kolom dengan mengurangi margin-right */
    margin-right: 5px; /* Mengatur jarak antara kolom */
}

/* Menghilangkan margin-right pada kolom terakhir */
.col-md-3:last-child {
    margin-right: 0;
}

/* Gaya untuk daftar di dalam kolom */
.mega-menu-list {
    list-style: none;
    padding: 0;
}

/* Gaya untuk setiap item menu */
.mega-menu-list li {
    margin-bottom: 5px;
}

/* Gaya untuk tautan menu */
.mega-menu-list li a {
    color: #333; /* Warna teks */
    text-decoration: none;
    transition: color 0.3s ease; /* Efek transisi */
}

/* Efek hover pada tautan menu */
.mega-menu-list li a:hover {
    color: #ff0000; /* Warna teks saat dihover */
}




/* CSS untuk Mega Menu Responsif pada Perangkat Mobile */

/* Untuk layar dengan lebar maksimum 767px (ukuran mobile) */
@media screen and (max-width: 767px) {
    /* Tampilkan mega menu saat diklik pada perangkat mobile */
    .menu-item-has-children:hover .mega-menu {
        display: block;
    }
    
    /* Atur ul agar tampil sebagai kolom di perangkat mobile */
    .mega-menu {
        display: none;
        position: relative;
        width: 100%;
        padding: 0;
        box-shadow: none;
        background-color: transparent;
    }

    /* Gaya untuk setiap kolom pada perangkat mobile */
    .col-md-3 {
        width: 100%; /* Kolom penuh pada perangkat mobile */
        margin-right: 0; /* Hapus margin kanan pada perangkat mobile */
        margin-bottom: 10px; /* Atur jarak antara kolom pada perangkat mobile */
    }
}