/* ============= Header Colors ============== */
.store-header .da-tm {
  color: #6751f0 !important; /* قبل الاسكرول */
}

.store-header.scrolled .da-tm {
  color: #2e2a6c !important; /* بعد الاسكرول */
}
.angel-ad{
  background-color:#2e2a6c !important;
}
/* ============= Menu Icon ============= */
.store-header .sicon-menu {
  color: #6751f0 !important; /* قبل الاسكرول */
}

/* ============= Footer Colors ============= */
.store-footer,
.store-footer * {
  color: white !important;
}

footer.store-footer {
  color: white;
}

footer.store-footer a,
footer.store-footer p,
footer.store-footer h2,
footer.store-footer h3,
footer.store-footer span,
footer.store-footer .social-label,
footer.store-footer .copyrights p {
  color: white !important;
}

/* ============ Scroll Animation ============ */
@keyframes zoomInFade {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ============== Banner Card ============== */
.banner-square {
  opacity: 0;
  transform: scale(0.9);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  position: relative;
  overflow: hidden;
  padding: 2px;
  border-radius: 12px;
  background: linear-gradient(135deg, #2e2a6c, #6c2e2a, #2a6c5a, #f0c987);

  background-size: 300% 300%;
  animation: borderRotate 6s linear infinite;
}

/* الصورة داخل الكارت */
.banner-square .box-img {
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

/* تظهر عند دخول العنصر للشاشة */
.banner-square.visible {
  animation: zoomInFade 0.6s ease-out forwards;
}

/* Hover تأثير */
.banner-square:hover {
  transform: scale(1.2) translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
  z-index: 3;
}

/* Animation للبوردر (Linear Gradient) */
@keyframes borderRotate {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Animation للبوردر (Conic Gradient دائري) */
.banner-square::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  z-index: -1;
  background: conic-gradient(from 0deg, #2e2a6c, #4a47a3, #6f74c7, #b0b3f1);
  animation: rotateBorder 3s linear infinite;
  border-radius: 14px;
}

@keyframes rotateBorder {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.banner-square .text-center{
  display:none !important;
}
/* ============ Categories Card ============ */

.main-categories .banner-square{
  margin: 1px 10px;
  padding: 2px !important;
}


/* ===== Scroll Animation CSS ===== */