/* ----- CSS FOR CLIENTS SLIDER (Adapted from CNC) ----- */
.hd-slider-wrapper *, .hd-slider-wrapper *::before, .hd-slider-wrapper *::after { box-sizing: border-box; }

.hd-slider-wrapper {
    --slider-bg: #141c24; /* Dark Theme Background */
    --slider-border: rgba(255,255,255,0.05);
    --logo-height: 50px;
    --scroll-speed: 30s;
    
    background-color: var(--slider-bg);
    padding: 60px 0;
    border-top: 1px solid var(--slider-border);
    border-bottom: 1px solid var(--slider-border);
    position: relative; z-index: 2;
}

/* Container fix */
.hd-slider-wrapper .hd-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; text-align: center;}

.hd-clients-label {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14px; color: #a3b3c2;
    text-transform: uppercase; letter-spacing: 1px; margin-bottom: 40px;
}

.hd-slider-section {
    overflow: hidden;
    position: relative;
    white-space: nowrap;
    /* Vignette Fade Effect (Dark) */
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

/* The Moving Track */
.hd-slider-track {
    display: inline-flex;
    align-items: center;
    gap: 60px;
    animation: hdMarquee var(--scroll-speed) linear infinite;
    padding-left: 60px; /* Offset for smooth loop */
}

/* Pause on Hover */
.hd-slider-track:hover {
    animation-play-state: paused;
}

/* Logo Item Styles */
.hd-slider-logo {
    display: block;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}
.hd-slider-logo:hover {
    transform: scale(1.1);
}

.hd-slider-logo img {
    height: var(--logo-height);
    width: auto;
    max-width: 160px;
    object-fit: contain;
    filter: grayscale(100%) opacity(0.6);
    transition: all 0.3s ease;
    display: block;
}

.hd-slider-logo:hover img {
    filter: grayscale(0%) opacity(1);
}

@keyframes hdMarquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* Move 50% because we duplicate the list */
}

/* RESPONSIVE */
@media (min-width: 768px) {
    .hd-slider-wrapper { --logo-height: 60px; padding: 80px 0; }
    .hd-slider-track { gap: 100px; padding-left: 100px; }
}