.marquee-section { position: relative; width: 100%; padding: 80px 0; background-color: var(--bg-color); /* pure black */ overflow: hidden; border-top: 1px solid rgba(255, 255, 255, 0.03); border-bottom: 1px solid rgba(255, 255, 255, 0.03); } .marquee-fade-left, .marquee-fade-right { position: absolute; top: 0; width: 15%; height: 100%; z-index: 2; pointer-events: none; } .marquee-fade-left { left: 0; background: linear-gradient(to right, var(--bg-color), transparent); } .marquee-fade-right { right: 0; background: linear-gradient(to left, var(--bg-color), transparent); } .marquee-container { width: 100%; overflow: hidden; } .marquee-content { display: flex; width: fit-content; animation: scroll 30s linear infinite; align-items: center; } .marquee-item { margin: 0 40px; white-space: nowrap; transition: transform 0.4s ease; } .logo-item img { max-height: 60px; max-width: 200px; object-fit: contain; transition: all 0.4s ease; opacity: 0.8; /* Base opacity for all */ } .logo-white-bg { background: #ffffff; padding: 10px 18px; border-radius: 12px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,0.2); } .logo-white-bg img { opacity: 1 !important; filter: none !important; } .marquee-item:hover img { opacity: 1; } @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-33.33%); } }