.logo-slider {
    --logo-gap: 5rem;
    --logo-height: 100px;
    --speed: 30s;
    --band-bg: #ffffff;
    --band-line: #e8e8e8;
    --page-bg: #fbfbfc;

    background: var(--band-bg);
    border-top: 1px solid var(--band-line);
    border-bottom: 1px solid var(--band-line);
    padding: 10px 0;
    margin-top: 40px;
    object-fit: scale-down;
}

/* viewport = overflow chhupata hai + dono kinare pe fade deta hai */
.logo-slider__viewport {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.logo-slider__track {
    display: flex;
    align-items: center;
    gap: var(--logo-gap);
    width: max-content;
    animation: logo-scroll var(--speed) linear infinite;
}

/* -50% minus aadha gap => bilkul seamless loop, koi jerk nahi */
@keyframes logo-scroll {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(calc(-50% - (var(--logo-gap) / 2)), 0, 0);
    }
}

/* hover pe ruk jaye */
.logo-slider:hover .logo-slider__track,
.logo-slider:focus-within .logo-slider__track {
    animation-play-state: paused;
}

.logo-slider__item {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    height: var(--logo-height);
}

/* asli logo images ke liye */
.logo-slider__item img {
    height: 100%;
    width: auto;
    max-width: 190px;
    object-fit: contain;
    display: block;
    /* rang chhod kar grey chahiye to ye 2 lines uncomment karo:
    filter: grayscale(1);
    opacity: .65; */
    transition: filter .3s ease, opacity .3s ease;
}

.logo-slider__item:hover img {
    filter: none;
    opacity: 1;
}

/* sirf demo placeholder ke liye — apni image lagate hi hata sakte ho */
.logo-slider__wordmark {
    font: 700 30px/1 system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    letter-spacing: -.02em;
    color: #4a4f57;
    white-space: nowrap;
}

/* mobile pe thoda chhota aur thoda tez */
@media (max-width: 640px) {
    .logo-slider {
        --logo-gap: 2.75rem;
        --logo-height: 32px;
        --speed: 20s;
        padding: 24px 0;
    }

    .logo-slider__wordmark {
        font-size: 22px;
    }
}

/* jinko motion se dikkat hoti hai unke liye scroll band, manual swipe on */
@media (prefers-reduced-motion: reduce) {
    .logo-slider__track {
        animation: none;
    }

    .logo-slider__viewport {
        overflow-x: auto;
        scrollbar-width: none;
    }

    .logo-slider__viewport::-webkit-scrollbar {
        display: none;
    }
}

/* ---- sirf is demo page ke liye, apne project me mat copy karna ---- */
body {
    margin: 0;
    background: var(--page-bg, #fbfbfc);
    font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

.demo-space {
    height: 110px;
}

.demo-note {
    max-width: 720px;
    margin: 40px auto;
    padding: 0 20px;
    color: #5b616b;
    font-size: 14px;
    line-height: 1.7;
}

.demo-note code {
    background: #eef0f3;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 13px;
}