.marquee-container {
    width: 100%;
    overflow: hidden; /* Hides content outside the container */
    white-space: nowrap; /* Keeps all content on a single line */
    box-sizing: border-box;
}

.marquee-content {
    display: inline-block;
    padding-left: 100%; /* Starts the text completely off-screen to the right */
    animation: scrolling 20s linear infinite; /* Animation name, duration, timing, and repetition */
}

@keyframes scrolling {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%); /* Moves the text completely off-screen to the left */
    }
}