/* Default Light Mode */
:root {
    --dark: #212529;
    /* Dark background color */
    --light: #ffffff;
    /* Light text color */
    --accent: #f5e4c3;
    /* Accent color */
    --background-color: #ffffff;
    /* Light background */
    --navbar-background-color: #f8f9fa;
    /* Light navbar background */
    --border-radius: 8px;
    /* Default border-radius */
    --text-muted: rgba(222, 226, 230, 0.75);
}

.icon-toggle {
    font-size: 1.25rem;
    cursor: pointer;
    /* Adjust the size of the icon */
    transition: transform 0.6s ease, color 0.3s ease;
    /* Smooth transitions for both transform and color */
}

#themeIcon {
    color: rgba(255, 255, 255, 0.55);

    /* Default moon color */
    transition: transform 0.6s ease, color 0.3s ease;
    /* Smooth transitions for transform and color */
}

#themeIcon.sun {
    color: #ffcc00;
    /* Sun color */
}

/* Dark Mode: Applies when .dark-mode class is added to the body */
body.dark-mode {
    background-color: var(--background-color) !important;
    color: var(--light);
}

body.dark-mode .btn-primary {
    background-color: var(--accent) !important;
    border: unset !important;
}

body.dark-mode .dropdown-menu {
    background-color: var(--dark) !important;
    color: var(--light) !important;
}

body.dark-mode .dropdown-item {
    color: var(--light) !important;
}

body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .footer a {
    color: var(--accent);
}

body.dark-mode .footer a:hover {
    color: var(--light);
}

body.dark-mode .navbar-nav .active a {
    color: var(--light) !important;
}

body.dark-mode .owl-carousel .owl-nav .owl-prev,
body.dark-mode .owl-carousel .owl-nav .owl-next {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

body.dark-mode .confetti {
    background-color: rgba(255, 255, 255, 0.3) !important;
}

/* Additional styles for dark mode */
body.dark-mode {
    --background-color: #181818;
    --navbar-background-color: #333;
}

body.dark-mode .bg-white {
    background-color: var(--dark) !important;
}

body.dark-mode .elementor-posts .elementor-post__card {
    background-color: var(--dark) !important;
}

body.dark-mode .elementor-posts .elementor-post__card h3 a {
    color: var(--light) !important;
}

body.dark-mode .elementor-posts .elementor-post__card p {
    color: var(--text-muted) !important;
}

body.dark-mode .q-lp {
    background-color: var(--dark) !important;
}

body.dark-mode .q-lp h5 {
    color: var(--light) !important;
}