.marquee-wrapper {
    overflow: hidden;
    position: relative;
    white-space: nowrap;
    width: 100%;
}

.marquee-text {
    display: inline-block;
    white-space: nowrap;
    padding-right: 100%;
    animation-name: marquee-left;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes marquee-left {
    from { transform: translateX(100%); }
    to { transform: translateX(-100%); }
}

@keyframes marquee-right {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}