/* Bootstrap 5 Carousel Fix with Smooth Animations */

/* Base carousel-item styles */
.carousel-item {
    position: relative;
    display: none;
    float: left;
    width: 100%;
    margin-right: -100%;
    backface-visibility: hidden;
    transition: transform 0.6s ease-in-out;
}

/* Active item */
.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
    display: block;
}

/* Sliding animations - Next */
.carousel-item-next:not(.carousel-item-start),
.active.carousel-item-end {
    transform: translateX(100%);
}

/* Sliding animations - Previous */
.carousel-item-prev:not(.carousel-item-end),
.active.carousel-item-start {
    transform: translateX(-100%);
}

/* Reset transform for active */
.carousel-item-next.carousel-item-start,
.carousel-item-prev.carousel-item-end {
    transform: translateX(0);
}

/* Fix carousel caption positioning to prevent overlap */
.caption-carousel {
    position: absolute;
    top: 100px;
    z-index: 10;
}

/* Ensure carousel indicators have proper styling */
.carousel-indicators button {
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.carousel-indicators .active {
    opacity: 1;
}

/* Support for RTL (right-to-left) */
[dir="rtl"] .carousel-item-next:not(.carousel-item-start),
[dir="rtl"] .active.carousel-item-end {
    transform: translateX(-100%);
}

[dir="rtl"] .carousel-item-prev:not(.carousel-item-end),
[dir="rtl"] .active.carousel-item-start {
    transform: translateX(100%);
}