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

.store-header.scrolled .da-tm {
  color: #125958 !important; /* بعد الاسكرول */
}
.angel-ad{
  background-color:#227f7a !important;
}
/* ============= Menu Icon ============= */
.store-header .sicon-menu {
    color: #125958 !important; /* قبل الاسكرول */
}
.sidemenu-link.has-max::after,
.has-max::after {
    display: none !important;
    content: none !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;
  border-radius: 14px;

  background: conic-gradient(
    from 0deg,
    #227f7a,
    #2fa39d,
    #56c7c1,
    #2fa39d,
    #227f7a
  );

  animation: rotateBorder 3s linear infinite;
}

@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 ===== */