/* Custom CSS for the Simigo-like Home Banner */

.hover-zoom {
    transition: transform 0.3s ease;
    display: block;
    overflow: hidden;
}

.hover-zoom img {
    transition: transform 0.3s ease;
}

.hover-zoom:hover img {
    transform: scale(1.05);
}

#homeBannerCarousel .carousel-indicators {
    margin-bottom: 0.5rem;
}

#homeBannerCarousel .carousel-indicators [data-bs-target] {
    width: 30px;
    height: 4px;
    border-radius: 2px;
    background-color: #fff;
    opacity: 0.5;
}

#homeBannerCarousel .carousel-indicators .active {
    opacity: 1;
    background-color: #0d6efd; /* Highlight color */
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: drop-shadow(0 0 2px rgba(0,0,0,0.5));
}

/* Enhancing Fade Transition - let Bootstrap handle the heavy lifting */
.carousel-fade .carousel-item {
    transition-duration: 1s;
}