/* Add custom CSS styles below */ 
/* =================================
   تحريك الشريط الإعلاني - ثيم نمو
   ================================= */

/* إخفاء النص خارج حدود الشريط */
salla-advertisement,
salla-announcement,
.announcement-bar,
.top-bar,
.topbar,
.top-bar__content,
.announcement,
.advertisement {
    overflow: hidden !important;
}

/* تحريك محتوى الشريط */
salla-advertisement *,
salla-announcement *,
.announcement-bar p,
.announcement-bar a,
.top-bar p,
.top-bar a,
.topbar p,
.topbar a,
.announcement p,
.announcement a,
.advertisement p,
.advertisement a {
    white-space: nowrap !important;
}

/* الحركة */
salla-advertisement p,
salla-advertisement a,
salla-announcement p,
salla-announcement a,
.announcement-bar p,
.announcement-bar a,
.top-bar p,
.top-bar a,
.topbar p,
.topbar a,
.announcement p,
.announcement a,
.advertisement p,
.advertisement a {

    display: inline-block !important;
    width: max-content !important;
    max-width: none !important;

    animation-name: ponjeMove !important;
    animation-duration: 12s !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
}

/* من اليمين إلى اليسار */
@keyframes ponjeMove {

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

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

/* الجوال */
@media screen and (max-width: 768px) {

    salla-advertisement p,
    salla-advertisement a,
    salla-announcement p,
    salla-announcement a,
    .announcement-bar p,
    .announcement-bar a,
    .top-bar p,
    .top-bar a,
    .topbar p,
    .topbar a,
    .announcement p,
    .announcement a,
    .advertisement p,
    .advertisement a {

        animation-duration: 9s !important;
    }
}