/* Add custom CSS styles below */ 
.index #banners-slider--5 div a {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* الصورة: بدون أي zoom افتراضي (يحافظ على الجودة) */
.index #banners-slider--5 div a .loaded {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0.4s ease;
  will-change: transform;
  image-rendering: auto;
}

/* Hover بسيط جدًا (يحافظ على الوضوح) */
.index #banners-slider--5 div a:hover .loaded {
  transform: scale(1.02);
}

/* Hover container */
.index #banners-slider--5 div a:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.12);
}

/* Light sweep خفيف جدًا (اختياري بدون ما يبوّظ الجودة) */
.index #banners-slider--5 div a::before {
  content: '';
  position: absolute;
  top: 0;
  left: -70%;
  width: 35%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.05),
    transparent
  );
  transform: skewX(-20deg);
  animation: sweep 9s ease-in-out infinite;
  animation-delay: 2s;
  pointer-events: none;
  opacity: 0.4;
}

@keyframes sweep {
  0% { transform: translateX(-120%) skewX(-20deg); }
  100% { transform: translateX(220%) skewX(-20deg); }
}