/* CSS for the dark mode toggle button */
.theme-toggle {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1000;
}

/* --- Theme-specific CSS Custom Properties --- */
/* These variables define the new color scheme for both light and dark modes. */
:root,
[data-bs-theme="light"] {
    /* Light Mode Variables */
    --bs-body-bg: #FFFFFF;
    --bs-body-color: #37474F;
    --bs-heading-color: #004D40;
    --bs-nav-link-color: #004D40;
    --bs-nav-link-hover-color: #26A69A;
    --bs-card-bg: #FFFFFF;
    --bs-card-border-color: #B0BEC5;
    --bs-icon-color: #004D40;
    /* Dark Teal for icons */
    --bs-hero-bg: #80CBC4;
    /* Light Teal gradient */
    --bs-cta-bg: #26A69A;
    --bs-cta-text-color: #FFFFFF;
    --bs-cta-hover-bg: #66BB6A;
    --bs-footer-bg: #004D40;
    --bs-footer-text-color: #E0F2F1;
    --bs-footer-link-color: #80CBC4;
    --bs-footer-link-hover-color: #26A69A;
}

[data-bs-theme="dark"] {
    /* Dark Mode Variables */
    --bs-body-bg: #121212;
    --bs-body-color: #B0BEC5;
    --bs-heading-color: #E0F2F1;
    --bs-nav-link-color: #E0F2F1;
    --bs-nav-link-hover-color: #26A69A;
    --bs-card-bg: #1E1E1E;
    --bs-card-border-color: #37474F;
    --bs-icon-color: #80CBC4;
    --bs-hero-bg: #004D40;
    --bs-cta-bg: #26A69A;
    --bs-cta-text-color: #121212;
    --bs-cta-hover-bg: #66BB6A;
    --bs-footer-bg: #004D40;
    --bs-footer-text-color: #E0F2F1;
    --bs-footer-link-color: #80CBC4;
    --bs-footer-link-hover-color: #26A69A;
}

/* Applying the new variables to the HTML elements */
body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

.navbar {
    background-color: var(--bs-body-bg);
}

.navbar-brand {
    color: #E0F2F1;
}

.navbar-brand .logo-text {
    color: #80CBC4;
}

.nav-link {
    color: var(--bs-nav-link-color);
}

.nav-link:hover {
    color: var(--bs-nav-link-hover-color);
}

/* General card styling using variables */
.card {
    background-color: var(--bs-card-bg);
    border: 1px solid var(--bs-card-border-color);
}

/* Updating heading and icon colors */
h2,
h5 {
    color: var(--bs-heading-color);
}

.card-icon,
.section-icon,
.list-group-item i {
    color: var(--bs-icon-color);
}

/* Style adjustments for the new theme */
.hero-section {
    background-color: var(--bs-hero-bg);
    color: var(--bs-body-color);
    padding: 4rem 0;
    /* Add some padding for the background effect */
}

.hero-section .display-5,
.hero-section .lead {
    color: var(--bs-heading-color);
}

/* Special hero section gradient for dark mode */
/* [data-bs-theme="dark"] .hero-section {
            background-image: linear-gradient(to right, #004D40, #121212);
        } */

.cta-button {
    background-color: var(--bs-cta-bg);
    color: var(--bs-cta-text-color);
    border: none;
}

.cta-button:hover {
    background-color: var(--bs-cta-hover-bg);
    color: var(--bs-cta-text-color);
}

.services-card .card-title {
    color: var(--bs-heading-color);
}

.services-card .card-text {
    color: var(--bs-body-color);
}

.site-footer {
    background-color: var(--bs-footer-bg);
    color: var(--bs-footer-text-color);
}

.site-footer a {
    color: var(--bs-footer-link-color);
}

.site-footer a:hover {
    color: var(--bs-footer-link-hover-color);
}

/* Consistent icon sizes */
.card-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.section-icon {
    font-size: 2rem;
}

.list-group-item i {
    font-size: 1.5rem;
}

/* Dark mode specific list group styling */
[data-bs-theme="dark"] .list-group-item {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-card-border-color);
}