/* ============================================================
   ebpt11 — ISO Certification Why Section
   Namespace  : ebpt11
============================================================ */

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

/* ============================================================
   1. Variables & Colors
============================================================ */
.ebpt11 {
  /* خلفية وعام */
  --ebpt11-bg:              #f0f4f8;
  --ebpt11-text:            #1a2a3a;
  --ebpt11-title:           #0d2a4a;
  --ebpt11-title-highlight: #1a5fa8;
  --ebpt11-border:          #c8daea;

  /* overlay */
  --ebpt11-overlay-start:   rgba(240, 244, 248, 0.97);
  --ebpt11-overlay-end:     rgba(240, 244, 248, 0.55);

  /* قائمة */
  --ebpt11-item-text:       #2c3e55;
  --ebpt11-item-hover-bg:   rgba(26, 95, 168, 0.06);
  --ebpt11-item-border:     rgba(26, 95, 168, 0.12);

  /* أيقونة */
  --ebpt11-icon-color:      #1a5fa8;
  --ebpt11-icon-bg:         rgba(26, 95, 168, 0.10);

  /* خط التزيين */
  --ebpt11-line-color:      #1a5fa8;

  /* Padding */
  --ebpt11-padding-top:     2rem;
  --ebpt11-padding-bottom:  2rem;
}

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

/* ============================================================
   3. Base Styles — Mobile
============================================================ */
.ebpt11 {
  font-family: "El Messiri", sans-serif;
  direction: ltr;
  position: relative;
  background-color: var(--ebpt11-bg);
  padding-top: var(--ebpt11-padding-top);
  padding-bottom: var(--ebpt11-padding-bottom);
  overflow: hidden;
  width: 100%;
}

.ebpt11__bg-image {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ebpt11__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  aspect-ratio: 16 / 5;
  display: block;
}

/* .ebpt11__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    var(--ebpt11-overlay-end) 0%,
    var(--ebpt11-overlay-start) 55%
  );
} */


.ebpt11__container {
  position: relative;
  z-index: 1;
  width: 92%;
  max-width: 75rem;
  margin-inline: auto;
}


.ebpt11__content {
  width: 100%;
}


.ebpt11__header {
  margin-bottom: 1.75rem;
}

.ebpt11__title {
  font-size: clamp(1.3rem, 5vw, 2rem);
  font-weight: 700;
  color: var(--ebpt11-title);
  line-height: 1.4;
  margin-bottom: 0.6rem;
}

.ebpt11__title-highlight {
  color: var(--ebpt11-title-highlight);
  display: inline;
}

.ebpt11__title-line {
  width: 3.5rem;
  height: 0.22rem;
  background: var(--ebpt11-line-color);
  border-radius: 0.5rem;
  margin-top: 0.5rem;
}


.ebpt11__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.ebpt11__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  border-radius: 0.5rem;
  border: 0.06rem solid transparent;
  transition: background 0.22s ease, border-color 0.22s ease;
}

/* .ebpt11__item:hover {
  background: var(--ebpt11-item-hover-bg);
  border-color: var(--ebpt11-item-border);
} */


.ebpt11__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  min-width: 1.6rem;
  border-radius: 50%;
  background: var(--ebpt11-icon-bg);
  margin-top: 0.1rem;
}

.ebpt11__icon {
  font-size: clamp(0.75rem, 2vw, 0.9rem);
  color: var(--ebpt11-icon-color);
}


.ebpt11__item-text {
  font-size: clamp(0.82rem, 2.8vw, 0.97rem);
  color: var(--ebpt11-item-text);
  line-height: 1.65;
  font-weight: 400;
}

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

/* Small Tablet  481 → 600 */
@media (min-width: 481px) {
  .ebpt11 {
    --ebpt11-padding-top:    4rem;
    --ebpt11-padding-bottom: 4rem;
  }

  .ebpt11__content {
    width: 75%;
  }
}

/* Medium Tablet 601 → 768 */
@media (min-width: 601px) {
  .ebpt11__content {
    width: 68%;
  }

  .ebpt11__overlay {
    background: linear-gradient(
      to right,
      var(--ebpt11-overlay-end) 0%,
      var(--ebpt11-overlay-start) 60%
    );
  }
}

/* Large Tablet  769 → 1024 */
@media (min-width: 769px) {
  .ebpt11 {
    --ebpt11-padding-top:    5rem;
    --ebpt11-padding-bottom: 5rem;
  }

  .ebpt11__content {
    width: 58%;
  }

  /* .ebpt11__overlay {
    background: linear-gradient(
      to right,
      rgba(240, 244, 248, 0.25) 0%,
      rgba(240, 244, 248, 0.96) 52%
    );
  } */
}

/* Small Desktop 1025 → 1280 */
@media (min-width: 1025px) {
  .ebpt11 {
    --ebpt11-padding-top:    3rem;
    --ebpt11-padding-bottom: 3rem;
  }

  .ebpt11__content {
    width: 52%;
  }

  .ebpt11__item {
    gap: 0.9rem;
    padding: 0.7rem 1rem;
  }
}

/* Medium Desktop 1281 → 1440 */
@media (min-width: 1281px) {
  .ebpt11__content {
    width: 48%;
  }
}

/* Large Desktop 1441 → 1920 */
@media (min-width: 1441px) {
  .ebpt11 {
    --ebpt11-padding-top:   4rem;
    --ebpt11-padding-bottom:4rem;
  }

  .ebpt11__content {
    width: 44%;
  }
}

/* Extra Large 1921+ */
@media (min-width: 1921px) {
  .ebpt11 {
    --ebpt11-padding-top:    5rem;
    --ebpt11-padding-bottom: 5rem;
  }

  .ebpt11__content {
    width: 40%;
  }
}