/* جعل الهيدر شفاف وثابت فوق الفيديو أو الصورة */
.header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: transparent !important;
  z-index: 999;
}

/* توزيع الهيدر: القائمة يسار - الشعار وسط - الأيقونات يمين */
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* الشعار في المنتصف */
.header__logo {
  order: 2;
  flex: 1;
  text-align: center;
}

.header__logo img {
  margin: 0 auto;
  max-height: 70px; /* تقدر تكبر أو تصغر الشعار */
}

/* القوائم */
.header__navigation {
  order: 1;
  flex: 1;
}

/* الأيقونات */
.header__icons {
  order: 3;
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

/* تعديل النصوص والأيقونات لتظهر فوق خلفية الفيديو */
.header a,
.header__icons svg,
.header__navigation a {
  color: #fff !important; /* أبيض يناسب الخلفية الغامقة */
}

/* ضبط العرض في الجوال */
@media (max-width: 768px) {
  .header__inner {
    flex-wrap: wrap;
    justify-content: center;
  }

  .header__logo {
    order: 1;
    flex: 100%;
    text-align: center;
    margin: 10px 0;
  }

  .header__navigation {
    order: 2;
    flex: 100%;
    text-align: center;
  }

  .header__icons {
    order: 3;
    flex: 100%;
    justify-content: center;
  }

  .header {
    background: transparent !important;
  }

  .header a,
  .header__icons svg,
  .header__navigation a {
    color: #fff !important;
  }
}