:root {
  --primary: #003475;
  --primary-2: #1a4b96;
  --navy: #0d2b5b;
  --red: #b6171e;
  --red-2: #da3433;
  --ice: #f0f5fa;
  --line: #d8deee;
  --text: #131b2e;
  --muted: #5f6675;
  --green: #0f7b4f;
  --gold: #c98a12;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 12% 8%, rgba(201, 138, 18, .09), transparent 28%),
    radial-gradient(circle at 88% 20%, rgba(0, 52, 117, .06), transparent 30%),
    #f7f9fd;
  font-family: "Tajawal", "Cairo", Arial, sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: .72;
  background-image: url("data:image/svg+xml,%3Csvg width='112' height='112' viewBox='0 0 112 112' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23003475' stroke-opacity='.055' stroke-width='1.2'%3E%3Cpath d='M56 8 68 32 104 44 80 56 68 80 56 104 44 80 20 68 8 56 32 44 44 32Z'/%3E%3Cpath d='M56 20 64 40 92 48 72 56 64 72 56 92 48 72 32 64 20 56 40 48 48 40Z'/%3E%3Ccircle cx='56' cy='56' r='18'/%3E%3Cpath d='M0 56c18-18 38-18 56 0M56 0c18 18 18 38 0 56M112 56c-18 18-38 18-56 0M56 112c-18-18-18-38 0-56'/%3E%3C/g%3E%3Cg fill='%23c98a12' fill-opacity='.035'%3E%3Ccircle cx='56' cy='56' r='5'/%3E%3Ccircle cx='0' cy='0' r='5'/%3E%3Ccircle cx='112' cy='0' r='5'/%3E%3Ccircle cx='0' cy='112' r='5'/%3E%3Ccircle cx='112' cy='112' r='5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
}

a { color: inherit; text-decoration: none; }

.container {
  width: min(1220px, calc(100% - 32px));
  margin: 0 auto;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid rgba(216, 222, 238, 0.85);
  backdrop-filter: blur(16px);
}

.nav {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "Cairo", sans-serif;
  font-weight: 800;
  color: var(--navy);
}

.brand img {
  width: 54px;
  height: 54px;
  object-fit: contain;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.language-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  color: var(--navy);
  font-family: "Cairo", sans-serif;
}

.language-switch span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.btn {
  border: 0;
  border-radius: 7px;
  padding: 11px 18px;
  font-family: "Cairo", sans-serif;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: 0.18s ease;
}

.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-2); }
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-2); }
.btn-light { background: var(--ice); color: var(--navy); border: 1px solid var(--line); }
.btn-outline { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.65); }

.hero {
  min-height: 720px;
  position: relative;
  display: grid;
  align-items: center;
  overflow: hidden;
  background-image:
    linear-gradient(90deg, rgba(5, 19, 43, .93), rgba(5, 19, 43, .62), rgba(5, 19, 43, .18)),
    url("../images/school-hero.jpeg");
  background-size: cover;
  background-position: center;
}

[dir="rtl"] .hero {
  background-image:
    linear-gradient(270deg, rgba(5, 19, 43, .93), rgba(5, 19, 43, .62), rgba(5, 19, 43, .18)),
    url("../images/school-hero.jpeg");
}

.hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.2)),
    radial-gradient(circle at 12% 18%, rgba(182,23,30,.34), transparent 28%);
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 360px;
  align-items: center;
  gap: 34px;
}

.hero-copy {
  color: #fff;
  max-width: 790px;
}

.hero-copy h1 {
  font-family: "Cairo", sans-serif;
  font-size: clamp(38px, 5vw, 68px);
  line-height: 1.12;
  margin: 20px 0;
}

.hero-copy p {
  font-size: 21px;
  line-height: 1.75;
  color: rgba(255, 255, 255, .9);
  max-width: 680px;
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.trust-badge {
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.24);
  color: #fff;
  padding: 8px 12px;
  border-radius: 999px;
  font-family: "Cairo", sans-serif;
  font-weight: 800;
  font-size: 14px;
}

.hero-panel {
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 10px;
  padding: 26px;
  color: var(--navy);
  box-shadow: 0 24px 70px rgba(0,0,0,.22);
  display: grid;
  gap: 12px;
}

.hero-panel img {
  width: 115px;
  height: 115px;
  object-fit: contain;
}

.hero-panel strong {
  font-family: "Cairo", sans-serif;
  font-size: 22px;
}

.hero-panel b {
  display: inline-flex;
  width: fit-content;
  padding: 8px 12px;
  border-radius: 999px;
  background: #fff3d8;
  color: #7a4a00;
  font-family: "Cairo", sans-serif;
}

.content-stage {
  padding-top: 56px;
}

.section { padding: 58px 0; }
.compact-section { padding: 34px 0; }

.admission-intro {
  width: min(820px, calc(100% - 32px));
  margin: 0 auto 14px;
  text-align: center;
  display: grid;
  gap: 18px;
}

.admission-pill {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  border-radius: 999px;
  background: #ffdad6;
  color: #410003;
  font-family: "Cairo", sans-serif;
  font-weight: 800;
  font-size: 14px;
}

.admission-pill span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 8px rgba(181, 36, 38, .12);
}

.admission-intro h2 {
  margin: 0;
  color: var(--primary);
  font-family: "Cairo", sans-serif;
  font-size: clamp(34px, 4.2vw, 54px);
  line-height: 1.18;
}

.admission-intro p {
  margin: 0;
  color: var(--muted);
  font-size: 19px;
  line-height: 1.75;
}

.section-title {
  text-align: center;
  margin-bottom: 30px;
}

.section-title h2 {
  font-family: "Cairo", sans-serif;
  color: var(--primary);
  font-size: clamp(30px, 3vw, 44px);
  margin: 0 0 8px;
}

.section-title p {
  margin: 0 auto;
  max-width: 760px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.7;
}

.grid { display: grid; gap: 18px; }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.visual-strip,
.process-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.process-card {
  position: relative;
  overflow: hidden;
  min-height: 194px;
  border-radius: 14px;
  padding: 32px 22px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(216, 222, 238, .78);
  color: var(--text);
  box-shadow: 0 16px 45px rgba(13, 43, 91, .08);
  display: grid;
  place-items: center;
  text-align: center;
  gap: 10px;
}

.process-card::after {
  content: "";
  position: absolute;
  inset-inline-end: -34px;
  bottom: -34px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(26, 54, 93, .055);
}

.process-card.is-active {
  background: linear-gradient(145deg, #ffffff, #eef4ff);
  border-color: rgba(26, 75, 150, .22);
}

.process-number {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  background: var(--primary);
  color: #fff;
  border-end-end-radius: 14px;
  font-family: "Cairo", sans-serif;
  font-size: 23px;
  font-weight: 900;
}

.process-card:not(.is-active) .process-number {
  background: #eef1f7;
  color: var(--muted);
}

.process-card .material-symbols-outlined {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  display: block;
  background: transparent;
  color: var(--primary);
  opacity: .09;
  font-size: 122px;
  line-height: 1;
  pointer-events: none;
  z-index: 0;
}

.process-card:not(.is-active) .material-symbols-outlined {
  color: var(--muted);
  opacity: .12;
}

.process-card h3 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--primary);
  font-family: "Cairo", sans-serif;
  font-size: 22px;
}

.process-card p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  max-width: 190px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  width: min(980px, 100%);
  margin: 0 auto;
}

.feature-card-soft {
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(216, 222, 238, .78);
  border-radius: 14px;
  padding: 20px;
  display: grid;
  gap: 10px;
  box-shadow: 0 12px 34px rgba(13,43,91,.06);
}

.feature-card-soft .material-symbols-outlined {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #d6e3ff;
  color: var(--primary);
  font-size: 26px;
}

.feature-card-soft strong {
  color: var(--navy);
  font-family: "Cairo", sans-serif;
  font-size: 19px;
}

.feature-card-soft small {
  color: var(--muted);
  line-height: 1.55;
  font-size: 15px;
}

.track-band {
  padding: 28px 0;
}

.track-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  box-shadow: 0 18px 55px rgba(13,43,91,.08);
}

.track-card h2 {
  margin: 0 0 6px;
  color: var(--navy);
  font-family: "Cairo", sans-serif;
}

.track-card p {
  margin: 0;
  color: var(--muted);
}

.admission-form {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 18px 55px rgba(13, 43, 91, 0.08);
  padding: 0;
  overflow: hidden;
}

.form-hero {
  background: var(--primary);
  color: #fff;
  text-align: center;
  padding: 34px 24px 30px;
}

.form-hero h2 {
  margin: 0 0 8px;
  font-family: "Cairo", sans-serif;
  font-size: clamp(26px, 3vw, 36px);
}

.form-hero p {
  margin: 0 auto;
  max-width: 760px;
  color: rgba(255,255,255,.84);
  line-height: 1.7;
}

.form-dots {
  display: flex;
  width: min(360px, 100%);
  margin: 26px auto 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.form-dots span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffdad6;
}

.form-dots i {
  height: 2px;
  flex: 1;
  background: rgba(255,255,255,.32);
}

.form-body {
  padding: 30px;
  background: #fff;
}

.form-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 28px 0 16px;
  border-bottom: 1px solid #edf0f7;
  padding-bottom: 12px;
}

.form-section-title:first-of-type { margin-top: 0; }

.form-section-title span {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--primary);
  color: #fff;
  font-family: "Cairo", sans-serif;
  font-weight: 800;
}

.form-section-title h3 {
  margin: 0;
  color: var(--navy);
  font-family: "Cairo", sans-serif;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.field.full { grid-column: 1 / -1; }

label {
  color: var(--navy);
  font-family: "Cairo", sans-serif;
  font-weight: 800;
}

.req { color: var(--red); }

input,
select,
textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 12px 13px;
  font: inherit;
  background: #fff;
}

.grade-select optgroup {
  color: var(--navy);
  font-family: "Cairo", sans-serif;
  font-weight: 900;
}

.grade-select option {
  color: var(--text);
  padding: 8px;
}

input:focus,
select:focus,
textarea:focus {
  outline: 3px solid rgba(26, 75, 150, .14);
  border-color: var(--primary);
}

.consent-field label {
  display: flex;
  align-items: center;
  gap: 10px;
}

.consent-field input {
  width: auto;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 22px;
}

.alert {
  border-radius: 10px;
  padding: 16px 18px;
  margin: 18px 0;
  border: 1px solid var(--line);
}

.alert-success { background: #eefaf5; border-color: #b9e6d1; color: #0f5d3f; }
.alert-error { background: #fff0f0; border-color: #ffd0d0; color: #8a1010; }
.inline-link { color: var(--primary); font-weight: 800; text-decoration: underline; }

.success-card {
  position: relative;
  overflow: hidden;
  margin: 10px 0 28px;
  padding: 28px;
  border-radius: 14px;
  border: 1px solid rgba(15, 123, 79, .22);
  background:
    linear-gradient(135deg, rgba(238, 250, 245, .98), rgba(255, 255, 255, .96)),
    #fff;
  box-shadow: 0 22px 60px rgba(13, 43, 91, .12);
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 20px;
}

.success-card::after {
  content: "";
  position: absolute;
  inset-inline-end: -36px;
  top: -48px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: rgba(15, 123, 79, .08);
}

.success-mark {
  position: relative;
  z-index: 1;
  width: 72px;
  height: 72px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: #0f7b4f;
  color: #fff;
  box-shadow: 0 14px 30px rgba(15, 123, 79, .24);
}

.success-mark .material-symbols-outlined {
  font-size: 42px;
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 40;
}

.success-content {
  position: relative;
  z-index: 1;
}

.success-kicker {
  margin: 0 0 7px;
  color: #0f7b4f;
  font-family: "Cairo", sans-serif;
  font-size: 14px;
  font-weight: 900;
}

.success-card h2 {
  margin: 0;
  color: var(--navy);
  font-family: "Cairo", sans-serif;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.25;
}

.success-message,
.success-note {
  margin: 12px 0 0;
  max-width: 880px;
  color: #344054;
  font-size: 17px;
  line-height: 1.85;
}

.success-code-box {
  width: min(460px, 100%);
  margin: 20px 0 0;
  padding: 16px 18px;
  border: 1px dashed rgba(0, 52, 117, .35);
  border-radius: 12px;
  background: #fff;
  display: grid;
  gap: 6px;
}

.success-code-box span {
  color: var(--muted);
  font-family: "Cairo", sans-serif;
  font-weight: 800;
  font-size: 13px;
}

.success-code-box strong {
  color: var(--primary);
  font-family: "Cairo", sans-serif;
  font-size: clamp(24px, 4vw, 34px);
  letter-spacing: .04em;
  direction: ltr;
}

.success-link {
  margin-top: 18px;
}

.footer {
  background: var(--navy);
  color: #fff;
  padding: 46px 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 28px;
}

.footer h3,
.footer h4 {
  font-family: "Cairo", sans-serif;
  margin-top: 0;
}

.footer p {
  color: rgba(255,255,255,.78);
  line-height: 1.7;
}

.social-icons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.social-icons a {
  min-width: 46px;
  height: 46px;
  padding: 0 14px;
  border-radius: 999px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  font-family: "Cairo", sans-serif;
  font-weight: 900;
}

.social-icons a::before {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
}

.social-wa::before { content: "☎"; }
.social-fb::before { content: "f"; }
.social-ig::before { content: "◎"; }

/* Branded footer social buttons */
.social-icons {
  gap: 12px;
}

.social-icons a {
  min-width: 54px;
  height: 52px;
  padding: 0 16px 0 12px;
  gap: 10px;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 14px 32px rgba(0,0,0,.18);
  position: relative;
  overflow: hidden;
}

.social-icons a:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(0,0,0,.25);
}

.social-icons a span {
  position: relative;
  z-index: 1;
}

.social-icons a::before {
  content: "";
  position: relative;
  z-index: 1;
  width: 32px;
  height: 32px;
  background-color: #fff;
  flex: 0 0 auto;
}

.social-icons a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.22), transparent 50%);
  pointer-events: none;
}

.social-wa { background: #25d366; }
.social-fb { background: #1877f2; }
.social-ig { background: linear-gradient(135deg, #f58529 0%, #dd2a7b 42%, #8134af 72%, #515bd4 100%); }

.social-wa::before {
  background-color: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.04 4C9.42 4 4.04 9.27 4.04 15.76c0 2.08.56 4.12 1.62 5.9L4 28l6.5-1.66a12.25 12.25 0 0 0 5.54 1.35C22.65 27.69 28 22.42 28 15.93S22.65 4 16.04 4Zm0 21.65c-1.79 0-3.54-.47-5.08-1.36l-.37-.21-3.86.98 1.03-3.68-.25-.38a9.72 9.72 0 0 1-1.48-5.16c0-5.36 4.49-9.72 10.01-9.72 5.5 0 9.98 4.41 9.98 9.82 0 5.35-4.48 9.71-9.98 9.71Zm5.48-7.27c-.3-.15-1.77-.86-2.04-.96-.27-.1-.47-.15-.67.15-.2.29-.77.95-.94 1.14-.17.2-.35.22-.65.07-.3-.15-1.27-.46-2.42-1.47-.9-.78-1.5-1.75-1.68-2.04-.17-.3-.02-.46.13-.6.13-.13.3-.35.45-.52.15-.18.2-.3.3-.5.1-.2.05-.37-.03-.52-.07-.15-.67-1.59-.92-2.18-.24-.57-.49-.49-.67-.5h-.57c-.2 0-.52.07-.8.37-.27.3-1.05 1.01-1.05 2.47s1.08 2.87 1.23 3.06c.15.2 2.13 3.2 5.16 4.49.72.31 1.29.5 1.73.64.73.23 1.39.2 1.91.12.58-.09 1.77-.71 2.02-1.4.25-.68.25-1.27.17-1.4-.07-.12-.27-.2-.57-.35Z'/%3E%3C/svg%3E") center / 23px 23px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.04 4C9.42 4 4.04 9.27 4.04 15.76c0 2.08.56 4.12 1.62 5.9L4 28l6.5-1.66a12.25 12.25 0 0 0 5.54 1.35C22.65 27.69 28 22.42 28 15.93S22.65 4 16.04 4Zm0 21.65c-1.79 0-3.54-.47-5.08-1.36l-.37-.21-3.86.98 1.03-3.68-.25-.38a9.72 9.72 0 0 1-1.48-5.16c0-5.36 4.49-9.72 10.01-9.72 5.5 0 9.98 4.41 9.98 9.82 0 5.35-4.48 9.71-9.98 9.71Zm5.48-7.27c-.3-.15-1.77-.86-2.04-.96-.27-.1-.47-.15-.67.15-.2.29-.77.95-.94 1.14-.17.2-.35.22-.65.07-.3-.15-1.27-.46-2.42-1.47-.9-.78-1.5-1.75-1.68-2.04-.17-.3-.02-.46.13-.6.13-.13.3-.35.45-.52.15-.18.2-.3.3-.5.1-.2.05-.37-.03-.52-.07-.15-.67-1.59-.92-2.18-.24-.57-.49-.49-.67-.5h-.57c-.2 0-.52.07-.8.37-.27.3-1.05 1.01-1.05 2.47s1.08 2.87 1.23 3.06c.15.2 2.13 3.2 5.16 4.49.72.31 1.29.5 1.73.64.73.23 1.39.2 1.91.12.58-.09 1.77-.71 2.02-1.4.25-.68.25-1.27.17-1.4-.07-.12-.27-.2-.57-.35Z'/%3E%3C/svg%3E") center / 23px 23px no-repeat;
}

.social-fb::before {
  background-color: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.1 10.2h2.4V6.1c-.42-.06-1.86-.18-3.53-.18-3.5 0-5.9 2.14-5.9 6.08v3.42H8.5v4.58h3.57V31h4.78V20h3.74l.6-4.58h-4.34v-2.96c0-1.32.37-2.26 2.25-2.26Z'/%3E%3C/svg%3E") center / 21px 21px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.1 10.2h2.4V6.1c-.42-.06-1.86-.18-3.53-.18-3.5 0-5.9 2.14-5.9 6.08v3.42H8.5v4.58h3.57V31h4.78V20h3.74l.6-4.58h-4.34v-2.96c0-1.32.37-2.26 2.25-2.26Z'/%3E%3C/svg%3E") center / 21px 21px no-repeat;
}

.social-ig::before {
  background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.2 4H9.8A5.8 5.8 0 0 0 4 9.8v12.4A5.8 5.8 0 0 0 9.8 28h12.4a5.8 5.8 0 0 0 5.8-5.8V9.8A5.8 5.8 0 0 0 22.2 4Zm3.7 18.2a3.7 3.7 0 0 1-3.7 3.7H9.8a3.7 3.7 0 0 1-3.7-3.7V9.8a3.7 3.7 0 0 1 3.7-3.7h12.4a3.7 3.7 0 0 1 3.7 3.7v12.4ZM16 9.8a6.2 6.2 0 1 0 0 12.4 6.2 6.2 0 0 0 0-12.4Zm0 10.2a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm7.05-10.45a1.45 1.45 0 1 1-2.9 0 1.45 1.45 0 0 1 2.9 0Z'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.2 4H9.8A5.8 5.8 0 0 0 4 9.8v12.4A5.8 5.8 0 0 0 9.8 28h12.4a5.8 5.8 0 0 0 5.8-5.8V9.8A5.8 5.8 0 0 0 22.2 4Zm3.7 18.2a3.7 3.7 0 0 1-3.7 3.7H9.8a3.7 3.7 0 0 1-3.7-3.7V9.8a3.7 3.7 0 0 1 3.7-3.7h12.4a3.7 3.7 0 0 1 3.7 3.7v12.4ZM16 9.8a6.2 6.2 0 1 0 0 12.4 6.2 6.2 0 0 0 0-12.4Zm0 10.2a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm7.05-10.45a1.45 1.45 0 1 1-2.9 0 1.45 1.45 0 0 1 2.9 0Z'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
}

.modal.open { display: block; }

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 18, 38, .62);
}

.modal-dialog {
  position: relative;
  width: min(460px, calc(100% - 32px));
  margin: 9vh auto;
  background: #fff;
  border-radius: 12px;
  padding: 26px;
  box-shadow: 0 24px 70px rgba(0,0,0,.25);
}

.modal-dialog h2 {
  margin: 0 0 8px;
  color: var(--navy);
  font-family: "Cairo", sans-serif;
}

.modal-close {
  position: absolute;
  inset-inline-end: 14px;
  top: 12px;
  border: 0;
  background: transparent;
  font-size: 30px;
  cursor: pointer;
  color: var(--muted);
}

.tracking-body {
  min-height: 100vh;
}

.tracking-page {
  min-height: 100vh;
  padding: 28px 0 56px;
}

.tracking-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.tracking-hero {
  position: relative;
  overflow: hidden;
  min-height: 310px;
  border-radius: 18px;
  padding: clamp(26px, 5vw, 54px);
  display: grid;
  grid-template-columns: 1fr minmax(320px, 440px);
  align-items: center;
  gap: 30px;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(5, 19, 43, .95), rgba(0, 52, 117, .84)),
    url("../images/school-hero.jpeg") center / cover;
  box-shadow: 0 26px 70px rgba(13, 43, 91, .18);
}

.tracking-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='112' height='112' viewBox='0 0 112 112' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.09' stroke-width='1.1'%3E%3Cpath d='M56 8 68 32 104 44 80 56 68 80 56 104 44 80 20 68 8 56 32 44 44 32Z'/%3E%3Ccircle cx='56' cy='56' r='18'/%3E%3C/g%3E%3C/svg%3E");
  opacity: .75;
}

.tracking-hero > * {
  position: relative;
  z-index: 1;
}

.tracking-kicker {
  margin: 0 0 10px;
  color: #ffd98b;
  font-family: "Cairo", sans-serif;
  font-weight: 900;
}

.tracking-hero h1 {
  margin: 0;
  max-width: 760px;
  font-family: "Cairo", sans-serif;
  font-size: clamp(34px, 5vw, 62px);
  line-height: 1.12;
}

.tracking-hero p {
  max-width: 720px;
  margin: 16px 0 0;
  color: rgba(255, 255, 255, .88);
  font-size: 18px;
  line-height: 1.8;
}

.tracking-search {
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 14px;
  background: rgba(255, 255, 255, .14);
  backdrop-filter: blur(14px);
  display: grid;
  gap: 12px;
}

.tracking-search label {
  color: #fff;
}

.tracking-search div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

.tracking-search input {
  border-color: rgba(255,255,255,.5);
  background: #fff;
  font-family: "Cairo", sans-serif;
  font-weight: 800;
}

.tracking-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 20px;
  margin-top: 22px;
}

.tracking-status-card,
.tracking-timeline-card,
.tracking-empty {
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(216, 222, 238, .86);
  border-radius: 16px;
  box-shadow: 0 20px 55px rgba(13,43,91,.09);
}

.tracking-status-card {
  padding: 26px;
}

.tracking-secure-note {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #e9f8f1;
  color: #0f7b4f;
  font-family: "Cairo", sans-serif;
  font-size: 13px;
  font-weight: 900;
}

.tracking-status-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  padding-bottom: 18px;
  border-bottom: 1px solid #edf0f7;
}

.tracking-status-head span,
.tracking-info-grid span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.tracking-status-head strong {
  display: block;
  margin-top: 5px;
  color: var(--primary);
  font-family: "Cairo", sans-serif;
  font-size: clamp(26px, 4vw, 40px);
  letter-spacing: .04em;
}

.tracking-status-pill {
  display: inline-flex !important;
  align-items: center;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #e8efff;
  color: var(--primary) !important;
  font-family: "Cairo", sans-serif;
  font-weight: 900 !important;
  white-space: nowrap;
}

.tracking-info-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0;
}

.tracking-info-grid div {
  min-width: 0;
  padding: 14px;
  border-radius: 12px;
  background: #f7f9fd;
  border: 1px solid #edf0f7;
}

.tracking-info-grid strong {
  display: block;
  margin-top: 6px;
  color: var(--navy);
  font-family: "Cairo", sans-serif;
  font-size: 15px;
  overflow-wrap: anywhere;
}

.tracking-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.tracking-step {
  position: relative;
  min-height: 150px;
  padding: 16px;
  border: 1px solid #e3e8f3;
  border-radius: 14px;
  background: #fff;
  display: grid;
  align-content: start;
  gap: 10px;
}

.tracking-step .material-symbols-outlined {
  color: #a5adbd;
  font-size: 28px;
}

.tracking-step strong {
  color: var(--navy);
  font-family: "Cairo", sans-serif;
  font-size: 16px;
}

.tracking-step p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.55;
  font-size: 14px;
}

.tracking-step.is-done {
  background: #ecf8f2;
  border-color: #bee8d2;
}

.tracking-step.is-done .material-symbols-outlined {
  color: #0f7b4f;
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 28;
}

.tracking-step.is-current {
  border-color: rgba(0, 52, 117, .35);
  box-shadow: inset 0 0 0 2px rgba(0, 52, 117, .06);
}

.tracking-dates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.tracking-dates div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 10px;
  align-items: center;
  padding: 14px;
  border-radius: 12px;
  background: #fff8e8;
  border: 1px solid #f0dba9;
}

.tracking-dates .material-symbols-outlined {
  grid-row: span 2;
  color: #a15c00;
}

.tracking-dates b {
  color: #7a4a00;
  font-family: "Cairo", sans-serif;
}

.tracking-dates strong {
  color: var(--navy);
  direction: ltr;
}

.tracking-timeline-card {
  padding: 24px;
}

.tracking-timeline-card h2 {
  margin: 0 0 18px;
  color: var(--navy);
  font-family: "Cairo", sans-serif;
  font-size: 24px;
}

.tracking-timeline {
  position: relative;
  display: grid;
  gap: 16px;
}

.tracking-timeline article {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
}

.tracking-timeline article > span {
  position: relative;
  width: 14px;
  height: 14px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 5px rgba(0, 52, 117, .1);
}

.tracking-timeline strong {
  color: var(--navy);
  font-family: "Cairo", sans-serif;
}

.tracking-timeline time {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.tracking-timeline p {
  margin: 8px 0 0;
  color: #344054;
  line-height: 1.7;
}

.tracking-empty,
.tracking-alert {
  margin-top: 22px;
}

.tracking-empty {
  min-height: 210px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 28px;
  color: var(--muted);
}

.tracking-empty .material-symbols-outlined {
  font-size: 58px;
  color: var(--primary);
  opacity: .72;
}

@media (max-width: 900px) {
  .nav,
  .track-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .hero {
    min-height: auto;
    padding: 82px 0;
  }

  .hero-grid,
  .grid-4,
  .visual-strip,
  .process-cards,
  .feature-grid,
  .footer-grid,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .hero-panel {
    width: 100%;
  }

  .container {
    width: min(100% - 22px, 1220px);
  }

  .brand span {
    font-size: 13px;
    line-height: 1.3;
  }

  .nav-actions {
    width: 100%;
  }

  .nav-actions .btn,
  .language-switch {
    flex: 1 1 auto;
  }

  .hero-copy h1 {
    font-size: 34px;
  }

  .hero-copy p {
    font-size: 17px;
  }

  .admission-form {
    border-radius: 10px;
  }

  .form-body {
    padding: 16px;
  }

  .form-section-title {
    align-items: flex-start;
  }

  input,
  select,
  textarea,
  .btn {
    min-height: 48px;
  }

  .form-actions .btn {
    width: 100%;
  }

  .success-card {
    grid-template-columns: 1fr;
    padding: 20px;
    gap: 16px;
  }

  .success-mark {
    width: 58px;
    height: 58px;
    border-radius: 14px;
  }

  .success-message,
  .success-note {
    font-size: 15px;
  }

  .success-link {
    width: 100%;
  }

  .social-icons a {
    flex: 1 1 100%;
  }

  .tracking-top,
  .tracking-hero {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .tracking-top {
    flex-direction: column;
  }

  .tracking-top .btn {
    width: 100%;
  }

  .tracking-search div,
  .tracking-layout,
  .tracking-info-grid,
  .tracking-steps,
  .tracking-dates {
    grid-template-columns: 1fr;
  }

  .tracking-status-card,
  .tracking-timeline-card {
    padding: 18px;
  }

  .tracking-status-head {
    flex-direction: column;
  }
}