/* تعريف الأنميشن */
@keyframes circular-shake {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  50% { transform: rotate(-5deg); }
  75% { transform: rotate(5deg); }
  100% { transform: rotate(0deg); }
}

/* إضافة التحريك عند الإشارة للعنصر */
.s-button-element:not(:disabled):not([loading]):hover {
  animation: circular-shake 0.5s;
}

/* تعريف الأنميشن */
@keyframes circular-shake {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  50% { transform: rotate(-5deg); }
  75% { transform: rotate(5deg); }
  100% { transform: rotate(0deg); }
}

/* إضافة التحريك عند الإشارة للعنصر */
.s-product-card-vertical .s-product-card-wishlist-btn button:hover {
  animation: circular-shake 0.19s;
}

/* تعريف الأنميشن لتغيير لون النص */
@keyframes color-shift {
  0% {
    color: #008AC8; /* لون البداية */
  }
  50% {
    color: #0A3191; /* لون المنتصف */
  }
  100% {
    color: #008AC8; /* لون النهاية */
  }
}

/* تطبيق الأنميشن على العنصر */
.s-block__title h2 {
  animation: color-shift 3s infinite; /* مدة الأنميشن 3 ثواني وتكرار لا نهائي */
}

/* تعريف الأنميشن لتغيير لون الخلفية */
@keyframes background-shift {
  0% {
    background-color: #004B9C; /* لون البداية */
  }
  50% {
    background-color: #0A3191; /* لون المنتصف */
  }
  100% {
    background-color: #004B9C; /* لون النهاية */
  }
}

/* تطبيق الأنميشن على العنصر */
.store-footer__inner {
  animation: background-shift 3s infinite; /* مدة الأنميشن 3 ثواني وتكرار لا نهائي */
}


.copyright-text p {
  color: white; /* تغيير لون النص إلى الأبيض */
}
/* تعريف الأنميشن لتغيير لون الخلفية */
@keyframes diagonal-background-shift {
  0% {
    background-color: #FFFFFF; /* لون البداية */
  }
  50% {
    background-color: #FFFFFF; /* لون المنتصف */
  }
  100% {
    background-color: #FFFFFF; /* لون النهاية */
  }
}

/* تطبيق الأنميشن على العنصر */
.topnav-is-dark .top-navbar {
  animation: diagonal-background-shift 3s infinite; /* مدة الأنميشن 3 ثواني وتكرار لا نهائي */
  background-size: 200% 200%;
}

@keyframes gradientAnimation {
    0% {
        background: linear-gradient(to top left, #004B9C, #10228B);
    }
    50% {
        background: linear-gradient(to top left, #0A3191, #0874E9);
    }
    100% {
        background: linear-gradient(to top left, #004B9C, #10228B);
    }
}

.s-product-card-promotion-title {
   
    background: linear-gradient(to top left, #0874E9, #10228B);
    animation: gradientAnimation 5s ease infinite;
}
@keyframes gradientAnimation {
    0% {
        background: linear-gradient(to top left, #0874E9, #10228B);
    }
    50% {
        background: linear-gradient(to top left, #10228B, #0874E9);
    }
    100% {
        background: linear-gradient(to top left, #0874E9, #10228B);
    }
}

.store-footer {
    width: 100%;
    height: 100px; /* أو أي ارتفاع تحتاجه */
    background: linear-gradient(to top left, #0874E9, #10228B);
    animation: gradientAnimation 5s ease infinite;
}