/* ==========================================================================
   Moving Partner Gallery - Universal 2-Row Scrolling (Side-by-Side Logo & Text)
   ========================================================================== */

.brands-gallery-container {
    overflow: hidden;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 20px; /* Space between row 1 and row 2 */
    margin-top: 40px;
    width: 100%;
    /* Smooth visual fade edge mask */
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.brand-logo-row {
    display: flex;
    overflow: hidden;
    margin-bottom: 0;
    width: 100%;
}

/* Force the tracks into a horizontal strip */
.brand-logo-track {
    display: flex;
    gap: 30px;
    width: max-content !important;
}

/* Unified Brand Card rules - NOW CHANGED TO ROW LAYOUT */
.brand-logo-card {
    display: flex;
    flex-direction: row;       /* Places Logo and Text side-by-side */
    align-items: center;
    justify-content: flex-start; /* Aligns content cleanly from the left */
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.02);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
    width: 240px;               /* Widened card size to support horizontal layout */
    height: 80px;               /* Slightly lower height for row styling */
    padding: 12px 20px;
    box-sizing: border-box;
    gap: 15px;                  /* Space between the logo image and text name */
    flex-shrink: 0;             /* Prevents cards from squishing horizontally */
}

.brand-logo-card img {
    max-width: 100px;           /* Increased maximum width for side-by-side display */
    max-height: 45px;
    object-fit: contain;
}

/* Matches typography formatting seen throughout S.N Traders */
.brand-logo-card span {
    font-size: 0.82rem;
    color:#94a3b8;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;        /* Prevents brand text from breaking into two lines */
}

/* Subtle lift effect on desktop hover */
@media (hover: hover) {
    .brand-logo-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 24px rgba(0, 115, 177, 0.08); /* SNT Brand Blue Glow */
    }
}

/* --- ANIMATION CONTROLS --- */
.track-left {
    animation: scrollBrandsLeft 32s linear infinite !important;
}

.track-right {
    animation: scrollBrandsRight 32s linear infinite !important;
}

/* Freeze animation when a user hovers over a row */
.brand-logo-row:hover .brand-logo-track {
    animation-play-state: paused;
}

/* --- ENGINE KEYFRAMES --- */
@keyframes scrollBrandsLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - 15px)); } /* Shifts exactly half-width */
}

@keyframes scrollBrandsRight {
    0% { transform: translateX(calc(-50% - 15px)); }
    100% { transform: translateX(0); }
}