Custom Marquee Section HTML

.marquee-main-wrapper { position: relative; overflow: hidden; min-height: 400px; display: flex; align-items: center; justify-content: center; } .ticker-wrap { width: 150%; position: absolute; background: #ccff00; /* Neon Lime */ padding: 20px 0; box-shadow: 0 0 20px rgba(204, 255, 0, 0.4); white-space: nowrap; } .strip-top { transform: rotate(-5deg); z-index: 1; } .strip-bottom { transform: rotate(5deg); z-index: 2; } .marquee-text { display: inline-block; font-family: ‘Montserrat’, sans-serif; font-weight: 900; font-size: 4rem; color: #000; text-transform: uppercase; padding-right: 50px; } .scroll-left { animation: scrollLeft 20s linear infinite; } .scroll-right { animation: scrollRight 20s linear infinite; } @keyframes scrollLeft { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes scrollRight { from { transform: translateX(-50%); } to { transform: translateX(0); } } .glow-badge { position: absolute; z-index: 10; background: #ccff00; color: #000; padding: 15px 30px; border-radius: 50px; font-weight: 900; text-transform: uppercase; box-shadow: 0 0 30px #ccff00; font-family: ‘Montserrat’, sans-serif; letter-spacing: 2px; } @media (max-width: 768px) { .marquee-text { font-size: 2rem; } .glow-badge { padding: 10px 20px; font-size: 0.8rem; } }