/* ================== SPLASH فوق كل شيء (فوق الفيديو والبنر والهيدر) ================== */
body.index::before {
  content: "";
  position: fixed;
  inset: 0;

  /* أعلى z-index في الصفحة ليظهر فوق كل العناصر */
  z-index: 9999999999;

  background-color: #ffffff;
  background-image: url("https://cdn.files.salla.network/theme/1781605763/cfb215f6-0e63-4fbf-9867-353959fb916b.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 150px;

  pointer-events: none;
  animation: splashOut 2.8s cubic-bezier(0.5, 0, 0.5, 1) forwards;
}

@keyframes splashOut {
  0% {
    opacity: 1;
    transform: scale(1.4);
    visibility: visible;
  }
  80% {
    opacity: 1;
    transform: scale(1.4);
  }
  100% {
    opacity: 0;
    transform: scale(2.5);
    visibility: hidden;
  }
}

/* ================== السكشن الثاني يمتد يمين ويسار الصفحة ================== */
/* تم تعديل الـ margin-top هنا بناءً على طلبك */
#main-content > section:nth-child(2) {
  margin-top: -120px !important; 
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: 0 !important;
  padding-right: 0 !important;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* ================== حاوية البنر كمرجع للطبقات ================== */
#main-content > section:nth-child(2) > div {
  position: relative;
  width: 104%;
}

/* ================== صورة البنر تحت الفيديو ================== */
#main-content > section:nth-child(2) > div > a > div > img {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
}

/* ================== الفيديو فوق البنر مباشرة ================== */
.slide-video-bg-js {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2; /* أعلى من صورة البنر */
  pointer-events: none;
}

/* ================== الهيدر بترتيب طبيعي بدون تغطية ================== */
#app > div.app-inner.flex.flex-col.min-h-full > header {
  position: relative;
  z-index: 1000;
}

/* ================== إزالة الظلال من النافبار ================== */
.main-nav-container,
.shadow-default {
  box-shadow: none !important;
  --tw-shadow: none !important;
}

/* منع ظهور سكرول أفقي بسبب 100vw */
body {
  overflow-x: hidden;
}

/* حذف الشريط العلوي وجعل المنيو شفافة */
.top-navbar {
    display: none !important;
}

#mainnav {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
}

.navbar-brand img {
    max-height: 5rem;
    max-width: 100px;
    width: auto;
}

.main-nav-container.fixed-pinned .navbar-brand img {
    max-height: 76px;
}

.footer-is-light .store-footer .store-footer__inner {
    --tw-border-opacity: 1;
    background-color: rgb(255 255 255);
}

body {
    --tw-bg-opacity: 1;
    background-color: #ffffff;
    background-color: rgb(255 255 255);
}

.footer-is-light .store-footer {
    --tw-bg-opacity: 1;
    background-color: #f9fafb;
    background-color: rgb(255 255 255);
    --tw-text-opacity: 1;
    color: #374151;
    color: rgba(55, 65, 81, var(--tw-text-opacity, 1));
}



/* العنصر الأب للبنر */
#main-content > section:nth-child(2) > div {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* البنر نفسه ممتد يمين ويسار الشاشة */
#main-content > section:nth-child(2) > div > a.banner.banner--fixed {
    display: block;
    width: 100vw;       /* عرض كامل الشاشة */
    margin-left: calc(-50vw + 50%); /* يوسع من اليمين واليسار */
    margin-right: calc(-50vw + 50%);
    position: relative; /* نسبي بحيث لا يختفي */
    overflow: hidden;
}

/* container داخل البنر فقط */
#main-content > section:nth-child(2) > div > a.banner.banner--fixed > .container {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* الفيديو والصورة داخل البنر */
.video-slide-container {
    width: 100%;
    min-height: 800px; /* ارتفاع البنر */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.video-slide-container img,
.video-slide-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}