#hero-carousel .carousel-item {
    transition: opacity 1.5s ease-in-out; /* Match interval speed */
    opacity: 0;
    position: absolute; /* Ensures items are stacked */
    top: 0;
    left: 0;
    width: 100%;
    display: block; /* Override default Bootstrap display: none */
    z-index: -1; /* Ensure inactive items are behind */
}

#hero-carousel .carousel-item.active {
    opacity: 1;
    position: relative; /* Brings active item to normal flow */
    z-index: 0; /* Active item appears above others */
}

/* Ensure no slide animation interfering */
#hero-carousel .carousel-item-next,
#hero-carousel .carousel-item-prev {
    transform: none;
    left: 0;
}

#hero-carousel .carousel-item.active.carousel-item-start,
#hero-carousel .carousel-item.active.carousel-item-end {
    opacity: 0; /* Hide the item that is leaving */
    transform: none;
    z-index: -1;
}

#hero-carousel .carousel-item-next.carousel-item-start,
#hero-carousel .carousel-item-prev.carousel-item-end {
    opacity: 1; /* Show the item that is entering */
    z-index: 0;
}