/* ==================================================
   Modern Marquee Styles
   ================================================== */
.custom-marquee-wrapper {
    background: #0B081D; /* Theme dark background */
    border-top: 1px solid rgba(59, 130, 246, 0.3); /* Blue subtle border */
    border-bottom: 1px solid rgba(168, 85, 247, 0.3); /* Purple subtle border */
    padding: 10px 0;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.marquee-content {
    display: inline-block;
    white-space: nowrap;
    animation: marquee-scroll 50s linear infinite;
    padding-left: 100%; /* Start scrolling from the very right edge */
}

/* Pause animation on mouse hover */
.custom-marquee-wrapper:hover .marquee-content {
    animation-play-state: paused;
    cursor: pointer;
}

.marquee-item {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #ffffff;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.icon-glow {
    color: #FFD700; /* Yellow icon */
    margin-right: 8px;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.5); /* Neon glow on icon */
}

/* Keyframes for infinite scroll */
@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}