/* Carousel Container */
.ad-carousel {
    width: 90%;
    max-width: 1200px;
    margin: auto;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 500px;
}

/* Track holding images */
.carousel-track {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Keeps spacing even */
    transition: transform 0.5s ease-in-out;
}

/* Individual Ad */
.carousel-item {
    flex: 0 0 20%;
    max-width: 20%;
    opacity: 0.6;
    transition: transform 0.5s ease, opacity 0.5s ease;
    position: relative;
    z-index: 1;
}

/* Ad Images */
.carousel-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
    transition: transform 0.5s ease-in-out;
}

/* Centered Active Ad */
.carousel-item.active {
    transform: scale(2);
    opacity: 1;
    flex: 0 0 40%;
    max-width: 40%;
    z-index: 2;
}

/* Prevent Left Side Cutoff */
.carousel-track {
    transform: translateX(0);
    transition: transform 0.8s ease-in-out;
}

/* Responsive Fixes */
@media (max-width: 768px) {
    .carousel-item {
        flex: 0 0 25%;
        max-width: 25%;
    }
    .carousel-item.active {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 480px) {
    .carousel-item {
        flex: 0 0 35%;
        max-width: 35%;
    }
    .carousel-item.active {
        flex: 0 0 60%;
        max-width: 60%;
    }
}