/* =========================================================
   Alpha 20 — شريط "يثقون فينا" (فوق الفوتر)
   ========================================================= */
.cl-strip {
  position: relative;
  padding-block: clamp(36px, 5vw, 64px);
  background: transparent;              /* ياخذ لون الصفحة (أبيض عند نهاية التدرّج) */
  border-top: 1px solid rgba(0, 0, 0, .08);
  font-family: 'Tajawal', sans-serif;
  overflow: hidden;
}
html[lang^="en"] .cl-strip { font-family: 'Poppins', 'Tajawal', sans-serif; }

.cl-strip__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 0 clamp(22px, 3vw, 36px);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  font-weight: 700;
  color: rgba(0, 0, 0, .6);
}
.cl-strip__title::before,
.cl-strip__title::after {
  content: "";
  width: 40px;
  height: 2px;
  background: #FC723F;
}

/* الشريط المتحرك */
.cl-marquee {
  direction: ltr;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.cl-track {
  display: flex;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;   /* الحركة نفسها بالجافاسكربت (clients.js) */
}

.cl-item {
  flex: none;
  display: grid;
  place-items: center;
  height: 96px;
  padding-inline: clamp(26px, 3.5vw, 52px);
}

/* الشعار: رمادي، ولما تمر عليه يرجع لونه */
.cl-item img {
  display: block;
  max-height: 84px;
  max-width: 160px;
  width: auto;
  height: auto;
  object-fit: contain;
  /* رمادي غامق شوي عشان الشعارات الفاتحة تبان على الأبيض */
  filter: grayscale(1) brightness(.6) contrast(1.15);
  opacity: .75;
  transition: filter .4s ease, opacity .4s ease, transform .4s ease;
}
.cl-item:hover img { filter: none; opacity: 1; transform: scale(1.06); }

/* لو الشعار ما حمّل: يطلع اسم الجهة مكانه */
.cl-item__name {
  direction: rtl;
  white-space: nowrap;
  font-weight: 800;
  font-size: clamp(1.2rem, 1.8vw, 1.6rem);
  color: rgba(0, 0, 0, .45);
  transition: color .3s ease;
}
html[lang^="en"] .cl-item__name { direction: ltr; }
.cl-item:hover .cl-item__name { color: #FC723F; }
/* لو الشعار موجود: الاسم يختفي من الشاشة (يظل لقوقل) */
.cl-item.has-logo .cl-item__name {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

@media (max-width: 768px) {
  .cl-item { height: 72px; padding-inline: 20px; }
  .cl-item img { max-height: 62px; max-width: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  .cl-track { flex-wrap: wrap; justify-content: center; width: auto; transform: none !important; }
}