.carousel-fixed-height {
    height: auto; /* Let the carousel height be determined by its content */
    max-height: 500px; /* Optional: Limit maximum height for larger screens */
}

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures images cover the entire container */
    max-height: 60vh; /* Ensures images fit well within viewport on smaller screens */
}

/* Additional styling for responsiveness and centering */
.carousel-container {
    margin-bottom: 2rem;
}

.text-container {
    margin-top: 2rem;
    margin-bottom: 3rem;
    z-index: 2; /* Ensure text-container remains above the carousel */
}

/* Make sure the carousel images do not exceed the height limit on smaller screens */
@media (max-width: 768px) {
    .carousel-item img {
        max-height: 300px; /* Adjust for smaller viewports */
    }
}