/* ==========================================
   HERO SECTION
========================================== */

.about-hero {
  background: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)),
              url("../images/hero/hero5.jpg") center/cover no-repeat;
  height: 60vh;
  display: flex;
  align-items: center;
  text-align: center;
  color: #fff;
}

.about-hero h1 {
  font-size: 2.8rem;
  margin-bottom: 10px;
}

.about-hero p {
  font-size: 1.1rem;
}

/* ==========================================
   VISION & MISSION
========================================== */

.vm-section {
  padding: 70px 20px;
}

.vm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
  gap: 40px;
}

.vm-card {
  background: #f7f8fc;
  padding: 35px;
  border-radius: 15px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.05);
}

.vm-card h2 {
  color: #00147a;
  margin-bottom: 15px;
}

/* ==========================================
   OBJECTIVES
========================================== */

.objectives-section {
  background: #ffffff;
  padding: 70px 20px;
}

.objectives-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  gap: 20px;
  margin-top: 40px;
}

.objectives-grid div {
  background: #f7f8fc;
  padding: 20px;
  border-radius: 10px;
  transition: 0.3s ease;
}

.objectives-grid div:hover {
  transform: translateY(-4px);
}

/* ==========================================
   CORE VALUES
========================================== */

.values-section {
  background: #f7f8fc;
  padding: 70px 20px;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap: 20px;
  margin-top: 40px;
}

.value-card {
  background: #ffffff;
  padding: 20px;
  border-radius: 12px;
  text-align: center;
  font-weight: 500;
  transition: 0.3s ease;
}

.value-card:hover {
  transform: translateY(-5px);
  background: #00147a;
  color: #fff;
}

/* ==========================================
   GLOBAL SECTION TITLE
========================================== */

.section-title {
  text-align: center;
  font-size: 2rem;
  color: #00147a;
}