/*--------------------------------------------------------------
# About Us Page Specific Styles
--------------------------------------------------------------*/

/* Scoping rules to the About Us page using body class (assumes 'about-us' slug) */
/* Alternatively use .page-id-XX where XX is the page ID */

/* --- General Page Element Styling --- */

/* Center the main page heading (Added/Refined) */
.page-slug-about-us .entry-title,                   /* Specific Astra class for page title */
.page-slug-about-us h1.entry-title,                 /* More specific */
.page-slug-about-us > .entry-header > .entry-title, /* Common theme structure */
.page-slug-about-us .hero-section h1,               /* Target h1 within hero-section from HTML */
.page-slug-about-us .site-content h1:first-of-type  /* Fallback if it's just the first h1 in content */ {
  text-align: center;
}

/* --- Story & Image Section --- */
/* Add padding to sections if not handled globally */
.page-slug-about-us .about-story,
.page-slug-about-us .about-mission,
.page-slug-about-us .about-stakeholders,
.page-slug-about-us .about-core-tool,
.page-slug-about-us .about-feedback,
.page-slug-about-us .cta-section {
  /* Example padding - adjust as needed or rely on global section styles */
  /* padding-top: 60px; */
  /* padding-bottom: 60px; */
}

.page-slug-about-us .about-image-container {
  margin: 40px 0;
  text-align: center;
}

.page-slug-about-us .about-image {
  max-width: 100%;
  height: auto;
  max-height: 450px; /* Adjust max-height as desired */
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  object-fit: cover; /* Ensures image covers the area well */
}

/* --- Mission Section --- */
.page-slug-about-us .about-mission {
  background-color: #f8f9fa; /* Light background for visual separation */
}

.page-slug-about-us .mission-points {
  display: flex;
  flex-wrap: wrap;
  gap: 30px; /* Spacing between points */
  justify-content: center; /* Center points horizontally */
  margin-top: 40px; /* Space below section title/paragraph */
}

.page-slug-about-us .mission-point {
  flex: 1; /* Allow points to grow */
  min-width: 280px; /* Minimum width before wrapping */
  max-width: 350px; /* Maximum width */
  text-align: center;
  padding: 20px; /* Padding inside each point */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-slug-about-us .mission-point h3 {
  margin-bottom: 15px;
  text-align: center;
  width: 100%;
  min-height: 50px; /* Ensure consistent height for alignment */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px; /* Adjust as needed */
  color: #333;
}

.page-slug-about-us .mission-point p {
  text-align: center;
  width: 100%;
  max-width: 100%; /* Override potential global p constraints */
  margin-left: auto;
  margin-right: auto;
  flex-grow: 1; /* Allow text to fill space if needed */
  color: #555;
  margin-bottom: 0; /* Remove bottom margin if needed */
}

.page-slug-about-us .mission-icon {
  font-size: 36px; /* Icon size */
  color: #0099ff; /* Brand color */
  margin-bottom: 20px;
  text-align: center;
}

/* --- Stakeholders Grid (About Us Version - Now 6 items, may wrap to 3x2 or 2x3) --- */
.page-slug-about-us .about-stakeholders-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-top: 40px;
}

.page-slug-about-us .about-stakeholders-grid .stakeholder-card {
  flex: 0 1 calc(33.333% - 20px); /* Aim for 3 columns */
  min-width: 280px; /* Minimum width before wrapping */
  max-width: 350px; /* Control max width */
  margin-bottom: 20px; /* Space below cards */
  padding: 25px;
  border-radius: 8px;
  background-color: #ffffff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border: 1px solid #e9ecef; /* Subtle border */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  text-align: left; /* Default text align in card */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Hover effect */
}
.page-slug-about-us .about-stakeholders-grid .stakeholder-card:hover {
  background-color: #f8f9fa; /* Slight change on hover */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  transform: translateY(-3px); /* Slight lift on hover */
}

.page-slug-about-us .about-stakeholders-grid .stakeholder-card h3 {
  font-size: 20px;
  margin-bottom: 15px;
  font-weight: 600;
  text-align: center; /* Center card titles */
}

.page-slug-about-us .about-stakeholders-grid .stakeholder-card p {
  font-size: 15px;
  text-align: left; /* Keep paragraph text left-aligned */
  margin-bottom: 0;
  flex-grow: 1; /* Allow p to take up space */
  max-width: 100%; /* Ensure p doesn't overflow */
  margin-left: 0;
  margin-right: 0;
  color: #555;
}

/* --- Core Tool Section --- */
.page-slug-about-us .about-core-tool {
   /* background-color: #ffffff; */ /* Optional background */
}

.page-slug-about-us .core-tool-container {
  display: flex;
  justify-content: center; /* Center the card container */
  margin-top: 40px;
}

.page-slug-about-us .core-tool-card {
  flex: 0 1 500px; /* Max width for the card */
  padding: 30px;
  border-radius: 8px;
  background-color: #ffffff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center; /* Center items inside the card (incl. button) */
}

.page-slug-about-us .core-tool-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.page-slug-about-us .core-tool-icon {
  font-size: 40px;
  color: #0099ff;
  margin-bottom: 20px;
}

.page-slug-about-us .core-tool-card h3 {
  margin-bottom: 15px;
  font-size: 24px;
  color: #333;
}

.page-slug-about-us .core-tool-card p {
  margin-bottom: 25px;
  text-align: center;
  max-width: 400px; /* Limit paragraph width */
  flex-grow: 1;
  color: #555;
  margin-left: auto;
  margin-right: auto;
}

/* Modified rule for the Core Tool button to ensure centering */
.page-slug-about-us .core-tool-button { /* Inherits .button-main */
  display: block; /* Ensures it behaves as a block for margin auto */
  width: auto; /* Allows button to size to content */
  min-width: 200px; /* Maintains minimum size */
  margin-top: 15px; /* Space above button */
  margin-left: auto;  /* ADDED for centering */
  margin-right: auto; /* ADDED for centering */
  padding: 12px 30px;
  text-align: center; /* Centers text *inside* the button */
}

/* --- Feedback Section --- */
.page-slug-about-us .about-feedback {
  background-color: #f8f9fa; /* Light background */
}

.page-slug-about-us .feedback-container {
  text-align: center; /* Centers inline/inline-block children (the button) */
  margin-top: 20px; /* Space below section title/paragraph */
}

/* Specific override for About Us feedback button styling (if different from global) */
.page-slug-about-us .about-feedback .button-outline {
  color: #0099ff;
  border-color: #0099ff;
  /* Other styles inherited from global .button-outline */
}

.page-slug-about-us .about-feedback .button-outline:hover {
  background-color: #0099ff;
  color: white;
}

/* --- Final CTA Section --- */
.page-slug-about-us .cta-section {
    /* Styles inherited from global or add specifics */
    /* background-color: #007bff; */ /* Example */
    /* color: #fff; */ /* Example */
}

/* Center the button(s) in the final CTA section (Added) */
.page-slug-about-us .cta-section .cta-buttons {
  text-align: center;
  margin-top: 25px; /* Space above button(s) */
}

/* --- About Us Responsive Adjustments --- */
@media (max-width: 1024px) { /* Tablet */
  .page-slug-about-us .about-stakeholders-grid .stakeholder-card {
    flex: 0 1 calc(50% - 15px); /* Adjust to 2 columns */
    min-width: calc(50% - 15px);
  }
  .page-slug-about-us .mission-point {
    min-width: calc(50% - 15px); /* Adjust to 2 columns */
  }
}

@media (max-width: 768px) { /* Mobile */
  .page-slug-about-us .mission-point,
  .page-slug-about-us .core-tool-card {
    min-width: 90%; /* Take up more width */
    flex-basis: 90%;
    max-width: 95%;
  }
  .page-slug-about-us .about-stakeholders-grid {
      /* Stack cards instead of grid */
      flex-direction: column;
      align-items: center; /* Center stacked cards */
  }
  .page-slug-about-us .about-stakeholders-grid .stakeholder-card {
    flex: 0 1 100%; /* Full width card */
    min-width: 90%;
    max-width: 95%; /* Limit width slightly */
  }
  .page-slug-about-us .core-tool-button {
    width: 80%; /* Button takes more width */
    max-width: 300px; /* Limit max button width */
    /* margin-left/right: auto already handles centering */
  }
   .page-slug-about-us .about-feedback .button-outline {
    width: 80%;
    max-width: 300px;
    margin-left: auto; /* Ensure centering on mobile too */
    margin-right: auto; /* Ensure centering on mobile too */
   }
  .page-slug-about-us .cta-section .button-outline {
      width: 80%;
      max-width: 300px;
      /* Centering handled by parent's text-align: center */
  }
}