#dynamic-marquee-container {
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    width: 100%; /* Adjust as needed */
    height: 40px; /* Adjust height */
 
}

#dynamic-marquee {
    position: absolute;
    white-space: nowrap;
    animation: scroll-right linear 60s infinite; /* No fixed duration */
    font-size: 14px; /* Adjust font size */
    line-height: 40px; /* Match container height */
    color: var(--wd-widget-title-color); /* Adjust text color */
}

#dynamic-marquee:hover {
    animation-play-state: paused;
}

/* Keyframes for scrolling */
@keyframes scroll-right {
    from {
        transform: translateX(-50%);
    }
    to {
        transform: translateX(100%);
    }
}