/* Set a minimum height to prevent layout jump when content changes */
#mission-box, #feature-box {
    min-height: 300px; /* Adjust this value as needed */
}

/* Ensure carousel images cover the area without being distorted */
.carousel-image {
    object-fit: cover; /* This crops the image to fit, alternatives: 'contain', 'fill' */
    height: 100%;
}

/* Add a fade transition for a smoother appearance change */
#mission-text, #mission-carousel, #feature-text, #feature-carousel {
    transition: opacity 0.5s ease-in-out;
}

.carousel-item img {
    max-width: 800px;
    max-height: 500px;
    width: 100%;
    height: auto;
    object-fit: cover; /* hoặc contain tùy ý */
    margin: 0 auto; /* Căn giữa ảnh nếu nhỏ hơn max */
    display: block;
}