#header {
    height: 660px;
    background-color: var(--bs-body-bg); /* Uses Bootstrap's theme variable */
    color: var(--bs-body-color);
    transition: background-color 0.3s, color 0.3s; /* Smooth transition */
}

[data-bs-theme="dark"] #header
 {
    background-color: var(--bs-body-bg); /* Uses Bootstrap's theme variable */
    color: var(--bs-body-color);
}

#header-image {
    background-image: linear-gradient(rgba(9, 8, 8, 0.5), rgba(0, 0, 0, 0.5)), url('../../images/pages/about_us/about_us_1.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
}

    #header > div > div > div > p{
        width: 90%;
    }

    @media (min-width: 992px) { 
        #header > div > div > div > p{
            width: 50%;
        }
    }
/* @include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
@include media-breakpoint-up(xxl) { ... } */

.card-height {
    min-height: 200px;
}

.card-img {
    background-size: cover;
    background-position: center;
}

.card-img#card-img-1 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../../images/pages/about_us/vision_about_us.jpg');
}

.card-img#card-img-2 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../../images/pages/about_us/mission_about_us.jpg');
}

.card-img#card-img-3 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../../images/pages/about_us/objective_about_us.jpg');
}

.card-text-section, #our-programs-card {
    background-color: #131842;
}