/* Add custom CSS styles below */ 
.s-block--fixed-banner .container {
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

.s-block--fixed-banner {
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.s-block--fixed-banner img {
  display: block;
  width: 100vw; /* يعرض الصورة بعرض الشاشة بالكامل */
  height: auto;
  border-radius: 0 !important;
  object-fit: cover;
}


/* ======== بداية كود حل مشكلة تداخل الهيدر مع المحتوى ======== */
/* الهيدر شفاف تمامًا */







/* إزالة أي فراغ فوق البنر */
.s-block--fixed-banner {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* تأكد إن البنر نفسه مش بيبدأ من تحت */
.fixed-banner--0 {
  margin-top: 60px; /* لازم تسيب فراغ بحجم الهيدر علشان ميغطيش البنر */
}

/* لو الهيدر أعلى من 60px عدل القيمة هنا */
@media (max-width: 767px) {
  .fixed-banner--0 {
    margin-top: 70px; /* للموبايل – حسب ارتفاع الهيدر */
  }
}





.s-block--square-links {
  margin-bottom: 6rem; /* مسافة أكبر */
}


.s-block--stats {
  margin-bottom: 4rem; /* أو زودها لـ 6rem لو عاوز مسافة أكبر */
}


















#discount-popup .popup-content {
  background: white;
}



/* 📱 موبايل: رجّعهم 2×2 ثابت */
@media (max-width: 767px) {
  .container .flex > a.banner.basis-3\/6 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
  .container .flex > a.banner.basis-3\/6 img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }
}

/* 🖥️ ديسكتوب: صغّر العرض ووسّط الصف—فقط للصفوف اللي فيها بانرات */
@media (min-width: 1024px) {
  /* استهدف أي صف flex يحتوي بانرات basis-3/6 فقط (بدون لمس الأقسام الأخرى) */
  .container .flex:has(> a.banner.basis-3\/6) {
    justify-content: center !important;
  }

  .container .flex:has(> a.banner.basis-3\/6) > a.banner.basis-3\/6 {
    flex: 0 0 40% !important;   /* غيّرها 35% لو عايز أضيق */
    max-width: 40% !important;
  }

  .container .flex:has(> a.banner.basis-3\/6) > a.banner.basis-3\/6 img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }
}

/* 📟 تابلت: حل وسط */
@media (min-width: 768px) and (max-width: 1023px) {
  .container .flex > a.banner.basis-3\/6 {
    flex: 0 0 45% !important;
    max-width: 45% !important;
  }
}