/* Image Marquee Elementor Widget Styles */

.image-marquee-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.image-marquee-container {
    display: flex;
    align-items: center;
    width: 100%;
    overflow: hidden;
}

.image-marquee-track {
    display: flex;
    align-items: center;
    white-space: nowrap;
    will-change: transform;
}

.image-marquee-item {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
}

.image-marquee-item img {
    display: block;
    max-width: 100%;
    object-position: center;
}

.image-marquee-item a {
    display: block;
    text-decoration: none;
}

/* Pause animation on hover */
.image-marquee-wrapper.pause-on-hover:hover .image-marquee-track {
    animation-play-state: paused !important;
}

/* Marquee Animation - Left Direction */
@keyframes marquee-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Marquee Animation - Right Direction */
@keyframes marquee-right {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .image-marquee-item {
        margin-right: 15px;
    }
}

@media (max-width: 480px) {
    .image-marquee-item {
        margin-right: 10px;
    }
}

/* Smooth rendering */
.image-marquee-track {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000px;
    perspective: 1000px;
}

/* Loading state */
.image-marquee-item img:not([src]) {
    background-color: #f0f0f0;
    min-width: 200px;
}