:root{
  --brand:#2563eb; --brand-600:#1d4ed8; --accent:#7c3aed;
  --text:#0f172a; --muted:#64748b; --line:#e5e7eb;
  --surface:#fff; --soft:#f8fafc; --shadow:0 12px 28px rgba(2,6,23,.10);
  --radius:16px;
}

/* scope everything to .about-page */
.about-page .container{ width:min(1100px,92%); margin-inline:auto; }
.about-page .section-pad{ padding:60px 0; }
.about-page .soft{ background:var(--soft); border-radius:12px; }

/* Hero */
.about-page .about-hero{
  margin-top:12px; border-radius:12px; 
  background:linear-gradient(180deg,#0b3a78,#0a2f63);
   border:1px solid var(--line);
  padding:56px 0 40px;
}
.about-page .breadcrumb-mini{ color:var(--muted); font-size:.9rem; margin-bottom:.35rem; }
.about-page .breadcrumb-mini a{ color:var(--brand); text-decoration:none; }
.about-page .about-hero h1{ font-weight:700; margin:.25rem 0 .3rem; 
   color: #ffd24d; 
     letter-spacing: 0.1rem; 
}
.about-page .about-hero .sub{ color:#fff; max-width:700px; letter-spacing: 0.1rem; }

/* Grid helpers */
.about-page .grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media (max-width: 920px){ .about-page .grid-2{ grid-template-columns:1fr; } }

/* Cards */
.about-page .card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:22px;
}
.about-page .media-card{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); background:#000; }
.about-page .ratio{ position:relative; padding-top:56.25%; }
.about-page .ratio > iframe, .about-page .ratio > img{
  position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:cover;
}

/* Text */
.about-page .section-title{ font-weight:800; margin:0 0 .6rem;color: #ffd24d; letter-spacing: 0.1rem;}
.about-page .section-title.center{ text-align:center; color: #ffd24d;font-weight: 800; letter-spacing: 0.1rem; }
.about-page .lead{ color:#0a2f63; font-size:1.05rem; }
.about-page .muted{ color:var(--muted); }

/* Pills & list */
.about-page .pill-grid{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.5rem; }
.about-page .pill{
  background:#e8efff; color:#1d4ed8; border-radius:999px; padding:6px 12px; font-weight:600;
}
.about-page .check-list{ list-style:none; padding:0; margin:.6rem 0 0; }
.about-page .check-list li{ position:relative; padding-left:26px; margin-bottom:.45rem; color:#0a2f63; }
.about-page .check-list li::before{
  content:"✓"; position:absolute; left:0; top:0; color:var(--brand); font-weight:800;
}

/* Button */
.about-page .btn-primary{
  display:inline-block; background:var(--brand); color:#fff; border:none;
  font-weight:700; padding:12px 22px; border-radius:999px; cursor:pointer;
  box-shadow:0 10px 22px rgba(37,99,235,.28);
  transition:background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.about-page .btn-primary:hover{  background-color: #2980B9;
  color: #fff; transform:translateY(-2px); box-shadow:0 14px 28px rgba(37,99,235,.36); }
.about-page .mt-12{ margin-top:12px; 
    background-color: #0a2f63;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
}

/* Facts */
.about-page .facts{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:14px;
}
@media (max-width: 920px){ .about-page .facts{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 560px){ .about-page .facts{ grid-template-columns:1fr; } }
.about-page .fact{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); padding:18px; text-align:center;
}
.about-page .fact .num{ font-weight:800; font-size:clamp(28px,4vw,42px);
  color:#0a2f63;
}
.about-page .fact .label{ color:#64748b; }

/* Timeline */
.about-page .timeline{ position:relative; margin:16px 0 0 14px; }
.about-page .timeline::before{
  content:""; position:absolute; left:8px; top:0; bottom:0; width:2px; background:#dbe4ff;
}
.about-page .t-item{ position:relative; padding-left:40px; margin:0 0 22px; }
.about-page .t-dot{
  width:14px; height:14px; border-radius:50%; background:var(--brand);
  position:absolute; left:2px; top:6px; box-shadow:0 0 0 4px #e8efff;
}
.about-page .t-content h5{ margin:0 0 .25rem; font-weight:700; }
.about-page .t-content p{ margin:0; color:#475569; }

/* Pop-in animation (matches contact page feel) */
.about-page .pop{ opacity:0; transform: translateY(26px) scale(.985); }
.about-page .in-view{
  opacity:1; transform: translateY(0) scale(1);
  transition: transform 1s cubic-bezier(.25,.8,.25,1), opacity 1s cubic-bezier(.25,.8,.25,1);
}