/* Overlay خفيف لتوضيح النص */
.hero-section {
  position: relative;
  width: 100%;
  height: 100vh; /* يملى الشاشة بالكامل */
  background-image: url('../imgs/goals-bg.webp'); /* ضع رابط الصورة */
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  overflow: hidden;
}

.hero-section .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.3); /* إضاءة سوداء خفيفة */
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  color: #FFFFFF;
  text-align: center;
}

.hero-content h1 {
  font-size: 48px;
  margin-bottom: 10px;
}

.hero-content p {
  font-size: 20px;
}




/*clients*/
/* سيكشن العملاء */
#clients {
 background: linear-gradient(135deg,
#C9D0D6 0%,
#B2BAC2 45%,
#9AA3AD 85%,
#868F99 100%);/* خلفية غامقة مشابهة لموقعك */
  padding-top: 6rem;
  padding-bottom: 6rem;
}

/* عنوان السيكشن */
#clients h2 {
  color: #7A262A; /* نفس لون العناوين الرئيسية */
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 3rem;
}

/* تعديل البوكسات لتكون أفقياً */
.clients-swiper .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: stretch; /* البوكس يمتلئ ارتفاع السلايدر */
}

/* البوكس نفسه */
.client-box {
  width: 300px; /* عرض ثابت لكل بوكس */
  max-width: 90%; /* مرن على الموبايل */
  background: #868F99;
  padding: 2rem;
  border-radius: 1.5rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
  transition: all 0.5s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 300px;
}

.client-box:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.6);
}


/* عنوان البوكس */
.client-box h3 {
  color: #7A262A;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

/* وصف البوكس */
.client-box p {
  color: #cfd8dc; /* رمادي فاتح للقراءة */
  font-size: 1rem;
  line-height: 1.7;
}


/* Swiper pagination */
.swiper-pagination-bullet {
  background: #BFC5CC;
  opacity: 1;
}

.swiper-pagination-bullet-active {
  background: #fff;
}

/* أزرار التحكم */
.swiper-button-next,
.swiper-button-prev {
  color: #BFC5CC;
  background: rgba(0,0,0,0.3);
  padding: 0.5rem;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  background: #7A262A;
  color: #1D445F;
}

/* ريسبونسف */
@media (max-width: 768px) {
  #clients h2 {
    font-size: 2rem;
  }
  .client-box h3 {
    font-size: 1.25rem;
  }
  .client-box p {
    font-size: 0.95rem;
  }
}