/* Sayyida Aisha Center — constitution-aligned brand system */
:root {
  --sac-crimson: #B43B60;
  --sac-crimson-deep: #922848;
  --sac-gold: #CFB047;
  --sac-blue: #8E6B2A;
  --sac-navy: #3B1A27;
  --sac-ink: #2E2A2E;
  --sac-muted: #6B6368;
  --sac-paper: #FFFCF8;
  --sac-surface: #FFFFFF;
  --sac-border: #E9E3E1;
  --sac-soft-rose: #F9EEF2;
  --sac-soft-blue: #FBF6E7;
  --sac-soft-gold: #FBF6E7;
}
html { scroll-behavior: smooth; }
body { color: var(--sac-ink); }
a { transition: color .2s ease; }
:focus-visible { outline: 3px solid rgba(207,176,71,.45); outline-offset: 3px; }
::selection { background: rgba(207,176,71,.35); color: var(--sac-navy); }

/* Public navigation and hero */
.navbar { background: rgba(255,255,255,.97) !important; backdrop-filter: blur(14px); }
.logo { display:flex; align-items:center; gap:12px; }
.logo img { width:54px !important; height:60px !important; object-fit:contain; }
.nav-links a { color:var(--sac-navy) !important; font-weight:600; }
.nav-links a:hover, .nav-links a:focus { color:var(--sac-crimson) !important; }
.btn, .nav-apply, .carousel-text .btn {
  background:var(--sac-crimson) !important; color:#fff !important;
  border:1px solid var(--sac-crimson) !important; border-radius:999px;
  box-shadow:0 8px 20px rgba(180,59,96,.16);
}
.btn:hover, .nav-apply:hover, .carousel-text .btn:hover {
  background:var(--sac-crimson-deep) !important; transform:translateY(-1px);
}
h1, h2, h3 { color:var(--sac-navy); }
h2, .programs h2, .portal-section h2 { color:var(--sac-crimson) !important; }
.carousel-item img { filter:brightness(.62) contrast(1.03); }
.overlay, .overlay-1 {
  background:linear-gradient(115deg, rgba(59,26,39,.92), rgba(146,40,72,.66), rgba(207,176,71,.22)) !important;
}
.overlay-2 { background:linear-gradient(115deg, rgba(59,26,39,.90), rgba(180,59,96,.64), rgba(207,176,71,.20)) !important; }
.overlay-3 { background:linear-gradient(115deg, rgba(59,26,39,.90), rgba(207,176,71,.56), rgba(207,176,71,.20)) !important; }
.carousel-text h1 { color:#fff !important; line-height:1.12; letter-spacing:-.03em; }
.carousel-text p { letter-spacing:.04em; line-height:1.8; }
.about, .programs, #news, #contact { padding-top:clamp(3.5rem,7vw,6rem); padding-bottom:clamp(3.5rem,7vw,6rem); }
.about { background:var(--sac-paper); }
.about-image img { max-width:100%; }
.ourmission { line-height:1.9; }
.card, .portal-card { border:1px solid var(--sac-border); box-shadow:0 12px 35px rgba(59,26,39,.07) !important; }
.card:hover, .portal-card:hover { box-shadow:0 18px 42px rgba(59,26,39,.13) !important; }
.programs { background:var(--sac-soft-rose) !important; }
.footer { background:var(--sac-navy) !important; color:#fff; }
.footer h3, .footer h4, .footer .footer-logo { color:#fff !important; }
.footer a:hover { color:var(--sac-gold) !important; }

/* Student portal */
.portal-page { background:#FAF6F3 !important; }
.portal-hero { background-image:linear-gradient(115deg,var(--hero-a,#3B1A27),var(--hero-b,#7d2842)) !important; }
.portal-hero h1 { color:#fff !important; }
.portal-hero h1 span { color:var(--sac-gold) !important; }
.portal-card i { color:var(--sac-crimson) !important; }

/* Mobile navigation */
@media (max-width: 992px) {
  .nav-links { background:#fff !important; border-top:1px solid var(--sac-border); }
  .nav-links a { padding:.35rem 0; }
  .navbar { padding-left:5%; padding-right:5%; }
  .nav-apply { padding:10px 17px; }
}
@media (max-width: 600px) {
  .carousel-item img { height:78vh !important; min-height:540px; }
  .carousel-text { left:7%; right:7%; width:auto; }
  .carousel-text h1 { font-size:clamp(2rem,8vw,3rem) !important; margin-bottom:1.25rem !important; }
  .carousel-text p { font-size:.95rem !important; letter-spacing:0; }
  .about-image img { width:100% !important; height:auto !important; }
}


/* Programme, leadership and values sections */
.eyebrow {
  display:inline-block; margin:0 0 .7rem; color:var(--sac-blue);
  font-size:.76rem; font-weight:800; letter-spacing:.16em;
}
.program-label {
  display:inline-block; margin-bottom:.8rem; padding:.35rem .7rem;
  border-radius:999px; background:var(--sac-soft-gold); color:var(--sac-crimson-deep);
  font-size:.72rem; font-weight:800; letter-spacing:.08em;
}
.programs .card { background:#fff; }
.programs .card-title { color:var(--sac-navy); line-height:1.3; }
.program-note {
  margin-top:2rem; padding:1.4rem 1.6rem; border:1px solid rgba(207,176,71,.6);
  border-left:4px solid var(--sac-gold); border-radius:14px; background:#fff;
  line-height:1.8;
}
.leadership-card, .value-card {
  height:100%; padding:2rem; background:#fff; border:1px solid var(--sac-border);
  border-radius:18px; box-shadow:0 12px 35px rgba(59,26,39,.06);
}
.leadership-card h3, .value-card h3 { font-size:1.25rem; margin:1rem 0 .7rem; color:var(--sac-navy); }
.leadership-card p, .value-card p { color:var(--sac-muted); line-height:1.8; }
.leader-name { color:var(--sac-crimson) !important; font-weight:700; }
.leadership-icon, .value-card > i {
  display:inline-flex; width:52px; height:52px; align-items:center; justify-content:center;
  border-radius:16px; background:var(--sac-soft-rose); color:var(--sac-crimson); font-size:1.35rem;
}
.value-card:nth-child(2) { border-top:3px solid var(--sac-gold); }
.stats { background:var(--sac-soft-blue); }
.stat-box h3 { color:var(--sac-crimson); font-size:2.6rem; font-weight:800; }
.stat-box p { color:var(--sac-muted); line-height:1.65; }


/* Shared polish for public pages and forms */
button, input, select, textarea { font: inherit; }
button:disabled { opacity: .65; cursor: not-allowed; }
img { max-width: 100%; }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(207,176,71,.55); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }


/* Public-site accessibility and small-screen polish */
.skip-link { position:absolute; left:1rem; top:-5rem; z-index:2000; padding:.75rem 1rem; border-radius:.5rem; background:#fff; color:var(--sac-navy); font-weight:800; box-shadow:0 4px 20px rgba(59,26,39,.2); }
.skip-link:focus { top:1rem; }
@media (max-width: 760px) { .nav-links { max-height:70vh; overflow-y:auto; } }


/* 2026 desktop-first refinement: balanced laptop layout, clearer hierarchy, calmer spacing */
:root {
  --sac-crimson: #a92f55;
  --sac-crimson-deep: #81213f;
  --sac-gold: #c5a04b;
  --sac-blue: #8E6B2A;
  --sac-navy: #3B1A27;
  --sac-ink: #4A4348;
  --sac-muted: #6B6368;
  --sac-paper: #fbf8f3;
  --sac-border: #e8e1dc;
  --sac-soft-rose: #f8edf1;
  --sac-soft-blue: #FBF6E7;
  --sac-soft-gold: #faf4e6;
}
body { font-size: 16px; line-height: 1.7; overflow-x: clip; }
.navbar {
  height: 84px; padding: 0 clamp(24px, 5vw, 76px); gap: 24px;
  box-shadow: 0 4px 24px rgba(59,26,39,.08);
  border-bottom: 1px solid rgba(232,225,220,.85);
}
.logo { flex: 0 0 auto; }
.logo img { width: auto !important; height: 58px !important; max-width: 210px; }
.nav-links { gap: clamp(12px, 1.55vw, 25px); align-items: center; margin: 0 auto 0 20px; padding: 0; }
.nav-links a { font-size: 14px; white-space: nowrap; font-weight: 650; }
.nav-apply { flex: 0 0 auto; padding: 11px 23px !important; font-size: 14px; }
.navbar > .btn:not(.nav-apply) { flex: 0 0 auto; }
.menu-btn { flex: 0 0 auto; }
header { padding-top: 84px; }
#carouselExampleAutoplaying { position: relative; }
.carousel-item img {
  height: min(690px, calc(100vh - 84px)) !important;
  min-height: 520px; width: 100%; object-fit: cover; object-position: center 38%;
  filter: brightness(.72) contrast(1.02);
}
.overlay, .overlay-1 {
  background: linear-gradient(90deg, rgba(42,16,25,.88) 0%, rgba(45,32,45,.70) 48%, rgba(45,32,45,.12) 100%) !important;
}
.overlay-2 { background: linear-gradient(90deg, rgba(42,16,25,.88), rgba(120,35,65,.55), rgba(42,16,25,.08)) !important; }
.overlay-3 { background: linear-gradient(90deg, rgba(42,16,25,.88), rgba(125,40,66,.5), rgba(42,16,25,.08)) !important; }
.carousel-text {
  top: 50%; left: max(7%, calc((100vw - 1200px)/2)); right: auto;
  width: min(620px, 58%); max-width: 620px; transform: translateY(-43%);
  padding: 0; text-align: left;
}
.carousel-text h1 {
  max-width: 650px; margin: 0 0 22px !important;
  color: #fff !important; font-size: clamp(2.75rem, 4.1vw, 4.35rem) !important;
  font-weight: 750; line-height: 1.08 !important; letter-spacing: -.045em;
  text-wrap: balance; overflow-wrap: normal;
}
.carousel-text p {
  max-width: 540px; margin: 0 !important; font-size: clamp(1rem, 1.2vw, 1.16rem) !important;
  line-height: 1.8 !important; letter-spacing: .005em !important; text-transform: none;
  color: rgba(255,255,255,.92); opacity: 1;
}
.carousel-text .btn { display: inline-flex; align-items: center; gap: 10px; margin-top: 30px !important; padding: 14px 25px !important; font-size: .9rem; letter-spacing: .04em; }
.carousel-control-prev, .carousel-control-next { width: 7%; opacity: .75; }
main section { scroll-margin-top: 100px; }
.container { max-width: 1180px; }
.about { gap: clamp(38px, 6vw, 90px); padding: clamp(64px, 8vw, 112px) max(6%, calc((100vw - 1180px)/2)); }
.about-content { flex: 1 1 52%; min-width: 0; }
.about-content h2 { font-size: clamp(2.2rem, 3vw, 3.15rem); line-height: 1.12; letter-spacing: -.035em; margin-bottom: 22px; }
.about-content h2 br { display: none; }
.about-content p { font-size: 1.02rem; line-height: 1.9; color: #6B6368; }
.about-image { flex: 0 1 43%; min-width: 0; }
.about-image img { display:block; width:100%; aspect-ratio: 4/4.2; object-fit:cover; border-radius: 26px; box-shadow: 0 24px 65px rgba(59,26,39,.15); }
.programs, .why-choose-us, .instructors, .testimonials, .process, .stats, .news { padding-top: clamp(64px, 7vw, 94px) !important; padding-bottom: clamp(64px, 7vw, 94px) !important; }
section .text-center > h2, section .container > .text-center h2 { font-size: clamp(2rem, 3vw, 2.8rem); line-height: 1.18; letter-spacing: -.035em; margin-bottom: 16px; }
section .text-center > p:not(.eyebrow), section .container > .text-center p:not(.eyebrow) { max-width: 760px; margin-left:auto; margin-right:auto; color:var(--sac-muted); line-height:1.8; }
.eyebrow { font-size:.75rem; letter-spacing:.18em; }
.card, .leadership-card, .value-card, .feature-box, .process-card, .news-card {
  border-radius: 18px; overflow: hidden; transition: transform .22s ease, box-shadow .22s ease;
}
.programs .card { border:1px solid var(--sac-border); box-shadow:0 10px 32px rgba(59,26,39,.055) !important; }
.programs .card:hover, .leadership-card:hover, .value-card:hover, .news-card:hover { transform: translateY(-5px); box-shadow:0 22px 46px rgba(59,26,39,.12) !important; }
.programs .card-img-top { height: 210px; object-fit: cover; }
.programs .card-body { padding: 25px 25px 28px; }
.programs .card-title { font-size:1.25rem; }
.programs .card-text, .feature-box p, .process-card p, .news-body p { color:#6B6368; line-height:1.8; }
.feature-box { height:100%; padding: 30px 28px; background:#fff; border:1px solid var(--sac-border); box-shadow:0 10px 30px rgba(59,26,39,.045); }
.feature-icon { color:var(--sac-crimson); font-size:1.7rem; margin-bottom:1rem; }
.leadership-card, .value-card { padding: 30px; }
.process-card { height:100%; padding: 28px 22px; border:1px solid var(--sac-border); background:#fff; }
.process-card .icon { display:grid; place-items:center; width:54px; height:54px; margin:0 auto 18px; border-radius:17px; color:var(--sac-crimson); background:var(--sac-soft-rose); font-size:1.25rem; }
.stat-box { height:100%; padding:24px 16px; border:1px solid rgba(142,107,42,.13); background:rgba(255,255,255,.75); border-radius:18px; }
.stat-box h3 { font-size:2.5rem; margin-bottom:7px; }
.stat-box p { margin:0; }
.news-card { height:100%; border:1px solid var(--sac-border); background:#fff; box-shadow:0 10px 32px rgba(59,26,39,.06); }
.news-img { width:100%; height:210px; object-fit:cover; }
.news-body { padding:24px; }
.news-body h5 { margin-top:14px; font-size:1.15rem; line-height:1.35; color:var(--sac-navy); }
.footer { padding-top:65px !important; }
.footer p, .footer li { color:rgba(255,255,255,.78); line-height:1.85; }
.footer-links { padding:0; list-style:none; }
.footer-links li { margin:.3rem 0; }
.footer a { text-decoration:none; }
.btn { transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.btn:hover { box-shadow:0 12px 24px rgba(169,47,85,.22); }

@media (min-width: 1200px) {
  .nav-links a { font-size:14px; }
}
@media (max-width: 1199px) and (min-width: 993px) {
  .navbar { padding-left: 25px; padding-right: 25px; gap:14px; }
  .logo img { max-width:165px; height:52px !important; }
  .nav-links { gap:12px; margin-left:6px; }
  .nav-links a { font-size:12px; }
  .nav-apply { padding:9px 16px !important; font-size:13px; }
  .carousel-text { left:6%; width:62%; }
  .carousel-text h1 { font-size:clamp(2.5rem,4.1vw,3.35rem) !important; }
}
@media (max-width: 992px) {
  header { padding-top: 76px; }
  .navbar { height:76px; padding-left:24px; padding-right:24px; }
  .nav-links { margin:0; }
  .carousel-item img { height: min(75vh, 650px) !important; min-height:500px; }
  .carousel-text { left:7%; right:7%; width:auto; max-width:680px; }
  .carousel-text h1 { font-size:clamp(2.5rem, 6vw, 3.7rem) !important; }
  .about { padding:70px 6%; }
}
@media (max-width: 760px) {
  header { padding-top:72px; }
  .navbar { min-height:72px; height:auto; padding:8px 5%; }
  .logo img { height:50px !important; max-width:160px; }
  .nav-links { gap:.3rem; }
  .carousel-item img { height: min(78vh, 650px) !important; min-height:470px; object-position: center; }
  .carousel-text { top:50%; left:7%; right:7%; width:auto; max-width:none; transform:translateY(-42%); }
  .carousel-text h1 { font-size:clamp(2.15rem, 8vw, 3rem) !important; line-height:1.1 !important; margin-bottom:17px !important; }
  .carousel-text p { font-size:1rem !important; line-height:1.7 !important; }
  .carousel-text .btn { margin-top:22px !important; }
  .about { padding:55px 6%; gap:30px; }
  .about-content h2 { font-size:2.25rem; }
  .programs .card-img-top, .news-img { height:195px; }
}
@media (max-width: 480px) {
  .carousel-item img { min-height:460px; height:76vh !important; }
  .carousel-text h1 { font-size:2.15rem !important; }
  .carousel-control-prev, .carousel-control-next { width:10%; }
  .program-note { padding:1.15rem; }
}

.carousel-text .hero-kicker { margin:0 0 15px !important; color:#f0d58a; font-size:.76rem !important; font-weight:800; letter-spacing:.2em !important; text-transform:uppercase; }
@media (max-width:760px) { .carousel-text .hero-kicker { font-size:.68rem !important; letter-spacing:.13em !important; } }