/* Add custom CSS styles below */ 
/* 1. ضبط الحاوية الخارجية للشريط الإعلاني */
.announcement-bar, 
[class*="announcement-bar"] {
    overflow: hidden !important;
    white-space: nowrap !important;
    position: relative !important;
}

/* 2. تطبيق الحركة والتكرار للنص */
.announcement-bar p, 
.announcement-bar div,
.announcement-bar__text {
    display: inline-block !important;
    padding-left: 100% !important;
    animation: marquee-animation 15s linear infinite !important;
}

/* 3. تحديد اتجاه وسرعة الحركة من اليمين إلى اليسار */
@keyframes marquee-animation {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-100%, 0, 0);
    }
}

/* 4. إيقاف الحركة مؤقتاً عند وضع الماوس على النص (اختياري) */
.announcement-bar:hover p {
    animation-play-state: paused !important;
}