body.vision-impaired,
.vision-impaired,
.vision-impaired .navbar,
.vision-impaired .card,
.vision-impaired .jumbotron,
.vision-impaired .bg-light,
.vision-impaired footer.bg-light,
.vision-impaired .navbar-brand,
.vision-impaired .card-title,
.vision-impaired h1,
.vision-impaired h2,
.vision-impaired h3,
.vision-impaired h4,
.vision-impaired h5,
.vision-impaired a,
.vision-impaired .nav-link,
.vision-impaired .btn-primary,
.vision-impaired .btn-outline-secondary,
.vision-impaired .navbar.bg-light {
    background-color: #000 !important;
    color: #fff !important;
    border-color: #fff !important;
    font-size: 1.2rem;
}

.vision-impaired .hero-section h1.display-4 {
    background-color: transparent !important;
    font-size: 3.5rem !important; /* Preserve desktop font size */
    color: white !important;
}

@media (max-width: 576px) {
    .vision-impaired .hero-section h1.display-4 {
        font-size: 1.5rem !important; /* Preserve mobile font size */
    }
}

.vision-impaired footer .text-muted {
    font-weight: bold !important;
    color: white !important;
}

/* Keep service slide titles unchanged in vision-impaired mode */
.vision-impaired [id^="service-caption-"] h3 {
    background-color: transparent !important;
    color: var(--white) !important;
    font-size: 2.5rem !important; /* Restore default font size */
}

@media (max-width: 768px) {
    .vision-impaired [id^="service-caption-"] h3 {
        font-size: 2rem !important; /* Restore tablet font size */
    }
}

@media (max-width: 576px) {
    .vision-impaired [id^="service-caption-"] h3 {
        font-size: 1.5rem !important; /* Restore mobile font size */
    }
}