.logo-marquee {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 20px 0;
    background: #fff;
}

.logo-container {
    display: flex;
    animation: scroll var(--scroll-speed, 30s) linear infinite;
    gap: var(--logo-gap, 60px);
    align-items: center;
}

.logo-item {
    flex: 0 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--logo-min-width, 200px);
}

.logo-item img {
    max-width: var(--logo-max-width, 200px);
    max-height: var(--logo-max-height, 80px);
    width: auto;
    height: auto;
    transition: transform 0.3s ease;
    object-fit: contain;
    filter: grayscale(0);
}

.logo-item a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: inherit;
}

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

/* Only apply hover pause if enabled */
.logo-container[data-pause="1"]:hover {
    animation-play-state: paused;
}

/* Subtle hover effect for certification logos */
.logo-item img:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Tooltip styling */
.logo-item img[title] {
    cursor: help;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .logo-container {
        gap: calc(var(--logo-gap, 60px) / 2);
    }
    
    .logo-item {
        min-width: calc(var(--logo-min-width, 200px) * 0.75);
    }
    
    .logo-item img {
        max-width: calc(var(--logo-max-width, 200px) * 0.75);
        max-height: calc(var(--logo-max-height, 80px) * 0.75);
    }
}