/* Reset أساسي */


* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;

  }
  
  /* إعداد عام للـ body */
  body {
	line-height: 1.6;
  overflow-x: hidden;

  }
  
  /* تعديلات بسيطة */
  section {
	padding: 60px 0;
  }
  
  
  .logo-img {
    max-height: 55px;
    width: auto;
  }
  
  .partner-img {
    max-height: 40px;
    width: auto;
  }
 
  
  /* نتأكد إن النصوص في منتصف الشاشة بالظبط */
  header .container {
    z-index: 2;
    position: relative;
    
    a{
      background-color: #F77016;
    }
    
  }
  .nav-item{
    font-size: 20px;
  }
    /* إخفاء القائمة المنسدلة في البداية */
.nav-item.dropdown .dropdown-menu {
  display: none;
}

/* إظهار القائمة المنسدلة عند التفاعل مع العنصر */
.nav-item.dropdown:hover .dropdown-menu {
  display: block;
  position: absolute;
  background-color: #fff; /* أو أي لون تفضله */
  border: 1px solid #ddd; /* لإضافة حدود للقائمة */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* إضافة ظل للقائمة */
  z-index: 1000; /* لجعل القائمة تظهر فوق المحتوى الآخر */
}

/* تحسين المظهر عند الوقوف على العناصر داخل القائمة */
.nav-item.dropdown .dropdown-menu .dropdown-item:hover {
  background-color: #f8f9fa;
}
.partner-logo-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
  background-color: #fff;       
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  padding: 10px;
}

.partner-logo {
  max-height: 70%;
  max-width: 70%;
  object-fit: contain;
}

/* تعيين خصائص الحركة لجميع النصوص */
.text-item {
  position: absolute;
  opacity: 0;  /* إخفاء العناصر في البداية */
  animation: fadeInOut 18s infinite;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards; /* الحفاظ على حالة العنصر بعد التغيير */
  p{
    font-size: 22px;
    color: #fff;
    text-align: center;
    margin-bottom: 20px;
  }
  h1{
    font-weight: 600;
  }
}

/* تأثيرات الحركة (الظهور والاختفاء) */
@keyframes fadeInOut {
  0%, 33.33% {
    opacity: 0;  /* إخفاء العناصر في البداية */
  }
  10%, 23.33% {
    opacity: 1;  /* إظهار العناصر بشكل كامل في الجزء الأوسط من الأنيميشن */
  }
  30%, 100% {
    opacity: 0;  /* إخفاء العناصر بعد الانتهاء */
  }
}

/* تأخير الوقت لجميع العناصر ليظهروا ويختفوا معًا */
.text-item:nth-child(1) {
  animation-delay: 0s;  /* النص الأول */
}

.text-item:nth-child(2) {
  animation-delay: 6s;  /* النص الثاني يظهر بعد 6 ثواني */
}

.text-item:nth-child(3) {
  animation-delay: 12s;  /* النص الثالث يظهر بعد 12 ثانية */
}
.py-4 {
h1{
  font-size: 2.5rem;
  color: #1d3c04a9;
  text-align: center;
  margin-bottom: 20px;
  font-weight: bold;


}
i{
  color: #1d3c045c;
}
}
.py-5{
  background-color: #1d3c045c;
  h1{
    color: #Fff;
    font-size: 2.5rem;
    font-weight: bold;
  text-align: center;
  justify-content: center;
  
  }

}

.wrapper {
  /* top: 800px;  */
  margin-top: 30px; 
  display: flex;
  width: 100%;
  max-width: 1536px;
  margin-inline: auto;
  height: 100px;  
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(
    to right,
    rgba(189, 17, 17, 0),
    rgba(0, 0, 0, 1) 20%,
    rgba(0, 0, 0, 1) 80%,
    rgba(0, 0, 0, 0)
  );
}

@keyframes scrollLeft {
  to {
    left: -200px;
  }
}

@keyframes scrollRight {
  to {
    right: -200px;
  }
}

.itemLeft,
.itemRight {
  width: 90px;
  height: 90px;
  position: absolute;
  animation-timing-function: linear;
  animation-duration: 30s;
  animation-iteration-count: infinite;

  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%; /* يجعل العنصر دائري */
  overflow: visible; /* يمنع خروج الصورة عن الدائرة */
}
.itemLeft img,
.itemRight img {
  width: 90%;
  height: auto;
  object-fit: contain;
  
}

.itemLeft {
  left: max(calc(200px * 15 ), 100%);
  animation-name: scrollLeft;
}

.itemRight {
  right: max(calc(200px * 15), calc(100% + 200px));
  animation-name: scrollRight;
}

.item1 {
  animation-delay: calc(30s / 15 * (15 - 1) * -1);
}

.item2 {
  animation-delay: calc(30s / 15 * (15 - 2) * -1);
}

.item3 {
  animation-delay: calc(30s / 15 * (15 - 3) * -1);
}

.item4 {
  animation-delay: calc(30s / 15 * (15 - 4) * -1);
}

.item5 {
  animation-delay: calc(30s / 15 * (15 - 5) * -1);
}

.item6 {
  animation-delay: calc(30s / 15 * (15 - 6) * -1);
}

.item7 {
  animation-delay: calc(30s / 15 * (15 - 7) * -1);
}

.item8 {
  animation-delay: calc(30s / 15 * (15 - 8) * -1);
}

.item9 {
  animation-delay: calc(30s / 15 * (15 - 9) * -1);
}

.item10 {
  animation-delay: calc(30s / 15 * (15 - 10) * -1);
}

.item11 {
  animation-delay: calc(30s / 15 * (15 - 11) * -1);
}

.item12 {
  animation-delay: calc(30s / 15 * (15 - 12) * -1);
}

.item13 {
  animation-delay: calc(30s / 15 * (15 - 13) * -1);
}
.item14 {
  animation-delay: calc(30s / 15 * (15 - 14) * -1);
}
.item15 {
  animation-delay: calc(30s / 15 * (15 - 15) * -1);
}
#section2 {
  width: 100%;
  height: 60vh;
  display: flex;
  flex-direction: column; /* يضع العناصر عمودياً */
  justify-content: center; /* يوسّط العناصر عمودياً */
  align-items: center; /* يوسّط العناصر أفقياً */
  /* padding: 15px; */
  text-align: center;
  /* padding-top: 0px; */
  background-color: #fff;
}

#section2 h1 {
  font-size: 2.5rem;
  font-weight: bold;

  font-family: sans-serif;
  color: #1d3c04a9;
  /* margin: 20px 0; */
  padding-bottom: 3%;
}



/* تخصيص العنوان الثابت في الجزء العلوي */
.carousel-header {
  text-align: left;
  /* margin-bottom: 40px; */
  font-size: 28px;
  font-weight: bold;
  background-color: #1d3c045c;
  padding-top: 40px; /* المسافة من فوق */
  height: auto; /* ارتفاع العنصر */


  span{
    color: #Fff;
    font-size: 2.5rem;
    font-weight: bold;
    display: block;
    /* margin-bottom: 20px; */
    text-align: center;
  }
}

/* تخصيص الكاروسيل */
.carousel-inner {
  padding: 30px 0;

  
.carousel-image{
  max-width: 30%;
  height: auto;
  margin-left: 20px;
  object-fit: cover;
  border-radius: 10px; /* إضافة زوايا دائرية للصورة */
}

}

/* تخصيص النصوص داخل الكاروسيل */
.carousel-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;

  
}

/* تخصيص النص */
.carousel-text {
  flex: 1;
  min-width: 250px;
  
}

/* تخصيص العنوان (H1) */
.carousel-text h1 {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 10px;
  color: #fff;
  flex: 1 1 300px; /* يعني ياخد مساحة مناسبة في الديسكتوب والموبايل */

  
}

/* تخصيص النص الصغير (H5) */
.carousel-text h5 {
  font-size: 18 px;
  color: #fff;
}

/* تخصيص الرابط */
.carousel-text p a {
  font-size: 15px;
  color: #fff;
  text-decoration: none;
}

.carousel-text p a:hover {
  text-decoration: underline;
}

/* تخصيص الصورة */
.carousel-image {
  flex: 1 1 300px;
  max-width: 100%;
  height: auto;
}
.custom-btn {
  display: inline-block;
  padding: 5px 10px;
  background-color: #FFF; /* لون الزر */
  color: #1d3c04a9;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
  font-weight: bold;
  font-size: 20px;
}

.custom-btn:hover {
  background-color: #1d3c045c; /* لون الزر عند التمرير */
  color: #fff;
}

/* تخصيص الأزرار (التنقل بين الشرائح) */
.carousel-control-prev,
.carousel-control-next {
  width: 5%; /* صغري العرض لو السهمين قريبين من بعض */
}

.carousel-control-prev {
  left: -1px; /* ابعد السهم الشمال */
  
}

.carousel-control-next {
  right: -1px; /* ابعد السهم اليمين */
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: brightness(0) saturate(100%) invert(34%) sepia(13%) saturate(1214%) hue-rotate(50deg) brightness(0%) contrast(100%);
}

@media (max-width: 768px) {
  .carousel-header span{
    font-size: 2rem; /* حجم الخط في الموبايل */
  }
  .carousel-content {
    flex-wrap: nowrap; /* ما تخليش العناصر تلف */
    flex-direction: row; /* خليه دايمًا جنب بعض */
    align-items: flex-start;
  }

  .carousel-text {
    flex: 1;
    font-size: 12px;
    padding-left: 40px;

    h1{
      font-size: 1.5rem; /* حجم الخط في الموبايل */
    }
  }

  .carousel-image {
    max-width: 90%; /* أو 70% حسب ما تحبي */
    height: auto;
    object-fit: contain;  
    padding-top: 150px; /* المسافة من فوق */
    padding-right: 30px;
  }
}

  /* تخصيص الفوتر */

 
@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    align-items: center;
  }
}



.footer-container {
  display: flex; /* تنسيق العناصر بشكل أفقي */
  justify-content: space-between; /* توزيع الأعمدة بشكل متساوي */
  gap: 30px; /* إضافة مسافة ثابتة بين الأعمدة */
  flex-wrap: wrap; /* يسمح بتوزيع الأعمدة في صفوف متعددة في حالة كانت الشاشة صغيرة */
}

.footer-column {
  flex-grow: 1; /* يجعل الأعمدة تتوزع بالتساوي */
  min-width: 220px; /* تحديد الحد الأدنى للعرض */
}

.footer-column h3 {
  margin-bottom: 15px; /* إضافة مسافة أسفل العنوان */
}

.footer-column ul {
  padding-left: 0;
  list-style: none;
}

.footer-column ul li {
  margin-bottom: 10px;
}

.footer-column ul li a {
  color: white; /* تغيير اللون إلى الأبيض */
  text-decoration: none; /* إزالة الخط السفلي */
}

.footer-column ul li a:hover {
color: #F77016;
}
.nav-link.active {
  font-weight: bold;
  color: #FCF8D8; /* يمكنك تغيير اللون حسب الحاجة */
}