/* ==========================================================================
   Why Us (لماذا نحن) — section partial
   Figma node 2153:232 · canvas 1280 × 877 · RTL
   All selectors scoped to .whyus. No :root / global styling.
   ========================================================================== */

.whyus {
  box-sizing: border-box;
  width: 100%;
  background: #F7F7FB;                 /* section band background */
  padding: 96px 24px;                  /* Figma py-96 · centered inner handles the rest */
  font-family: "Tajawal", sans-serif;
  direction: rtl;
}

.whyus *,
.whyus *::before,
.whyus *::after {
  box-sizing: border-box;
}

.whyus__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;                           /* head → grid */
  max-width: 1152px;
  margin: 0 auto;
}

/* ------------------------------------------------------------------ Heading */

.whyus__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 561px;
  width: 100%;
  text-align: center;
}

.whyus__eyebrow {
  margin: 0;
  font-weight: 700;
  font-size: 14px;
  line-height: normal;
  letter-spacing: 0.56px;
  color: #372873;
}

.whyus__title {
  margin: 0;
  font-weight: 700;
  font-size: 40px;
  line-height: normal;
  color: #241B4F;
}

.whyus__subtitle {
  margin: 0;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: #6B6790;
}

/* -------------------------------------------------------------------- Grid */

.whyus__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 20px;
  row-gap: 48px;                       /* vertical gap between the two rows */
  width: 100%;
}

/* -------------------------------------------------------------------- Card */

.whyus-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;             /* RTL: flex-start = inline start = right edge */
  gap: 14px;
  min-width: 0;
  min-height: 226px;
  padding: 30px 26px;
  background: #FFFFFF;
  border: 1px solid var(--tint);       /* #EEEDF6 */
  /* tl · tr · br · bl  (Figma: tl20 tr8 br20 bl8) */
  border-radius: 20px 8px 20px 8px;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.3s ease, border-color 0.3s ease,
              background 0.3s ease;
}

/* lift + full colour change on hover: card turns brand indigo */
.whyus-card:hover {
  transform: translateY(-6px);
  background: #372873;
  border-color: #372873;
  box-shadow: 0 22px 46px rgba(55, 40, 115, 0.38);
}
.whyus-card__title,
.whyus-card__desc { transition: color 0.3s ease; }
.whyus-card:hover .whyus-card__title { color: #ffffff; }
.whyus-card:hover .whyus-card__desc  { color: rgba(255, 255, 255, 0.82); }

/* icon tile flips to lime accent so it pops on the indigo card */
.whyus-card__icon {
  transition: background 0.3s ease, transform 0.3s ease;
}
.whyus-card:hover .whyus-card__icon {
  background: var(--accent);           /* #ACD91A */
  transform: translateY(-2px) scale(1.08);
}
/* row 2 icons have a purple base (nth-child) declared later — override it on hover */
.whyus-card:nth-child(n + 4):hover .whyus-card__icon {
  background: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .whyus-card,
  .whyus-card__icon,
  .whyus-card__title,
  .whyus-card__desc { transition: none; }
}

.whyus-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  background: var(--tint);             /* #EEEDF6 — rows 1 icons */
  /* tl14 tr6 br14 bl6 */
  border-radius: 14px 6px 14px 6px;
  overflow: hidden;
}

/* Row 2 icon tiles use a translucent purple fill in Figma */
.whyus-card:nth-child(n + 4) .whyus-card__icon {
  background: rgba(55, 40, 115, 0.13);
}

.whyus-card__icon img {
  display: block;
  width: 26px;
  height: 26px;
}

.whyus-card__title {
  margin: 0;
  width: 100%;
  font-weight: 700;
  font-size: 20px;
  line-height: normal;
  color: #241B4F;
  text-align: right;
  word-break: break-word;
}

.whyus-card__desc {
  margin: 0;
  width: 100%;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  color: #6B6790;
  text-align: right;
  word-break: break-word;
}

/* ---------------------------------------------------------- Responsive */

/* 3 cols → 2 cols */
@media (max-width: 992px) {
  .whyus__grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 24px;
  }
}

/* 2 cols → 1 col */
@media (max-width: 620px) {
  .whyus {
    padding: 64px 20px;
  }
  .whyus__grid {
    grid-template-columns: 1fr;
    row-gap: 20px;
  }
  .whyus-card {
    min-height: 0;                     /* let content define height on mobile */
  }
  .whyus__title {
    font-size: 32px;
  }
  .whyus__subtitle {
    font-size: 16px;
  }
}