:root {
  --navy:#0b1e3c;
  --navy2:#102b50;
  --gold:#c9a45c;
  --cream:#f7f8fa;
  --text:#18253a;
  --muted:#6b7789;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{font-family:'DM Sans',sans-serif;color:var(--text);overflow-x:hidden}
h1,h2,h3,h4,h5{font-family:'Manrope',sans-serif}
a{text-decoration:none}
.section-pad{padding:95px 0}
.section-tag{
  color:#a77e35;font-size:12px;font-weight:800;
  letter-spacing:2.5px;text-transform:uppercase;
  display:inline-block;margin-bottom:15px
}
.section-title{
  color:var(--navy);font-weight:800;
  letter-spacing:-1.5px;line-height:1.2
}
.text-muted-custom{color:var(--muted)}
.btn-gold{
  background:var(--gold);color:var(--navy);
  font-weight:800;border:0;border-radius:6px;
  padding:13px 24px;transition:.3s
}
.btn-gold:hover{background:#dfbd7d;color:var(--navy);transform:translateY(-2px)}

/* Hero */
.about-hero {
    min-height: 450px;
    display: flex;
    align-items: center;

    background:
        linear-gradient(
            90deg,
            rgba(5, 19, 42, 0.94),
            rgba(5, 19, 42, 0.66),
            rgba(5, 19, 42, 0.35)
        ),
        var(--about-bg) center center / cover no-repeat;

    color: #ffffff;
    position: relative;
}
.hero-content{max-width:800px;padding:90px 0}
.hero-kicker{
  color:#e5c47f;letter-spacing:3px;font-size:12px;
  font-weight:800;text-transform:uppercase;margin-bottom:20px
}
.about-hero h1{
  font-size:clamp(42px,6vw,76px);font-weight:800;
  letter-spacing:-3px;line-height:1.08;margin-bottom:22px
}
.about-hero h1 span{color:#e4c17c}
.about-hero p{font-size:16px;line-height:1.9;color:#dce3ed;max-width:650px}

/* Breadcrumb */
.breadcrumb-bar{background:#f7f8fa;padding:17px 0;font-size:13px}
.breadcrumb-bar a{color:#9a742f}
.breadcrumb-bar span{color:var(--muted)}

/* Intro */
.intro-image-wrap{position:relative;padding:0 22px 22px 0}
.intro-image{
  width:100%;height:510px;object-fit:cover;border-radius:12px
}
.intro-image-wrap:after{
  content:"";position:absolute;right:0;bottom:0;
  width:65%;height:65%;border:3px solid var(--gold);
  border-radius:12px;z-index:-1
}
.intro-badge{
  position:absolute;bottom:42px;left:-12px;
  background:var(--navy);color:#fff;padding:22px 25px;
  border-radius:10px;box-shadow:0 12px 35px #0b1e3c33
}
.intro-badge strong{display:block;font-size:16px}
.intro-badge small{color:#d5deea;font-size:12px}
.intro-text{font-size:15px;line-height:1.95;color:var(--muted)}
.check-list{list-style:none;padding:0;margin:25px 0}
.check-list li{display:flex;gap:12px;margin-bottom:15px;font-size:14px;color:#536176}
.check-list i{color:#b18b49;font-size:18px}

/* Vision & mission */
.vm-section{background:var(--cream)}
.vm-card{
  background:#fff;border:1px solid #edf0f4;
  border-radius:14px;padding:38px;height:100%;
  transition:.3s
}
.vm-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px #0b1e3c12}
.vm-icon{
  width:65px;height:65px;display:grid;place-items:center;
  border-radius:14px;background:#f7f0e2;color:#a77e35;
  font-size:28px;margin-bottom:25px
}
.vm-card h3{font-weight:800;color:var(--navy);font-size:23px;margin-bottom:18px}
.vm-card p{font-size:14px;color:var(--muted);line-height:1.9;margin:0}

/* Values */
.values-section{background:var(--navy);color:#fff}
.values-section .section-title{color:#fff}
.value-card{
  padding:28px 25px;border:1px solid #ffffff20;
  border-radius:12px;height:100%;transition:.3s
}
.value-card:hover{background:#ffffff08;border-color:#c9a45c}
.value-card i{font-size:30px;color:var(--gold);margin-bottom:20px;display:block}
.value-card h5{font-size:17px;font-weight:800;margin-bottom:12px}
.value-card p{font-size:13px;color:#c1ccdc;line-height:1.8;margin:0}

/* Academic section */
.academic-image{
  width:100%;height:480px;object-fit:cover;border-radius:14px
}
.academic-point{
  display:flex;gap:16px;padding:20px 0;
  border-bottom:1px solid #e9edf2
}
.academic-point:last-child{border-bottom:0}
.academic-point i{font-size:24px;color:#b18b49}
.academic-point h5{font-size:16px;color:var(--navy);font-weight:800}
.academic-point p{font-size:13px;line-height:1.8;color:var(--muted);margin:0}

/* Commitment banner */
.commitment{
  background:#f6f2e9;border-radius:16px;
  padding:55px;position:relative;overflow:hidden
}
.commitment h2{font-weight:800;color:var(--navy)}
.commitment p{font-size:15px;line-height:1.9;color:var(--muted)}
.commitment-icon{
  position:absolute;right:35px;bottom:-35px;
  font-size:180px;color:#c9a45c20
}

/* Footer */
footer{background:#07162d;color:#c3cddd}
.footer-title{color:#fff;font-weight:800;font-size:16px;margin-bottom:22px}
.footer-link{display:block;color:#c3cddd;font-size:13px;margin-bottom:13px;transition:.2s}
.footer-link:hover{color:var(--gold)}
.footer-bottom{border-top:1px solid #ffffff18;padding:22px 0;color:#94a3b8;font-size:12px}

@media(max-width:991px){
  .navbar-collapse{padding:20px 0}
  .section-pad{padding:70px 0}
  .intro-image{height:400px}
  .academic-image{height:380px}
}
@media(max-width:575px){
  .topbar{font-size:10px}
  .brand-name{font-size:12px}
  .brand-mark{width:42px;height:42px}
  .about-hero{min-height:420px}
  .about-hero h1{letter-spacing:-1.5px}
  .section-pad{padding:58px 0}
  .intro-image{height:320px}
  .intro-badge{left:0;bottom:30px}
  .vm-card{padding:28px}
  .commitment{padding:30px 22px}
  .commitment-icon{font-size:110px;right:0}
}