/* Add custom CSS styles below */ 
.promo_with_countdown.s-block{
 margin-top: 0 !important;


}
/* ===== Hero Core (no flicker, no flex) ===== */
.hero-banner{
  position: relative;
  display: block;                 /* مش Flex */
  min-height: 72vh;
    padding: 0px; 
  color: #fff;
  background: linear-gradient(180deg,#111,#1a1a1a); /* fallback لو الصورة مبانتش */
  overflow: hidden;
}

/* الخلفية (الصورة) */
.hero-banner img{
  position: absolute; top:0; left:0; width:100%; height:100%;
  object-fit: cover;
  z-index: 0;                     /* الصورة تحت */
  filter: grayscale(100%) contrast(1.05) brightness(.92);
  transform: scale(1.04);         /* كن-بيرنز بسيط لاحقًا */
  pointer-events: none;
}

/* طبقة تظليل خفيفة فوق الصورة */
.hero-banner::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,.18), rgba(0,0,0,.55));
  z-index: 1;
}

/* المحتوى فوق الكل */
.hero-banner h2,
.hero-banner p,
.hero-banner a{
  position: relative;
  z-index: 2;
}

.hero-banner h2{
  margin: 0 0 .6rem;
  font-size: clamp(35px, 4vw, 80px);
  line-height: 1.1;
  text-shadow: 0 6px 24px rgba(0,0,0,.45);
  font-weight: 900;
}

.hero-banner p{
  margin: 0 0 1.1rem;
  max-width: 65ch;
  color: rgba(255,255,255,.8);
  line-height: 1.65;
  font-size:35px;
}

.hero-banner a{
  display: inline-block;
  background: #fff; color:#111;
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 20px 50px rgba(0,0,0,.45);
  background-color: #111111;
    width: 150px;
    font-size: 18px;
    text-align: center;
}

.hero-banner video {
  width:100%;
  height:100%;
  object-fit:cover;
  position:absolute;
  inset:0;
  z-index:0;
  filter:brightness(0.8); /* 0.6 = darker, 1 = normal, >1 = brighter */
}

/* موبايل */
@media (max-width:768px){
  .hero-banner{ text-align:center;
    padding:0px ; 
   }
  .hero-banner p{ margin-left:auto; margin-right:auto; }
}



/* تحريك الدخول بدون تغيير حالة الأساس */
.hero-banner.animate h2{ animation:fadeUp .6s ease both; }
.hero-banner.animate p { animation:fadeUp .7s ease both .06s; }
.hero-banner.animate a { animation:fadeUp .8s ease both .12s; }

@keyframes fadeUp{
  from{ opacity:0; transform: translateY(12px); filter: blur(3px); }
  to  { opacity:1; transform: none;              filter: none; }
}

/* حركة خفيفة للصورة */
.hero-banner.animate img{
  animation: ken .0001s step-end both, kenburns 16s ease-in-out infinite alternate;
}
@keyframes ken { from{transform:scale(1.04);} to{transform:scale(1.04);} } /* تثبيت البداية */
@keyframes kenburns{
  from{ transform: scale(1.04) translate(0,0); }
  to  { transform: scale(1.10) translate(1.2%, -1%); }
}













/* ===== Glitch Setup ===== */
.hero-banner{
  position:relative;
  overflow:hidden;
  /* ألوان البراند الأبيض/الأسود */
  background:#ffffff;
  color:#fff;
}

/* الصورة الأساسية (اختياري: تصفير فلاتر سابقة) */
.hero-banner img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:0; filter:grayscale(100%) contrast(1.05) brightness(.95);
  transform:translateZ(0);
}

/* المحتوى فوق */
.hero-banner h2,.hero-banner p,.hero-banner a{ position:relative; z-index:3 }

/* --- طبقة ضوضاء/مسح لوني --- */
.hero-banner::before,
.hero-banner::after{
  content:""; position:absolute; inset:-2%;
  pointer-events:none; z-index:2;
  opacity:0; /* هتتفتح وقت الجليتش */
}

/* ::before = scanlines + noise (blend) */
.hero-banner::before{
  /* scanlines */
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.03) 0px,
      rgba(255,255,255,.03) 1px,
      transparent 2px,
      transparent 3px
    ),
    /* static noise */
    radial-gradient(closest-side, rgba(255,255,255,.08), transparent 60%) 0 0/6px 6px,
    radial-gradient(closest-side, rgba(255,255,255,.05), transparent 60%) 3px 3px/6px 6px;
  mix-blend-mode: overlay;
  animation:noiseShift 220ms steps(2,end) infinite;
}

/* ::after = smear أخضر يتحرك بسرعة */
.hero-banner::after{
  background:
    radial-gradient(120% 80% at 10% 40%,
        rgba(0,255,120,.18), transparent 55%) ,
    radial-gradient(80% 60% at 90% 60%,
        rgba(0,255,120,.12), transparent 60%);
  filter:blur(10px);
  transform:translateX(-6%);
  animation:smear 380ms ease-in-out infinite alternate;
}

/* --- تأثير الفصل اللوني الأحمر/الأخضر على الصورة والمحتوى --- */
.hero-banner.glitch img,
.hero-banner.glitch h2,
.hero-banner.glitch p,
.hero-banner.glitch a{
  /* انحراف لوني سريع */
  filter:
    drop-shadow(2px 0 rgba(0,255,120,.55))   /* أخضر يمين */
    drop-shadow(-2px 0 rgba(255,64,64,.55)) /* أحمر يسار */
    contrast(1.05) saturate(1.1);
  will-change:transform, filter;
  animation:jitter 95ms steps(2,end) 0s 6;
}

/* تشغيل الطبقات أثناء الجليتش */
.hero-banner.glitch::before,
.hero-banner.glitch::after{ opacity:1; }

/* نَفَس قصير سريع للكل */
.hero-banner.glitch{ animation:microTilt 120ms ease-in-out 0s 2 alternate; }

/* Hover يفعّل الجليتش فورًا */
.hero-banner:hover{ cursor:crosshair; }
.hero-banner:hover{ animation:none; } /* نكتفي بالتفعيل من JS */

/* أمان: لو المستخدم يفضّل تقليل الحركة */
@media (prefers-reduced-motion:reduce){
  .hero-banner::before,.hero-banner::after{ animation:none !important; }
  .hero-banner.glitch *{ animation:none !important; filter:none !important; }
}

/* ===== Keyframes ===== */
@keyframes jitter{
  0%   { transform:translate(0,0) }
  50%  { transform:translate(-0.8px, 0.6px) }
  100% { transform:translate(0.7px, -0.6px) }
}
@keyframes microTilt{
  from{ transform:rotate(-0.15deg) scale(1.002) }
  to  { transform:rotate(0.15deg)  scale(1.004) }
}
@keyframes noiseShift{
  0%{ background-position:0 0, 0 0, 0 0; }
  100%{ background-position:0 3px, -6px 6px, 6px -6px; }
}
@keyframes smear{
  from{ transform:translateX(-6%) skewX(-1deg); opacity:.85 }
  to  { transform:translateX(6%)  skewX(1deg);  opacity:.35 }
}