/* Container styles */
.scrolling-text-container {
    background-color: #eff5ff00;
    border-radius: 4px;
    overflow: hidden;
    -webkit-mask: linear-gradient(
      90deg,
      transparent,
      white 20%,
      white 80%,
      transparent
    );
    mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}

/* Inner container styles */
.scrolling-text-inner {
    display: flex;
    white-space: nowrap;
    font-size: 16px;
    font-weight: 600;
    padding: 8px 0;
}

/* Text styles */
.scrolling-text {
    display: flex;
    gap: 2rem;
}

.scrolling-text-item img{
    max-width: 250px;
}

.scrolling-text-item {
    padding: 0 30px;
}

/* Apply the animation to the text items */
.scrolling-text-inner>div {
    animation: scroll-left var(--marquee-speed) linear infinite;
}

/* Pause the animation when a user hovers over it */
.scrolling-text-container:hover .scrolling-text-inner>div {
    animation-play-state: paused;
}

/* Setting the Animation using Keyframes */
@keyframes scroll-left {
    to {
        transform: translate(calc(-20% - 0.5rem));
    }
}