/* سكشن قصص النجاح */
.rotating-section {
    background: #f2f2f2ff;
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: 1rem;
}

/* العنوان */
.rotating-section .rotating-text {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.rotating-section .rotating-text .section-title {
    margin: 0;
}

@media (max-width: 768px) {
    .rotating-section .rotating-text .section-title {
        font-size: 1.6rem;
    }
}

/* الكاروسيل */
.rotating-section .image-carousel-container {
    width: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    margin: 50px 0;
}

/* شريط الصور الأساسي – الترتيب ثابت + بدون أنيميشن افتراضي */
.rotating-section .image-carousel {
    direction: ltr;              /* نخلي الترتيب ثابت في كل اللغات */
    display: flex;
    gap: 3px;
    width: max-content;
    will-change: transform;
    transform: translateX(0);
}

/* كل سلايد */
.rotating-section .image-slide {
    flex: 0 0 500px;
    width: 500px;
}

.rotating-section .device-screen img {
    width: 100%;
    height: auto;
    display: block;
}

/* إيقاف الحركة عند الهوفر */
.rotating-section .image-carousel:hover {
    animation-play-state: paused;
}

/* ============================= */
/*   إنجليزي: يسار → يمين (LTR) */
/* ============================= */
html[lang^="en"] .rotating-section .image-carousel,
body[dir="ltr"] .rotating-section .image-carousel,
.ltr .rotating-section .image-carousel {
    animation-name: scroll-en;
    animation-duration: 35s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes scroll-en {
    0%   { transform: translateX(-50%); }   /* يبدأ من اليسار */
    100% { transform: translateX(0); }      /* يتحرك لليمين */
}

/* ============================= */
/*   عربي: يمين → يسار (RTL)    */
/* ============================= */
html[lang^="ar"] .rotating-section .image-carousel,
body[dir="rtl"] .rotating-section .image-carousel,
.rtl .rotating-section .image-carousel {
    animation-name: scroll-ar;
    animation-duration: 80s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes scroll-ar {
    0%   { transform: translateX(0); }      /* يبدأ من اليمين */
    100% { transform: translateX(-50%); }   /* يتحرك لليسار */
}

/* موبايل */
@media (max-width: 768px) {
    .rotating-section .image-slide {
        flex: 0 0 600px;
        width: 600px;
    }

    /* نبطئ الحركة شوي على الجوال لو حاب */
    html[lang^="en"] .rotating-section .image-carousel,
    body[dir="ltr"] .rotating-section .image-carousel,
    .ltr .rotating-section .image-carousel {
        animation-duration: 60s;
    }

    html[lang^="ar"] .rotating-section .image-carousel,
    body[dir="rtl"] .rotating-section .image-carousel,
    .rtl .rotating-section .image-carousel {
        animation-duration: 90s;
    }
}