/* ===== VISION & MISSION PAGE – TYPOGRAPHY ALIGNED ===== */

.vm-hero {
  background: #0a5c3d;
  padding: 60px 20px;
  color: #fff;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
}

.vm-hero-inner {
  max-width: 1100px;
  margin: auto;
}

.vm-hero h2 {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.3;
  color: #ffffff;
}

/* ================= SECTIONS ================= */

.vm-section {
  max-width: 1000px;
  margin: 50px auto;
  padding: 0 20px;
}

.mission-bg {
  background: #f7faf9;
  padding: 40px 0;
}

/* ================= VISION / MISSION BLOCK ================= */

.vm-block {
  display: flex;
  gap: 20px;
  transition: transform 0.3s ease;
}

.vm-icon {
  width: 46px;
  height: 46px;
  background: #e9fbf3;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background-color 0.3s ease;
}

.vm-icon svg {
  width: 20px;
  height: 20px;
  transition: transform 0.35s ease;
  transform-origin: center;
  will-change: transform;
  backface-visibility: hidden;
  shape-rendering: geometricPrecision;
}

.vm-content h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 6px;
}

.vm-content em {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #555;
  margin-bottom: 8px;
}

.vm-content p {
  font-size: 14px;
  font-weight: 400;
  color: #555;
  line-height: 1.7;
}

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

.core-objectives {
  max-width: 1100px;
  margin: 60px auto;
  padding: 0 20px;
}

.core-objectives h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 25px;
  text-align: center;
}

.objectives-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
}

.objective-card {
  background: #ffffff;
  border: 1px solid #eef0f3;
  border-radius: 14px;
  padding: 25px;
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.obj-icon {
  width: 44px;
  height: 44px;
  background: #e9fbf3;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  transition: background-color 0.3s ease;
}

.obj-icon svg {
  width: 20px;
  height: 20px;
  transition: transform 0.35s ease;
  transform-origin: center;
  will-change: transform;
  backface-visibility: hidden;
  shape-rendering: geometricPrecision;
}

.objective-card h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}

.objective-card p {
  font-size: 14px;
  font-weight: 400;
  color: #555;
  line-height: 1.6;
}

/* ================= HOVER EFFECTS ================= */

.vm-block:hover {
  transform: translateY(-4px);
}

.vm-block:hover .vm-icon {
  background-color: #dff6ec;
}

.vm-block:hover .vm-icon svg {
  transform: scale(1.15) rotate(-6deg);
}

.objective-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.08);
  border-color: #dde6e2;
}

.objective-card:hover .obj-icon {
  background-color: #dff6ec;
}

.objective-card:hover .obj-icon svg {
  transform: scale(1.15) rotate(8deg);
}

/* ================= HEADING UNDERLINES ================= */

.vm-content h3,
.core-objectives h3 {
  position: relative;
}

.vm-content h3::after,
.core-objectives h3::after {
  content: "";
  width: 0;
  height: 2px;
  background: #0a5c3d;
  display: block;
  margin-top: 6px;
  transition: width 0.35s ease;
}

.vm-block:hover h3::after,
.core-objectives:hover h3::after {
  width: 36px;
}

/* ================= TEXT REFINEMENT ================= */

.vm-content p,
.objective-card p {
  transition: color 0.3s ease;
}

.vm-block:hover p,
.objective-card:hover p {
  color: #333;
}

/* ================= MOBILE SAFE ================= */

@media (max-width: 768px) {
  .vm-hero h2 {
    font-size: 26px;
  }

  .vm-block:hover,
  .objective-card:hover {
    transform: none;
  }

  .objective-card:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06);
  }
}
/* ===== FORCE ICON VISIBILITY (FINAL FIX) ===== */

/* Default icon color */
.vm-icon svg,
.obj-icon svg {
  stroke: #065f46;
  fill: none;
  stroke-width: 1.8;
}

/* If icon uses fill instead of stroke */
.vm-icon svg path,
.obj-icon svg path {
  fill: #065f46;
}
/* ===== FINAL ICON STYLE (SOLID CIRCLE + WHITE ICON) ===== */

/* Shared icon container style */
.vm-icon,
.obj-icon {
  background-color: #065f46;   /* Dark green circle */
  color: #ffffff;              /* Icon color */
  display: grid;
  place-items: center;
}

/* Force SVG to use white color */
.vm-icon svg,
.obj-icon svg {
  stroke: #ffffff;
  fill: none;
  stroke-width: 2;
}

/* If any SVG path uses fill instead of stroke */
.vm-icon svg path,
.obj-icon svg path,
.vm-icon svg circle,
.obj-icon svg circle {
  stroke: #ffffff;
  fill: none;
}

/* Ensure crisp rendering */
.vm-icon svg,
.obj-icon svg {
  shape-rendering: geometricPrecision;
}
/* ===== FIX ICON LEFT-RIGHT MISALIGNMENT (FINAL) ===== */

/* Force identical left alignment for both Vision & Mission blocks */
.vm-section .vm-block {
  padding-left: 0;
}

/* Lock icon to a fixed left column */
.vm-icon {
  margin-left: 0;
}

/* Ensure no accidental transform shifts */
.vm-block,
.vm-icon {
  transform: translateX(0) !important;
}

/* Prevent scroll animation from shifting layout */
.scroll-animate {
  will-change: transform;
}
/* ===== MANUAL ICON ADJUSTMENT FOR MISSION ONLY ===== */

/* Move ONLY the Mission icon slightly to the right */
.mission-bg .vm-icon {
  margin-left: 13px; /* adjust: 6px–10px if needed */
}