/* ========================================================= */
/* 1. Base Structure CSS (आपके दिए गए कोड से) */
/* ========================================================= */

.slider-wrapper {
    width: 100%;
    overflow: hidden; /* स्लाइडर के बाहर की सामग्री छिपाता है */
    position: relative;
    /* Marquee कंटेनर */
}

/* right-marquee (यह कंटेनर Marquee को होल्ड करता है) */
.right-marquee {
    /* इसे overflow: hidden कंटेनर के अंदर रखें */
    width: 100%;
    overflow: hidden;
}

/* right-marquee-list (यह स्लाइडिंग ट्रैक है) */
.right-marquee-list {
    /* Marquee ट्रैक को एक लंबी लाइन में लाने के लिए */
    display: flex;
    white-space: nowrap; /* यह महत्वपूर्ण है ताकि आइटम नीचे न जाएँ */
    width: max-content; /* सभी आइटम्स की कुल चौड़ाई लेगा */
    will-change: transform;
    /* animation इस क्लास पर अप्लाई होती है */
}

/* rptrvideo के अंदर का flex कंटेनर (आपके HTML में #sliderpaidvideolefttoright) */
/* यदि आप ऊपर .right-marquee-list पर flex लगाते हैं, तो इस स्टाइल को हटा सकते हैं, 
   लेकिन आपके HTML के अनुसार इसे रखा गया है: */
#sliderpaidvideolefttoright {
    display: flex;
    white-space: nowrap;
    will-change: transform;
    /* इसकी width: max-content; होनी चाहिए, जो flex/white-space से बन जाएगी */
}

    /* Individual Video Item Styling (आपके HTML में inline styles को CSS में बदला) */
    #sliderpaidvideolefttoright > div {
        flex: 0 0 auto;
        margin-right: 15px;
        text-align: center;
    }
#promotionTrack11 > div {
    flex: 0 0 auto;
    margin-right: 15px;
    text-align: center;
}
#promotionTrack111 > div {
    flex: 0 0 auto;
    margin-right: 15px;
    text-align: center;
}

.video-thumb {
    width: 350px;
    height: 250px;
    overflow: hidden;
}

    .video-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* इमेज को पूरी तरह से भरने के लिए */
        cursor: pointer;
        transition: transform 0.3s ease; /* Hover इफ़ेक्ट के लिए */
    }

        .video-thumb img:hover {
            transform: scale(1.05); /* या translateY(-15px) जैसा आप चाहते हैं */
        }

/* Heading/Caption Styling */
#sliderpaidvideolefttoright > div > div:last-child {
    margin-top: 5px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

#promotionTrack11 > div > div:last-child {
    margin-top: 5px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

#promotionTrack111 > div > div:last-child {
    margin-top: 5px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

/* ========================================================= */
/* 2. Animation & Keyframes CSS (Marquee Logic) */
/* ========================================================= */

/* Keyframes → (यह कोड Marquee को शुरू से अंत तक ले जाने के लिए है) */

/* Left to Right Keyframes (आपके कोड में scrollRight) */
@keyframes scrollRight {
    /* अगर आपने content को डुप्लीकेट नहीं किया है, तो यह Keyframe का सबसे आसान उपयोग है
       (शुरुआत में ट्रैक को लेफ्ट में छिपाओ और फिर स्क्रीन पर लाओ) */
    0% {
        transform: translateX(-100%); /* ट्रैक को स्क्रीन की चौड़ाई के बराबर लेफ्ट में खिसकाओ */
    }

    100% {
        transform: translateX(100%); /* ट्रैक को स्क्रीन की चौड़ाई के बराबर राइट में खिसकाओ */
    }
    /* NOTE: यदि आप "infinite seamless loop" चाहते हैं, 
       तो आपको HTML में वीडियो आइटम्स को डुप्लीकेट करना होगा 
       और keyframes को transform: translateX(-50%) से 0 तक एडजस्ट करना होगा। */
}

/* Right to Left Keyframes (आपके कोड में scrollLeft, पर आपके HTML में उपयोग नहीं हुआ है) */
@keyframes scrollLeft {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}


/* Applying animations to marquees */

/* यदि आप Right-to-Left चाहते हैं: */
.left-marquee[data-direction="left"] .left-marquee-list {
    animation: scrollLeft 60s linear infinite;
}

.left-marquee:hover .left-marquee-list {
    animation-play-state: paused;
}

/* आपके HTML के अनुसार, Left-to-Right (जो आपने right-marquee को दिया है): */
.right-marquee[data-direction="right"] .right-marquee-list {
    animation: scrollRight 60s linear infinite;
}

.right-marquee:hover .right-marquee-list {
    animation-play-state: paused;
}