/* Global Fix for Horizontal Scrolling */
html,
body {
    overflow-x: hidden;
    width: 100%;
}

/* Infinite Scrolling Marquee */
.marquee-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    display: flex;
}

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

.marquee-content {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* Ensure smooth continuous scrolling */
@keyframes marquee {
    0% {
        transform: translateX(0);
    }

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

/* Pause on hover (optional, but good for UX) */
.marquee-container:hover .marquee-track {
    animation-play-state: paused;
}