/* Container layout for the side-by-side statements */
.pillars-container {
  display: flex;
  flex-direction: row;
  gap: 40px;
  width: 100%;
  margin-top: 20px;
  margin-bottom: 40px;
}

/* Base Card Styling for the Pillars */
.pillar-card {
  flex: 1; /* Automatically makes both columns exactly equal in width */
  background: #ffffff;
  border: 1px solid #eef2f5;
  border-radius: 8px;
  padding: 40px 35px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

/* Subtle background accent color for the Vision card to give balance */
.highlighted-pillar {
  background-color: #f8fbc3; /* A very soft, clean professional background tone */
  border-color: #e2e8f0;
}

/* Small, premium text label over the content blocks */
.pillar-icon-header {
  margin-bottom: 25px;
}

.pillar-label {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #0B3C5D; /* Corporate brand blue */
  border-bottom: 2px solid #0B3C5D;
  padding-bottom: 4px;
}

/* Adjustments for typography inside the cards using your preferred 20px font size */
.page-text.card-lead {
  font-size: 22px; /* Slightly emphasized for the core thesis statement */
  line-height: 1.6;
  margin-bottom: 20px;
  color: #1A252C;
}

.text-blue {
  color: #0B3C5D !important;
}

.page-text.pillar-body {
  font-size: 20px;
  line-height: 1.75;
  color: #444444;
  margin-bottom: 0;
}

/* Responsive breakpoint: If the screen is small (like a mobile phone), stack the columns vertically */
@media (max-width: 768px) {
  .pillars-container {
    flex-direction: column;
    gap: 25px;
  }
}