/* 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: visible;
}

/* 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;
        height: 150px !important;
        overflow: visible;
    }
    
    .marquee-scroll-svg {
        transform: scale(1);
        transform-origin: center;
        overflow: visible;
    }
}

/* 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));
}

/* RTL-specific fixes */
.marquee-rtl {
    direction: ltr !important;
    overflow: hidden !important;
}

.marquee-rtl-svg {
    direction: ltr !important;
    overflow: hidden !important;
}

.marquee-rtl-svg text {
    direction: ltr !important;
    unicode-bidi: normal !important;
    text-anchor: start !important;
}

/* RTL responsive design fixes */
@media (min-width: 1200px) {
    .marquee-rtl .marquee-scroll-svg {
        transform-origin: right center !important;
    }
}

@media (min-width: 1600px) {
    .marquee-rtl .marquee-scroll-svg {
        transform-origin: right center !important;
    }
}

@media (min-width: 2000px) {
    .marquee-rtl .marquee-scroll-svg {
        transform-origin: right center !important;
    }
}

/* Force LTR direction for SVG text elements to prevent jumbling */
.marquee-scroll-svg text {
    direction: ltr !important;
    unicode-bidi: normal !important;
}

/* Additional RTL page fixes */
html[dir="rtl"] .marquee-scroll-container,
body[dir="rtl"] .marquee-scroll-container {
    direction: ltr !important;
    overflow: hidden !important;
}

html[dir="rtl"] .marquee-scroll-svg,
body[dir="rtl"] .marquee-scroll-svg {
    direction: ltr !important;
    overflow: hidden !important;
}

html[dir="rtl"] .marquee-scroll-svg text,
body[dir="rtl"] .marquee-scroll-svg text {
    direction: ltr !important;
    unicode-bidi: normal !important;
    text-anchor: start !important;
}

/* Ensure proper clipping for all marquee containers */
.marquee-scroll-container {
    overflow: hidden !important;
    position: relative;
}

.marquee-scroll-svg {
    overflow: hidden !important;
}