/* CSS untuk Main Content */
.container {
    margin-top: 80px; /* Memberikan ruang untuk header */
}

/* Gaya untuk navbar-brand */
.navbar-brand {
    color: white !important; /* Menetapkan warna teks kepada putih */
    font-weight: bold !important; /* Menjadikan teks bold */
}


.navbar {
    background-color: #4682B4 !important; /* Biru gelap */
    padding: 10px 20px; /* Padding kiri dan kanan untuk jarak yang lebih besar */
}

/* Butang toggler dengan warna biru terang */
.navbar-toggler {
    background-color: #5A9BD5 !important; /* Biru terang untuk butang toggler */
}

    /* Warna biru terang apabila hover pada butang toggler */
    .navbar-toggler:focus, .navbar-toggler:hover {
        background-color: #6FB9E4 !important; /* Biru yang lebih terang */
    }

/* Menambah padding pada item menu */
.navbar-nav .nav-link {
    padding: 8px 15px;
    font-weight: bold;
    color: white; /* Teks menu putih supaya kontras dengan latar belakang biru */
}

    /* Hover effect pada item menu */
    .navbar-nav .nav-link:hover {
        color: #FFD700 !important; /* Warna kuning terang pada hover */
    }

    /* Hover effect pada navbar-toggler */
    .navbar-toggler:focus, .navbar-toggler:hover {
        background-color: #5A9BD5; /* Warna biru lebih terang */
    }

/* Menambah padding pada item menu */
.navbar-nav .nav-link {
    padding: 8px 15px; /* Padding untuk menu items supaya lebih luas */
    font-weight: bold; /* Menebalkan teks untuk penampilan lebih jelas */
}

    /* Hover effect pada item menu */
    .navbar-nav .nav-link:hover {
        color: #0066CC; /* Biru terang pada hover */
    }

/* CSS: Gaya tambahan untuk submenu dropdown dalam navbar */
.navbar-nav .dropdown-menu {
    border: none; /* Buang garisan border default */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Bayang lembut di sekeliling submenu */
    border-radius: 0.25rem; /* Bucu submenu sedikit bulat untuk rupa moden */
}

    /* Pastikan lebar dropdown sesuai dengan isinya dan tidak melebihi lebar menu induk */
    .navbar-nav .dropdown-menu li {
        position: relative;
    }

/* Opsyen: Ubah gaya item hover untuk lebih jelas (gunakan warna latar sedikit lebih gelap) */
.navbar-nav .dropdown-item:hover {
    background-color: #f8f9fa; /* Warna latar hover (sedikit kelabu) */
}

/* Putarkan ikon caret (anak panah) pada item dropdown apabila submenu dibuka */
.navbar-nav .dropdown-toggle::after {
    transition: transform 0.3s ease; /* Animasi putaran ikon */
}

.navbar-nav .dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg); /* Ikon caret menghadap ke atas apabila dibuka */
}



/* admin button */
/* Gaya untuk ikon dalam kotak */

/* Memastikan kotak icon-link tidak ada underline */
.icon-box {
    text-decoration: none; /* Buang underline default dari anchor link */
}

    /* Menambah hover effect untuk kotak */
    .icon-box:hover {
        transform: scale(1.1); /* Animasi zoom bila hover */
        background-color: #6FB9E4; /* Tukar warna latar belakang bila hover */
    }


.icon-box {
    background-color: #ADD8E6; /* Warna latar belakang biru muda */
    padding: 20px;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    width: 100px; /* Tetapkan lebar kotak */
    height: 100px; /* Tetapkan tinggi kotak */
    display: flex;
    flex-direction: column; /* Menyusun ikon dan tulisan secara menegak */
    justify-content: center; /* Memusatkan ikon dan tulisan secara menegak */
    align-items: center; /* Memusatkan ikon dan tulisan secara mendatar */
}

    .icon-box:hover {
        transform: scale(1.1); /* Animasi zoom bila hover */
    }

    .icon-box i {
        font-size: 40px; /* Saiz ikon */
    }

    .icon-box span {
        display: block;
        font-weight: bold;
        font-size: 14px;
        margin-top: 8px; /* Jarak antara ikon dan tulisan */
    }

.icon-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}
/* admin button */



/* Gaya untuk footer dengan warna kelabu dan teks putih */
.footer {
    background-color: #cfcfcf !important; /* Latar belakang kelabu */
    color: white !important; /* Warna teks putih */
    padding: -20px 20px; /* Padding untuk ruang atas dan bawah */
    text-align: center; /* Teks di tengah */
}

    .footer .text-muted {
        color: white !important; /* Menetapkan warna teks kepada putih */
    }




/* Responsif: Mengatur semula saiz pada telefon */
@media (max-width: 767px) {
    .navbar-brand {
        font-size: 18px;
    }
}