/* تنسيق بطاقات الأقسام بشكل عام */
.lazy__bg.lazy.bg-no-repeat.entered.loaded {
  background-color: #ffffff; /* خلفية بيضاء نقية */
  border-radius: 12px; /* زوايا مستديرة للبطاقة */
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08); /* ظل خفيف لإبراز البطاقات */
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* حركة سلسة */
  padding: 20px; /* مسافة داخلية حول المحتوى */
  display: flex; /* لتوسيط المحتوى بداخلها */
  flex-direction: column; /* لجعل المحتوى رأسيًا */
  justify-content: center; /* توسيط رأسي للمحتوى */
  align-items: center; /* توسيط أفقي للمحتوى */
  min-height: 180px; /* ارتفاع أدنى للبطاقة (قابل للتعديل) */
}

/* تأثير عند مرور الماوس على بطاقة القسم */
.lazy__bg.lazy.bg-no-repeat.entered.loaded:hover {
  transform: translateY(-5px); /* رفع البطاقة قليلاً عند مرور الماوس */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); /* زيادة شدة الظل عند التمرير */
}

/* تنسيق الصورة داخل القسم (الصورة اللي في الخلفية) */
.lazy__bg.lazy.bg-no-repeat.entered.loaded[style*="background-image"] {
  background-size: contain; /* تأكد أن الصورة مناسبة داخل المساحة */
  background-position: center; /* توسيط الصورة */
  background-repeat: no-repeat; /* عدم تكرار الصورة */
}

/* تنسيق النص أو العنوان الموجود تحت الصورة إذا كان موجودًا */
.lazy__bg.lazy.bg-no-repeat.entered.loaded + h3 { /* افترض أن العنوان H3 يتبع الـ div مباشرة */
  font-size: 18px; /* حجم الخط */
  color: #333333; /* لون الخط */
  margin-top: 15px; /* مسافة بين الصورة والنص */
  text-align: center; /* توسيط النص */
}

/* هذا الكود يجعل البانر أكثر عرضاً ويحافظ على نسب الصورة */
.w-full.object-contain.rounded-md[alt*="image-slider"] {
  height: auto !important; /* السماح للارتفاع بالتغير تلقائيًا */
  max-width: 100% !important; /* ضمان أن البانر يملأ عرض الصفحة */
  object-fit: contain !important; /* للحفاظ على نسب الصورة الأصلية */
  border-radius: 12px !important; /* زوايا مستديرة */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important; /* ظل بارز */
  transition: transform 0.5s ease-in-out, filter 0.5s ease-in-out !important; /* حركة سلسة */
}

/* هذا الكود يضيف تأثير عند مرور الماوس على البانر */
.w-full.object-contain.rounded-md[alt*="image-slider"]:hover {
  transform: scale(1.05) !important; /* تكبير البانر بشكل خفيف */
  filter: brightness(0.95) !important; /* تغميق الصورة قليلاً */
}