/* Marquee Scroll Plugin Styles */

.marquee-scroll-container {
    display: block;
    margin: 0 0 !important;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.marquee-scroll-svg {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 100%;
    overflow: hidden;
}

/* Responsive design for different screen sizes */
@media (min-width: 1200px) {
    .marquee-scroll-container {
        overflow: hidden;
    }
    
    .marquee-scroll-svg {
        transform-origin: left center;
    }
}

@media (min-width: 1600px) {
    .marquee-scroll-container {
        overflow: hidden;
    }
    
    .marquee-scroll-svg {
        transform-origin: left center;
    }
}

@media (min-width: 2000px) {
    .marquee-scroll-container {
        overflow: hidden;
    }
    
    .marquee-scroll-svg {
        transform-origin: left center;
    }
}

@media (max-width: 767px) {
    .marquee-scroll-container {
        width: 100% !important;
        overflow: hidden;
    }
    
    .marquee-scroll-svg {
        transform: scale(1);
        transform-origin: center;
        overflow: hidden;
    }
}

/* Animation smoothness */
.marquee-scroll-svg text {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Optional: Add a subtle shadow for better readability */
.marquee-scroll-svg text {
    filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.1));
}

/* Optional: Add hover effect */
.marquee-scroll-container:hover .marquee-scroll-svg text {
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.2));
}