.aboutSection {
    background-image: url('../images/background.png');
    background-image: image-set(
        url('../images/background.webp') type('image/webp'),
        url('../images/background.png') type('image/png')
    );
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow-x: hidden;
}

/* prevent any section from creating horizontal scroll */
body {
    overflow-x: hidden;
}

.aboutTitle {
  font-family: inherit;
    color: #2A2947 !important;
    font-size: clamp(1.75rem, 4vw + 1rem, 3.75rem) !important;
    font-weight: 600 !important;
}

.aboutTitle + p {
    color: #334155;
    font-weight: 400;
}

.aboutSubtitle {
    color: #2A2947;
    font-weight: 600;
}

@media (min-width: 1024px) {
    .aboutSubtitle {
        font-size: 30px;
    }
}

.MissionTitle {
    color: var(#2A2947);
    text-align: center;
    font-size: 50px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    text-transform: capitalize;
}

.supporterCards .featureCard.aboutCard {
    width: 270px;
    height: 370px;
}
@media (max-width: 640px) {
  .supporterCards .featureImage {
    height: 140px;
  }
  .valuesDesc {
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
  }
  .featureCard.ourMission {
    height: auto !important;
  }
  .featureCard.ourMission .featureDesc {
    font-size: 13px !important;
  }
  .featureContent {
    padding: 0 !important;
  }
  .supporterCards .featureTitle {
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
  }
  .supporterCards .featureDesc {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
  }
  .supporterCards .featureCard {
    width: 100%;
    height: auto;
    min-height: 130px;
  }
  .supporterCards .featureCard.ourMission {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    align-self: start;
  }
  .supporterCards .featureCard.aboutCard {
    flex-direction: row;
    gap: 12px;
    align-items: stretch;
    width: 100%;
    max-width: 100% !important;
    border-radius: 12px;
    height: auto;
    min-height: 130px;
  }
  .supporterCards .featureCard.aboutCard .featureImage {
    width: 140px;
    height: auto;
    min-height: unset;
    border-radius: 12px 0 0 12px;
    overflow: hidden;
    flex: 0 0 30%;
  }
  .supporterCards .featureCard.aboutCard .featureImage img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
  }
  /* Mission card mobile: content drives height, no overflow */
  .supporterCards .featureCard.missionCard {
    height: auto !important;
    min-height: unset !important;
  }
  .supporterCards .featureCard.missionCard .featureImage {
    /* height: auto; */
    flex: 0 0 40%;
  }
  .supporterCards .featureCard.missionCard .featureBody {
    justify-content: center;
    align-items: flex-start;
    flex: 1;
  }
  .supporterCards .featureCard.missionCard .featureContent {
    padding: 8px;
  }

}

/* ── Mission cards: override fixed hero.css width so cards fill the grid ── */
.supporterCards .featureCard.missionCard {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 0% !important;
    height: auto !important;
}

.supporterCards .featureCard.missionCard .featureImage {
    height: 160px;
    flex-shrink: 0;
}

.supporterCards .featureCard.missionCard .featureImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Make featureBody fill remaining space and align content to top */
.supporterCards .featureCard.missionCard .featureBody {
    flex: 1 1 auto;
    justify-content: flex-start;
    align-items: flex-start;
}

.supporterCards .featureCard.missionCard .featureContent {
    padding: 12px 10px;
}

/* ── Extra-small phones (< 480px): prevent aboutImage overflow ── */
@media (max-width: 480px) {
  .aboutImage {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
}

/* ── Medium screens (641 – 1023px): fix card widths so they fill grids ── */
@media (min-width: 641px) and (max-width: 1023px) {
  /* Mission / How-We-Help cards */
  .supporterCards .featureCard {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
  .supporterCards .featureCard.aboutCard {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
  .supporterCards .featureCard.missionCard {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
  .supporterCards .featureCard.missionCard .featureImage {
    height: 180px;
  }
  /* Our Values cards – let Tailwind md: classes drive width */
  .supporterCards .featureCard.aboutCard.ourMission {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
  .featureCard.ourMission {
    height: auto !important;
  }
  .supporterCards .featureImage {
    height: 200px;
  }
}

/* ── Fix "Our Values" (ourMission) cards: row layout on mobile like mission cards ── */
@media (max-width: 640px) {
  .supporterCards .featureCard.aboutCard.ourMission {
    flex-direction: row !important;
    height: auto !important;
    min-height: unset !important;
    align-items: stretch;
    width: 100% !important;
    max-width: 100% !important;
  }
  .supporterCards .featureCard.aboutCard.ourMission .featureImage {
    flex: 0 0 140px !important;
    height: auto !important;
    min-height: unset !important;
    border-radius: 12px 0 0 12px !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .supporterCards .featureCard.aboutCard.ourMission .featureImage img {
    width: 70px !important;
    height: 70px !important;
    object-fit: contain;
  }
  .supporterCards .featureCard.aboutCard.ourMission .featureBody {
    flex: 1;
    justify-content: center;
    align-items: flex-start;
  }
  .supporterCards .featureCard.aboutCard.ourMission .featureContent {
    padding: 8px !important;
  }
  .supporterCards .featureCard.aboutCard.ourMission .valuesDesc {
    font-size: 14px;
    text-align: left;
  }
}