.scroll-container {
           
            background: linear-gradient(90deg, transparent, rgba(228, 132, 7, 0.041), transparent);
        }

        .scroll-track {
            display: flex;
            height: 100%;
        }
         .scroll-container:hover .scroll-track,
.image-item:hover ~ .scroll-track {
    animation-play-state: paused;
}

/* Also pause when hovering directly on the track */
.scroll-track:hover {
    animation-play-state: paused;
}

        .image-item {
            flex-shrink: 0;
            border-radius: 8px;
            overflow: hidden;
        }

        .image-item img {
            width: 100%;
            height: 100%;
            display: block;
        }

        /* Desktop Styles (default) */
        

        .scroll-track {
            animation: scrollDesktop 50s linear infinite;
            width: calc((250px + 20px) * 60); /* Width for all 30 images (15 original + 15 duplicates) */
        }

        .image-item {
            width: 250px;
            height: 150px;
            margin-right: 20px;
        }

       @keyframes scrollDesktop {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(calc(-1 * (250px + 20px) * 30)); /* Move exactly 15 images worth for seamless loop */
            }
        }

        /* Mobile Styles */
        @media (max-width: 768px) {
           
           

            .image-item {
                width: 180px;
                height: 120px;
                margin-right: 20px;
            }
        }

        /* Very small mobile screens */
        @media (max-width: 480px) {
          
            .image-item {
                width: 140px;
                height: 80px;
                margin-right: 20px;
            }
        }
        .photoUP:hover {
      transform: translateY(-15px);
    }