.carousel-inner {
    height: 700px; 
    width: 100%; 
}

.carousel-item {
    height: 100%; 
    text-align: center; 
}

.carousel-item img {
    max-height: 100%; 
    object-fit: contain; 
    max-width: 100%; 
    margin: auto; 
}

/* Mobile devices */
@media (max-width: 767.98px) {
    .carousel-inner {
        height: auto; /* Allow height to adapt to the image */
    }
}