.cmp-marquee-container {
    width: 100%; /* Fit inside the parent */
    overflow: hidden; /* Hide overflowing content */
    position: relative; /* Positioning context for child elements */
}

.cmp-marquee {
    display: inline-block; /* Keeps the text in a single line */
    animation: marquee-left linear infinite; /* Default direction */
    white-space: nowrap; /* Prevent line breaks */
    animation-play-state: running; /* Default to running */
}

/* Define the animations for each direction */
@keyframes marquee-left {
    from {
        transform: translateX(100%); /* Start from the right */
    }
    to {
        transform: translateX(-100%); /* Move to the left */
    }
}

@keyframes marquee-right {
    from {
        transform: translateX(-100%); /* Start from the left */
    }
    to {
        transform: translateX(100%); /* Move to the right */
    }
}

@keyframes marquee-up {
    from {
        transform: translateY(100%); /* Start from the bottom */
    }
    to {
        transform: translateY(-100%); /* Move to the top */
    }
}

@keyframes marquee-down {
    from {
        transform: translateY(-100%); /* Start from the top */
    }
    to {
        transform: translateY(100%); /* Move to the bottom */
    }
}