/* Carousel Base Styles - Optimized for Performance and Bootstrap 5 Compatibility */
.carousel-lite {
    position: relative;
    overflow: visible;
    contain: layout paint style;
    padding: 0 1.25rem;
}

.carousel-lite .carousel-track,
.carousel-track-lite {
    display: flex;
    flex-wrap: nowrap;
    will-change: transform;
    gap: 0;
    width: auto !important;
    margin: 0;
    transition: transform 0.5s cubic-bezier(.4,0,.2,1);
}

.carousel-lite .carousel-item,
.carousel-track-lite > * {
    display: block;
    flex: 0 0 auto;
    box-sizing: border-box;
    height: auto !important;
    flex-shrink: 0;
}

/* Carousel Controls */
.carousel-lite .carousel-control-prev,
.carousel-lite .carousel-control-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(0,0,0,0.2);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    opacity: 0.3;
    transition: opacity 0.2s, background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-lite .carousel-control-prev:hover,
.carousel-lite .carousel-control-next:hover {
    background: rgba(0,0,0,0.7);
    opacity: 1;
}

.carousel-lite .carousel-control-prev { left: 0rem; }
.carousel-lite .carousel-control-next { right: 0rem; }

.carousel-lite .carousel-control-prev-icon,
.carousel-lite .carousel-control-next-icon {
    background-size: 100% 100%;
}

/* Carousel Indicators (Dots) */
.carousel-lite .carousel-indicators {
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    z-index: 2;
}

.carousel-lite .carousel-indicators button {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.5);
    transition: background 0.3s;
}

.carousel-lite .carousel-indicators button.active {
    background: rgba(255,255,255,0.9);
}

/* Disable animation within carousel */
.carousel-item .feature-card.fade-in-up {
    animation: none;
}

/* Responsive adjustments */
@media (max-width: 576px) {
    .carousel-lite { padding: 0 1rem; }
    .carousel-lite .carousel-control-prev,
    .carousel-lite .carousel-control-next { width: 2rem; height: 2rem; }
    .carousel-lite .carousel-control-prev { left: 0rem; }
    .carousel-lite .carousel-control-next { right: 0rem; }
}

@media (min-width: 576px) {
    .carousel-lite .carousel-control-prev,
    .carousel-lite .carousel-control-next { display: flex; }
    .carousel-lite .carousel-control-prev { left: 0.5rem; }
    .carousel-lite .carousel-control-next { right: 0.5rem; }
}

@media (min-width: 992px) {
    .carousel-lite { padding: 0 1.5rem; }
    .carousel-lite .carousel-control-prev,
    .carousel-lite .carousel-control-next { width: 3rem; height: 3rem; }
    .carousel-lite .carousel-control-prev { left: 0rem; }
    .carousel-lite .carousel-control-next { right: 0rem; }
}