.feature-section {
  max-width: 90%;
  margin: 42px auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* Header Styling */
.feature-section__header {
  text-align: center;
  margin: 0 auto 48px auto;
}

.feature-section .section__label {
  color: #FFBE00;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

.feature-section .section__title {
  color: #001E3F; 
  font-size: clamp(1.125rem, 2.5vw, 2rem); /* 18px on mobile -> 32px on desktop */
  font-weight: 700;
  margin: 0 0 16px 0;
}

.page-node-7 .feature-section .feature-section__header {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.page-node-7 .feature-section .section__title {
  margin-left: auto;
  margin-right: auto;
}

.page-node-7 .feature-section .section__description {
  text-align: left;
}

.feature-section .section__description {
  color: #4A5568;
  font-size: 1.125rem;
  line-height: 1.6;
  margin: 0;
}

/* Multi-Card Grid (2 Columns on Desktop) */
.feature-section__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

/* Card Container (Side-by-Side: Logo Left, Description Right) */
.feature-card {
  display: flex;
  align-items: center; /* Centers logo vertically against text block */
  gap: 24px;
  background-color: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.feature-card__logo-wrapper {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  display: flex;
  /* align-items: center; */
  justify-content: center;
  margin: 0 auto;
}

.feature-card__logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.feature-card__content {
  flex-grow: 1;
  color: #001E3F;
  font-size: 1rem;
  line-height: 1.6;
}

/* Responsiveness */
@media (max-width: 900px) {
  .feature-section__cards {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .feature-card {
    padding: 24px;
  }
}

@media (max-width: 500px) {
  .feature-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

.feature-card__title {
  color: #001E3F !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  margin: 0 0 8px 0 !important;
  line-height: 1.3 !important;
}

.feature-card__description {
  color: #4A5568 !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
}

.two-column__cards {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 24px; /* Space between cards */
  margin-top: 24px;
}

/* Ensure feature-card items flex properly inside two-column layout */
.two-column__cards .feature-card {
  flex: 1 1 calc(50% - 24px); /* 2 columns wide on desktop */
  min-width: 280px; /* Wraps neatly on mobile screens */
}


/* for  Cambodia CSS*/
/* ==========================================================================
   Khmer Language (km) Specific Overrides
   ========================================================================== */

/* html[lang="km"] .two-column__cards {
  align-items: stretch;
}

html[lang="km"] .two-column__cards .feature-card {
  height: 100%;
  box-sizing: border-box;
}

html[lang="km"] .feature-card__title {
  line-height: 1.5 !important;
  margin-bottom: 8px !important;
}

html[lang="km"] .feature-card__description {
  line-height: 1.8 !important;
  flex-grow: 1;
} */

/* ==========================================================================
   Khmer Language (km) - 2-Column Vertical Flow (CSS Columns)
   ========================================================================== */

html[lang="km"] .two-column__cards {
  display: block !important;
  column-count: 2 !important;
  column-gap: 24px !important;
  width: 100% !important;
  height: auto !important;
}

html[lang="km"] .two-column__cards .feature-card {
  display: flex !important;
  width: 100% !important;
  margin-bottom: 24px !important; /* Serves as the vertical gap between cards */
  break-inside: avoid !important; /* Prevents a card from splitting across columns */
  box-sizing: border-box !important;
}

html[lang="km"] .two-column__cards .feature-card:nth-child(1) { order: 1; }
html[lang="km"] .two-column__cards .feature-card:nth-child(3) { order: 2; }
html[lang="km"] .two-column__cards .feature-card:nth-child(2) { order: 3; }
html[lang="km"] .two-column__cards .feature-card:nth-child(4) { order: 4; }

html[lang="km"] .feature-card__title {
  line-height: 1.5 !important;
  margin-bottom: 8px !important;
}

html[lang="km"] .feature-card__description {
  line-height: 1.8 !important;
}

@media (max-width: 900px) {
  html[lang="km"] .two-column__cards {
    column-count: 1 !important;
  }
}
html[lang="km"] .feature-card {
  /* flex-direction: row !important; Retains side-by-side layout */
  align-items: flex-start !important; /* Aligns logo to the top edge */
  padding: 18px;
}



html[lang="km"] .page-node-type-careers-cambodia .two-column__image {
    @media (min-width: 1024px) {
        height: 600px;
    }
}

html[lang="km"] .page-node-type-news .feature-card__logo-wrapper {
  height: auto !important;
}

.page-node-9 .feature-card,
.page-node-29 .feature-card {
  border-radius: 42px;

  @media (max-width: 768px) {
    flex-direction: row;
  }
}

.page-node-9 .feature-section,
.page-node-29 .feature-section
 {
  padding: 0;
  @media (max-width: 768px) {
    padding: 0;
  }
}

.feature-section .values_description {
  color: #4A5568;
  font-size: 1.125rem;
  line-height: 1.6;
  margin: 0 0 20px 0;
}