@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@700;800&display=swap");

@keyframes why2FadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes why2Drift {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 0.6; }
  50% { transform: translateY(-170px) translateX(12px); opacity: 0.85; }
  90% { opacity: 0.25; }
  100% { transform: translateY(-340px) translateX(-8px); opacity: 0; }
}

.why2 {
  width: 100%;
  max-width: 100vw;
  background: linear-gradient(135deg, #e9f0ff 0%, #eef3fd 38%, #f2f1f5 68%, #f6f1ea 100%);
  padding: clamp(16px, 3vh, 32px) clamp(16px, 5vw, 40px);
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
  position: relative;
  overflow-x: hidden; /* kills horizontal scroll from glows/particles */
}

.why2__particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.why2__particle {
  position: absolute;
  bottom: -20px;
  border-radius: 50%;
  background: radial-gradient(circle, #f0c878 0%, rgba(212, 162, 76, 0.15) 70%);
  animation-name: why2Drift;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.why2__inner {
  max-width: 1360px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  box-sizing: border-box;
}

.why2__badge {
  position: relative;
  top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  z-index: 6;
  max-width: 100%;
  margin-bottom: 28px;
  opacity: 0;
  animation-play-state: paused;
  flex-wrap: wrap;
}

.why2__badge-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: linear-gradient(145deg, #f0c878, #d4a24c);
  color: #1e3a5f;
  border-radius: 9px;
  flex-shrink: 0;
  box-shadow: 0 6px 14px rgba(212, 162, 76, 0.3);
}

.why2__badge-divider {
  width: 1.5px;
  height: 18px;
  background: #c9d4e6;
  flex-shrink: 0;
}

.why2__badge-text {
  color: #1e3a5f;
  font-size: clamp(11.5px, 1.4vw, 14px);
  font-weight: 800;
  letter-spacing: 0.8px;
  white-space: normal;
  font-family: "Plus Jakarta Sans", sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.why2__box {
  position: relative;
  width: 100%;
  max-width: 100%;
  background-color: transparent;
  background-size: cover;
  background-position: left center;
  background-repeat: no-repeat;
  border-radius: 0;
  box-shadow:
    inset 130px 0 110px -50px rgba(237, 243, 255, 0.95),
    inset -60px 0 100px -60px rgba(233, 240, 255, 0.5),
    inset 0 130px 110px -50px rgba(233, 240, 255, 0.95),
    inset 0 -60px 50px -30px rgba(246, 241, 234, 0.75);
  overflow: visible;
  height: auto;
  min-height: 380px;
  max-height: 520px;
  box-sizing: border-box;
}

.why2__box::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(237, 243, 255, 0) 0%,
    rgba(237, 243, 255, 0.05) 34%,
    rgba(243, 240, 246, 0.25) 44%,
    rgba(248, 244, 240, 0.75) 54%,
    rgba(248, 244, 240, 0.92) 62%
  );
  z-index: 1;
}

.why2__box::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: -1px;
  background: linear-gradient(
    180deg,
    rgba(233, 240, 255, 0.55) 0%,
    rgba(233, 240, 255, 0) 10%,
    rgba(233, 240, 255, 0) 94%,
    #f6f1ea 100%
  );
  z-index: 1;
  pointer-events: none;
}

.why2__box-cornerFade {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 26%;
  height: 20%;
  display: block;
  background: radial-gradient(
    ellipse at bottom left,
    #f6f1ea 0%,
    rgba(246, 241, 234, 0.5) 40%,
    rgba(246, 241, 234, 0) 78%
  );
  z-index: 1;
  pointer-events: none;
}

.why2__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 28px 8px 28px clamp(360px, 49%, 680px);
  opacity: 0;
  animation-play-state: paused;
  box-sizing: border-box;
}

.why2__textBlock {
  max-width: 800px;
  margin-left: auto;
  text-align: right;
  padding-right: 0;
  position: relative;
}

/* decorative glow — pulled inside so it can never push page width out */
.why2__textBlock::before {
  content: "";
  position: absolute;
  top: -40px;
  right: 0;
  width: 200px;
  height: 200px;
  max-width: 100%;
  background: radial-gradient(circle, rgba(212, 162, 76, 0.16), transparent 70%);
  filter: blur(20px);
  pointer-events: none;
  z-index: -1;
}

.why2__heading {
  font-size: clamp(19px, 2vw, 26px);
  font-weight: 800;
  line-height: 1.4;
  color: #28407c;
  margin: 0 0 8px 0;
  padding-top: 4px;
  overflow: visible;
  font-family: "Plus Jakarta Sans", sans-serif;
  word-break: break-word;
}

.why2__heading--accent {
  color: #d4a24c;
}

.why2__underline {
  display: block;
  width: 40px;
  height: 3px;
  border-radius: 2px;
  background: #d4a24c;
  margin: 0 0 18px auto;
}

.why2__para {
  font-size: 14px;
  line-height: 1.55;
  color: #3d4759;
  margin: 0 0 18px 0;
}

/* ---------- CARDS GRID ----------
   Desktop: 5 cards in a 6-col grid (2+2+2, then last two centred as 2+2)
   Tablet:  2 columns, 5th card centred full-row
   Mobile:  1 column — every card always visible, nothing hidden/clipped */
.why2__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  max-width: 800px;
  width: 100%;
  margin-left: auto;
  margin-right: 0;
  position: relative;
  z-index: 2;
  box-sizing: border-box;
}

.why2__card {
  grid-column: span 2;
}

.why2__card:nth-of-type(4) {
  grid-column: 2 / 4;
}

.why2__card:nth-of-type(5) {
  grid-column: 4 / 6;
}

.why2__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border: 1.5px solid rgba(255, 255, 255, 0.9);
  border-radius: 14px;

  padding: 26px 10px 14px 10px;
  margin-top: 18px;

  min-width: 0;
  width: 100%;
  box-sizing: border-box;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease,
    background 0.3s ease;

  opacity: 0;
  animation-play-state: paused;

  box-shadow:
    0 8px 24px rgba(30, 58, 95, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.35) inset;
}

.why2__card:hover {
  transform: translateY(-6px);
  border-color: rgba(212, 162, 76, 0.6);
  background: rgba(255, 255, 255, 0.24);
  box-shadow:
    0 14px 32px rgba(30, 58, 95, 0.1),
    0 0 22px rgba(120, 170, 255, 0.2);
}

.why2__cardIcon {
  position: absolute;
  top: -23px;
  left: 50%;
  transform: translateX(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(145deg, #1e3a5f, #2d5480);
  color: #d4a24c;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2.5px solid #d4a24c;
  box-shadow: 0 8px 18px rgba(30, 58, 95, 0.25);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.why2__card:hover .why2__cardIcon {
  transform: translateX(-50%) scale(1.1) rotate(-4deg);
}

.why2__cardTitle {
  font-size: 13.5px;
  font-weight: 700;
  color: #28407c;
  margin: 0 0 4px 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  line-height: 1.3;
  text-shadow: 0 1px 8px rgba(255, 255, 255, 0.6);
  word-break: break-word;
}

.why2__cardLine {
  display: block;
  width: 22px;
  height: 2px;
  background: #d4a24c;
  border-radius: 2px;
  margin: 0 auto 10px auto;
}

.why2__cardDesc {
  font-size: 11.5px;
  line-height: 1.45;
  color: #414c5e;
  margin: 0;
  text-shadow: 0 1px 6px rgba(255, 255, 255, 0.5);
  word-break: break-word;
}

.why2__cardDesc strong {
  color: #28407c;
  font-weight: 700;
}

/* ---------- scroll-triggered reveal ---------- */
.why2.why2--visible .why2__badge {
  animation: why2FadeInUp 0.7s ease both;
  animation-play-state: running;
}

.why2.why2--visible .why2__content {
  animation: why2FadeInUp 0.8s ease 0.1s both;
  animation-play-state: running;
}

.why2.why2--visible .why2__card {
  animation: why2FadeInUp 0.6s ease both;
  animation-delay: calc(var(--i) * 0.05s + 0.15s);
  animation-play-state: running;
}

/* ---------- RESPONSIVE ---------- */

/* ---- Large desktop / laptop ---- */
@media (max-width: 1300px) {
  .why2 {
    padding: clamp(48px, 6vw, 80px) clamp(20px, 4vw, 36px);
  }

  .why2__content {
    padding-left: clamp(340px, 51%, 540px);
  }
}

/* ---- Small laptop / tablet landscape (mid-step so text doesn't
   get squeezed jumping straight from wide side-image layout) ---- */
@media (max-width: 1180px) and (min-width: 1101px) {
  .why2__content {
    padding-left: clamp(300px, 46%, 460px);
  }

  .why2__heading {
    font-size: 21px;
  }

  .why2__grid {
    gap: 10px;
  }
}

/* ---- Tablet: switch to stacked layout (image on top, content below).
   Spacing tightened here on purpose — this range should fit close to
   one screen without a lot of extra scroll.
   NOTE: this range (<=1100px) also covers the ~1024px laptop width,
   so the lighter overlay below applies there too and to mobile
   (nothing overrides it further down), keeping the background image
   visible behind the cards instead of fading to solid colour. ---- */
@media (max-width: 1100px) {
  .why2 {
    padding: 28px 20px;
  }

  .why2__box {
    background-position: center 20%;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: unset;
    max-height: none; /* let it grow to fit all 5 cards — no clipping */
    height: auto;
    box-shadow:
      inset 0 70px 70px -40px rgba(237, 243, 255, 0.95),
      inset 0 -70px 70px -40px rgba(246, 241, 234, 0.95);
  }

  .why2__box::before {
    background: linear-gradient(
      180deg,
      rgba(237, 243, 255, 0.05) 0%,
      rgba(243, 240, 246, 0.2) 42%,
      rgba(248, 244, 240, 0.55) 58%,
      rgba(246, 241, 234, 0.65) 100%
    );
  }

  .why2__box::after {
    display: none;
  }

  .why2__content {
    padding: clamp(50px, 10vh, 80px) 8px 12px 8px;
  }

  .why2__textBlock {
    max-width: 100%;
    margin-left: 0;
    text-align: center;
  }

  .why2__heading {
    font-size: clamp(16px, 2.4vh, 20px);
    line-height: 1.25;
    margin-bottom: 4px;
  }

  .why2__para {
    font-size: clamp(11px, 1.6vh, 13px);
    line-height: 1.4;
    margin-bottom: 10px;
  }

  .why2__underline {
    margin: 0 auto 8px auto;
  }

  /* 2-column grid — card 5 (Strategic Leadership) centred on its own row.
     Every card stays visible, nothing overlaps or clips. */
  .why2__grid {
    max-width: 100%;
    margin-left: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(6px, 1.2vh, 10px);
  }

  .why2__card,
  .why2__card:nth-of-type(4),
  .why2__card:nth-of-type(5) {
    grid-column: auto;
  }

  .why2__card:nth-of-type(5) {
    grid-column: 1 / -1;
    max-width: calc(50% - 5px);
    margin-left: auto;
    margin-right: auto;
  }

  .why2__card {
    padding: clamp(14px, 3vh, 20px) 10px clamp(6px, 1.5vh, 10px) 10px;
    margin-top: clamp(10px, 2.2vh, 16px);
  }

  .why2__cardIcon {
    width: clamp(30px, 5vh, 38px);
    height: clamp(30px, 5vh, 38px);
    top: clamp(-15px, -2.5vh, -19px);
  }

  .why2__cardIcon svg {
    width: 14px;
    height: 14px;
  }

  .why2__cardTitle {
    font-size: clamp(10.5px, 1.5vh, 12px);
    margin-bottom: 2px;
  }

  .why2__cardLine {
    margin-bottom: 4px;
  }

  .why2__cardDesc {
    font-size: clamp(9px, 1.3vh, 10.5px);
    line-height: 1.3;
  }
}

/* ---- Mobile large / small tablet portrait ---- */
@media (max-width: 768px) {
  .why2 {
    padding: clamp(14px, 2.5vh, 30px) 18px;
  }

  .why2__badge-text {
    font-size: 12px;
  }

  .why2__content {
    padding: clamp(45px, 10vh, 75px) 4px 14px 4px;
  }

  .why2__heading {
    font-size: clamp(15px, 2.6vh, 19px);
  }

  .why2__para {
    font-size: clamp(10.5px, 1.7vh, 13px);
    margin-bottom: 12px;
  }

  .why2__grid {
    gap: clamp(6px, 1.2vh, 12px);
  }

  .why2__card {
    padding: clamp(14px, 2.8vh, 20px) 10px clamp(6px, 1.4vh, 10px) 10px;
  }
}

/* ---- Mobile: single column, every card full width and fully visible,
   sized with vh so the whole section still fits one screen ---- */
@media (max-width: 640px) {
  .why2 {
    padding: clamp(10px, 2vh, 20px) 14px;
  }

  .why2__badge {
    margin-bottom: clamp(8px, 1.5vh, 16px);
  }

  .why2__badge-icon {
    width: 24px;
    height: 24px;
  }

  .why2__badge-text {
    font-size: 11px;
  }

  .why2__content {
    padding: clamp(40px, 9vh, 70px) 2px 12px 2px;
  }

  .why2__heading {
    font-size: clamp(14px, 2.6vh, 18px);
    margin-top: 2px;
    line-height: 1.2;
  }

  .why2__underline {
    height: 2px;
    margin-bottom: 6px;
  }

  .why2__para {
    font-size: clamp(10px, 1.6vh, 12px);
    line-height: 1.35;
    margin-bottom: 10px;
  }

  .why2__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 100%;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    gap: clamp(6px, 1vh, 10px);
  }

  .why2__card,
  .why2__card:nth-of-type(4),
  .why2__card:nth-of-type(5) {
    grid-column: auto;
    max-width: 100%;
  }

  .why2__card:nth-of-type(5) {
    grid-column: 1 / -1;
    max-width: calc(50% - 4px);
    margin-left: auto;
    margin-right: auto;
  }

  .why2__card {
    margin-top: clamp(10px, 2vh, 16px);
    padding: clamp(12px, 2.5vh, 18px) 8px clamp(6px, 1.2vh, 8px) 8px;
  }

  .why2__cardIcon {
    width: clamp(26px, 4.5vh, 34px);
    height: clamp(26px, 4.5vh, 34px);
    top: clamp(-13px, -2.2vh, -17px);
  }

  .why2__cardIcon svg {
    width: 13px;
    height: 13px;
  }

  .why2__cardTitle {
    font-size: clamp(10px, 1.5vh, 11.5px);
  }

  .why2__cardDesc {
    font-size: clamp(8.5px, 1.2vh, 10px);
    line-height: 1.3;
  }
}

/* ---- Mobile small ---- */
@media (max-width: 400px) {
  .why2 {
    padding: clamp(8px, 1.5vh, 16px) 10px;
  }

  .why2__content {
    padding: clamp(34px, 8vh, 60px) 2px 10px 2px;
  }

  .why2__heading {
    font-size: clamp(13px, 2.4vh, 16px);
  }

  .why2__para {
    font-size: clamp(9.5px, 1.5vh, 11px);
    line-height: 1.3;
  }

  .why2__grid {
    max-width: 100%;
  }

  .why2__cardTitle {
    font-size: clamp(9.5px, 1.4vh, 11px);
  }

  .why2__cardDesc {
    font-size: clamp(8px, 1.1vh, 9.5px);
  }

  .why2__cardIcon {
    width: clamp(24px, 4vh, 30px);
    height: clamp(24px, 4vh, 30px);
    top: clamp(-12px, -2vh, -15px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .why2__particle {
    animation: none;
  }
}