/* ================= ROOT ================= */
:root{
  --brand: #2F4DBA;
  --brand-2: #1F3A8A;
  --primary: #858EAD;
  --accent: #F2994A;
  --bg: #FFFFFF;
  --section-bg: #F7F8FC;
  --card: #FFFFFF;
  --text: #1F2937;
  --text-light: #6B7280;
  --button-bg: #3F455A;
  --border: #cbcdcf;
  --cta-dark: #1C1C1C;
  --cta-text: #FFFFFF;
  --glass: rgba(47,77,186,0.08);
  --line: #000;
  --radius: 10px;
  --font-sans: "Inter", "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
}



.about-section{
  background:#FFFFFF;
  padding:120px 0 30px;
  font-family:"Inter", sans-serif;
}

.container{
  width:min(1200px, 90%);
  margin:auto;
}

/* HERO */

.about-hero{
  max-width:900px;
  margin-bottom:70px;
}

.about-hero h1{
  font-size:48px;
  font-weight:800;
  line-height:1.15;
  color:var(--text);
  margin-bottom:18px;
}

.about-hero p{
  color: var(--text-light);
  line-height:1.7;
  max-width:720px;
}


/* GRID */

.about-grid{
  display:grid;
  grid-template-columns: 420px 1fr;
  gap:60px;
  align-items:center;
}


/* IMAGE */

.about-image img{
  width:100%;
  max-width:350px;
  object-fit:cover;
}


/* CONTENT */

.about-content h2{
  font-size:28px;
  margin-bottom:16px;
  color:#22252b;
}

.about-content p{
  color: var(--text-light);
  line-height:1.8;
  margin-bottom:14px;
}

.about-content p a{
  color: var(--text-light);
  text-decoration:none;
}


.vision-mission{
  background:#ffffff;
  padding:80px 0;
}

.vm-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:24px;
}

/* CARD */

.vm-card{
  background:#e7eaf0;
  padding:40px;
  text-align:center;
  transition:.3s;
}

/* subtle hover */
.vm-card:hover{
  transform: translateY(-6px);
  box-shadow:0 14px 30px rgba(0,0,0,0.06);
}

/* ICON */
.vm-icon{
  width:70px;
  height:70px;
  margin:0 auto 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  box-shadow:0 6px 16px rgba(0,0,0,0.05);
}


.vision-card{
  background:#E9EEFF;
}

.mission-card{
  background:#EEEEEE;
}


.vm-icon img{
  width:42px;
  height:42px;
  object-fit:contain;
}

.vm-card h3{
  font-size:20px;
  margin-bottom:12px;
  color:#2b2f38;
}

.vm-card p{
  color:#6b7280;
  line-height:1.7;
  max-width:420px;
  margin:auto;
}


/* ✅ RESPONSIVE */

@media(max-width:768px){
  .vm-grid{
    grid-template-columns:1fr;
  }
}



/* ✅ RESPONSIVE */

@media(max-width:900px){

  .about-hero h1{
    font-size:36px;
  }

  .about-grid{
    grid-template-columns:1fr;
    gap:40px;
  }

  .about-image img{
    height:260px;
  }

}