@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.animate-scroll {
    display: flex;
    width: max-content;
    animation: scroll 30s linear infinite;
}

.green-gradient {
    fill: url(#greenGradient);
}

.scroll-container {
    overflow: hidden;
    position: relative;
}

.scroll-content {
    display: flex;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.scroll-left {
    animation-name: scrollLeft;
    animation-duration: 30s;
}

.scroll-right {
    animation-name: scrollRight;
    animation-duration: 30s;
}

@keyframes scrollLeft {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@keyframes scrollRight {
    0% {
        transform: translateX(-25%);
    }
    100% {
        transform: translateX(25%);
    }
}


/* Fixed Alignment and Green Gradient Styling */