/* Explain: Styles for testimonial scrolling and dynamically generated article content. - */
.scrolling-wrapper {
    display: flex;
    width: max-content;
    animation: scroll-marquee 45s linear infinite;
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

.scrolling-wrapper.reverse {
    animation: scroll-marquee-reverse 45s linear infinite;
}

@media (hover: hover) {
    .scrolling-wrapper:hover {
        animation-play-state: paused;
    }
}

@keyframes scroll-marquee {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}

@keyframes scroll-marquee-reverse {
    0% { transform: translate3d(-50%, 0, 0); }
    100% { transform: translate3d(0, 0, 0); }
}

/* تنسيقات محتوى المقالات الديناميكية (WYSIWYG) */
.article-body h2 { 
    font-size: 1.75rem; 
    font-weight: 800; 
    color: var(--primary-color); 
    margin-top: 2.5rem; 
    margin-bottom: 1.25rem; 
    font-family: var(--font-heading); 
}
.article-body h3 { 
    font-size: 1.5rem; 
    font-weight: 700; 
    color: var(--text-color); 
    margin-top: 2rem; 
    margin-bottom: 1rem; 
    font-family: var(--font-heading); 
}
.article-body p { 
    font-size: 1.125rem; 
    line-height: 1.85; 
    color: var(--text-muted); 
    margin-bottom: 1.25rem; 
}
.article-body ul { 
    list-style-type: disc; 
    margin-right: 1.5rem; 
    margin-bottom: 1.5rem; 
}
.article-body ol { 
    list-style-type: decimal; 
    margin-right: 1.5rem; 
    margin-bottom: 1.5rem; 
}
.article-body li { 
    margin-bottom: 0.75rem; 
    color: var(--text-muted); 
    font-size: 1.125rem; 
    line-height: 1.8;
}
.article-body strong { 
    color: var(--text-color); 
    font-weight: 800; 
}
.article-body img {
    border-radius: 1.5rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-soft);
}