/* ============================================================
   ebhro9 — Hero Section
   Namespace  : ebhro9
   Direction  : RTL — Arabic
   Mobile-First
============================================================ */

@import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@400;500;600;700&display=swap');

/* ============================================================
   1. Variables & Colors
============================================================ */
.ebhro9 {

  /* خلفية السكشن */
  --ebhro9-bg:               #03082e;

  /* الأوفرلاي — موبايل أفتح */
  --ebhro9-overlay-start:    rgba(4, 12, 50, 0.55);
  --ebhro9-overlay-end:      rgba(2, 6, 28, 0.35);

  /* النصوص */
  --ebhro9-title-brand:      #ffffff;
  --ebhro9-title-tagline:    rgba(255, 255, 255, 0.95);
  --ebhro9-title-highlight:  #4da6ff;
  --ebhro9-desc:             rgba(210, 225, 255, 0.85);

  /* زر رئيسي */
  --ebhro9-btn-bg:           #ffffff;
  --ebhro9-btn-text:         #03082e;
  --ebhro9-btn-radius:       3rem;
  --ebhro9-btn-shadow:       rgba(77, 166, 255, 0.35);

  /* البادينج */
  --ebhro9-padding-top:      3rem;
  --ebhro9-padding-bottom:   3rem;

  /* ارتفاع السكشن */
  --ebhro9-height:           32rem;

}

/* ============================================================
   2. Reset داخل الـ namespace
============================================================ */
*,
.ebhro9 *,
.ebhro9 *::before,
.ebhro9 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ============================================================
   3. Base Styles — Mobile
============================================================ */
.ebhro9 {
  font-family: "El Messiri", sans-serif;
  direction: rtl;
  position: relative;
  height: var(--ebhro9-height);
  background-color: var(--ebhro9-bg);
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* — الخلفية — */
.ebhro9__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ebhro9__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  display: block;
}


.ebhro9__bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    var(--ebhro9-overlay-start) 0%,
    var(--ebhro9-overlay-end) 100%
  );
}


.ebhro9__container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 75rem;
  margin: 0 auto;
  padding: var(--ebhro9-padding-top) 1.25rem var(--ebhro9-padding-bottom);
}

.ebhro9__content {
  max-width: 36rem;
}


.ebhro9__title {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.ebhro9__title-brand {
  font-size: clamp(1.9rem, 8vw, 3.2rem);
  font-weight: 700;
  color: var(--ebhro9-title-brand);
}

.ebhro9__title-tagline {
  font-size: clamp(1.4rem, 6.5vw, 2.6rem);
  font-weight: 600;
  color: var(--ebhro9-title-tagline);
}

.ebhro9__title-highlight {
  color: var(--ebhro9-title-highlight);
}


.ebhro9__desc {
  font-size: clamp(0.85rem, 3.2vw, 1rem);
  font-weight: 400;
  color: var(--ebhro9-desc);
  line-height: 1.75;
  margin-bottom: 1.75rem;
}


.ebhro9__actions {
  display: flex;
  align-items: center;
}

.ebhro9__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  border-radius: var(--ebhro9-btn-radius);
  font-family: "El Messiri", sans-serif;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  text-decoration: none;
  border: none;
  outline: none;
}

.ebhro9__btn--primary {
  padding: 0.8rem 1.75rem;
  background: var(--ebhro9-btn-bg);
  color: var(--ebhro9-btn-text);
  font-size: clamp(0.85rem, 2.8vw, 0.95rem);
  box-shadow: 0 0.4rem 1.2rem var(--ebhro9-btn-shadow);
}

.ebhro9__btn--primary:hover,
.ebhro9__btn--primary:focus-visible {
  transform: translateY(-0.2rem);
  box-shadow: 0 0.7rem 1.8rem var(--ebhro9-btn-shadow);
}

.ebhro9__btn--primary:active {
  transform: translateY(0);
}

.ebhro9__btn-icon {
  font-size: 0.9em;
  transition: transform 0.25s ease;
  display: flex;
  align-items: center;
}

.ebhro9__btn--primary:hover .ebhro9__btn-icon {
  transform: translateX(-0.25rem);
}

/* ============================================================
   4. Breakpoints
============================================================ */

/* Small Tablet 481 → 600 */
@media (min-width: 481px) {
  .ebhro9 {
    --ebhro9-height: 36rem;
  }
  .ebhro9__container {
    padding-right: 2rem;
    padding-left: 2rem;
  }
}

/* Medium Tablet 601 → 768 */
@media (min-width: 601px) {
  .ebhro9 {
    --ebhro9-height:          40rem;
    --ebhro9-padding-top:     4rem;
    --ebhro9-padding-bottom:  4rem;
    --ebhro9-overlay-start:   rgba(4, 12, 50, 0.80);
    --ebhro9-overlay-end:     rgba(2, 6, 28, 0.25);
  }
  .ebhro9__bg-overlay {
    background: linear-gradient(
      105deg,
      var(--ebhro9-overlay-start) 0%,
      var(--ebhro9-overlay-end) 65%,
      rgba(2, 6, 28, 0.00) 100%
    );
  }
}

/* Large Tablet 769 → 1024 */
@media (min-width: 769px) {
  .ebhro9 {
    --ebhro9-height:          46rem;
    --ebhro9-padding-top:     5rem;
    --ebhro9-padding-bottom:  5rem;
    --ebhro9-overlay-start:   rgba(4, 12, 50, 0.85);
    --ebhro9-overlay-end:     rgba(2, 6, 28, 0.20);
  }
  .ebhro9__bg-img {
    object-position: center center;
  }
  .ebhro9__content {
    max-width: 42rem;
  }
}

/* Small Desktop 1025 → 1280 */
@media (min-width: 1025px) {
  .ebhro9 {
    --ebhro9-height:          52rem;
    --ebhro9-padding-top:     6rem;
    --ebhro9-padding-bottom:  6rem;
  }
  .ebhro9__container {
    padding-right: 4rem;
    padding-left: 4rem;
  }
}

/* Medium Desktop 1281 → 1440 */
@media (min-width: 1281px) {
  .ebhro9 {
    --ebhro9-height:  58rem;
  }
  .ebhro9__container {
    padding-right: 6rem;
    padding-left: 6rem;
  }
}

/* Large Desktop 1441 → 1920 */
@media (min-width: 1441px) {
  .ebhro9 {
    --ebhro9-height:          64rem;
    --ebhro9-padding-top:     8rem;
    --ebhro9-padding-bottom:  8rem;
  }
  .ebhro9__container {
    padding-right: 8rem;
    padding-left: 8rem;
  }
}

/* Extra Large 1921+ */
@media (min-width: 1921px) {
  .ebhro9 {
    --ebhro9-height: 72rem;
  }
  .ebhro9__container {
    max-width: 100rem;
  }
}