/* Marquee / Infinite Scroll Animation */
.marquee-wrapper {
    position: relative;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    padding: 20px 0;
}

.marquee-track {
    display: flex;
    gap: 2rem;
    width: max-content;
    animation: scroll 40s linear infinite;
}

.marquee-track.reverse {
    animation-direction: reverse;
}

.marquee-track:hover {
    animation-play-state: paused;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-50% - 1rem));
    }
}

/* Enhanced Logo Card for Marquee */
.modern-logo-card {
    background: var(--glass-bg-strong);
    /* Use strong glass for better contrast on glass section */
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    padding: 1.5rem 2.5rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 220px;
    height: 100px;
    transition: all 0.3s ease;
    box-shadow: var(--glass-shadow);
}

.modern-logo-card:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 20px -5px rgba(198, 58, 49, 0.15);
    border-color: var(--menisa-red);
}

.modern-logo-card span {
    font-weight: 600;
    color: var(--charcoal);
    font-size: 1.1rem;
    opacity: 0.7;
    transition: all 0.3s ease;
}

.modern-logo-card:hover span {
    opacity: 1;
    color: var(--menisa-red);
}