@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap');

:root {
  --turquoise: #008b95;
  --turquoise-dark: #006a73;
  --turquoise-soft: #dff3f2;
  --orange: #ef7f2c;
  --orange-dark: #cf641c;
  --charcoal: #34474e;
  --dark: #17383d;
  --ink: #233b42;
  --muted: #6f8186;
  --mist: #f3f7f6;
  --cream: #fbf8f2;
  --line: #dfe8e7;
  --white: #fff;
  --shadow: 0 18px 50px rgba(21, 57, 62, .14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: 'Tajawal', Tahoma, Arial, sans-serif; font-size: 15px; color: var(--ink); line-height: 1.75; background: var(--white); }
main p, main li, footer p { text-align: justify; text-align-last: start; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
.wrap { width: min(calc(100% - 20px), 1180px); margin-inline: auto; }
.phone-link, .email-link, [dir="ltr"] { unicode-bidi: isolate; direction: ltr; text-align: start; }
#site-loader { position: fixed; inset: 0; z-index: 999; display: grid; place-content: center; justify-items: center; gap: 18px; background: var(--dark); }
#site-loader img { width: min(260px, 68vw); height: 120px; padding: 10px 16px; display: block; object-fit: contain; border-radius: 6px; background: #fff; box-shadow: 0 18px 55px rgba(0,0,0,.22); animation: loader-logo 1.25s ease-in-out infinite alternate; }
#site-loader span { width: 44px; height: 4px; overflow: hidden; position: relative; border-radius: 5px; background: rgba(255,255,255,.18); }
#site-loader span::after { content: ''; position: absolute; inset-block: 0; width: 45%; border-radius: inherit; background: var(--orange); animation: loader-line 1s ease-in-out infinite alternate; }
@keyframes loader-logo { from { transform: translateY(0); opacity: .88; } to { transform: translateY(-4px); opacity: 1; } }
@keyframes loader-line { from { inset-inline-start: 0; } to { inset-inline-start: 55%; } }
@media (prefers-reduced-motion: reduce) { #site-loader img, #site-loader span::after { animation: none; } }

.top { background: var(--dark); color: #d8e6e6; font-size: 13px; }
.top .wrap { min-height: 42px; position: relative; display: flex; align-items: center; gap: 20px; }
.top a { transition: color .2s; }
.top a:hover { color: #fff; }
.top .orange { color: #ffae70; font-weight: 700; }
.top-social { display: flex; align-items: center; gap: 6px; direction: ltr; }
.top-social a { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; color: #fff; font: 800 13px/1 Arial, sans-serif; }
.top-social a:hover { border-color: var(--orange); background: var(--orange); color: #fff; transform: translateY(-1px); }
.top-social span, .top-social svg { width: 16px; height: 16px; display: block; }
.top-social svg { fill: currentColor; stroke: none; }
.top-social svg .line, .top-social .social-instagram rect, .top-social .social-instagram circle:not(.fill), .top-social .social-x path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.top-social svg .cut { fill: var(--teal, #008b95); }
.top-social a:hover svg .cut { fill: var(--orange); }

header { height: 92px; position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.97); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
.nav { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { width: 190px; min-width: 190px; height: 100%; display: flex; align-items: center; }
.brand-logo { width: 185px; height: 78px; object-fit: contain; object-position: center; }
.nav nav { height: 100%; display: flex; align-items: center; gap: 18px; font-size: 14px; font-weight: 700; }
.nav nav > a, .drop { height: 100%; display: flex; align-items: center; }
.nav nav > a { position: relative; }
.nav nav > a::after { content: ''; position: absolute; inset-inline: 0; bottom: 23px; height: 2px; background: var(--orange); transform: scaleX(0); transition: .2s; }
.nav nav > a:hover::after { transform: scaleX(1); }
.drop { position: relative; }
.drop > .drop-label { display: flex; align-items: center; min-height: 42px; color: inherit; cursor: pointer; font-weight: inherit; }
.drop > div { display: none; position: absolute; inset-block-start: 82px; inset-inline-start: -18px; width: 240px; padding: 10px; background: #fff; border-block-start: 4px solid var(--orange); box-shadow: var(--shadow); }
.drop:hover > div, .drop:focus-within > div { display: grid; }
.drop > div a { padding: 9px 11px; font-size: 13px; border-radius: 4px; }
.drop > div a:hover { background: var(--turquoise-soft); color: var(--turquoise-dark); }
.drop > div .menu-special { margin-block-start: 5px; padding-block-start: 12px; border-block-start: 1px solid var(--line); color: var(--turquoise-dark); font-weight: 800; }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.top .language { min-width: 68px; min-height: 30px; margin-inline-start: auto; padding: 4px 12px; border: 1px solid #79c9c5; background: transparent; color: #fff; border-radius: 3px; cursor: pointer; font-weight: 800; font-size: 12px; }
.top .language:hover { background: #fff; color: var(--turquoise-dark); }
.menu { display: none; border: 0; background: none; color: var(--charcoal); font-size: 25px; cursor: pointer; }

.hero { min-height: 650px; color: #fff; background-position: center; background-size: cover; }
.hero-in { min-height: 650px; display: flex; align-items: center; }
.hero-in > div { max-width: 760px; }
.eyebrow { display: block; margin-block-end: 10px; color: var(--turquoise); font-size: 12px; font-weight: 800; }
.hero .eyebrow { color: #95e7e1; }
.hero h1, .page-hero h1 { margin: 0 0 18px; font-size: clamp(42px, 5.7vw, 74px); line-height: 1.25; letter-spacing: -1.5px; }
.hero p { max-width: 670px; color: #e2eded; font-size: 18px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 30px; }
.actions a, .apply, .center-actions a, .plan-link { min-height: 50px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.5); font-size: 12px; font-weight: 800; transition: .2s; }
.actions a:first-child, .apply, .center-actions a:first-child { background: var(--orange); border-color: var(--orange); color: #fff; }
.actions a:hover, .apply:hover, .center-actions a:hover { transform: translateY(-2px); }

.degrees { position: relative; z-index: 3; margin-block-start: -42px; }
.degrees > .wrap { display: grid; grid-template-columns: repeat(3, 1fr); box-shadow: var(--shadow); }
.degrees a { min-height: 116px; position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; padding: 24px; background: #fff; border-inline-end: 1px solid var(--line); transition: .25s; }
.degrees a:hover { transform: translateY(-6px); }
.degrees i { position: absolute; inset-inline-end: 11px; inset-block-start: -23px; color: #edf3f2; font: 800 70px Arial; }
.degrees a > b { z-index: 1; width: 50px; height: 50px; display: grid; place-items: center; background: var(--turquoise-soft); color: var(--turquoise); font-size: 22px; }
.degrees span { z-index: 1; display: grid; }
.degrees strong { color: var(--charcoal); font-size: 16px; }
.degrees small { color: var(--muted); font-size: 12px; }
.degrees em { z-index: 1; margin-inline-start: auto; color: var(--orange); font-style: normal; }

.section { padding: 88px 0; }
.light { background: var(--cream); }
h2 { margin: 0 0 15px; color: var(--charcoal); font-size: clamp(30px, 3.8vw, 34px); line-height: 1.35; }
h3 { color: var(--charcoal); }
.title { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-block-end: 30px; }
.title h2 { margin: 0; }
.title > a, .more { color: var(--turquoise-dark); font-size: 13px; font-weight: 800; }
.about { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: center; }
.photo { min-height: 520px; position: relative; background-size: cover; background-position: center; box-shadow: 22px 22px 0 var(--turquoise-soft); }
.photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(23,56,61,.38), transparent 55%); }
.photo span { position: absolute; z-index: 1; inset-inline-end: -26px; inset-block-end: 28px; width: 138px; padding: 18px; display: grid; background: var(--orange); color: #fff; font-size: 10px; }
.photo span b { font: 800 30px Arial; }
.about .lead, .content .lead, .article .lead { color: var(--charcoal); font-size: 18px; font-weight: 500; }
.about p { color: var(--muted); }
.checks { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 22px 0; color: var(--turquoise-dark); font-size: 12px; font-weight: 700; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.program { min-height: 310px; position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line); transition: .25s; }
.program:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.program-image { display: block; height: 170px; overflow: hidden; background: var(--mist); }
.program-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.program:hover .program-image img { transform: scale(1.04); }
.program-content { position: relative; padding: 24px; }
.program-content > b { width: 42px; height: 42px; display: grid; place-items: center; float: inline-end; background: var(--turquoise-soft); color: var(--turquoise); }
.program-content > small { color: var(--orange); font-size: 11px; font-weight: 800; }
.program h3 { min-height: 55px; margin: 8px 0; font-size: 17px; line-height: 1.6; }
.program p { min-height: 67px; margin: 0 0 14px; color: var(--muted); font-size: 13px; white-space: pre-line; }
.content .lead { white-space: pre-line; }
.program.bachelor { border-block-start: 4px solid var(--orange); }
.program.diploma { border-block-start: 4px solid var(--turquoise); }
.program.british { border-block-start: 4px solid var(--charcoal); }

.center { max-width: 700px; margin: 0 auto 35px; text-align: center; }
.center p { color: var(--muted); }
.departments .center p { text-align: center; text-align-last: center; }
.dep-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.dep-grid > a { min-height: 260px; position: relative; overflow: hidden; padding: 28px; border: 1px solid var(--line); background: #fff; transition: .25s; }
.dep-grid > a:hover { color: #fff; background: var(--turquoise-dark); transform: translateY(-5px); }
.dep-grid i { position: absolute; inset-inline-end: 12px; inset-block-start: -24px; color: var(--mist); font: 800 70px Arial; }
.dep-grid > a:hover i { color: rgba(255,255,255,.08); }
.dep-grid b { width: 48px; height: 48px; display: grid; place-items: center; background: var(--turquoise-soft); color: var(--turquoise); font-size: 20px; }
.dep-grid h3 { margin: 18px 0 8px; }
.dep-grid > a:hover h3 { color: #fff; }
.dep-grid p { color: var(--muted); font-size: 13px; }
.dep-grid > a:hover p { color: #d7eceb; }
.dep-grid span { color: var(--orange); font-size: 12px; font-weight: 800; }

.stats-band { padding: 55px 0; background: linear-gradient(120deg, var(--charcoal), var(--turquoise-dark)); color: #fff; }
.stats-band .wrap { display: grid; grid-template-columns: repeat(4, 1fr); }
.stats-band .wrap > div { display: grid; text-align: center; border-inline-end: 1px solid rgba(255,255,255,.18); }
.stats-band b { font: 800 38px Arial; color: #fff; }
.stats-band span { color: #cae0df; font-size: 11px; }

.news-grid, .news-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.news-list { grid-template-columns: repeat(2, 1fr); }
.news-grid article, .news-list article { overflow: hidden; background: #fff; border: 1px solid var(--line); }
.news-img { height: 175px; position: relative; display: grid; place-items: center; background: linear-gradient(135deg, var(--turquoise-dark), var(--charcoal)); color: #fff; }
.news-img::after { content: ''; position: absolute; width: 120px; height: 120px; border: 28px solid rgba(255,255,255,.06); border-radius: 50%; }
.news-img.has-image::after { display: none; }
.news-img img { width: 100%; height: 100%; display: block; object-fit: cover; }
.news-img span { position: absolute; z-index: 1; inset-inline-start: 15px; inset-block-start: 15px; padding: 4px 10px; background: var(--orange); font-size: 9px; }
.news-img b { z-index: 1; font: 800 25px Arial; }
.news-grid article > div:last-child, .news-list article > div:last-child { padding: 20px; }
.news-grid time, .news-list time { color: var(--orange); font-size: 11px; }
.news-grid h3, .news-list h3 { min-height: 58px; margin: 6px 0; font-size: 15px; }
.news-grid p, .news-list p { color: var(--muted); font-size: 13px; }

.page-hero { padding: 80px 0 68px; background: linear-gradient(120deg, var(--charcoal), var(--turquoise-dark)); color: #fff; }
.page-hero h1 { max-width: 950px; font-size: clamp(34px, 5vw, 58px); }
.page-hero p { max-width: 760px; color: #d2e4e3; }
.page-hero small { color: #b6d1cf; font-size: 12px; }
.page-hero .eyebrow { color: #8fe0da; }
.page-back { min-height: 36px; margin-block-end: 18px; padding: 5px 12px; border: 1px solid rgba(255,255,255,.42); border-radius: 3px; background: transparent; color: #fff; cursor: pointer; font-size: 12px; font-weight: 700; }
.page-back:hover { background: #fff; color: var(--turquoise-dark); }
.content { display: grid; grid-template-columns: 1.5fr .7fr; gap: 55px; }
.content article > p { color: var(--muted); }
.content article li { margin-block-end: 8px; color: var(--muted); }
.content aside { align-self: start; padding: 28px; background: var(--mist); border-block-start: 4px solid var(--orange); }
.content aside small { color: var(--muted); font-size: 10px; }
.content aside h3 { margin: 3px 0 20px; }
.content aside .apply, .content aside .plan-link { width: 100%; margin-block-start: 10px; }
.plan-link { border-color: var(--turquoise); color: var(--turquoise-dark); }
.program-detail-image { width: 100%; max-height: 420px; margin-block-end: 28px; object-fit: cover; }
.department-intro { width: 100%; max-width: none; margin-block-end: 48px; padding: 28px 32px; border-inline-start: 5px solid var(--orange); background: var(--mist); }
.department-intro p { margin: 0; color: var(--muted); font-size: 16px; line-height: 2; }
.sub { margin-block: 0 25px; font-size: 28px; }
.staff-title { margin-block-start: 70px; }
.degree-group { margin-block-end: 52px; }
.degree-heading { display: flex; align-items: center; gap: 12px; margin-block-end: 18px; padding-block-end: 12px; border-block-end: 1px solid var(--line); }
.degree-heading span { width: 42px; height: 42px; display: grid; place-items: center; color: var(--turquoise); background: var(--turquoise-soft); }
.degree-heading h2 { margin: 0; font-size: 25px; }
.degree-heading small { margin-inline-start: auto; color: var(--muted); }
.staff { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.staff article { padding: 24px; display: grid; align-content: start; text-align: center; border: 1px solid var(--line); background: #fff; }
.staff article > b { width: 60px; height: 60px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 50%; background: var(--turquoise-soft); color: var(--turquoise-dark); font-size: 24px; }
.staff-photo { width: 104px; height: 104px; margin: 0 auto 16px; display: block; border: 4px solid var(--turquoise-soft); border-radius: 50%; object-fit: cover; object-position: center top; }
.staff h3 { margin: 4px 0; font-size: 14px; }
.staff p { margin: 0; color: var(--muted); font-size: 12px; text-align: center; text-align-last: center; }
.staff-qualification { margin-block-start: 7px; color: var(--turquoise-dark); font-size: 11px; font-weight: 700; line-height: 1.7; }
.staff-links { display: grid; gap: 5px; margin-block-start: 12px; }
.staff-links a { color: var(--turquoise-dark); font-size: 11px; font-weight: 700; }
.staff-profile-link { min-height: 40px; margin-block-start: 16px; padding: 8px 12px; display: inline-flex; align-items: center; justify-content: center; align-self: end; border: 1px solid var(--turquoise); color: var(--turquoise-dark); font-size: 11px; font-weight: 800; transition: .2s; }
.staff-profile-link:hover { background: var(--turquoise); color: #fff; }

.faculty-profile { display: grid; gap: 65px; }
.faculty-profile-card { padding: 38px; display: grid; direction: ltr; gap: 42px; align-items: center; background: var(--mist); border-block-start: 5px solid var(--orange); }
html[dir="rtl"] .faculty-profile-card { grid-template-columns: 250px 1fr; grid-template-areas: "media info"; }
html[dir="ltr"] .faculty-profile-card { grid-template-columns: 1fr 250px; grid-template-areas: "info media"; }
.faculty-profile-media { grid-area: media; }
.faculty-profile-media img, .faculty-profile-media > b { width: 250px; height: 285px; display: grid; place-items: center; object-fit: cover; object-position: center top; background: var(--turquoise-soft); color: var(--turquoise-dark); border: 6px solid #fff; box-shadow: var(--shadow); font-size: 65px; }
.faculty-profile-info { grid-area: info; }
html[dir="rtl"] .faculty-profile-info { direction: rtl; text-align: right; }
html[dir="ltr"] .faculty-profile-info { direction: ltr; text-align: left; }
.faculty-profile-info h2 { margin: 0 0 8px; font-size: clamp(30px, 4vw, 46px); }
.faculty-profile-info > p { margin: 0; color: var(--muted); font-size: 18px; font-weight: 700; }
.faculty-qualification { margin-block-start: 20px; display: grid; gap: 4px; }
.faculty-qualification small { color: var(--muted); font-size: 11px; }
.faculty-qualification strong { color: var(--turquoise-dark); font-size: 16px; line-height: 1.8; }
.faculty-profile-actions { margin-block-start: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.faculty-profile-actions .plan-link { background: var(--turquoise-dark); color: #fff; }
.research-heading { margin-block-end: 22px; }
.research-heading h2 { margin: 0; font-size: clamp(27px, 3vw, 38px); }
.research-table { overflow-x: auto; border: 1px solid var(--line); background: #fff; }
.research-table table { width: 100%; min-width: 800px; border-collapse: collapse; }
.research-table th, .research-table td { padding: 15px 16px; text-align: start; vertical-align: top; border-block-end: 1px solid var(--line); line-height: 1.8; }
.research-table thead { background: var(--turquoise-dark); color: #fff; }
.research-table th { font-size: 12px; }
.research-table th:first-child, .research-table td:first-child { width: 58px; text-align: center; }
.research-table th:nth-child(4), .research-table td:nth-child(4) { width: 90px; white-space: nowrap; }
.research-table th:last-child, .research-table td:last-child { width: 125px; white-space: nowrap; }
.research-table td { color: var(--muted); font-size: 13px; }
.research-table td:nth-child(2) { color: var(--charcoal); font-weight: 700; }
.research-table tbody tr:nth-child(even) { background: #f7faf9; }
.research-table a { padding: 6px 10px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--turquoise); color: var(--turquoise-dark); font-weight: 800; }
.research-table a:hover { background: var(--turquoise); color: #fff; }

.filters { display: grid; grid-template-columns: 1.4fr .8fr .8fr; gap: 12px; margin-block-end: 12px; }
html[dir="rtl"] .filters { direction: rtl; }
html[dir="ltr"] .filters { direction: ltr; }
.filters input, .filters select { direction: inherit; text-align: start; }
.filters input, .filters select, form input, form textarea { width: 100%; min-height: 50px; padding: 10px 14px; border: 1px solid var(--line); background: #fff; color: var(--ink); }
.found { color: var(--muted); font-size: 11px; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.steps article { padding: 25px; border: 1px solid var(--line); }
.steps b { color: var(--orange); font: 800 28px Arial; }
.steps h3 { font-size: 15px; }
.steps p { color: var(--muted); font-size: 13px; }
.center-actions { display: flex; justify-content: center; gap: 12px; margin-block-start: 35px; }
.center-actions a { border-color: var(--turquoise); color: var(--turquoise-dark); }
.admission-content { display: grid; gap: 16px; }
.admission-content article { min-height: 140px; padding: 28px; display: grid; grid-template-columns: 62px 1fr; gap: 20px; border: 1px solid var(--line); background: #fff; }
.admission-content article > b { width: 62px; height: 62px; display: grid; place-items: center; background: var(--turquoise-soft); color: var(--turquoise-dark); font: 800 20px Arial; }
.admission-content h2 { margin: 0 0 8px; font-size: 25px; }
.admission-content p { margin: 0; color: var(--muted); white-space: pre-line; }
.admissions-welcome { padding: 30px 32px; border-inline-start: 5px solid var(--orange); background: var(--mist); }
.admissions-welcome h2 { margin-block-end: 10px; }
.admissions-welcome p { max-width: 940px; margin: 0; color: var(--muted); white-space: pre-line; }
.admission-services { margin-block-start: 70px; }
.admission-services > h2 { margin-block-end: 22px; font-size: 29px; }
.admission-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.admission-links a { min-height: 96px; padding: 20px; display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); background: #fff; transition: .2s; }
.admission-links a:hover { transform: translateY(-4px); border-color: var(--turquoise); box-shadow: var(--shadow); }
.admission-links b { color: var(--orange); font: 800 22px Arial; }
.admission-links span { color: var(--charcoal); font-weight: 800; }
.admission-links i { margin-inline-start: auto; color: var(--turquoise); font-style: normal; }
.accordion { margin-block-end: 12px; border: 1px solid var(--line); }
.accordion summary { padding: 18px 22px; cursor: pointer; color: var(--charcoal); font-weight: 800; }
.accordion ul { margin: 0; padding: 0 38px 22px; color: var(--muted); }
.guide { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.guide a { padding: 24px; display: flex; align-items: center; gap: 18px; border: 1px solid var(--line); }
.guide a > b { width: 55px; height: 55px; display: grid; place-items: center; color: #fff; background: var(--orange); font: 800 12px Arial; }
.guide span { display: grid; }
.guide small { color: var(--turquoise-dark); }
.notice { padding: 16px 20px; color: var(--turquoise-dark); background: var(--turquoise-soft); }
.calendar { border: 1px solid var(--line); }
.calendar > div { padding: 15px 20px; display: flex; justify-content: space-between; gap: 20px; border-block-end: 1px solid var(--line); }
.calendar span { color: var(--muted); }
.academic-calendar { display: grid; gap: 48px; margin-block-start: 28px; }
.academic-calendar > section > h2 { margin: 0 0 14px; padding-block-end: 12px; border-block-end: 4px solid var(--orange); font-size: 27px; }
.calendar-table { overflow-x: auto; border: 1px solid var(--line); background: #fff; }
.calendar-table table { width: 100%; min-width: 720px; border-collapse: collapse; }
.calendar-table th, .calendar-table td { padding: 16px 18px; text-align: start; border-block-end: 1px solid var(--line); vertical-align: top; }
.calendar-table thead { background: var(--turquoise-dark); color: #fff; }
.calendar-table th { font-size: 13px; }
.calendar-table th:first-child, .calendar-table td:first-child { width: 22%; white-space: nowrap; }
.calendar-table th:nth-child(2), .calendar-table td:nth-child(2) { width: 22%; }
.calendar-table td { color: var(--muted); }
.calendar-table td:last-child { color: var(--charcoal); font-weight: 600; }
.calendar-table tbody tr:nth-child(even) { background: #f7faf9; }
.administrative-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.administrative-grid > a { min-height: 270px; position: relative; overflow: hidden; padding: 30px; border: 1px solid var(--line); background: #fff; transition: .25s; }
.administrative-grid > a:hover { transform: translateY(-5px); border-color: var(--turquoise); box-shadow: var(--shadow); }
.administrative-grid i { position: absolute; inset-inline-end: 12px; inset-block-start: -24px; color: var(--mist); font: 800 72px Arial; }
.administrative-grid b { width: 50px; height: 50px; display: grid; place-items: center; background: var(--turquoise-soft); color: var(--turquoise); font-size: 22px; }
.administrative-grid h2 { margin: 20px 0 8px; font-size: 22px; }
.administrative-grid p { color: var(--muted); font-size: 13px; }
.administrative-grid span { color: var(--orange); font-size: 12px; font-weight: 800; }
.manager-message { margin-block-end: 55px; padding: 34px; display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 32px; background: var(--mist); border-block-start: 4px solid var(--orange); }
.manager-message > img, .manager-message > b { width: 150px; height: 150px; display: grid; place-items: center; border-radius: 50%; object-fit: cover; object-position: center top; background: var(--turquoise-soft); color: var(--turquoise-dark); font-size: 42px; }
.manager-message h2 { margin: 0 0 8px; font-size: 26px; }
.manager-message p { margin: 0; color: var(--muted); white-space: pre-line; }
.administrative-team article.manager { border-block-start: 4px solid var(--orange); }
.administrative-team article > small { display: inline-block; margin-block-end: 5px; padding: 3px 8px; border-radius: 10px; background: #fff0e5; color: #c45d15; font-size: 9px; font-weight: 800; }
.magazine-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.magazine-grid article { min-height: 220px; overflow: hidden; display: grid; grid-template-columns: 95px 1fr; border: 1px solid var(--line); background: #fff; }
.magazine-grid article > b { display: grid; place-items: center; background: linear-gradient(155deg, var(--turquoise-dark), var(--orange)); color: #fff; font: 800 16px Arial; writing-mode: vertical-rl; letter-spacing: 4px; }
.magazine-grid article > div { padding: 25px; display: grid; align-content: center; }
.magazine-grid small { color: var(--muted); }
.magazine-grid time { color: var(--orange); font: 700 12px Arial; }
.magazine-grid h2 { margin: 10px 0 18px; font-size: 23px; }
.magazine-grid a { color: var(--turquoise-dark); font-size: 12px; font-weight: 800; }
.empty-public { padding: 35px; color: var(--muted); background: var(--mist); text-align: center; }
.contact { display: grid; grid-template-columns: .75fr 1.25fr; gap: 20px; }
.contact > aside { padding: 30px; display: grid; align-content: start; background: linear-gradient(145deg, var(--charcoal), var(--turquoise-dark)); color: #fff; }
.contact > aside h2 { color: #fff; }
.contact > aside a { margin-block-start: 8px; color: #dff3f2; }
.contact-phones { display: grid; gap: 4px; }
.contact > aside .email-link { display: block; margin-block-start: 14px; padding-block-start: 12px; border-block-start: 1px solid rgba(255,255,255,.2); }
html[dir="rtl"] .contact > aside .email-link { text-align: right; }
html[dir="ltr"] .contact > aside .email-link { text-align: left; }
.contact > article { padding: 30px; border: 1px solid var(--line); }
form > div { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
form label { display: grid; gap: 5px; margin-block-end: 12px; font-size: 13px; font-weight: 700; }
form button { min-height: 48px; padding: 0 24px; border: 0; background: var(--orange); color: #fff; cursor: pointer; font-weight: 800; }
.article { max-width: 820px; margin: auto; }
.article-image { width: 100%; max-height: 480px; margin-block-end: 28px; display: block; object-fit: cover; }
.article time { color: var(--orange); font-size: 10px; }
.article p { color: var(--muted); }
.sitemap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.sitemap article { padding: 24px; display: grid; align-content: start; border: 1px solid var(--line); }
.sitemap h3 { color: var(--turquoise-dark); }
.sitemap a { padding: 5px 0; color: var(--muted); font-size: 11px; }

footer { background: var(--dark); color: #c8dada; }
.cta { background: var(--orange); color: #fff; }
.cta .wrap { min-height: 145px; display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.cta h2 { margin: 2px 0; color: #fff; font-size: clamp(25px, 3vw, 36px); }
.cta a { padding: 13px 22px; border: 1px solid rgba(255,255,255,.7); font-size: 11px; font-weight: 800; }
.foot { padding: 62px 0; display: grid; grid-template-columns: 1.4fr .7fr .9fr; gap: 60px; }
.foot section { display: grid; align-content: start; }
.foot h3 { margin: 10px 0 14px; color: #fff; font-size: 18px; }
.foot p, .foot a { color: #b8cece; font-size: 13px; line-height: 1.9; }
.footer-brand { width: 190px; min-height: 90px; display: grid; place-items: center; }
.footer-logo { width: 185px; max-height: 90px; object-fit: contain; object-position: center; }
.footer-identity p { max-width: 470px; margin-block-start: 18px; }
.footer-phones { display: grid; gap: 4px; }
.contact-phone { display: flex; align-items: baseline; gap: 7px; direction: inherit; }
.contact-phone bdi { direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.footer-email { width: 100%; margin-block-start: 4px; }
html[dir="rtl"] .contact-phone { justify-content: flex-start; text-align: right; }
html[dir="ltr"] .contact-phone { justify-content: flex-start; text-align: left; }
.copy { border-block-start: 1px solid rgba(255,255,255,.12); }
.copy .wrap { min-height: 58px; display: flex; align-items: center; justify-content: space-between; font-size: 11px; }
.copy a { color: #75d3cd; }

html[dir="ltr"] .hero h1, html[dir="ltr"] .page-hero h1 { letter-spacing: -.8px; }
html[dir="ltr"] body { font-family: 'Tajawal', Arial, Tahoma, sans-serif; }

@media (max-width: 1050px) {
  .brand { width: 155px; min-width: 155px; }
  .brand-logo { width: 150px; }
  .nav nav { gap: 11px; font-size: 12px; }
  .staff { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1100px) {
  .top .wrap { justify-content: center; flex-wrap: wrap; gap: 8px 16px; padding: 7px 0; }
  header { height: 76px; }
  .brand { width: 130px; min-width: 130px; }
  .brand-logo { width: 128px; height: 66px; }
  .menu { display: block; }
  .nav nav { display: none; position: absolute; inset-inline: 0; inset-block-start: 76px; height: auto; max-height: calc(100vh - 76px); overflow-y: auto; padding: 12px 18px 22px; background: #fff; box-shadow: var(--shadow); }
  body.menu-open .nav nav { display: grid; }
  .nav nav > a, .drop { min-height: 45px; height: auto; border-block-end: 1px solid var(--line); }
  .nav nav > a::after { display: none; }
  .drop { display: grid; }
  .drop > .drop-label { text-align: start; padding: 0; min-height: 42px; }
  .drop > div { position: static; width: 100%; padding: 0 12px 10px; display: grid; border: 0; box-shadow: none; }
  .hero, .hero-in { min-height: 560px; }
  .hero h1 { font-size: 45px; }
  .degrees { margin-block-start: 0; }
  .degrees > .wrap { width: 100%; grid-template-columns: 1fr; }
  .degrees a { min-height: 95px; }
  .about, .content, .contact { grid-template-columns: 1fr; }
  .about { gap: 55px; }
  .photo { min-height: 420px; }
  .cards, .dep-grid, .news-grid, .administrative-grid, .magazine-grid { grid-template-columns: repeat(2, 1fr); }
  .admission-links { grid-template-columns: repeat(2, 1fr); }
  .news-list { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .staff { grid-template-columns: repeat(2, 1fr); }
  html[dir="rtl"] .faculty-profile-card, html[dir="ltr"] .faculty-profile-card { grid-template-columns: 1fr; grid-template-areas: "media" "info"; }
  .faculty-profile-media { justify-self: center; }
  .foot { grid-template-columns: 1fr 1fr; gap: 35px; }
  .foot section:first-child { grid-column: 1/-1; }
  .sitemap { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 561px) and (max-width: 1100px) {
  .wrap { width: min(calc(100% - 40px), 1180px); }
  .foot { padding-block: 46px; }
  .footer-identity p { max-width: none; }
  .cta .wrap { padding-block: 24px; }
}

@media (max-width: 560px) {
  .wrap { width: min(calc(100% - 24px), 1180px); }
  .top { font-size: 10px; }
  .top .wrap { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "social social" "phone phone" "portal language" "apply apply"; gap: 7px 10px; padding: 8px 12px; text-align: center; }
  .top-social { grid-area: social; justify-content: center; }
  .top .phone-link { grid-area: phone; justify-self: center; }
  .top .external-link:not(.orange) { grid-area: portal; justify-self: stretch; }
  .top .orange { grid-area: apply; justify-self: stretch; }
  .top .language { grid-area: language; position: static; min-width: 58px; margin: 0; justify-self: stretch; }
  .hero, .hero-in { min-height: 520px; }
  .hero h1 { font-size: 36px; line-height: 1.35; }
  .hero p { font-size: 14px; }
  .actions { display: grid; }
  .actions a { width: 100%; }
  .section { padding: 58px 0; }
  .title { align-items: start; }
  .title > a { white-space: nowrap; }
  .cards, .dep-grid, .news-grid, .steps, .staff, .guide, .sitemap, .admission-links, .administrative-grid, .magazine-grid { grid-template-columns: 1fr; }
  .admission-content article { grid-template-columns: 48px 1fr; padding: 20px; }
  .admission-content article > b { width: 48px; height: 48px; font-size: 16px; }
  .admissions-welcome { padding: 22px 20px; }
  .manager-message { padding: 24px; grid-template-columns: 1fr; text-align: center; }
  .manager-message > img, .manager-message > b { margin-inline: auto; }
  .stats-band .wrap { grid-template-columns: repeat(2, 1fr); gap: 22px 0; }
  .stats-band .wrap > div:nth-child(2) { border-inline-end: 0; }
  .photo { min-height: 340px; box-shadow: 12px 12px 0 var(--turquoise-soft); }
  .photo span { inset-inline-end: -5px; }
  .filters { grid-template-columns: 1fr; }
  .page-hero { padding: 55px 0; }
  .page-hero h1 { font-size: 35px; }
  .department-intro { margin-block-end: 38px; padding: 22px 20px; }
  .department-intro p { font-size: 14px; line-height: 1.9; }
  .degree-heading { flex-wrap: wrap; }
  .degree-heading small { width: 100%; margin-inline-start: 54px; }
  .faculty-profile { gap: 45px; }
  .faculty-profile-card { padding: 22px; gap: 25px; text-align: center; }
  .faculty-profile-media img, .faculty-profile-media > b { width: 185px; height: 215px; }
  .faculty-profile-actions { display: grid; }
  .faculty-profile-actions a { width: 100%; }
  .research-heading h2 { font-size: 26px; }
  .research-table { overflow: visible; border: 0; background: transparent; }
  .research-table table, .research-table tbody, .research-table tr, .research-table td { width: 100%; min-width: 0; display: block; }
  .research-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .research-table tr { margin-block-end: 14px; padding: 9px 15px; border: 1px solid var(--line); border-block-start: 4px solid var(--turquoise); background: #fff; box-shadow: 0 7px 22px rgba(20, 52, 57, .06); }
  .research-table tbody tr:nth-child(even) { background: #fff; }
  .research-table td, .research-table td:first-child, .research-table td:nth-child(4), .research-table td:last-child { width: 100%; padding: 10px 0; display: grid; grid-template-columns: minmax(95px, 36%) 1fr; gap: 12px; text-align: start; white-space: normal; border-block-end: 1px solid var(--line); }
  .research-table td:last-child { border-block-end: 0; }
  .research-table td::before { content: attr(data-label); color: var(--charcoal); font-size: 11px; font-weight: 800; }
  .research-table td > span, .research-table td > a { justify-self: start; }
  form > div { grid-template-columns: 1fr; gap: 0; }
  .calendar > div { display: grid; gap: 2px; }
  .center-actions { display: grid; }
  .cta .wrap { padding: 24px 0; display: grid; text-align: center; }
  .foot { grid-template-columns: 1fr; gap: 30px; }
  .foot section:first-child { grid-column: auto; }
  .copy .wrap { padding: 14px 0; display: grid; justify-content: center; gap: 5px; text-align: center; }
}