/* Make carousel images cover area while staying responsive */
.carousel-item {
height: 60vh; /* default height; adjust as needed */
min-height: 300px;
}
.carousel-item img {
width: 100%;
height: 100%;
object-fit: cover; /* crop while preserving aspect ratio */
}


/* Smaller screens: reduce height */
@media (max-width: 767.98px) {
.carousel-item { height: 40vh; }
}


/* Optional: nice shadow + rounded corners */
.carousel {
border-radius: 12px;
overflow: hidden;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}


/* Thumbnail strip (optional) */
.thumbs { gap: 0.5rem; }
.thumbs img { cursor: pointer; height: 60px; object-fit: cover; border-radius: 6px; }


/* Make captions more readable */
.carousel-caption {
background: rgba(0,0,0,0.35);
padding: 0.5rem 1rem;
border-radius: 6px;
}