/* =====================================================
   FRONTEND STYLE - Modern, Compact, Tailwind-inspired
   Base: Bootstrap 5
===================================================== */
:root{
  --brand-50:#eff6ff; --brand-100:#dbeafe; --brand-500:#2563eb; --brand-600:#1d4ed8; --brand-700:#1e40af;
  --ink-900:#0f172a; --ink-700:#334155; --ink-500:#64748b; --ink-300:#cbd5e1; --ink-100:#f1f5f9;
  --radius:14px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.15);
  --shadow-lg:0 20px 40px -12px rgba(15,23,42,.22);
}
*{box-sizing:border-box}
body{
  font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  color:var(--ink-700);
  background:#fff;
  font-size:15px;
  line-height:1.6;
}
h1,h2,h3,h4,h5,h6{color:var(--ink-900); font-weight:700; letter-spacing:-.02em}
a{text-decoration:none; color:var(--brand-600)}
.container-x{max-width:1240px; margin:0 auto; padding:0 1rem}

/* ---------- Buttons ---------- */
.btn{border-radius:10px; font-weight:600; font-size:.9rem; padding:.55rem 1.15rem}
.btn-brand{background:var(--brand-600); color:#fff; border:none}
.btn-brand:hover{background:var(--brand-700); color:#fff}
.btn-outline-brand{border:1.5px solid var(--brand-600); color:var(--brand-600); background:transparent}
.btn-outline-brand:hover{background:var(--brand-600); color:#fff}
.btn-sm{padding:.35rem .8rem; font-size:.8rem; border-radius:8px}

/* ---------- Topbar ---------- */
.topbar{background:var(--ink-900); color:#e2e8f0; font-size:.8rem; padding:.4rem 0}
.topbar a{color:#cbd5e1}
.topbar a:hover{color:#fff}

/* ---------- Navbar ---------- */
.navbar-school{background:#fff; box-shadow:var(--shadow-sm); padding:.65rem 0; position:sticky; top:0; z-index:1000; border-bottom:1px solid var(--ink-100)}
.navbar-school .navbar-brand{display:flex; align-items:center; gap:.65rem; font-weight:800; color:var(--ink-900); font-size:1rem; max-width:280px}
.navbar-school .navbar-brand img{height:44px; width:44px; object-fit:contain; flex-shrink:0; border-radius:8px}
.navbar-school .navbar-brand span{line-height:1.2}
.navbar-school .navbar-nav{gap:.15rem}
.navbar-school .nav-item{display:flex; align-items:center}
.navbar-school .nav-link{color:var(--ink-700); font-weight:600; font-size:.88rem; padding:.55rem 1rem !important; border-radius:8px; white-space:nowrap; transition:.15s}
.navbar-school .nav-link:hover, .navbar-school .nav-link.active{color:var(--brand-600); background:var(--brand-50)}
.navbar-school .dropdown-toggle::after{vertical-align:.15em; margin-left:.4em; border-top-width:.32em; border-right-width:.32em; border-left-width:.32em; opacity:.6}
.navbar-school .dropdown-menu{margin-top:.25rem}
.dropdown-menu{border:none; box-shadow:var(--shadow-lg); border-radius:12px; padding:.5rem; min-width:14rem}
.dropdown-item{border-radius:8px; padding:.55rem .8rem; font-size:.86rem; font-weight:500; color:var(--ink-700)}
.dropdown-item:hover, .dropdown-item.active{background:var(--brand-50); color:var(--brand-600)}
@media (max-width:991px){
  .navbar-school .navbar-collapse{margin-top:.75rem; border-top:1px solid var(--ink-100); padding-top:.75rem}
  .navbar-school .nav-link{padding:.6rem .5rem !important}
  .navbar-school .dropdown-menu{box-shadow:none; background:var(--ink-100); margin:.25rem 0 .5rem .5rem; padding:.4rem}
}

/* ---------- Hero / Banner ---------- */
.hero-slide{position:relative; height:520px; background-size:cover; background-position:center; display:flex; align-items:center}
.hero-slide::before{content:'';position:absolute; inset:0; background:linear-gradient(90deg, rgba(15,23,42,.78) 10%, rgba(15,23,42,.35) 60%, rgba(15,23,42,.1) 100%)}
.hero-slide .hero-content{position:relative; z-index:2; color:#fff; max-width:640px}
.hero-slide .hero-content .badge-eyebrow{background:rgba(255,255,255,.15); backdrop-filter:blur(6px); padding:.35rem .9rem; border-radius:999px; font-size:.75rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase}
.hero-slide h1{font-size:2.6rem; color:#fff; margin:.8rem 0; line-height:1.15}
.hero-slide p{color:#e2e8f0; font-size:1.02rem}
.carousel-indicators [data-bs-target]{width:8px; height:8px; border-radius:50%}
@media(max-width:768px){.hero-slide{height:420px}.hero-slide h1{font-size:1.7rem}}

/* ---------- Section ---------- */
.section{padding:64px 0}
.section-sm{padding:40px 0}
.section-title .eyebrow{color:var(--brand-600); font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em}
.section-title h2{font-size:1.9rem; margin:.4rem 0 .6rem}
.section-title p{color:var(--ink-500); max-width:620px}
.bg-soft{background:var(--ink-100)}

/* ---------- Cards ---------- */
.card-x{border:1px solid var(--ink-100); border-radius:var(--radius); overflow:hidden; background:#fff; transition:.25s; height:100%}
.card-x:hover{box-shadow:var(--shadow-md); transform:translateY(-4px); border-color:transparent}
.card-x .card-x-img{height:190px; width:100%; object-fit:cover; background:var(--ink-100)}
.card-x .card-x-body{padding:1.1rem}
.card-x .cat-badge{display:inline-block; background:var(--brand-50); color:var(--brand-600); font-size:.72rem; font-weight:700; padding:.25rem .7rem; border-radius:999px; margin-bottom:.6rem}
.card-x h5{font-size:1.02rem; margin-bottom:.4rem}
.card-x .meta{font-size:.78rem; color:var(--ink-500)}
.card-x p.excerpt{font-size:.86rem; color:var(--ink-500); margin:.5rem 0 0}

/* Stat / feature blocks */
.stat-box{background:#fff; border-radius:var(--radius); padding:1.5rem; text-align:center; box-shadow:var(--shadow-sm); border:1px solid var(--ink-100)}
.stat-box .num{font-size:2.1rem; font-weight:800; color:var(--brand-600)}
.stat-box .label{color:var(--ink-500); font-size:.85rem; font-weight:600}

.icon-box{width:52px; height:52px; border-radius:14px; background:var(--brand-50); color:var(--brand-600); display:flex; align-items:center; justify-content:center; font-size:1.3rem}

/* Staff card */
.staff-card{text-align:center; padding:1.5rem 1rem; border-radius:var(--radius); border:1px solid var(--ink-100); transition:.25s}
.staff-card:hover{box-shadow:var(--shadow-md)}
.staff-card img{width:110px; height:110px; border-radius:50%; object-fit:cover; margin-bottom:.9rem; border:3px solid var(--brand-50)}
.staff-card h6{margin-bottom:.15rem}
.staff-card .role{color:var(--brand-600); font-size:.82rem; font-weight:600}

/* Gallery */
.gallery-item{position:relative; border-radius:var(--radius); overflow:hidden; cursor:pointer}
.gallery-item img{width:100%; height:220px; object-fit:cover; transition:.35s}
.gallery-item:hover img{transform:scale(1.08)}
.gallery-item .overlay{position:absolute; inset:0; background:linear-gradient(0deg, rgba(15,23,42,.75), transparent 55%); opacity:0; transition:.3s; display:flex; align-items:flex-end; padding:1rem; color:#fff; font-weight:600; font-size:.85rem}
.gallery-item:hover .overlay{opacity:1}

/* Video card */
.video-thumb{position:relative; border-radius:var(--radius); overflow:hidden; cursor:pointer}
.video-thumb img{width:100%; height:200px; object-fit:cover}
.video-thumb .play-btn{position:absolute; inset:0; display:flex; align-items:center; justify-content:center}
.video-thumb .play-btn span{width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.92); color:var(--brand-600); display:flex; align-items:center; justify-content:center; font-size:1.3rem}

/* Timeline event */
.event-item{display:flex; gap:1rem; padding:1rem 0; border-bottom:1px dashed var(--ink-300)}
.event-date{min-width:64px; text-align:center; background:var(--brand-600); color:#fff; border-radius:10px; padding:.5rem .3rem}
.event-date .d{font-size:1.3rem; font-weight:800; line-height:1}
.event-date .m{font-size:.7rem; text-transform:uppercase; font-weight:700}

/* Footer */
.footer{background:var(--ink-900); color:#cbd5e1; padding-top:56px}
.footer h6{color:#fff; font-weight:700; margin-bottom:1rem; font-size:.95rem}
.footer a{color:#94a3b8; font-size:.88rem}
.footer a:hover{color:#fff}
.footer .footer-bottom{border-top:1px solid #1e293b; margin-top:2.5rem; padding:1.2rem 0; font-size:.82rem; color:#64748b}
.social-btn{width:36px; height:36px; border-radius:50%; background:#1e293b; color:#fff; display:flex; align-items:center; justify-content:center; transition:.2s}
.social-btn:hover{background:var(--brand-600)}

/* Breadcrumb header */
.page-header{background:var(--ink-900); padding:64px 0 42px; color:#fff; position:relative; overflow:hidden}
.page-header::after{content:''; position:absolute; right:-60px; top:-60px; width:280px; height:280px; background:var(--brand-600); opacity:.25; border-radius:50%}
.page-header h1{color:#fff; font-size:1.9rem; margin-bottom:.4rem}
.page-header .breadcrumb-item, .page-header .breadcrumb-item a{color:#94a3b8; font-size:.85rem}
.page-header .breadcrumb-item.active{color:#fff}

/* Forms */
.form-control, .form-select{border-radius:10px; border-color:var(--ink-300); padding:.6rem .9rem; font-size:.9rem}
.form-control:focus, .form-select:focus{border-color:var(--brand-500); box-shadow:0 0 0 3px var(--brand-100)}
.form-label{font-weight:600; font-size:.85rem; color:var(--ink-700)}

/* Utilities */
.rounded-x{border-radius:var(--radius) !important}
.shadow-x{box-shadow:var(--shadow-md) !important}
.text-brand{color:var(--brand-600) !important}
.bg-brand{background:var(--brand-600) !important}
.fw-800{font-weight:800}