@import url("../../variables.css");
/* ====== Clients Section ====== */ 
.clients-section {
  background-color: #e9f3ff;
  font-family: var(--font-family-main);
  position: relative;
  overflow: hidden;
  padding: 80px 70px;
  z-index: 1;
}

 

/* أماكن وحجوم الصور */
.shape1a_local { bottom: 50%; left: 90%; width: 100px; }
.shape2a_local { bottom: 60%; left: 80%; width: 200px; }
@media (max-width: 600px) {
.shape1a_local { bottom: 70%; left: 40%; width: 60px; }
.shape2a_local { bottom: 60%; left: 60%; width: 200px; }
}

/* الصف العلوي: العنوان + الوصف */
.local-header {
  display: flex;
  align-items: flex-start;
  gap: 50px;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto 40px auto;
  flex-wrap: wrap;
}

.title-col {
  flex: 1;
  max-width: 25%;
  min-width: 200px;
  z-index: 1;
}
 
.desc-col {
  flex: 3;
  max-width: 75%;
  min-width: 400px;
  z-index: 1;
}

.clients-title {
  font-size: var(--fs-section-title);
  font-weight: 700;
  color: #1D23D1;
  margin: 0 0 15px 0;
  line-height: 1.3;
  word-break: break-word;
}

.clients-desc {
  font-size: var(--fs-body);
  color: #666;
  line-height: 1.8;
  margin: 0;
}

/* الصف السفلي: الكروت */
.clients-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  z-index: 10;
}

.client-card {
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  padding: 10px;
  height: 120px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  z-index: 10;
}

.client-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  z-index: 10;
}

.client-card img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* ===============================
   الشاشات المتوسطة
=============================== */
@media (max-width: 1200px) {
  .client-card { height: 100px; padding: 15px; }
  .client-card img { width: 70%; }
}

/* ===============================
   الشاشات اللوحية (حتى 991px)
=============================== */
@media (max-width: 991px) {
  .local-header {
    flex-direction: column;
    text-align: center;
    gap: 25px;
  }

  .title-col, .desc-col {
    max-width: 100%;
    min-width: auto;
  }


  .clients-desc {
    line-height: 1.7;
  }

  .client-card {
    height: 90px;
    padding: 12px;
  }

  .client-card img {
    width: 65%;
  }
}

/* ===============================
   الهواتف الصغيرة
=============================== */
@media (max-width: 600px) {
  .clients-section {
    padding: 50px 15px;
  }




  .clients-desc {
    line-height: 1.6;
  }

  .client-card {
    height: 80px;
    padding: 10px;
  }

  .client-card img {
    width: 60%;
  }
}

/* ===============================
   أصغر الأجهزة (300–400px)
=============================== */
/* ===============================
   أجهزة صغيرة جدًا
=============================== */

/* 500px */
@media (max-width: 500px) {
  .clients-section { padding: 40px 15px; }

  .clients-desc { line-height: 1.5; }

  .clients-cards {
    grid-template-columns: repeat(2, 1fr); /* صفوف عمودين */
    gap: 12px;

  }

  .client-card {max-width: 95%; height: 70px; padding: 8px; }
  .client-card img { max-width: 70%; max-height: 100%; }
}

/* 400px */
@media (max-width: 400px) {
  .clients-section { padding: 35px 10px; }


  .clients-cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  .client-card { height: 60px; padding: 6px; }
  .client-card img { max-width: 65%; }
}

/* 300px */
@media (max-width: 380px) {
  .clients-section { 
    padding: 25px 10px; /* مسافة جانبية */
  }


  .clients-cards { 
    grid-template-columns: 1fr; /* كل كرت صف كامل */
    gap: 10px;                  /* مسافة بين الكروت */
    justify-items: center;       /* توسيط الكروت */
  }

  .client-card {
    width: 100%;     /* الكرت ياخذ عرض كامل داخل padding */
    max-width: 90%; /* تحديد حد أقصى للعرض */
    height: 50px; 
    padding: 5px; 
  }

  .client-card img { 
    max-width: 90%;  /* ترك مساحة صغيرة داخل الكرت */
    object-fit: contain;
  }
}



/* 200px */
@media (max-width: 200px) {
  .clients-section { padding: 20px 5px; }


  .clients-cards { grid-template-columns: 1fr; gap: 5px; } /* عمود واحد لتجنب التكدس */

  .client-card { height: 40px; padding: 4px; }
  .client-card img { max-width: 55%; }
}