:root{
  --brand:#0d6efd;
  --dark:#0b1220;
  --muted:#6b7280;
  --card:#ffffff;
  --bg:#f6f8fc;
}










.convocation-slider{
  position: relative;
  width: 100%;
  max-width: 1600px;
  margin: auto;
  overflow: hidden;
  border-radius: 18px;
}

.slides{
  position: relative;
  width: 100%;
  height: 520px;
}

.slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 1s ease, transform 1.2s ease;
}

.slide svg{
  width: 100%;
  height: 100%;
}

.slide.active{
  opacity: 1;
  transform: scale(1);
  z-index: 1;
}

.slider-dots{
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

.slider-dots .dot{
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  cursor: pointer;
}

.slider-dots .dot.active{
  background: #facc15;
  box-shadow: 0 0 10px rgba(250,204,21,.9);
}
















body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Poppins", sans-serif;
  background: var(--bg);
}

.sidebar{
  width: 280px;
  background: linear-gradient(180deg, var(--dark), #0b1b3a);
  color: #fff;
  min-height: 100vh;
  position: sticky;
  top: 0;
}

.sidebar a{
  color:#dbeafe;
  text-decoration:none;
}
.sidebar a:hover{ color:#fff; }

.brand-badge{
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 14px;
}

.nav-pill{
  border-radius: 14px;
  padding: 10px 12px;
  display:flex;
  align-items:center;
  gap:10px;
}
.nav-pill:hover{
  background: rgba(255,255,255,.10);
}
.nav-pill.active{
  background: rgba(13,110,253,.22);
  border:1px solid rgba(13,110,253,.45);
}

.submenu a{
  display:block;
  padding: 8px 12px;
  margin-left: 34px;
  border-radius: 12px;
  color:#c7d2fe;
}
.submenu a:hover{ background: rgba(255,255,255,.08); color:#fff; }

.content-wrap{
  width:100%;
}

.topbar{
  background:#fff;
  border-bottom:1px solid rgba(15,23,42,.08);
}

.hero{
  background: radial-gradient(1000px 300px at 10% 10%, rgba(13,110,253,.18), transparent 60%),
              radial-gradient(900px 300px at 90% 0%, rgba(16,185,129,.14), transparent 60%),
              #ffffff;
  border:1px solid rgba(15,23,42,.08);
  border-radius: 22px;
  padding: 22px;
}

.card.rounded-4{
  border-radius: 18px !important;
}

footer{
  margin-top: 30px;
  padding: 18px 0;
  color: var(--muted);
}