/* =========================================
   Who We Are – About Section
   ========================================= */

.who-we-are-page-wrapper {
  margin: 3.75rem auto 0;
  position: relative;
  max-width: 100%;
}

/* Section — now vertical stack */
.wwa-about {
  display: flex;
  flex-direction: column;
  padding: 3.625rem 4.6875rem; /* 58px 75px */
  position: relative;
}

/* Eyebrow + Title Header (full width) */
.wwa-about__header {
  margin-bottom: 2.25rem; /* 36px */
  position: relative;
}

.wwa-about__eyebrow {
  font-family: "Lexend", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1rem; /* 16px */
  line-height: 1rem;
  letter-spacing: 0.4375rem; /* 7px */
  text-transform: uppercase;
  background: linear-gradient(
    90deg,
    #00818d -13.84%,
    #0b828d -0.84%,
    #288790 22.15%,
    #588e94 52.15%,
    #97989a 86.15%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
  position: relative;
  margin: 0;
}

.wwa-about__eyebrow::after {
  content: "";
  position: absolute;
  left: 0;
  top: calc(100% + 0.5625rem); /* 9px */
  width: 5.25rem; /* 84px */
  height: 2px;
  background: linear-gradient(
    90deg,
    #00818d -13.84%,
    #0b828d -0.84%,
    #288790 22.15%,
    #588e94 52.15%,
    #97989a 86.15%
  );
}

.wwa-about__title {
  font-family: "Lexend", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 3.125rem; /* 50px */
  line-height: 3.125rem; /* 50px */
  letter-spacing: -0.0625rem; /* -1px */
  color: #000000;
  margin: 0;
  margin-top: 1.375rem;
}

/* Description Paragraphs (full width) */
.wwa-about__desc {
  font-family: "Dubai", "Lexend", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1.375rem; /* 22px */
  line-height: 1.875rem; /* 30px */
  color: #000000;
  margin: 0 0 2.25rem;
}

/* =========================================
   Two-Column Layout (Content + Image)
   ========================================= */
.wwa-about__columns {
  display: flex;
  align-items: flex-start;
  gap: 3.75rem; /* 60px */
}

/* Left Content Column */
.wwa-about__content {
  flex: 1;
  max-width: 54.3125rem; /* ~869px */
}

/* Subtitle */
.wwa-about__subtitle {
  font-family: "Lexend", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 1.5rem; /* 24px */
  line-height: 1.875rem; /* 30px */
  color: #37818d;
  margin: 0 0 1.6875rem; /* 10px */
}

/* Bullet List */
.wwa-about__list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5625rem; /* 10px */
}

.wwa-about__list li {
  position: relative;
  padding-left: 1.09375rem; /* ~17.5px for dot + gap */
  font-family: "Dubai", "Lexend", sans-serif;
  font-weight: 400;
  font-size: 1.375rem; /* 22px */
  line-height: 1.875rem; /* 30px */
  color: #000000;
}

.wwa-about__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.71875rem; /* vertically center */
  width: 0.46875rem; /* 7.47px */
  height: 0.46875rem;
  border-radius: 50%;
  background: linear-gradient(
    90deg,
    #00818d -13.84%,
    #0b828d -0.84%,
    #288790 22.15%,
    #588e94 52.15%,
    #97989a 86.15%
  );
}

/* Right Image Column */
.wwa-about__image {
  width: 45rem; /* 720px */
  min-width: 45rem;
  border-radius: 1.25rem; /* 20px */
  overflow: hidden;
  height: 31.085rem;
}

.wwa-about__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 1.25rem;
}

/* =========================================
   Saada Programme Section (Image Left + Text Right)
   ========================================= */
.wwa-program {
  display: flex;
  align-items: flex-start;
  gap: 3.75rem; /* 60px */
  padding: 3.625rem 4.6875rem; /* 58px 75px */
  background: #37818d1a;
  border-radius: 1.25rem;
}

.wwa-program__image {
  width: 45rem; /* 720px */
  min-width: 28rem;
  flex-shrink: 0;
  border-radius: 1.25rem; /* 20px */
  overflow: hidden;
}

.wwa-program__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 1.25rem;
}

.wwa-program__content {
  flex: 1;
}

.wwa-program__title {
  font-family: "Lexend", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 3.125rem; /* 50px */
  line-height: 3.5rem;
  letter-spacing: -0.0625rem; /* -1px */
  color: #000000;
  margin: 0 0 1.875rem;
}

.wwa-program__desc {
  font-family: "Dubai", "Lexend", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1.375rem; /* 22px */
  line-height: 1.875rem; /* 30px */
  color: #000000;
  margin: 0 0 1.125rem;
}

.wwa-program__desc:last-child {
  margin-bottom: 0;
}

/* =========================================
   Almadallah Section (Text Top + Image Bottom)
   ========================================= */
.wwa-almadallah {
  margin-top: 3.375rem;
}

.wwa-almadallah__content {
  width: 56.756rem;
  margin: 0 auto;
  padding-top: 3.0375rem;
}

.wwa-almadallah__title {
  font-family: "Lexend", sans-serif;
  font-weight: 400;
  font-size: 3.125rem; /* 50px */
  line-height: 3.5rem;
  letter-spacing: -0.0625rem;
  color: #000000;
  margin: 0 0 1rem;
}

.wwa-almadallah__subtitle {
  font-family: "Lexend", sans-serif;
  font-weight: 500;
  font-size: 1.5rem; /* 24px */
  line-height: 1.875rem; /* 30px */
  color: #37818d;
  margin: 0 0 1rem;
}

.wwa-almadallah__desc {
  font-family: "Dubai", "Lexend", sans-serif;
  font-weight: 400;
  font-size: 1.2375rem; /* 22px */
  line-height: 1.875rem; /* 30px */
  color: #000000;
  margin: 0;
}

.wwa-almadallah__image {
  width: 100%;
  border-radius: 1.25rem; /* 20px */
  overflow: hidden;
}

.wwa-almadallah__image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  border-radius: 1.25rem;
}
/* =========================================
   Benefit Highlights Section
   ========================================= */
.wwa-benefits {
  padding: 3.625rem 1.575rem;
  margin-top: 3.375rem;
  background-color: #37818d1a;
  border-radius: 1.125rem;
  margin-bottom: 8.9125rem;
}

.wwa-benefits__header {
  margin-bottom: 2.5rem;
}

.wwa-benefits__eyebrow {
  font-family: "Lexend", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1rem;
  letter-spacing: 0.4375rem;
  text-transform: uppercase;
  background: linear-gradient(
    90deg,
    #00818d -13.84%,
    #0b828d -0.84%,
    #288790 22.15%,
    #588e94 52.15%,
    #97989a 86.15%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
  margin-bottom: 1.5rem;
  position: relative;
}

.wwa-benefits__eyebrow::after {
  content: "";
  position: absolute;
  left: 0;
  top: calc(100% + 0.5625rem);
  width: 5.25rem;
  height: 2px;
  background: linear-gradient(
    90deg,
    #00818d -13.84%,
    #0b828d -0.84%,
    #288790 22.15%,
    #588e94 52.15%,
    #97989a 86.15%
  );
}

.wwa-benefits__title {
  font-family: "Lexend", sans-serif;
  font-weight: 400;
  font-size: 2.5rem; /* 40px */
  line-height: 3rem;
  letter-spacing: -0.0625rem;
  color: #000000;
  margin: 0;
}

/* Slider Container — Nav Left, Swiper Right */
.wwa-benefits__slider {
  display: flex;
  align-items: flex-end;
  gap: 1.25rem;
}

.benefits-swiper {
  overflow: hidden;
  flex: 1;
  margin-bottom: -8.9125rem;
}

/* Card */
.benefit-card {
  position: relative;
  border-radius: 1.25rem;
  overflow: hidden;
  height: 28rem; /* ~448px */
  cursor: pointer;
}

.benefit-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.benefit-card:hover .benefit-card__img {
  transform: scale(1.05);
}

/* Default Info (bottom of card) */
.benefit-card__info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem;
  z-index: 2;
  transition: opacity 0.3s ease;
}

.benefit-card:hover .benefit-card__info {
  opacity: 0;
}

.benefit-card__number {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Lexend", sans-serif;
  font-weight: 400;
  font-size: 0.875rem;
  color: #ffffff;
  margin-bottom: 0.5rem;
}

.benefit-card__line {
  display: inline-block;
  width: 2rem;
  height: 2px;
  background: #ffffff;
}

.benefit-card__title {
  font-family: "Lexend", sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.875rem;
  color: #ffffff;
  margin: 0;
}

/* Hover Overlay — slides up from bottom */
.benefit-card__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(0, 129, 141, 0.85) 0%,
    rgba(55, 129, 141, 0.95) 100%
  );
  border-radius: 1.25rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  z-index: 3;
  transform: translateY(100%);
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.benefit-card:hover .benefit-card__overlay {
  transform: translateY(0);
}

.benefit-card__overlay .benefit-card__number {
  color: #ffffff;
}

.benefit-card__overlay .benefit-card__line {
  background: #ffffff;
}

.benefit-card__overlay .benefit-card__title {
  color: #ffffff;
  margin-bottom: 1rem;
}

.benefit-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.benefit-card__list li {
  position: relative;
  padding-left: 1.25rem;
  font-family: "Dubai", "Lexend", sans-serif;
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.5rem;
  color: #ffffff;
}

.benefit-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5625rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #ffffff;
}

/* Swiper Navigation — Vertical on Left, Bottom-aligned */
.benefits-swiper-nav {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex-shrink: 0;
  margin-bottom: -8.9125rem;
}

.benefits-swiper-prev,
.benefits-swiper-next {
  width: 2.23819rem;
  height: 2.23819rem;
  border-radius: 50%;
  border: none;
  background: #37818d;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.benefits-swiper-prev:hover,
.benefits-swiper-next:hover {
  background: #2a6a74;
  color: #ffffff;
}

/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 1400px) {
  .wwa-about {
    padding: 2.5rem 2rem;
  }

  .wwa-about__columns {
    gap: 2.5rem;
  }

  .wwa-about__image {
    width: 35rem;
    min-width: 35rem;
  }

  .wwa-program {
    padding: 2.5rem 2rem;
    gap: 2.5rem;
  }

  .wwa-program__image {
    min-width: 22rem;
  }

  .wwa-benefits {
    padding: 2.5rem 2rem;
  }
}

@media (max-width: 1100px) {
  .wwa-about__columns {
    flex-direction: column;
  }

  .wwa-about__content {
    max-width: 100%;
  }

  .wwa-about__image {
    width: 100%;
    min-width: auto;
    max-height: 25rem;
  }

  .wwa-program {
    flex-direction: column;
  }

  .wwa-program__image {
    width: 100%;
    min-width: auto;
    max-height: 25rem;
  }
}

@media (max-width: 768px) {
  .who-we-are-page-wrapper {
    margin-top: 2rem;
    padding-bottom: 2rem;
  }

  .wwa-about {
    padding: 1.5rem 1rem;
  }

  .wwa-about__title {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .wwa-about__desc {
    font-size: 1.125rem;
    line-height: 1.5rem;
  }

  .wwa-about__subtitle {
    font-size: 1.25rem;
    line-height: 1.5rem;
  }

  .wwa-about__list li {
    font-size: 1.125rem;
    line-height: 1.5rem;
  }

  .wwa-about__image {
    max-height: 18rem;
  }

  .wwa-program {
    padding: 1.5rem 1rem;
  }

  .wwa-program__title {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .wwa-program__desc {
    font-size: 1.125rem;
    line-height: 1.5rem;
  }

  .wwa-program__image {
    max-height: 18rem;
  }

  .wwa-almadallah {
    padding: 1.5rem 1rem;
  }

  .wwa-almadallah__title {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .wwa-almadallah__subtitle {
    font-size: 1.25rem;
    line-height: 1.5rem;
  }

  .wwa-almadallah__desc {
    font-size: 1.125rem;
    line-height: 1.5rem;
  }

  .wwa-benefits {
    padding: 1.5rem 1rem;
  }

  .wwa-benefits__title {
    font-size: 1.75rem;
    line-height: 2.25rem;
  }

  .benefit-card {
    height: 22rem;
  }
}