/* Base styles for light mode */
body.light-mode {
    background-color: #fff;
    color: #000;
}

body.light-mode #menu {
    background-color: #fff;
    color: #000;
}

body.light-mode #menu a {
    color: #000; /* Link color in light mode */
}

/* Styles for dark mode */
body.dark-mode {
    background-color: #111;
    color: #fff;
}

body.dark-mode #menu {
    background-color: #222; /* Dark mode background for the menu */
    color: #fff; /* Dark mode text color */
}

body.dark-mode #menu a {
    color: #fff; /* Link color in dark mode */
}

body.dark-mode footer {
    background-color: #333; /* Footer background in dark mode */
    color: #fff; /* Footer text color in dark mode */
}

body.dark-mode footer a {
    color: #007bff; /* Set footer links color to blue in dark mode */
}

/* Default style for light mode */
body.light-mode #darkModeToggleMobile {
    color: #111;
    background-color: #fff;
}

/* Style for dark mode */
body.dark-mode #darkModeToggleMobile {
    color: #fff;
    background-color: none;
}

/* Dark Mode Toggle Button when in Dark Mode */
body.dark-mode #darkModeToggle {
    color: #fff; /* Light color when dark mode is active */
}

/* Dark Mode */
body.dark-mode .custom-footer {
    background-color: #222;
}

@media (max-width: 992px) {
    /* Pastikan mode tetap diterapkan dengan benar pada layar kecil */
    #modeIcon {
        color: #111 !important;
    }

    body.dark-mode #modeIcon {
        color: #fff !important; /* Warna putih saat dark mode di layar kecil */
    }

    /* Dark mode */
    body.dark-mode #menuToggle input:checked ~ span {
        background: #fff;  /* Ganti warna latar belakang menjadi putih */
    }

}