/* General Styles */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

body.light-theme {
    background-color: #f8f9fa; /* Light background */
    color: #212529; /* Dark text */
}

body.dark-theme {
    background-color: #343a40; /* Dark background */
    color: #f8f9fa; /* Light text */
}

/* Navbar Styling */
.navbar {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Ensure navbar background color matches body in dark mode */
body.light-theme .navbar {
    background-color: #f8f9fa; /* Light background */
    color: #212529; /* Dark text color for navbar in light theme */
}

body.dark-theme .navbar {
    background-color: #343a40; /* Dark background for navbar in dark theme (same as body) */
    color: #f8f9fa; /* Light text color for navbar in dark theme */
}

/* Navbar Link Styling */
body.light-theme .navbar-nav .nav-link {
    color: #212529; /* Dark text color for navbar links in light theme */
}

body.dark-theme .navbar-nav .nav-link {
    color: #f8f9fa; /* Light text color for navbar links in dark theme */
}

/* Change color of navbar items on hover */
body.light-theme .navbar-nav .nav-link:hover {
    color: #007bff; /* Blue text on hover in light theme */
}

body.dark-theme .navbar-nav .nav-link:hover {
    color: #66b3ff; /* Lighter blue text on hover in dark theme */
}

/* Dark Mode Toggle Styling */
body.light-theme .form-check-input {
    background-color: #ddd; /* Light background for the toggle in light mode */
    border-color: #ddd;
}

body.dark-theme .form-check-input {
    background-color: #495057; /* Dark background for the toggle in dark mode */
    border-color: #495057;
}

body.dark-theme .form-check-input:checked {
    background-color: #007bff; /* Blue background for the checked toggle */
    border-color: #007bff;
}

/* Light Theme for Form Label (Dark Mode Toggle) */
body.light-theme .form-check-label {
    color: #212529; /* Dark text for light theme */
}

/* Dark Theme for Form Label (Dark Mode Toggle) */
body.dark-theme .form-check-label {
    color: #f8f9fa; /* Light text for dark theme */
}

/* Footer Styling */
footer {
    transition: background-color 0.3s ease, color 0.3s ease;
}

footer.light-theme {
    background-color: #f8f9fa; /* Light background */
    color: #212529; /* Dark text */
}

footer.dark-theme {
    background-color: #343a40; /* Dark background */
    color: #f8f9fa; /* Light text */
}

/* Table Styles for Both Themes */
body.light-theme table {
    color: #212529; /* Dark text */
    background-color: #ffffff; /* White background */
}

body.dark-theme table {
    color: #f8f9fa; /* Light text */
    background-color: #343a40; /* Dark background */
}

/* Adjustments for Mobile */
@media (max-width: 768px) {
    .navbar {
        padding: 10px;
    }
    .table {
        font-size: 12px;
    }
    .table th, .table td {
        padding: 0.3rem;
    }
}

/* Style for Toggle Switch */
.form-check-input {
    display: none; /* Hide the default checkbox */
}

.form-check-label {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.form-check-label i {
    font-size: 1.5rem;
    transition: opacity 0.3s ease;
}

/* Moon and Sun Icons */
#moon-icon,
#sun-icon {
    opacity: 0; /* Initially hide both icons */
}

body.light-theme #sun-icon {
    opacity: 1; /* Show the sun icon in light theme */
}

body.dark-theme #moon-icon {
    opacity: 1; /* Show the moon icon in dark theme */
}
.custom-image {
    width: 100%; /* Ensures the image takes up the full width of the container */
    height: auto; /* Keeps the image's aspect ratio intact */
    max-height: 400px; /* Adjust this value to control the height */
    object-fit: cover; /* Ensures the image fills the area while maintaining its aspect ratio */
}
.testimonial:hover {
    transform: scale(1.05);
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}
/* Ensure text inside icon-box remains black */
.icon-box h4, 
.icon-box p {
    color: #000 !important; /* Set text color to black */
}

/* Keep icon color unchanged for dark mode */
.dark-theme .icon-box h4, 
.dark-theme .icon-box p {
    color: #000 !important; /* Keep text black even in dark mode */
}
/* For dark theme headings */
body.dark-theme h2.text-center {
    color: #f8f9fa; /* Set the heading color to white */
}

/* For dark theme paragraphs */
body.dark-theme p.text-muted {
    color: #f8f9fa; /* Override text-muted color to white */
}
body.dark-theme .text-muted {
    color: #f8f9fa; /* Override muted gray with white */
}