/* Add custom CSS styles below */ 
.s-block--hero-slider .swiper-slide .overlay-bg:after {
background-color: unset;
}

/* 1) main-slider-0 يظهر في الشاشات الكبيرة ويُخفى على الجوال */
@media (max-width: 767px) {
  salla-slider#main-slider-0 {
    display: none !important;
  }
}
/* الافتراضي: يظهر على الشاشات ≥ 768px */
/* (لا تحتاج إلى كتابة قاعدة إضافية إذا كان العرض الافتراضي block) */

/* 2) main-slider-1 يظهر فقط على الجوال ويُخفى في الشاشات الكبيرة */
salla-slider#main-slider-1 {
  display: none !important; /* افتراضياً مخفي */
}
@media (max-width: 767px) {
  salla-slider#main-slider-1 {
    display: block !important;
  }
}

/* 1. إجعل الشريط يمكنه التمرير أفقيّاً */
salla-slider#main-links-2 .swiper-container {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* 2. غيّر حجم الشريحة في الجوال (مثال: 3 شرائح في الشاشة) */
@media (max-width: 767px) {
  salla-slider#main-links-2 .swiper-slide {
    flex: 0 0 33.3333% !important;
    max-width: 33.3333% !important;
  }
  /* إذا تفضل شريحتين: استخدم 50% بدل 33.33% */
  /*
  salla-slider#main-links-2 .swiper-slide {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
  */
}

/* 3. (اختياري) إظهار أزرار التنقل على الجوال */
@media (max-width: 767px) {
  salla-slider#main-links-2 .s-slider-prev,
  salla-slider#main-links-2 .s-slider-next {
    display: block !important;
  }
}

@media (max-width: 767px) {
  /* 1) نحول الحاوية من grid إلى block حتى ينتقل كل بلوك سطراً مستقلّاً */
  .s-block--features .grid {
    display: block !important;
  }

  /* 2) نجعل كل بلوك flex عمودي ونركّز محتوياته */
  .s-block--features__item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    margin-bottom: 1rem !important;
    text-align: center !important;
  }

  /* 3) (اختياري) ضبط مسافة تحت الأيقونة */
  .s-block--features__item .feature-icon {
    margin-bottom: 0.5rem;
  }
}