/* =========================================
   Our Clients Section - Marquee Style (Dark Theme)
   ========================================= */
.clients-section {
    background-color: transparent;
    /* Changed from #f9f9f9 to transparent */
    padding: 80px 0;
    /* Reduced top padding since title is gone */
    overflow: hidden;
    /* Hide horizontal scrollbar caused by marquee */
}

/* Container for the two marquee rows */
.marquee-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0;
    /* Reduced gap because rows have padding now */
    margin-top: 40px;
}

/* Individual row styling */
.marquee-row {
    display: flex;
    overflow: hidden;
    position: relative;
    width: 100%;
    padding: 30px 0;
    /* Added padding to prevent hover clipping */
}

/* The moving content container */
.marquee-content {
    display: flex;
    gap: 25px;
    /* Slightly reduced gap */
    /* This calculation depends on the number of items. 
       We have duplicated items, so width needs to be wide enough.
       Flexbox handles width naturally, but we need to ensure the animation
       moves exactly 50% (because we duplicated the list once)
    */
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    /* Adjust duration for speed */
    animation-duration: 40s;
    /* Prevent shrinking of cards */
    flex-shrink: 0;
}

/* Scroll Left Animation */
.marquee-row.scroll-left .marquee-content {
    animation-name: scroll-left;
}

/* Scroll Right Animation */
.marquee-row.scroll-right .marquee-content {
    animation-name: scroll-right;
}

/* Pause on hover for better UX */
.marquee-wrapper:hover .marquee-content {
    animation-play-state: paused;
}

/* Keyframes */
@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
        /* Move by 50% because we duplicated the items */
    }
}

@keyframes scroll-right {
    0% {
        transform: translateX(-50%);
        /* Start from the "duplicated" set's start */
    }

    100% {
        transform: translateX(0);
    }
}

/* Client Card Styling - Adapted for Marquee (Dark Theme) */
/* Client Card Styling - Redesigned to Pill Shape */
.client-card {
    background: var(--card-bg, #111827);
    border-radius: 50px;
    padding: 8px 25px 8px 10px;
    min-width: 200px;
    max-width: 300px;
    height: 60px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    user-select: none;
    flex: 0 0 auto;
}

/* Hover Effect */
.client-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.3);
    border-color: rgba(0, 229, 255, 0.4);
    background: rgba(17, 24, 39, 0.9);
    z-index: 10;
}

/* Logo container */
.client-logo-wrapper {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    padding: 5px;
    transition: all 0.3s ease;
    flex-shrink: 0;
    margin-bottom: 0;
}

.client-card:hover .client-logo-wrapper {
    background: rgba(255, 255, 255, 0.1);
}

/* Grayscale + Hover Transition */
.client-logo-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: grayscale(100%) brightness(0.8);
    transition: filter 0.3s ease;
    opacity: 0.8;
}

/* Hover: Full Color */
.client-card:hover .client-logo-wrapper img {
    filter: grayscale(0%) brightness(1);
    opacity: 1;
}

/* Client Name */
.client-name {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-white);
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.3s ease;
}

.client-card:hover .client-name {
    color: var(--primary-cyan);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .marquee-wrapper {
        gap: 30px;
    }

    .client-card {
        min-width: 180px;
        max-width: 180px;
        padding: 15px 10px;
    }

    .client-logo-wrapper {
        width: 50px;
        height: 50px;
        padding: 8px;
    }

    .client-name {
        font-size: 0.85rem;
    }
}