/* Updated CSS for Proper Video and Photo Carousel Display */

/* Ensure video elements are displayed properly */
video {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    z-index: 5 !important; /* Lowered to avoid overlap issues */
}

/* General Carousel Item Styling */
.carousel-item {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden !important;
    visibility: hidden; /* Hide inactive items by default */
}

.carousel-item.active {
    visibility: visible;
}

/* Styles Specific to Video Carousel (Reels) */
#reelsCarousel .carousel-item {
    transition: visibility 0s, opacity 0.5s linear; /* Smooth transitions */
    z-index: 2;
}

/* Ensuring videos are properly positioned */
.ratio {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
}

.ratio video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Styles Specific to Photo Carousel (Gallery) */
#galleryCarousel .carousel-item {
    transition: visibility 0s, opacity 0.5s linear;
    z-index: 1;
}

/* Prevent other styles from overriding video display */
.video-position, .video-img, .s-video-wrap, .s-video-content {
    position: relative;
    z-index: 1 !important;
    overflow: visible !important;
}