.marquee {
    margin: 10px 0;
    overflow: hidden;
    /* Скрывает текст, который выходит за границы контейнера */
    white-space: nowrap;
    /* Запрещает перенос текста на новую строку */
    width: 1100px;
    /* Задаем фиксированную ширину контейнера */
    background-color: #fff;
    /* Цвет фона для читаемости */
    padding: 10px;
    /* Отступ для создания «бесшовного» эффекта */
    background-color: rgb(132, 208, 248);
    font: 600 18px sans-serif;
    line-height: 16px;
    color: rgb(239, 58, 58);
    border-radius: 5px;
}

.marquee-text {
    display: inline-block;
    margin: auto;
    padding: 0 10px;
    /* Важно: ширина элемента должна равняться ширине текста */
    width: auto;
    animation: marquee 10s linear infinite;
    /* Анимация marquee длительностью 10с с линейным движением бесконечное количество раз */
}

@keyframes marquee {
    0% {
        transform: translateX(0);
        /* Начальное положение — в правой части контейнера */
    }

    100% {
        transform: translateX(-100%);
        /* Сдвигаем элемент за левую границу */
    }
}

/* Пауза при наведении курсора */
.marquee-text:hover {
    animation-play-state: paused;
}

/* Для accessibility: отключаем анимацию, если браузер снизил уровень анимации */
@media (prefers-reduced-motion: reduce) {
    .marquee-text {
        animation: marquee 100s linear infinite;
    }
}