/* =========================================
   SAVLIFE ABOUT PAGE STYLES
   css/about.css
========================================= */

/* MISSION VISION GRID */
.mv-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
}

.mv-card{
  border-radius:20px;
  padding:44px 40px;
  position:relative;
  overflow:hidden;
}

.mv-card.mission{
  background:linear-gradient(135deg,#eaf4ff,#dbeeff);
  border:1.5px solid rgba(11,124,255,0.15);
}

.mv-card.vision{
  background:linear-gradient(135deg,#f0fdf4,#dcfce7);
  border:1.5px solid rgba(22,163,74,0.15);
}

.mv-icon{
  font-size:44px;
  margin-bottom:18px;
}

.mv-card h2{
  font-size:26px;
  margin-bottom:14px;
  color:var(--dark);
}

.mv-card p{
  color:var(--text);
  font-size:16px;
  line-height:1.8;
}

/* PROBLEM GRID */
.problem-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}

.problem-item{
  background:#fff;
  border-radius:16px;
  padding:28px 22px;
  box-shadow:var(--shadow);
  border:1px solid rgba(11,124,255,0.06);
  transition:0.35s;
}

.problem-item:hover{
  transform:translateY(-7px);
  box-shadow:var(--shadow-hover);
}

.problem-num{
  display:inline-block;
  font-size:36px;
  font-weight:900;
  font-family:'Sora',sans-serif;
  color:rgba(11,124,255,0.15);
  margin-bottom:12px;
  line-height:1;
}

.problem-item h3{
  font-size:17px;
  margin-bottom:10px;
  color:var(--dark);
}

.problem-item p{
  font-size:14px;
  color:var(--text);
  line-height:1.7;
}

/* SOLUTION */
.solution-cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}

/* VALUES */
.values-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}

.value-item{
  background:#fff;
  border-radius:16px;
  padding:30px 22px;
  text-align:center;
  box-shadow:var(--shadow);
  border:1px solid rgba(11,124,255,0.06);
  transition:0.35s;
}

.value-item:hover{
  transform:translateY(-7px);
  box-shadow:var(--shadow-hover);
}

.value-item span{
  font-size:38px;
  display:block;
  margin-bottom:14px;
}

.value-item h3{
  font-size:18px;
  margin-bottom:10px;
  color:var(--dark);
}

.value-item p{
  font-size:14px;
  color:var(--text);
  line-height:1.7;
}

/* RESPONSIVE */
@media(max-width:1000px){
  .problem-grid{ grid-template-columns:repeat(2,1fr); }
  .solution-cards{ grid-template-columns:repeat(2,1fr); }
  .values-grid{ grid-template-columns:repeat(2,1fr); }
}

@media(max-width:768px){
  .mv-grid{ grid-template-columns:1fr; }
  .mv-card{ padding:28px 22px; }
  .problem-grid{ grid-template-columns:1fr 1fr; }
}

@media(max-width:480px){
  .problem-grid{ grid-template-columns:1fr; }
  .solution-cards{ grid-template-columns:1fr; }
  .values-grid{ grid-template-columns:1fr 1fr; }
}