/* تنسيق اللوجو */
.logo {
  position: absolute;
  top: 20px; /* المسافة من أعلى السكشن */
  left: 20px; /* المسافة من يسار السكشن */
  max-width: 400px; /* الحد الأقصى لعرض اللوجو */
  width: 100%; /* لجعل اللوجو يتناسب مع حجم الشاشة */
  height: auto; /* الحفاظ على نسبة العرض والارتفاع */
  z-index: 2;
}

@keyframes bouncex {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(90px);
  }
}

/* تنسيق الصورة بين السكشنين */
.divider {
  position: absolute;
  width: 30%; /* عرض الصورة */
  height: 100%; /* ارتفاع الصورة مساوي لارتفاع الصفحة */
  margin-right: -100px;
  animation: bouncex 3s ease-in-out infinite; /* تطبيق حركة الباوسن الأفقية */
  z-index: 4;
}

/*                       Home First section                       */
.home {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: rgba(255, 255, 255, 0);
  text-align: left;
  overflow: visible; /* تأكد من أن السكشن الأول لا يخبئ الصورة */
  background-color: #7fc5d4;
}

.home video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* تخصيص الخطوط والنصوص */
.home .content {
  position: absolute;
  bottom: 20px;
  left: 20px;
  max-width: 80%;
  z-index: 2;
  padding: 20px;
  color: rgba(255, 255, 255, 0);
  border-radius: 10px;
  font-family: 'Bebas Neue', sans-serif;
}

.home h1 {
  font-size: 7rem;
  font-weight: 700;
  letter-spacing: -1px;
  text-transform: uppercase;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.5), 0 0 10px rgba(255, 255, 255, 0.3); /* تقليل التظليل */
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: -70px;
}

.home p {
  font-size: 4rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.5), 0 0 10px rgba(255, 255, 255, 0.3); /* تقليل التظليل */
  color: rgba(255, 255, 255, 0.5); 
  margin-bottom: 50px; /* تقليل المسافة أسفل الفقرة */
}

.home .button {
  font-size: 1.5rem;
  padding: 15px 30px;
  background-color: #ff7f50;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.home .button:hover {
  background-color: #ff4500;
}

/*                       services Second section                       */

.divider7 {
    position: absolute; /* يجعله داخل حدود السكشن */
    right: -16rem; /* يضعه في أقصى اليمين داخل السكشن */
    top: 0; /* يبدأ من أعلى السكشن */
    height: 100%; /* يمتد على طول السكشن */
    width: 30%; /* العرض يتكيف تلقائيًا مع الصورة */
    z-index: 1; /* ضمان ظهوره فوق العناصر الأخرى */
}

.services {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  overflow: visible; 
  background-color: #7fc5d4;
}
/* تخصيص الخطوط والنصوص */
.services .content {
  position: absolute;
  z-index: 2;
  color: rgba(255, 255, 255, 0);
  font-family: 'Bebas Neue', sans-serif;
}



/* تنسيق الأقسام الفردية */
.ourservices {
  display: absolute;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%; /* ارتفاع الصورة مساوي لارتفاع الصفحة */
  width: 100%;
}


/* عنوان القسم الفردي */
.ourservices h3 {
  position: absolute;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 4rem;
  transform: translate(70%, 0); /* محاذاة أفقية */
  cursor: pointer;
  text-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white; /* برواز أبيض حول النص */
}

.ourservices img {
  width: 100%; /* عرض الصورة */
  height: 100%; /* ارتفاع الصورة */
  object-fit: cover; /* تجعل الصورة تغطي المساحة المحددة مع الحفاظ على النسب */
  border-radius: 10px; /* إضافة حواف مستديرة */
  transition: transform 0.3s ease; /* تأثير عند التحريك */
  cursor: pointer;
}

.ourservices h4 {
  position: absolute;
  top: 15%; /* جعله في الأعلى */
  left: 29%; /* جعله في المنتصف أفقياً */
  transform: translate(-50%, 0); /* تصحيح التمركز */
  font-size: 1.7rem;
  cursor: pointer;
  transition: color 0.3s ease;
  font-family: 'Bebas Neue', sans-serif;
  text-align: left;
  text-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white; /* برواز أبيض حول النص */
}

.ourservices h5 {
  position: absolute;
  top: 13%; /* جعله في الأعلى */
  left: 73%; /* جعله في المنتصف أفقياً */
  transform: translate(-50%, 0); /* تصحيح التمركز */
  font-size: 1.6rem;
  transition: color 0.3s ease;
  font-family: 'Bebas Neue', sans-serif;
  text-align: left;
  text-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white; /* برواز أبيض حول النص */
}

/* الأقسام المخفية */
.hidden-section {
  display: none; /* مخفية افتراضيًا */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  z-index: 20;
  width: 100%;
  height: 100%;
  text-align: center;
  background: white;
}

.hidden-section img {
  width: 100%; /* عرض الصورة */
  height: 10%; /* ارتفاع الصورة */
  object-fit: cover; /* تجعل الصورة تغطي المساحة المحددة مع الحفاظ على النسب */
  border-radius: 10px; /* إضافة حواف مستديرة */
  transition: transform 0.3s ease; /* تأثير عند التحريك */
}

.hidden-section h2 {
  font-size: 2rem;
  font-family: 'Bebas Neue', sans-serif;
}

.hidden-section h4 {
  font-size: 1.6rem;
  font-family: 'Bebas Neue', sans-serif;
  text-align: left;
  margin-left: 20%;
}

.close-btn {
  font-size: 2rem;
  background: #007bff;
  border: none;
  padding: 1rem 10rem;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.close-btn:hover {
  background: #0056b3;
}

/* طبقة الخلفية */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none; /* مخفية افتراضيًا */
  z-index: 10;
}

/*                       Track Third section                       */

.divider2 {
    position: absolute; /* يجعله داخل حدود السكشن */
    right: -16rem; /* يضعه في أقصى اليمين داخل السكشن */
    top: 0; /* يبدأ من أعلى السكشن */
    height: 100%; /* يمتد على طول السكشن */
    width: 30%; /* العرض يتكيف تلقائيًا مع الصورة */
    z-index: 1; /* ضمان ظهوره فوق العناصر الأخرى */
}

.track {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: rgba(255, 255, 255, 0);
  text-align: center;
  overflow: visible; /* تأكد من أن السكشن الأول لا يخبئ الصورة */
  background-color: #7fc5d4;
  cursor: pointer;
}
/* تخصيص الخطوط والنصوص */
.track .content {
  position: absolute;
  z-index: 2;
  color: rgba(255, 255, 255, 0);
  font-family: 'Bebas Neue', sans-serif;
}

.track h2 {
  font-size: 2rem; /* تكبير الخط */
  font-weight: 700;
  letter-spacing: -1px;
  text-transform: uppercase;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.5), 0 0 10px rgba(255, 255, 255, 0.3); /* تقليل التظليل */
  color: rgba(128, 128, 128, 0.3); /* لون رمادي مع شفافية */
  position: absolute;
  top: 10px; /* المسافة من أعلى الحاوية */
  left: 50%;
  transform: translate(-50%, 0); /* محاذاة أفقية */
  margin: 0; /* إزالة الهامش الافتراضي */
}

/* تنسيق الأقسام الفردية */
.track-item {
  display: absolute;
  align-items: center;
  background: white;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 93%; /* ارتفاع الصورة مساوي لارتفاع الصفحة */
  width: 70%;
  margin: 0 10px 0; /* جعلها مركزية ومتباعدة */
}

.track-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

/* عنوان القسم الفردي */
.track-item h3 {
  position: absolute;
  font-size: 3rem;
  margin-left: 13rem;
  margin-bottom: 15px;
  color: black;
  text-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white; /* برواز أبيض حول النص */
}

.track-item img {
  width: 100%; /* عرض الصورة */
  height: 100%; /* ارتفاع الصورة */
  object-fit: cover; /* تجعل الصورة تغطي المساحة المحددة مع الحفاظ على النسب */
  border-radius: 10px; /* إضافة حواف مستديرة */
  transition: transform 0.3s ease; /* تأثير عند التحريك */
}

/* النص أسفل الصورة */
.track-item p {
  font-size: 1rem;
  color: #007bff;
  cursor: pointer;
  transition: color 0.3s ease;
}

.track-item p:hover {
  color: #0056b3;
}

/* تنسيق مودال التتبع (hidden-section-track) */
.hidden-section-track {
  display: none;              /* مخفية افتراضيًا */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  z-index: 20;
  overflow-y: auto;
  text-align: center;
  box-sizing: border-box;
  overscroll-behavior: contain;

  flex-direction: column;
  justify-content: center;    /* توسيط عمودي */
  align-items: center;        /* توسيط أفقي */
}

.hidden-section-track img {
  width: 600px; /* عرض الصورة */
  height: 400px; /* ارتفاع الصورة */
  object-fit: cover; /* تجعل الصورة تغطي المساحة المحددة مع الحفاظ على النسب */
  border-radius: 10px; /* إضافة حواف مستديرة */
  transition: transform 0.3s ease; /* تأثير عند التحريك */
}

.hidden-section-track h2 {
  font-size: 2rem;
  margin-bottom: 20px;
}

.hidden-section-track p {
  font-size: 1.2rem;
  margin-bottom: 30px;
  color: #555;
}

.hidden-section-track .close-btn {
  font-size: 1rem;
  color: white;
  background: #007bff;
  border: none;
  padding: 30px 60px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s ease;
  bottom: 0;
}

.hidden-section-track .close-btn:hover {
  background: #0056b3;
}

    /* تنسيقات لتكبير القائمة المنسدلة */
    #shippingLineSelect {
      font-size: 1.5em;      /* تكبير حجم الخط */
      padding: 10px;         /* إضافة مساحة داخلية */
      width: 100%;           /* جعل العرض 100% من العنصر الحاوي */
      max-width: 600px;      /* تحديد أقصى عرض للقائمة */
      border: 1px solid #ccc;
      border-radius: 5px;
      background-color: #fff;
      margin-bottom: 30rem;
    }

/*                       network Forth section                       */

.divider3 {
    position: absolute; /* يجعله داخل حدود السكشن */
    right: -16rem; /* يضعه في أقصى اليمين داخل السكشن */
    top: 0; /* يبدأ من أعلى السكشن */
    height: 100%; /* يمتد على طول السكشن */
    width: 30%; /* العرض يتكيف تلقائيًا مع الصورة */
    z-index: 1; /* ضمان ظهوره فوق العناصر الأخرى */
}

.network-membership {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    padding: 10px;
    background-image: url('../images/images/membership.webp'); /* تأكد من صحة المسار */
    background-size: cover; /* تغطية القسم بالكامل */
    background-position: center; /* توسيط الصورة */
    background-repeat: no-repeat; /* منع التكرار */
    height: 100%; /* جعل الخلفية تتبع حجم القسم */
    width: 100%; /* ضمان الامتداد بعرض القسم */
}

.section-title {
    width: 100%; /* ضمان امتداد العنوان */
    text-align: center; /* توسيط العناوين */
    margin-bottom: 20px;
}

.section-title h2 {
    margin: 0;
    font-weight: 700; /* سُمك الخط */
    text-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white; /* برواز أبيض حول النص */
}

.membership-items {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* محاذاة العناصر إلى اليسار */
    margin-left: 16rem;
    z-index: 3; /* ضمان ظهوره فوق العناصر الأخرى */
}

.membership-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    justify-content: flex-start; /* محاذاة الصورة والنص إلى اليسار */
    width: 100%; /* التأكد أن الحاوية تأخذ كامل العرض */
}

.membership-item p {
    margin: 0;
    font-weight: bold; /* سُمك الخط */
    font-size: 2.1rem;
    text-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white; /* برواز أبيض حول النص */
}

.membership-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    justify-content: flex-start; /* محاذاة العناصر إلى اليسار */
    width: 100%; /* التأكد أن الحاوية تأخذ كامل العرض */
}

.membership-logo {
    margin-right: 15px;
}

.membership-logo img {
    width: 120px; /* ضبط حجم الصور */
}

/*                       Customers Fifth section                       */

.divider4 {
    position: absolute; /* يجعله داخل حدود السكشن */
    right: -16rem; /* يضعه في أقصى اليمين داخل السكشن */
    top: 0; /* يبدأ من أعلى السكشن */
    height: 100%; /* يمتد على طول السكشن */
    width: 30%; /* العرض يتكيف تلقائيًا مع الصورة */
    z-index: 4; /* ضمان ظهوره فوق العناصر الأخرى */
}

.customers {
    position: relative; /* يتيح وضع العنصر بداخله بشكل مطلق */
    text-align: center; /* يجعل النص في المنتصف */
    padding: 50px 20px; /* هامش علوي وسفلي */
    height: 100%; /* جعل الخلفية تتبع حجم القسم */
    width: 100%; /* ضمان الامتداد بعرض القسم */
}

.customers-title {
    position: absolute;
    top: -3%; /* تحديد المسافة من الأعلى */
    left: 50%; /* يبقى في نفس الموقع */
    transform: translateX(-50%); /* يجعل العنوان في المنتصف تمامًا */
    font-size: 60px; /* نفس الحجم */
    font-weight: bold; /* نفس الوزن */
    letter-spacing: 2px; /* زيادة التباعد بين الحروف قليلاً */
    text-transform: uppercase; /* تحويل النص إلى أحرف كبيرة */
    color: rgba(41, 104, 121, 1); /* اللون المطلوب مع شفافية */
    padding: 15px 30px; /* زيادة padding لجعل النص أكثر وضوحًا */
    border-radius: 20px; /* حواف مدورة بشكل أكبر */
}

.logo-section {
    position: relative; /* لضبط العنصر الوهمي داخله */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    margin-right: 20rem;
    margin-left: 20rem;
    z-index: 5; /* لضمان ظهور اللوجوهات فوق الخلفية */
    padding: 4rem; /* مسافة داخلية لزيادة حجم الخلفية */
}

.logo-section::before {
    content: ""; 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8); /* لون أبيض شفاف */
    border-radius: 10px; /* حواف ناعمة */
    z-index: -1; /* ليكون أسفل اللوجوهات */
}


.logo-section img {
width: 170px; /* تعديل الحجم حسب الحاجة */
height: 120px;
}

/*                       info Sixth section                       */

.divider5 {
    position: relative; /* يجعله داخل حدود السكشن */
    right: -7rem; /* يضعه في أقصى اليمين داخل السكشن */
    top: 0; /* يبدأ من أعلى السكشن */
    height: 100%; /* يمتد على طول السكشن */
    width: 40%; /* العرض يتكيف تلقائيًا مع الصورة */
    z-index: 1; /* ضمان ظهوره فوق العناصر الأخرى */
}

.info-section {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    z-index: 1; /* تأكد من أن العنصر مرئي */
}


.grid-container {
    display: grid;
    grid-template-columns: repeat(4, auto); /* 4 أعمدة */
    grid-template-rows: repeat(2, auto); /* صفان */
    gap: 20px; /* المسافات بين العناصر */
    text-align: center;
    margin-left: 30rem;
}

.info-box {
    font-size: 7rem; /* حجم الخط */
    font-weight: bold;
    text-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white; /* برواز أبيض حول النص */
    font-family: 'Bebas Neue', sans-serif;
}

.info-box span {
    display: block;
    font-size: 1.4rem; /* حجم النصوص الصغيرة */
    font-weight: bold;
    color: black;
}

/*                       back video Seventh section                       */

.divider6 {
    position: absolute; /* يجعله داخل حدود السكشن */
    right: -16rem; /* يضعه في أقصى اليمين داخل السكشن */
    top: 0; /* يبدأ من أعلى السكشن */
    height: 100%; /* يمتد على طول السكشن */
    width: 30%; /* العرض يتكيف تلقائيًا مع الصورة */
    z-index: 1; /* ضمان ظهوره فوق العناصر الأخرى */
}

.back-video {
    position: relative; /* يتيح وضع العنصر بداخله بشكل مطلق */
}

.back-video video {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/*                       logistics Seventh section                       */

.divider8 {
    position: relative; /* يجعله داخل حدود السكشن */
    right: -7rem; /* يضعه في أقصى اليمين داخل السكشن */
    top: 0; /* يبدأ من أعلى السكشن */
    height: 100%; /* يمتد على طول السكشن */
    width: 40%; /* العرض يتكيف تلقائيًا مع الصورة */
    z-index: 1; /* ضمان ظهوره فوق العناصر الأخرى */
}

#logistics-services {
    padding: 40px;
    text-align: center;
}

.grid {
    display: grid;
    grid-template-columns: repeat(3, auto); /* توزيع العناصر بحجم مناسب */
    gap: 10px;
    margin-top: 20px;
    margin-left: 15rem;
}

.item {
    position: relative; /* لتحديد موضع النص داخل العنصر */
    color: white;
    font-size: 18px;
    padding: 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s;
    overflow: hidden; /* إخفاء أي جزء من النص يخرج من العنصر */
}

.item img {
    width: 25rem;
    height: 20rem;
    border-radius: 8px;
    display: block; /* للتأكد من أن الصورة تملأ العنصر بالكامل */
}

.item p {
    position: absolute; /* لجعل النص يظهر فوق الصورة */
    bottom: 10px; /* يحدد مكان النص من الأسفل */
    left: 50%;
    transform: translateX(-50%); /* لتوسيط النص أفقيًا */
    background-color: rgba(0, 0, 0, 0.6); /* خلفية مظللة للنص */
    padding: 10px;
    border-radius: 5px;
    margin: 0;
}

/* الأقسام المخفية */
.hidden-section-logistics {
  display: none; /* مخفية افتراضيًا */
  position: fixed;
  top: 0;
  left: 0;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  z-index: 20;
  width: 100%;
  height: 100%; /* لتتناسب مع محتوى القسم */
  text-align: center;
  background: white;
  flex-direction: column; /* لضبط الصورة والنصوص عموديًا */
  align-items: center; /* محاذاة العناصر في المنتصف أفقيًا */
  justify-content: center; /* التأكد من أن العناصر في المنتصف عموديًا */
  overflow-y: auto; /* إضافة التمرير في حالة الحاجة */
}

.hidden-section-logistics img {
  width: 80%; /* عرض الصورة بالنسبة المئوية */
  max-height: 320px; /* تعيين الحد الأقصى للارتفاع */
  object-fit: cover; /* التأكد من أن الصورة تملأ المساحة */
  border-radius: 10px;
  transition: transform 0.3s ease; /* تأثير التحريك عند التغيير */
}

.hidden-section-logistics h2 {
  font-size: 2rem;
  font-family: 'Bebas Neue', sans-serif;
  margin: 20px 0; /* إضافة المسافة بين الصورة والعنوان */
}

.hidden-section-logistics h4 {
  font-size: 1.6rem;
  font-family: 'Bebas Neue', sans-serif;
  text-align: left;
  margin-left: 20%;
  margin-top: 10px; /* المسافة بين النصوص */
  list-style-type: none; /* إزالة النقاط من القائمة */
}

.hidden-section-logistics h4 li {
  margin-bottom: 10px; /* إضافة مسافة بين العناصر في القائمة */
}


/* الزر */
.hidden-section-logistics button.close-btn {
  background-color: #ff4747; /* اللون الأحمر */
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
  margin-top: 20px;
  transition: background-color 0.3s;
}

.hidden-section-logistics button.close-btn:hover {
  background-color: #ff1a1a; /* تأثير عند المرور على الزر */
}


/*                       about Eighth section                       */

.divider9 {
    position: absolute; /* يجعله داخل حدود السكشن */
    right: -7rem; /* يضعه في أقصى اليمين داخل السكشن */
    top: 0; /* يبدأ من أعلى السكشن */
    height: 100%; /* يمتد على طول السكشن */
    width: 30%; /* العرض يتكيف تلقائيًا مع الصورة */
    z-index: 1; /* ضمان ظهوره فوق العناصر الأخرى */
}

.about {
  position: relative; /* تحديد السكشن كمحدد مرجعي للعناصر الداخلية */
  height: 100vh; /* جعل ارتفاع السكشن يكون متساوي مع ارتفاع الشاشة */
  display: flex; /* استخدام Flexbox لتمركز النص */
  flex-direction: column; /* ترتيب العناصر عموديًا */
  justify-content: center; /* تمركز النص عموديًا */
  align-items: center; /* تمركز النص أفقيًا */
  padding: 20px; /* إضافة حشوة حول المحتوى */
}

.about h2 {
  font-size: 5rem;
  font-weight: 700;
  letter-spacing: -1px;
  text-transform: uppercase;
  text-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white; /* برواز أبيض حول النص */
  color: black;
  margin-bottom: 10px;
}

.about p {
  font-size: 1.8rem;
  font-weight: 400;
  letter-spacing: -0.5px;
  text-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white; /* برواز أبيض حول النص */
  color: black;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 90px;
  max-width: 80%; /* لتحديد العرض المناسب للنص */
  line-height: 1.6; /* زيادة المسافة بين الأسطر لجعل النص أسهل في القراءة */
}

.about ul {
  padding-left: 20px; /* إضافة مسافة بادئة للعناصر في القائمة */
  list-style-type: disc; /* تعيين النقاط في القائمة */
  text-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white; /* برواز أبيض حول النص */
}

.about li {
  margin-bottom: 10px; /* إضافة مسافة بين العناصر */
  font-size: 1.6rem; /* حجم الخط للعناصر */
  text-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white; /* برواز أبيض حول النص */
}

/*                       vision Eighth section                       */

.divider10 {
    position: absolute; /* يجعله داخل حدود السكشن */
    right: -16rem; /* يضعه في أقصى اليمين داخل السكشن */
    top: 0; /* يبدأ من أعلى السكشن */
    height: 100%; /* يمتد على طول السكشن */
    width: 30%; /* العرض يتكيف تلقائيًا مع الصورة */
    z-index: 10; /* ضمان ظهوره فوق العناصر الأخرى */
}

.vision {
  position: relative; /* تحديد السكشن كمحدد مرجعي للعناصر الداخلية */
  height: 100vh; /* جعل ارتفاع السكشن يكون متساوي مع ارتفاع الشاشة */
  display: flex; /* استخدام Flexbox لتمركز النص */
  flex-direction: column; /* ترتيب العناصر عموديًا */
  justify-content: center; /* تمركز النص عموديًا */
  align-items: center; /* تمركز النص أفقيًا */
  padding: 20px; /* إضافة حشوة حول المحتوى */
}

.vision h2 {
  font-size: 5rem;
  font-weight: 700;
  letter-spacing: -1px;
  text-transform: uppercase;
  text-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white; /* برواز أبيض حول النص */
  color: black;
  margin-bottom: 10px;
}

.vision p {
  font-size: 1.8rem;
  font-weight: 400;
  letter-spacing: -0.5px;
  text-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white; /* برواز أبيض حول النص */
  color: black;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 90px;
  max-width: 80%; /* لتحديد العرض المناسب للنص */
  line-height: 1.6; /* زيادة المسافة بين الأسطر لجعل النص أسهل في القراءة */
}

.vision ul {
  padding-left: 20px; /* إضافة مسافة بادئة للعناصر في القائمة */
  list-style-type: disc; /* تعيين النقاط في القائمة */
    text-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white; /* برواز أبيض حول النص */
}

.vision li {
  margin-bottom: 10px; /* إضافة مسافة بين العناصر */
  font-size: 1.6rem; /* حجم الخط للعناصر */
  text-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white; /* برواز أبيض حول النص */
}

#map {
    height: 80vh; /* تقليل الارتفاع قليلاً ليبقى النص واضحًا */
    width: 80vw; /* جعل الخريطة أقل عرضًا حتى لا تسبب مشاكل تمرير */
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

.section.map {
    flex-direction: column; /* ترتيب العناصر عموديًا */
    justify-content: flex-start; /* يجعل العنوان في الأعلى */
}

.section.map h2 {
    position: relative; /* إلغاء الـ absolute ليكون داخل السكشن */
    margin-bottom: 20px; /* إضافة مسافة بين العنوان والخريطة */
    z-index: 10;
    color: white;
    background: rgba(0, 0, 0, 0.5);
    padding: 10px 20px;
    border-radius: 8px;
    text-align: center;
}

.legend {
    background: white;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    font-size: 14px;
    line-height: 18px;
}

.legend h4 {
    margin: 0 0 5px;
    font-size: 16px;
}

.legend i {
    width: 12px;
    height: 12px;
    display: inline-block;
    margin-right: 5px;
}