/* Container principale del carosello */
        .logo-carousel {
            width: 100%;
            max-width: 1200px;
            margin: auto;
            position: relative;
            padding: 48px 0;
            overflow: hidden;
            background-color: white;
            border-radius: 12px;
        }

        .logo-carousel h2 {
            text-align: center;
            margin-bottom: 20px;
            color: #1E1E1E;
            font-size: 24px;
        }

        /* Contenitore del carosello */
        .carousel-container {
            overflow: hidden;
            position: relative;
            width: 100%;
            padding: 0 50px;
        }

        /* Il trucco sta qui: divisione in due parti per il vero effetto infinito */
        .logo-track {
            display: flex;
            width: max-content;
            position: relative;
        }

        .logo-slide {
            flex: 0 0 200px;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .logo {
            max-width: 100%;
            max-height: 100%;
            filter: grayscale(100%);
            opacity: 0.6;
            transition: all 0.3s ease;
        }

        .logo:hover {
            filter: grayscale(0);
            opacity: 1;
        }

        /* La vera magia: utilizzo di CSS custom property per controllare il movimento */
        .carousel-container {
            --marquee-elements: 5; /* Numero di loghi */
            --marquee-element-width: 200px; /* Larghezza di ciascun logo */
            --marquee-width: calc(var(--marquee-elements) * var(--marquee-element-width));
        }

        .logo-track {
            width: var(--marquee-width);
            animation: scroll 20s linear infinite;
            /* Impostiamo la lunghezza dell'animazione in base al numero di elementi */
        }

        @keyframes scroll {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(calc(-1 * var(--marquee-width)));
            }
        }

        /* Utilizziamo una pseudo-classe per creare l'effetto di raccordo */
        .logo-track::before,
        .logo-track::after {
            content: "";
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
        }

        /* Maschere per nascondere il salto ai bordi */
        .carousel-container::before,
        .carousel-container::after {
            content: "";
            position: absolute;
            top: 0;
            width: 80px;
            height: 100%;
            z-index: 2;
        }

        .carousel-container::before {
            left: 0;
            background: linear-gradient(to right, white, transparent);
        }

        .carousel-container::after {
            right: 0;
            background: linear-gradient(to left, white, transparent);
        }