/* ==========================================================================
   CITY INTERNATIONAL SCHOOLS (CIS) — MODERN DESIGN SYSTEM (v2.6.0)
   Radical Visual Redesign inspired by madares.sa (Clean UX, Light Spacing)
   and nordangliaeducation.com (Prestigious Academy Feel)
   
   Palette:
   - Primary: Radiant Sky Blue (#0284C7, #0EA5E9, #38BDF8)
   - Secondary: Turquoise / Teal (#0D9488, #14B8A6, #2DD4BF)
   - Accent: Warm Coral (#F43F5E, #FB7185, #FFE4E6)
   - Backgrounds: Crisp Pure White (#FFFFFF) & Soft Sky (#F0F9FF, #F8FAFC)
   - Typography: Deep Dark Slate (#0F172A, #1E293B, #334155)
   ========================================================================== */

:root {
	/* Brand Sky Blue */
	--cis-sky-dark: #0369A1;
	--cis-sky: #0284C7;
	--cis-sky-light: #0EA5E9;
	--cis-sky-tint: #38BDF8;
	--cis-sky-soft: #E0F2FE;
	--cis-sky-bg: #F0F9FF;

	/* Brand Turquoise / Teal */
	--cis-teal-dark: #0F766E;
	--cis-teal: #0D9488;
	--cis-teal-light: #14B8A6;
	--cis-teal-tint: #2DD4BF;
	--cis-teal-soft: #CCFBF1;
	--cis-teal-bg: #F0FDFA;

	/* Brand Warm Coral */
	--cis-coral-dark: #E11D48;
	--cis-coral: #F43F5E;
	--cis-coral-light: #FB7185;
	--cis-coral-tint: #FDA4AF;
	--cis-coral-soft: #FFE4E6;
	--cis-coral-bg: #FFF1F2;

	/* Legacy Mapping for Perfect Component Backward Compatibility */
	--cis-navy-dark: #0369A1;
	--cis-navy: #0284C7;
	--cis-navy-light: #0EA5E9;
	--cis-blue: #0284C7;
	--cis-blue-hover: #0369A1;
	--cis-blue-light: #F0F9FF;
	--cis-gold: #F43F5E;
	--cis-gold-light: #FB7185;
	--cis-gold-tint: #FFE4E6;
	--cis-text-dark: #0F172A;
	--cis-text-muted: #64748B;
	--cis-border: #E2E8F0;
	--cis-border-focus: #0284C7;

	/* Canvas & Cards */
	--cis-canvas: #F8FAFC;
	--cis-canvas-sky: #F0F9FF;
	--cis-card-bg: #FFFFFF;
	--cis-border-color: #E2E8F0;
	--cis-border-light: #F1F5F9;
	--cis-border-sky: #BAE6FD;
	--cis-title-color: #0F172A;
	--cis-body-color: #334155;
	--cis-muted-color: #64748B;

	/* Typography */
	--cis-font-heading: 'Cairo', 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--cis-font-body: 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--cis-font-latin: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

	/* Modern Soft Multi-layer Shadows */
	--cis-shadow-xs: 0 1px 3px rgba(15, 23, 42, 0.04);
	--cis-shadow-sm: 0 4px 14px rgba(2, 132, 199, 0.06);
	--cis-shadow-md: 0 10px 30px rgba(2, 132, 199, 0.09);
	--cis-shadow-lg: 0 20px 45px rgba(15, 23, 42, 0.10);
	--cis-shadow-glow-sky: 0 10px 30px rgba(2, 132, 199, 0.28);
	--cis-shadow-glow-coral: 0 10px 28px rgba(244, 63, 94, 0.35);

	/* Radii */
	--cis-radius-sm: 10px;
	--cis-radius-md: 18px;
	--cis-radius-lg: 26px;
	--cis-radius-full: 9999px;
}

/* ==========================================================================
   GLOBAL RESET & TYPOGRAPHY
   ========================================================================== */
html {
	direction: rtl;
	scroll-behavior: smooth;
	background-color: #FFFFFF;
}

body {
	font-family: var(--cis-font-body) !important;
	color: var(--cis-body-color) !important;
	background-color: #FFFFFF !important;
	line-height: 1.75;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6,
.city-hero__headline,
.city-section-title,
.city-page-title,
.city-qa-card__title,
.city-program-card__title,
.city-branch-card__title {
	font-family: var(--cis-font-heading) !important;
	color: var(--cis-title-color) !important;
	font-weight: 800;
	letter-spacing: -0.3px;
}

/* Container */
.city-container {
	width: 100%;
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 24px;
}

.city-header .city-container {
	max-width: 1420px;
}

/* ==========================================================================
   1. HEADER & NAVIGATION (Luminous Crisp Glass)
   ========================================================================== */
.city-header {
	background: rgba(255, 255, 255, 0.97) !important;
	backdrop-filter: blur(16px) !important;
	-webkit-backdrop-filter: blur(16px) !important;
	border-bottom: 1px solid rgba(186, 230, 253, 0.45) !important;
	box-shadow: 0 4px 20px rgba(2, 132, 199, 0.05) !important;
	position: sticky;
	top: 0;
	z-index: 1000;
	transition: all 0.25s ease !important;
}

.city-header__bar {
	min-height: 84px !important;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.city-header__brand {
	display: flex;
	align-items: center;
	gap: 14px;
	text-decoration: none !important;
}

.city-header__logo {
	width: 52px !important;
	height: 52px !important;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(2, 132, 199, 0.12);
	transition: transform 0.25s ease;
	object-fit: cover;
}

.city-header__brand:hover .city-header__logo {
	transform: scale(1.05);
}

.city-header__name {
	font-size: 18.5px !important;
	font-weight: 900 !important;
	color: var(--cis-sky-dark) !important;
	display: block;
	line-height: 1.25;
}

.city-header__tagline {
	font-family: var(--cis-font-latin) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	color: var(--cis-teal) !important;
	letter-spacing: 0.5px;
	display: block;
}

.city-header__menu {
	display: flex !important;
	align-items: center !important;
	gap: 4px !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.city-header__menu li a {
	display: inline-block !important;
	padding: 8px 12px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	white-space: nowrap !important;
	color: var(--cis-title-color) !important;
	border-radius: var(--cis-radius-full) !important;
	text-decoration: none !important;
	transition: all 0.2s ease !important;
}

.city-header__menu li a:hover {
	color: var(--cis-sky) !important;
	background: var(--cis-sky-bg) !important;
}

.city-header__menu li.current-menu-item a,
.city-header__menu li a[aria-current="page"] {
	color: var(--cis-sky) !important;
	background: var(--cis-sky-bg) !important;
	box-shadow: inset 0 0 0 1px var(--cis-border-sky) !important;
}

.city-header__actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* Header Buttons */
.city-btn--header-portal {
	background: #FFFFFF !important;
	color: var(--cis-sky) !important;
	border: 1.5px solid var(--cis-border-sky) !important;
	padding: 9px 18px !important;
	border-radius: var(--cis-radius-full) !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	text-decoration: none !important;
	transition: all 0.2s ease !important;
}

.city-btn--header-portal:hover {
	background: var(--cis-sky-bg) !important;
	border-color: var(--cis-sky) !important;
	color: var(--cis-sky-dark) !important;
	transform: translateY(-1px);
}

.city-btn--header-apply {
	background: linear-gradient(135deg, var(--cis-coral) 0%, var(--cis-coral-dark) 100%) !important;
	color: #FFFFFF !important;
	padding: 10px 22px !important;
	border-radius: var(--cis-radius-full) !important;
	font-weight: 800 !important;
	font-size: 14px !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	box-shadow: var(--cis-shadow-glow-coral) !important;
	text-decoration: none !important;
	border: none !important;
	transition: all 0.25s ease !important;
}

.city-btn--header-apply:hover {
	background: linear-gradient(135deg, var(--cis-coral-light) 0%, var(--cis-coral) 100%) !important;
	transform: translateY(-2px);
	box-shadow: 0 12px 32px rgba(244, 63, 94, 0.45) !important;
}

/* ==========================================================================
   2. HERO SECTION (Luminous, Airy, High Contrast)
   ========================================================================== */
.city-hero {
	position: relative;
	background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 45%, #F8FAFC 100%) !important;
	overflow: hidden;
	color: var(--cis-title-color) !important;
	border-bottom: 1px solid var(--cis-border-sky);
}

.city-hero__backdrop {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.6;
}

.city-hero__overlay {
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 80% 20%, rgba(56, 189, 248, 0.25), transparent 50%),
	            radial-gradient(circle at 20% 80%, rgba(204, 251, 241, 0.4), transparent 50%),
	            radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.8), transparent 70%) !important;
}

.city-hero__layout {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 52px;
	align-items: center;
	position: relative;
	z-index: 3;
	padding: 70px 0 110px;
}

.city-hero__badge {
	background: #FFFFFF !important;
	border: 1.5px solid var(--cis-border-sky) !important;
	color: var(--cis-sky-dark) !important;
	font-size: 14px !important;
	font-weight: 800 !important;
	padding: 8px 20px !important;
	border-radius: var(--cis-radius-full) !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 10px !important;
	box-shadow: 0 4px 14px rgba(2, 132, 199, 0.08);
	margin-bottom: 22px !important;
}

.city-hero__badge-dot {
	width: 9px !important;
	height: 9px !important;
	background: var(--cis-coral) !important;
	border-radius: 50% !important;
	box-shadow: 0 0 10px var(--cis-coral) !important;
}

.city-hero__headline {
	font-size: 50px !important;
	font-weight: 900 !important;
	line-height: 1.25 !important;
	color: var(--cis-title-color) !important;
	margin-bottom: 20px !important;
}

.city-hero__statement {
	font-size: 18.5px !important;
	line-height: 1.85 !important;
	color: var(--cis-body-color) !important;
	margin-bottom: 34px !important;
	max-width: 620px;
}

.city-hero__cta-group {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 38px;
}

.city-btn--hero-apply {
	background: linear-gradient(135deg, var(--cis-coral) 0%, var(--cis-coral-dark) 100%) !important;
	color: #FFFFFF !important;
	font-size: 16px !important;
	font-weight: 800 !important;
	padding: 16px 36px !important;
	border-radius: var(--cis-radius-full) !important;
	box-shadow: var(--cis-shadow-glow-coral) !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 12px !important;
	text-decoration: none !important;
	transition: all 0.25s ease !important;
}

.city-btn--hero-apply:hover {
	background: linear-gradient(135deg, var(--cis-coral-light) 0%, var(--cis-coral) 100%) !important;
	color: #FFFFFF !important;
	transform: translateY(-3px);
	box-shadow: 0 14px 36px rgba(244, 63, 94, 0.45) !important;
}

.city-btn--hero-portal {
	background: #FFFFFF !important;
	color: var(--cis-sky-dark) !important;
	border: 2px solid var(--cis-border-sky) !important;
	font-size: 15.5px !important;
	font-weight: 800 !important;
	padding: 15px 30px !important;
	border-radius: var(--cis-radius-full) !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 10px !important;
	text-decoration: none !important;
	box-shadow: 0 4px 14px rgba(2, 132, 199, 0.08) !important;
	transition: all 0.25s ease !important;
}

.city-btn--hero-portal:hover {
	background: var(--cis-sky-bg) !important;
	border-color: var(--cis-sky) !important;
	color: var(--cis-sky) !important;
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(2, 132, 199, 0.15) !important;
}

.city-hero__pillars {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}

.city-hero__pillar-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 700;
	color: var(--cis-sky-dark);
	background: rgba(255, 255, 255, 0.85);
	padding: 7px 16px;
	border-radius: var(--cis-radius-full);
	border: 1px solid var(--cis-border-sky);
}

.city-hero__pillar-item svg {
	color: var(--cis-teal);
}

/* Hero Visual Showcase */
.city-hero__visual-wrap {
	position: relative;
}

.city-hero__image-card {
	position: relative;
	border-radius: var(--cis-radius-lg) !important;
	overflow: hidden;
	border: 4px solid #FFFFFF !important;
	box-shadow: 0 24px 60px rgba(2, 132, 199, 0.16) !important;
	background: #E0F2FE !important;
	aspect-ratio: 4/3;
}

.city-hero__image {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center 30% !important;
	transition: transform 0.5s ease !important;
}

.city-hero__image-card:hover .city-hero__image {
	transform: scale(1.04);
}

.city-hero__floating-badge {
	position: absolute;
	bottom: -22px;
	left: -20px;
	background: #FFFFFF !important;
	border-radius: var(--cis-radius-md) !important;
	padding: 14px 22px !important;
	box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12) !important;
	border: 1.5px solid var(--cis-border-sky) !important;
	display: flex;
	align-items: center;
	gap: 14px;
	z-index: 5;
}

.city-hero__floating-icon {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--cis-coral-soft) !important;
	color: var(--cis-coral) !important;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.city-hero__floating-text strong {
	font-size: 16.5px;
	font-weight: 800;
	color: var(--cis-sky-dark);
	display: block;
}

.city-hero__floating-text span {
	font-size: 12.5px;
	color: var(--cis-muted-color);
	font-weight: 600;
}

/* ==========================================================================
   3. QUICK ACCESS (5 Modern Floating Cards)
   ========================================================================== */
.city-quick-access {
	margin-top: -50px !important;
	margin-bottom: 50px !important;
	position: relative;
	z-index: 10;
}

.city-quick-access__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr) !important;
	gap: 18px !important;
}

.city-qa-card {
	background: #FFFFFF !important;
	border: 1.5px solid var(--cis-border-light) !important;
	border-radius: var(--cis-radius-md) !important;
	padding: 26px 20px !important;
	text-decoration: none !important;
	box-shadow: var(--cis-shadow-md) !important;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	transition: all 0.28s ease !important;
	position: relative;
	overflow: hidden;
}

.city-qa-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--cis-sky), var(--cis-teal));
	opacity: 0;
	transition: opacity 0.25s ease;
}

.city-qa-card:hover {
	transform: translateY(-8px) !important;
	box-shadow: 0 20px 45px rgba(2, 132, 199, 0.14) !important;
	border-color: var(--cis-border-sky) !important;
}

.city-qa-card:hover::before {
	opacity: 1;
}

.city-qa-card__icon-box {
	width: 58px;
	height: 58px;
	border-radius: 16px;
	background: var(--cis-sky-bg);
	color: var(--cis-sky);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
	transition: all 0.25s ease;
	border: 1px solid var(--cis-border-sky);
}

.city-qa-card:hover .city-qa-card__icon-box {
	background: var(--cis-sky);
	color: #FFFFFF;
	transform: scale(1.08);
	box-shadow: var(--cis-shadow-glow-sky);
}

.city-qa-card--admissions:hover .city-qa-card__icon-box {
	background: var(--cis-coral);
	color: #FFFFFF;
	box-shadow: var(--cis-shadow-glow-coral);
}

.city-qa-card--academics:hover .city-qa-card__icon-box {
	background: var(--cis-teal);
	color: #FFFFFF;
}

.city-qa-card__title {
	font-size: 17px !important;
	font-weight: 800 !important;
	color: var(--cis-title-color) !important;
	margin: 0 0 8px !important;
}

.city-qa-card__desc {
	font-size: 13.5px !important;
	color: var(--cis-muted-color) !important;
	line-height: 1.6 !important;
	margin: 0 0 14px !important;
}

.city-qa-card__link {
	font-size: 13.5px !important;
	font-weight: 800 !important;
	color: var(--cis-sky) !important;
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* ==========================================================================
   4. SECTION HEADERS & BADGES
   ========================================================================== */
.city-section-header {
	margin-bottom: 50px;
}

.city-section-badge {
	display: inline-block;
	background: var(--cis-sky-bg) !important;
	color: var(--cis-sky) !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	padding: 6px 18px !important;
	border-radius: var(--cis-radius-full) !important;
	margin-bottom: 14px !important;
	letter-spacing: 0.3px;
	border: 1px solid var(--cis-border-sky);
}

.city-section-title {
	font-size: 36px !important;
	font-weight: 900 !important;
	color: var(--cis-title-color) !important;
	margin: 0 0 16px !important;
	line-height: 1.3 !important;
}

.city-section-subtitle {
	font-size: 17px !important;
	color: var(--cis-muted-color) !important;
	max-width: 720px;
	margin: 0 auto !important;
	line-height: 1.8 !important;
}

/* ==========================================================================
   5. ABOUT THE SCHOOL SECTION
   ========================================================================== */
.city-about-section {
	padding: 90px 0 !important;
	background: linear-gradient(180deg, #FFFFFF 0%, #F0F9FF 50%, #E8F4FC 100%) !important;
}

.city-about__grid {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 48px;
	align-items: center;
}

.city-about__lead-title {
	font-size: 26px !important;
	font-weight: 800 !important;
	color: var(--cis-title-color) !important;
	margin-bottom: 16px !important;
}

.city-about__lead-text,
.city-about__lead-sub {
	font-size: 16px !important;
	line-height: 1.85 !important;
	color: var(--cis-body-color) !important;
	margin-bottom: 16px !important;
}

.city-vision-callout {
	background: var(--cis-sky-bg) !important;
	border-right: 4px solid var(--cis-sky) !important;
	border-radius: var(--cis-radius-sm) !important;
	padding: 22px 24px !important;
	margin: 26px 0 !important;
	display: flex;
	gap: 18px;
	align-items: flex-start;
	border: 1px solid var(--cis-border-sky);
	border-right-width: 4px;
}

.city-vision-callout__icon {
	color: var(--cis-sky);
	flex-shrink: 0;
	margin-top: 2px;
}

.city-vision-callout__content h4 {
	font-size: 17.5px !important;
	font-weight: 800 !important;
	color: var(--cis-sky-dark) !important;
	margin: 0 0 6px !important;
}

.city-vision-callout__content p {
	font-size: 14.5px !important;
	color: var(--cis-body-color) !important;
	margin: 0 !important;
	line-height: 1.7 !important;
}

.city-about__image-wrap {
	border-radius: var(--cis-radius-lg) !important;
	overflow: hidden;
	box-shadow: 0 20px 50px rgba(2, 132, 199, 0.12);
	border: 3px solid #FFFFFF;
	aspect-ratio: 4/3;
	margin-bottom: 24px;
}

.city-about__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.city-about__image-wrap:hover .city-about__image {
	transform: scale(1.03);
}

.city-about__cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.city-pillar-card {
	background: var(--cis-canvas) !important;
	border: 1.5px solid var(--cis-border-color) !important;
	border-radius: var(--cis-radius-md) !important;
	padding: 24px !important;
	transition: all 0.25s ease;
}

.city-pillar-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--cis-shadow-sm);
	border-color: var(--cis-border-sky) !important;
	background: #FFFFFF !important;
}

.city-pillar-card__icon {
	color: var(--cis-teal);
	margin-bottom: 12px;
}

.city-pillar-card__title {
	font-size: 17px !important;
	font-weight: 800 !important;
	color: var(--cis-title-color) !important;
	margin: 0 0 8px !important;
}

.city-pillar-card__text {
	font-size: 13.5px !important;
	color: var(--cis-body-color) !important;
	line-height: 1.7 !important;
	margin: 0 !important;
}

/* 6 School Goals Grid */
.city-goals-wrapper {
	margin-top: 70px;
	padding-top: 50px;
	border-top: 1px solid var(--cis-border-light);
}

.city-goals-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 22px !important;
}

.city-goal-card {
	background: var(--cis-canvas-sky) !important;
	border: 1.5px solid var(--cis-border-sky) !important;
	border-radius: var(--cis-radius-md) !important;
	padding: 28px 24px !important;
	position: relative;
	transition: all 0.25s ease;
}

.city-goal-card:hover {
	background: #FFFFFF !important;
	transform: translateY(-5px);
	box-shadow: 0 16px 36px rgba(2, 132, 199, 0.1);
	border-color: var(--cis-sky);
}

.city-goal-card h4 {
	color: var(--cis-sky-dark) !important;
	font-size: 18px !important;
	font-weight: 800 !important;
	margin: 0 0 10px !important;
}

.city-goal-card p {
	color: var(--cis-body-color) !important;
	font-size: 14px !important;
	line-height: 1.75 !important;
	margin: 0 !important;
}

/* ==========================================================================
   6. ACADEMIC PROGRAMS (Interactive Tabs & Rich Stage Cards)
   ========================================================================== */
.city-academics-section {
	padding: 90px 0 !important;
	background: linear-gradient(180deg, #EFF6FF 0%, #DBEAFE 50%, #E0F2FE 100%) !important;
}

.city-academics-tabs__nav {
	display: flex;
	justify-content: center;
	gap: 14px;
	margin-bottom: 40px;
}

.city-tab-btn {
	background: #FFFFFF !important;
	color: var(--cis-body-color) !important;
	border: 1.5px solid var(--cis-border-color) !important;
	padding: 14px 28px !important;
	border-radius: var(--cis-radius-full) !important;
	font-size: 16px !important;
	font-weight: 800 !important;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	transition: all 0.25s ease;
	box-shadow: var(--cis-shadow-xs);
}

.city-tab-btn:hover {
	color: var(--cis-sky);
	border-color: var(--cis-border-sky);
}

.city-tab-btn.active {
	background: var(--cis-sky) !important;
	color: #FFFFFF !important;
	border-color: var(--cis-sky) !important;
	box-shadow: var(--cis-shadow-glow-sky) !important;
}

.city-tab-content {
	display: none;
}

.city-tab-content.active {
	display: block;
	animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

.city-programs-grid {
	display: grid;
	gap: 24px;
}

.city-programs-grid--3 {
	grid-template-columns: repeat(3, 1fr) !important;
}

.city-programs-grid--4 {
	grid-template-columns: repeat(4, 1fr) !important;
}

.city-program-card {
	background: #FFFFFF !important;
	border: 1.5px solid var(--cis-border-color) !important;
	border-radius: var(--cis-radius-md) !important;
	padding: 24px !important;
	box-shadow: var(--cis-shadow-sm) !important;
	display: flex;
	flex-direction: column;
	transition: all 0.3s ease !important;
	overflow: hidden;
}

.city-program-card:hover {
	transform: translateY(-8px) !important;
	box-shadow: 0 20px 45px rgba(2, 132, 199, 0.12) !important;
	border-color: var(--cis-border-sky) !important;
}

.city-program-card__thumb {
	height: 190px !important;
	margin: -24px -24px 20px -24px !important;
	overflow: hidden;
}

.city-program-card__thumb img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	transition: transform 0.4s ease;
}

.city-program-card:hover .city-program-card__thumb img {
	transform: scale(1.05);
}

.city-program-card__badge {
	font-size: 11.5px !important;
	font-weight: 800 !important;
	color: var(--cis-teal) !important;
	background: var(--cis-teal-soft) !important;
	padding: 4px 12px !important;
	border-radius: var(--cis-radius-full) !important;
	display: inline-block;
	align-self: flex-start;
	margin-bottom: 10px;
}

.city-program-card__title {
	font-size: 20px !important;
	font-weight: 800 !important;
	color: var(--cis-title-color) !important;
	margin: 0 0 6px !important;
}

.city-program-card__stage {
	font-family: var(--cis-font-latin);
	font-size: 13px !important;
	color: var(--cis-muted-color) !important;
	font-weight: 600;
	margin-bottom: 12px;
	display: block;
}

.city-program-card__desc {
	font-size: 14px !important;
	color: var(--cis-body-color) !important;
	line-height: 1.7 !important;
	margin-bottom: 20px !important;
}

/* ==========================================================================
   7. BRANCHES SECTION (Our Campuses)
   ========================================================================== */
.city-branches-section {
	padding: 90px 0 !important;
	background: linear-gradient(180deg, #F0F9FF 0%, #F8FAFC 50%, #EFF6FF 100%) !important;
}

.city-branches-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 28px !important;
}

.city-branch-card {
	background: #FFFFFF !important;
	border: 1.5px solid var(--cis-border-color) !important;
	border-radius: var(--cis-radius-md) !important;
	overflow: hidden;
	box-shadow: var(--cis-shadow-sm) !important;
	display: flex;
	flex-direction: column;
	transition: all 0.3s ease !important;
}

.city-branch-card:hover {
	transform: translateY(-8px) !important;
	box-shadow: 0 24px 50px rgba(2, 132, 199, 0.12) !important;
	border-color: var(--cis-border-sky) !important;
}

.city-branch-card__visual {
	height: 210px !important;
	position: relative;
	overflow: hidden;
}

.city-branch-card__image {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	transition: transform 0.4s ease;
}

.city-branch-card:hover .city-branch-card__image {
	transform: scale(1.05);
}

.city-branch-card__badge {
	position: absolute;
	top: 14px;
	right: 14px;
	background: rgba(255, 255, 255, 0.95) !important;
	color: var(--cis-sky-dark) !important;
	font-size: 12px !important;
	font-weight: 800 !important;
	padding: 4px 12px !important;
	border-radius: var(--cis-radius-full) !important;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.city-branch-card__content {
	padding: 24px !important;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.city-branch-card__title {
	font-size: 20px !important;
	font-weight: 800 !important;
	color: var(--cis-title-color) !important;
	margin: 0 0 6px !important;
}

.city-branch-card__en-title {
	font-family: var(--cis-font-latin);
	font-size: 13px !important;
	color: var(--cis-muted-color) !important;
	margin-bottom: 18px !important;
	display: block;
	font-weight: 600;
}

.city-branch-card__meta {
	list-style: none;
	padding: 0;
	margin: 0 0 24px !important;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.city-branch-card__meta-item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px !important;
	color: var(--cis-body-color) !important;
}

.city-branch-card__meta-item svg {
	color: var(--cis-sky) !important;
	flex-shrink: 0;
}

.city-btn--branch-apply {
	background: var(--cis-sky) !important;
	color: #FFFFFF !important;
	font-size: 14.5px !important;
	font-weight: 800 !important;
	padding: 12px 20px !important;
	border-radius: var(--cis-radius-sm) !important;
	text-decoration: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	transition: all 0.25s ease !important;
}

.city-btn--branch-apply:hover {
	background: var(--cis-sky-dark) !important;
	box-shadow: var(--cis-shadow-glow-sky) !important;
	transform: translateY(-2px);
}

.city-btn--branch-contact {
	background: var(--cis-canvas) !important;
	color: var(--cis-title-color) !important;
	border: 1px solid var(--cis-border-color) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	padding: 12px 18px !important;
	border-radius: var(--cis-radius-sm) !important;
	text-decoration: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: all 0.25s ease !important;
}

.city-btn--branch-contact:hover {
	background: var(--cis-border-light) !important;
	color: var(--cis-sky) !important;
}

/* ==========================================================================
   8. FREQUENTLY ASKED QUESTIONS (FAQ Accordion)
   ========================================================================== */
.city-faq-section {
	padding: 90px 0 !important;
	background: #F0F9FF !important;
}

.city-faq-container {
	max-width: 860px !important;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.city-faq-item {
	background: #FFFFFF !important;
	border: 1.5px solid var(--cis-border-sky) !important;
	border-radius: var(--cis-radius-md) !important;
	overflow: hidden;
	transition: all 0.25s ease !important;
	box-shadow: var(--cis-shadow-xs);
}

.city-faq-item[open] {
	border-color: var(--cis-sky) !important;
	box-shadow: 0 10px 30px rgba(2, 132, 199, 0.1) !important;
}

.city-faq-summary {
	padding: 22px 26px !important;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 18px;
	font-size: 17.5px !important;
	font-weight: 800 !important;
	color: var(--cis-title-color) !important;
	list-style: none;
	user-select: none;
}

.city-faq-summary::-webkit-details-marker {
	display: none;
}

.city-faq-category {
	font-size: 12px !important;
	font-weight: 800 !important;
	color: var(--cis-teal) !important;
	background: var(--cis-teal-soft) !important;
	padding: 4px 12px !important;
	border-radius: var(--cis-radius-full) !important;
	flex-shrink: 0;
}

.city-faq-q-text {
	flex-grow: 1;
	line-height: 1.5;
}

.city-faq-icon {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--cis-sky-bg);
	color: var(--cis-sky);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: all 0.25s ease;
}

.city-faq-item[open] .city-faq-icon {
	transform: rotate(180deg);
	background: var(--cis-sky);
	color: #FFFFFF;
}

.city-faq-answer {
	padding: 0 26px 24px !important;
	color: var(--cis-body-color) !important;
	font-size: 15.5px !important;
	line-height: 1.85 !important;
	border-top: 1px solid var(--cis-border-light);
	margin-top: 6px;
	padding-top: 18px !important;
}

/* ==========================================================================
   9. FINAL CALL TO ACTION (Admissions Banner)
   ========================================================================== */
.city-final-cta-section {
	padding: 60px 0 90px !important;
	background: linear-gradient(180deg, #FFFFFF 0%, #F0F9FF 100%) !important;
}

.city-final-cta-card {
	position: relative;
	background-size: cover !important;
	background-position: center !important;
	border-radius: var(--cis-radius-lg) !important;
	overflow: hidden;
	padding: 80px 40px !important;
	box-shadow: 0 24px 60px rgba(2, 132, 199, 0.2) !important;
}

.city-final-cta-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(2, 132, 199, 0.94) 0%, rgba(13, 148, 136, 0.90) 100%) !important;
	pointer-events: none;
}

.city-final-cta-content {
	position: relative;
	z-index: 2;
	max-width: 820px;
	margin: 0 auto;
}

.city-cta-tag {
	display: inline-block;
	background: rgba(255, 255, 255, 0.2);
	color: #FFFFFF;
	font-size: 13.5px;
	font-weight: 800;
	padding: 6px 20px;
	border-radius: var(--cis-radius-full);
	margin-bottom: 20px;
	border: 1px solid rgba(255, 255, 255, 0.35);
}

.city-cta-title {
	font-size: 42px !important;
	font-weight: 900 !important;
	color: #FFFFFF !important;
	margin: 0 0 18px !important;
	line-height: 1.3 !important;
}

.city-cta-desc {
	font-size: 18px !important;
	color: #FFFFFF !important;
	opacity: 0.95;
	line-height: 1.85 !important;
	margin: 0 0 36px !important;
}

.city-cta-buttons {
	display: flex;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
}

.city-btn--cta-apply {
	background: linear-gradient(135deg, var(--cis-coral) 0%, var(--cis-coral-dark) 100%) !important;
	color: #FFFFFF !important;
	font-size: 16px !important;
	font-weight: 800 !important;
	padding: 16px 36px !important;
	border-radius: var(--cis-radius-full) !important;
	box-shadow: 0 8px 28px rgba(244, 63, 94, 0.45) !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 10px !important;
	text-decoration: none !important;
	transition: all 0.25s ease !important;
}

.city-btn--cta-apply:hover {
	background: linear-gradient(135deg, var(--cis-coral-light) 0%, var(--cis-coral) 100%) !important;
	transform: translateY(-3px);
	box-shadow: 0 12px 36px rgba(244, 63, 94, 0.55) !important;
}

.city-btn--cta-contact {
	background: rgba(255, 255, 255, 0.2) !important;
	color: #FFFFFF !important;
	border: 2px solid rgba(255, 255, 255, 0.45) !important;
	font-size: 16px !important;
	font-weight: 800 !important;
	padding: 15px 32px !important;
	border-radius: var(--cis-radius-full) !important;
	text-decoration: none !important;
	backdrop-filter: blur(8px);
	transition: all 0.25s ease !important;
}

.city-btn--cta-contact:hover {
	background: rgba(255, 255, 255, 0.35) !important;
	border-color: #FFFFFF !important;
	transform: translateY(-3px);
}

/* ==========================================================================
   10. INTERNAL PAGES MODERN BANNER & CARDS
   ========================================================================== */
.city-page-banner {
	background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 50%, #F8FAFC 100%) !important;
	padding: 64px 0 72px !important;
	position: relative;
	color: var(--cis-title-color) !important;
	text-align: center;
	border-bottom: 1px solid var(--cis-border-sky);
}

.city-page-tag {
	display: inline-block;
	background: #FFFFFF !important;
	color: var(--cis-sky) !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	padding: 6px 18px !important;
	border-radius: var(--cis-radius-full) !important;
	margin-bottom: 14px !important;
	border: 1px solid var(--cis-border-sky);
	box-shadow: var(--cis-shadow-xs);
}

.city-page-title {
	font-size: 38px !important;
	font-weight: 900 !important;
	color: var(--cis-title-color) !important;
	margin: 0 0 14px !important;
	line-height: 1.3 !important;
}

.city-page-subtitle {
	font-size: 17px !important;
	color: var(--cis-body-color) !important;
	max-width: 740px;
	margin: 0 auto !important;
	line-height: 1.8 !important;
}

.city-page-content {
	padding: 70px 0 !important;
	background: #FFFFFF;
}

/* ==========================================================================
   11. FOOTER (Harmonious, Radiant & Cohesive)
   ========================================================================== */
.city-footer {
	background: #0B1528 !important;
	color: #94A3B8 !important;
	padding: 70px 0 0 !important;
	border-top: 1px solid #1E293B !important;
	position: relative;
	width: 100% !important;
}

.city-footer::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, #38BDF8 0%, #0284C7 50%, #06B6D4 100%);
}

.city-footer .city-container {
	max-width: 1360px !important;
	width: 100% !important;
	padding-left: 28px !important;
	padding-right: 28px !important;
	margin: 0 auto !important;
}

.city-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.2fr !important;
	gap: 40px !important;
	margin-bottom: 40px;
}

.city-footer__brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	margin-bottom: 16px;
}

.city-footer__brand-text {
	display: flex;
	flex-direction: column;
}

.city-footer__name {
	font-size: 19px;
	font-weight: 800;
	color: #FFFFFF !important;
}

.city-footer__sub {
	font-size: 12px;
	font-weight: 600;
	color: #94A3B8 !important;
}

.city-footer__about p {
	font-size: 14px;
	line-height: 1.7;
	color: #94A3B8 !important;
	margin: 0 0 12px;
}

.city-footer__countries {
	font-size: 13px;
	color: #94A3B8 !important;
	line-height: 1.6;
	padding-top: 6px;
}

.city-footer__countries strong {
	color: #38BDF8 !important;
	display: block;
	margin-bottom: 3px;
	font-weight: 700;
}

.city-footer__countries span {
	color: #CBD5E1 !important;
}

/* Social Media Icons */
.city-footer__social {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 18px;
}

.city-footer__social-link {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #132238 !important;
	border: 1px solid #1E293B !important;
	color: #38BDF8 !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition: all 0.25s ease;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.city-footer__social-link:hover {
	background: #38BDF8 !important;
	border-color: #38BDF8 !important;
	color: #0B1528 !important;
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(56, 189, 248, 0.35);
}

.city-footer__heading {
	font-size: 17px !important;
	font-weight: 800 !important;
	color: #FFFFFF !important;
	margin-bottom: 20px !important;
	position: relative;
	padding-bottom: 10px;
}

.city-footer__heading::after {
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	width: 36px;
	height: 3px;
	background: #38BDF8 !important;
	border-radius: 2px;
}

[dir="ltr"] .city-footer__heading::after {
	right: auto;
	left: 0;
}

.city-footer__links {
	list-style: none;
	padding: 0;
	margin: 0;
}

.city-footer__links li {
	margin-bottom: 11px;
}

.city-footer__links li a {
	color: #CBD5E1 !important;
	font-size: 14.5px !important;
	text-decoration: none !important;
	transition: all 0.2s ease !important;
	display: inline-block;
}

.city-footer__links li a:hover {
	color: #38BDF8 !important;
	transform: translateX(-4px);
}

[dir="ltr"] .city-footer__links li a:hover {
	transform: translateX(4px);
}

.city-footer__contact {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.city-footer__contact li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13.5px;
	color: #CBD5E1 !important;
}

.city-footer__contact li a {
	color: #CBD5E1 !important;
	text-decoration: none;
	transition: color 0.2s ease;
}

.city-footer__contact li a:hover {
	color: #38BDF8 !important;
}

.city-footer__contact li svg {
	color: #38BDF8 !important;
	flex-shrink: 0;
}

.city-footer-branches-chips {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 14px;
}

.city-footer-branch-chip {
	font-size: 12.5px;
	color: #E2E8F0 !important;
	background: #132238 !important;
	padding: 6px 12px;
	border-radius: 6px;
	border: 1px solid #1E293B !important;
	display: inline-block;
}

.city-footer-branch-chip strong {
	color: #38BDF8 !important;
}

/* Bottom Copyright Bar */
.city-copyright-bar {
	background: #070E1A !important;
	border-top: 1px solid #1E293B !important;
	padding: 22px 0;
	margin-top: 36px;
	width: 100% !important;
}

.city-copyright-bar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.city-copyright-bar__text {
	margin: 0;
	font-size: 13.5px;
	color: #94A3B8 !important;
}

.city-copyright-bar__links {
	display: flex;
	align-items: center;
	gap: 10px;
}

.city-copyright-bar__links a {
	font-size: 13px;
	color: #94A3B8 !important;
	text-decoration: none;
	transition: color 0.2s ease;
}

.city-copyright-bar__links a:hover {
	color: #38BDF8 !important;
}

.city-copyright-bar__links .sep {
	color: #334155 !important;
	font-size: 11px;
}

/* ==========================================================================
   GATEWAYS SECTION (3 Unified Portals)
   ========================================================================== */
.city-section--gateways {
	background: #F8FAFC;
	padding: 70px 0;
	border-top: 1px solid #E2E8F0;
}

.city-gateways-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	margin-top: 40px;
}

.city-gateway {
	background: #FFFFFF;
	border: 1.5px solid #E2E8F0;
	border-radius: var(--cis-radius-md);
	padding: 36px 28px;
	display: flex;
	flex-direction: column;
	text-align: center;
	align-items: center;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.city-gateway:hover {
	transform: translateY(-5px);
	box-shadow: 0 16px 36px rgba(2, 132, 199, 0.12);
	border-color: var(--cis-border-sky);
}

.city-gateway__icon-wrap {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
	transition: transform 0.3s ease;
}

.city-gateway:hover .city-gateway__icon-wrap {
	transform: scale(1.08);
}

.city-gateway--student .city-gateway__icon-wrap {
	background: rgba(2, 132, 199, 0.1);
	color: var(--cis-sky);
}

.city-gateway--parent .city-gateway__icon-wrap {
	background: rgba(13, 148, 136, 0.1);
	color: var(--cis-teal);
}

.city-gateway--teacher .city-gateway__icon-wrap {
	background: rgba(99, 102, 241, 0.1);
	color: #6366F1;
}

.city-gateway__title {
	font-size: 20px;
	font-weight: 800;
	color: var(--cis-title-color);
	margin-bottom: 12px;
}

.city-gateway__text {
	font-size: 14px;
	color: var(--cis-body-color);
	line-height: 1.6;
	margin-bottom: 24px;
	flex-grow: 1;
}

.city-gateway__action {
	width: 100%;
}

.city-btn--block {
	display: block !important;
	width: 100% !important;
	text-align: center !important;
}

.city-btn--secondary {
	background: var(--cis-teal) !important;
	color: #FFFFFF !important;
	padding: 12px 24px !important;
	border-radius: var(--cis-radius-full) !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	transition: all 0.25s ease !important;
}

.city-btn--secondary:hover {
	background: var(--cis-teal-dark) !important;
	box-shadow: 0 6px 16px rgba(13, 148, 136, 0.3) !important;
}

/* Neutral Branch Badge */
.city-branch-card__visual--neutral {
	background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 220px;
}

.city-branch-card__neutral-emblem {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	color: var(--cis-sky);
}

.city-branch-card__neutral-name {
	font-size: 15px;
	font-weight: 800;
	color: var(--cis-sky-dark);
}

/* ==========================================================================
   PORTAL LOGIN CARD & WP LOGIN FORM (.csc-login-container)
   ========================================================================== */
.csc-login-container {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 50px 20px 80px;
	min-height: 480px;
	width: 100%;
}

.csc-login-card {
	background: #FFFFFF;
	border: 1.5px solid #E2E8F0;
	border-radius: 20px;
	box-shadow: 0 20px 50px rgba(11, 21, 40, 0.08), 0 4px 12px rgba(11, 21, 40, 0.04);
	padding: 44px 40px 40px;
	width: 100%;
	max-width: 480px;
	position: relative;
	overflow: hidden;
}

.csc-login-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, #0284C7 0%, #38BDF8 50%, #0D9488 100%);
}

.csc-login-header {
	text-align: center;
	margin-bottom: 28px;
}

.csc-login-header h2 {
	font-size: 24px !important;
	font-weight: 800 !important;
	color: #0F172A !important;
	margin: 0 0 10px !important;
}

.csc-login-header p {
	font-size: 14.5px !important;
	color: #64748B !important;
	line-height: 1.6 !important;
	margin: 0 !important;
}

/* wp_login_form styling inside .csc-login-card */
.csc-login-card form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
}

.csc-login-card form p {
	margin: 0;
}

.csc-login-card form label {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: #1E293B;
	margin-bottom: 8px;
}

.csc-login-card form input[type="text"],
.csc-login-card form input[type="password"] {
	width: 100% !important;
	padding: 13px 16px !important;
	background: #F8FAFC !important;
	border: 1.5px solid #CBD5E1 !important;
	border-radius: 10px !important;
	font-size: 15px !important;
	color: #0F172A !important;
	font-family: inherit !important;
	outline: none !important;
	transition: all 0.2s ease !important;
	box-sizing: border-box !important;
}

.csc-login-card form input[type="text"]:focus,
.csc-login-card form input[type="password"]:focus {
	border-color: #0284C7 !important;
	background: #FFFFFF !important;
	box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
}

.csc-login-card .login-remember {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
}

.csc-login-card .login-remember label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	font-weight: 500;
	color: #475569;
	cursor: pointer;
	margin-bottom: 0;
}

.csc-login-card .login-remember input[type="checkbox"] {
	accent-color: #0284C7;
	width: 16px;
	height: 16px;
	cursor: pointer;
}

.csc-login-card .login-submit {
	margin-top: 10px;
}

.csc-login-card .login-submit input[type="submit"],
.csc-login-card .login-submit #wp-submit,
.csc-login-card button[type="submit"] {
	width: 100% !important;
	max-width: 100% !important;
	padding: 13px 20px !important;
	background: linear-gradient(135deg, #0284C7 0%, #0369A1 100%) !important;
	color: #FFFFFF !important;
	border: none !important;
	border-radius: 12px !important;
	font-size: 16px !important;
	font-weight: 800 !important;
	font-family: inherit !important;
	cursor: pointer !important;
	transition: all 0.25s ease !important;
	box-shadow: 0 8px 20px rgba(2, 132, 199, 0.25) !important;
	display: block !important;
	text-align: center !important;
	box-sizing: border-box !important;
	white-space: normal !important;
	min-height: 48px !important;
	line-height: normal !important;
}

.csc-login-card .login-submit input[type="submit"]:hover,
.csc-login-card .login-submit #wp-submit:hover,
.csc-login-card button[type="submit"]:hover {
	background: linear-gradient(135deg, #0369A1 0%, #0C4A6E 100%) !important;
	box-shadow: 0 10px 24px rgba(2, 132, 199, 0.35) !important;
	transform: translateY(-1px);
}

/* ==========================================================================
   DUAL / TRIPLE LOGIN PORTAL CHOICE SCREEN (.city-login__card--choice)
   ========================================================================== */
.city-login__card--choice {
	max-width: 980px !important;
	padding: 48px 40px 44px !important;
}

.city-login__card--choice .city-login__choose {
	display: grid;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 24px !important;
	margin-top: 24px;
}

.city-login__card--choice .city-login__choice {
	flex-direction: column !important;
	text-align: center !important;
	align-items: center !important;
	padding: 32px 24px 28px !important;
	border-radius: 16px !important;
	border: 1.5px solid #E2E8F0 !important;
	background: #FFFFFF !important;
	transition: all 0.3s ease !important;
	position: relative;
	overflow: hidden;
}

.city-login__card--choice .city-login__choice:hover {
	transform: translateY(-6px) !important;
	box-shadow: 0 16px 36px rgba(2, 132, 199, 0.14) !important;
	border-color: #38BDF8 !important;
}

.city-login__card--choice .city-login__choice-icon {
	width: 60px !important;
	height: 60px !important;
	border-radius: 16px !important;
	margin-bottom: 16px !important;
}

.city-login__card--choice .city-login__choice-name {
	font-size: 18px !important;
	font-weight: 800 !important;
	margin-bottom: 6px !important;
	display: block !important;
}

.city-login__card--choice .city-login__choice-desc {
	font-size: 13.5px !important;
	color: #64748B !important;
	line-height: 1.5 !important;
	margin-bottom: 16px !important;
	display: block !important;
}

.city-login__card--choice .city-login__choice-arrow {
	margin: 0 !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #F0F9FF;
	color: #0284C7 !important;
	transition: all 0.2s ease;
}

.city-login__card--choice .city-login__choice:hover .city-login__choice-arrow {
	background: #0284C7;
	color: #FFFFFF !important;
	transform: scale(1.1);
}

@media (max-width: 820px) {
	.city-login__card--choice .city-login__choose {
		grid-template-columns: 1fr !important;
	}
	.city-login__card--choice .city-login__choice {
		flex-direction: row !important;
		text-align: start !important;
		align-items: center !important;
		padding: 18px 20px !important;
	}
	.city-login__card--choice .city-login__choice-icon {
		margin-bottom: 0 !important;
		margin-inline-end: 14px;
	}
	.city-login__card--choice .city-login__choice-arrow {
		margin-inline-start: auto !important;
	}
}

/* ==========================================================================
   12. RESPONSIVE BREAKPOINTS
   ========================================================================== */
@media (max-width: 1024px) {
	.city-hero__layout {
		grid-template-columns: 1fr !important;
		gap: 40px;
		padding: 50px 0 80px;
	}
	.city-hero__content {
		text-align: center !important;
	}
	.city-hero__cta-group {
		justify-content: center !important;
	}
	.city-hero__pillars {
		justify-content: center !important;
	}
	.city-hero__floating-badge {
		position: static;
		margin-top: 18px;
		justify-content: center;
	}
	.city-quick-access__grid {
		grid-template-columns: repeat(3, 1fr) !important;
	}
	.city-about__grid {
		grid-template-columns: 1fr !important;
	}
	.city-programs-grid--3,
	.city-programs-grid--4,
	.city-branches-grid,
	.city-goals-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	.city-footer__grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 640px) {
	.city-hero__headline {
		font-size: 32px !important;
	}
	.city-hero__statement {
		font-size: 15.5px !important;
	}
	.city-quick-access__grid {
		grid-template-columns: 1fr !important;
	}
	.city-programs-grid--3,
	.city-programs-grid--4,
	.city-branches-grid,
	.city-goals-grid {
		grid-template-columns: 1fr !important;
	}
	.city-footer__grid {
		grid-template-columns: 1fr !important;
	}
	.city-section-title {
		font-size: 26px !important;
	}
	.city-page-title {
		font-size: 28px !important;
	}
	.city-cta-title {
		font-size: 28px !important;
	}
}

/* ==========================================================================
   13. MOBILE DRAWER NAVIGATION
   ========================================================================== */
.city-header__burger {
	display: none;
	flex-direction: column;
	justify-content: space-around;
	width: 32px;
	height: 32px;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
	z-index: 1001;
}

.city-header__burger span {
	width: 32px;
	height: 3px;
	background: var(--cis-sky-dark);
	border-radius: 10px;
	transition: all 0.3s linear;
	position: relative;
	transform-origin: 1px;
}

.city-header.is-open .city-header__burger span:first-child {
	transform: rotate(45deg);
}

.city-header.is-open .city-header__burger span:nth-child(2) {
	opacity: 0;
	transform: translateX(20px);
}

.city-header.is-open .city-header__burger span:nth-child(3) {
	transform: rotate(-45deg);
}

.city-header__mobile-drawer {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: rgba(255, 255, 255, 0.98);
	backdrop-filter: blur(16px);
	border-bottom: 2px solid var(--cis-border-sky);
	box-shadow: 0 20px 40px rgba(2, 132, 199, 0.15);
	padding: 24px;
	z-index: 1000;
}

.city-header.is-open .city-header__mobile-drawer {
	display: block;
	animation: slideDown 0.3s ease;
}

@keyframes slideDown {
	from { opacity: 0; transform: translateY(-10px); }
	to { opacity: 1; transform: translateY(0); }
}

.city-header__menu--mobile {
	list-style: none;
	padding: 0;
	margin: 0 0 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.city-header__menu--mobile li a {
	display: block;
	padding: 12px 18px;
	font-size: 16px;
	font-weight: 700;
	color: var(--cis-title-color);
	border-radius: var(--cis-radius-sm);
	background: var(--cis-sky-bg);
	text-decoration: none;
	transition: all 0.2s ease;
}

.city-header__menu--mobile li a:hover,
.city-header__menu--mobile li.current-menu-item a {
	background: var(--cis-sky);
	color: #FFFFFF;
}

.city-mobile-drawer__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-top: 16px;
	border-top: 1px solid var(--cis-border-color);
}

.city-btn--mobile-portal {
	background: var(--cis-sky-bg);
	color: var(--cis-sky) !important;
	border: 1px solid var(--cis-border-sky);
	padding: 13px 20px;
	border-radius: var(--cis-radius-sm);
	font-weight: 800;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	text-decoration: none !important;
}

.city-btn--mobile-apply {
	background: linear-gradient(135deg, var(--cis-coral) 0%, var(--cis-coral-dark) 100%);
	color: #FFFFFF !important;
	padding: 13px 20px;
	border-radius: var(--cis-radius-sm);
	font-weight: 800;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	text-decoration: none !important;
}

.city-btn--mobile-teacher {
	background: var(--cis-canvas);
	color: var(--cis-title-color) !important;
	padding: 11px 18px;
	border-radius: var(--cis-radius-sm);
	font-weight: 700;
	text-align: center;
	display: block;
	text-decoration: none !important;
}

@media (max-width: 1140px) {
	.city-header__nav {
		display: none !important;
	}
	.city-header__actions {
		display: flex !important;
		align-items: center !important;
		gap: 8px !important;
		margin-inline-start: auto !important;
	}
	.city-header__actions .city-btn--header-portal,
	.city-header__actions .city-btn--header-apply,
	.city-header__actions .city-btn--header-profile {
		display: none !important;
	}
	.city-header__actions .city-theme-toggle-btn,
	.city-header__actions .city-btn--header-logout {
		display: inline-flex !important;
	}
	.city-header__burger {
		display: flex !important;
	}
}

@media (max-width: 991px) {
	.city-gateways-grid {
		grid-template-columns: 1fr !important;
	}
	.city-quick-access__grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	.city-footer__grid {
		grid-template-columns: 1fr 1fr !important;
		gap: 30px !important;
	}
}

@media (max-width: 640px) {
	.city-quick-access__grid {
		grid-template-columns: 1fr !important;
	}
	.city-footer__grid {
		grid-template-columns: 1fr !important;
	}
	.city-copyright-bar__inner {
		flex-direction: column;
		text-align: center;
	}
}

/* ==========================================================================
   HEADER SCROLL GRADIENT EFFECT
   ========================================================================== */
.city-header {
	position: sticky !important;
	top: 0 !important;
	z-index: 1000 !important;
	transition: all 0.3s ease !important;
}

html:not(.city-dark-mode):not([data-theme="dark"]) .city-header.is-scrolled {
	background: rgba(255, 255, 255, 0.96) !important;
	backdrop-filter: blur(20px) !important;
	-webkit-backdrop-filter: blur(20px) !important;
	box-shadow: 0 10px 30px rgba(2, 132, 199, 0.12), 0 2px 6px rgba(15, 23, 42, 0.04) !important;
}

html:not(.city-dark-mode):not([data-theme="dark"]) .city-header.is-scrolled::after {
	content: '' !important;
	position: absolute !important;
	bottom: 0 !important;
	left: 0 !important;
	right: 0 !important;
	height: 3px !important;
	background: linear-gradient(90deg, #0284C7 0%, #0D9488 50%, #F43F5E 100%) !important;
	z-index: 1001 !important;
}

/* ==========================================================================
   HOMEPAGE LUMINOUS SKY-BLUE SCROLL GRADIENT HARMONY (LIGHT MODE ONLY)
   ========================================================================== */

/* 1. HERO SLIDER: Light Mode Signature Luminous Sky Blue & Ice White */
html:not(.city-dark-mode):not([data-theme="dark"]) #cityHero,
html:not(.city-dark-mode):not([data-theme="dark"]) .city-hero {
	position: relative !important;
	background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 45%, #F8FAFC 100%) !important;
	overflow: hidden !important;
	color: #0F172A !important;
	border-bottom: 1px solid rgba(2, 132, 199, 0.15) !important;
}

/* 2. QUICK ACCESS: Natural Azure Flow Transition directly below Hero */
html:not(.city-dark-mode):not([data-theme="dark"]) #cityQuickAccess,
html:not(.city-dark-mode):not([data-theme="dark"]) .city-quick-access {
	position: relative;
	z-index: 10;
}

/* 3. ABOUT THE SCHOOL: Soft Morning Sky & Luminous Pearl White */
html:not(.city-dark-mode):not([data-theme="dark"]) #cityAbout,
html:not(.city-dark-mode):not([data-theme="dark"]) .city-about-section {
	padding: 90px 0 !important;
	background: linear-gradient(180deg, #FFFFFF 0%, #F0F9FF 50%, #E8F4FC 100%) !important;
	border-top: 1px solid #E0F2FE !important;
	border-bottom: 1px solid #BAE6FD !important;
	position: relative;
}
html:not(.city-dark-mode):not([data-theme="dark"]) .city-about-section .city-section-badge {
	background: #E0F2FE !important;
	color: #0284C7 !important;
	border: 1px solid #BAE6FD !important;
}
html:not(.city-dark-mode):not([data-theme="dark"]) .city-about-section .city-section-title {
	color: #0F172A !important;
}
html:not(.city-dark-mode):not([data-theme="dark"]) .city-about-section .city-section-subtitle,
html:not(.city-dark-mode):not([data-theme="dark"]) .city-about-section .city-about__lead-text,
html:not(.city-dark-mode):not([data-theme="dark"]) .city-about-section .city-about__lead-sub {
	color: #334155 !important;
}
html:not(.city-dark-mode):not([data-theme="dark"]) .city-about-section .city-pillar-card,
html:not(.city-dark-mode):not([data-theme="dark"]) .city-about-section .city-goal-card,
html:not(.city-dark-mode):not([data-theme="dark"]) .city-about-section .city-vision-callout {
	background: #FFFFFF !important;
	border: 1.5px solid #E0F2FE !important;
	box-shadow: 0 8px 24px rgba(2, 132, 199, 0.06) !important;
}

/* 4. ACADEMIC PROGRAMS: Luminous Azure Sky & Airy Ice Breeze */
html:not(.city-dark-mode):not([data-theme="dark"]) #cityAcademics,
html:not(.city-dark-mode):not([data-theme="dark"]) .city-academics-section {
	padding: 90px 0 !important;
	background: linear-gradient(180deg, #E8F4FC 0%, #E0F2FE 50%, #F0F9FF 100%) !important;
	border-top: 1px solid #BAE6FD !important;
	border-bottom: 1px solid #E0F2FE !important;
	position: relative;
}
html:not(.city-dark-mode):not([data-theme="dark"]) .city-academics-section .city-section-badge {
	background: #E0F2FE !important;
	color: #0369A1 !important;
	border: 1px solid #BAE6FD !important;
}
html:not(.city-dark-mode):not([data-theme="dark"]) .city-academics-section .city-section-title {
	color: #0F172A !important;
}
html:not(.city-dark-mode):not([data-theme="dark"]) .city-academics-section .city-section-subtitle {
	color: #334155 !important;
}
html:not(.city-dark-mode):not([data-theme="dark"]) .city-academics-section .city-program-card {
	background: #FFFFFF !important;
	border: 1.5px solid #BAE6FD !important;
	box-shadow: 0 8px 24px rgba(2, 132, 199, 0.06) !important;
}

/* 5. OUR CAMPUSES / BRANCHES: Warm Soft Light Sky & Pure Sand */
html:not(.city-dark-mode):not([data-theme="dark"]) #cityBranches,
html:not(.city-dark-mode):not([data-theme="dark"]) .city-branches-section {
	padding: 90px 0 !important;
	background: linear-gradient(180deg, #F0F9FF 0%, #F8FAFC 50%, #EFF6FF 100%) !important;
	border-top: 1px solid #E0F2FE !important;
	border-bottom: 1px solid #BAE6FD !important;
	position: relative;
}
html:not(.city-dark-mode):not([data-theme="dark"]) .city-branches-section .city-section-badge {
	background: #E0F2FE !important;
	color: #0284C7 !important;
	border: 1px solid #BAE6FD !important;
}
html:not(.city-dark-mode):not([data-theme="dark"]) .city-branches-section .city-section-title {
	color: #0F172A !important;
}
html:not(.city-dark-mode):not([data-theme="dark"]) .city-branches-section .city-section-subtitle {
	color: #334155 !important;
}
html:not(.city-dark-mode):not([data-theme="dark"]) .city-branches-section .city-branch-card {
	background: #FFFFFF !important;
	border: 1.5px solid #E0F2FE !important;
	box-shadow: 0 8px 24px rgba(2, 132, 199, 0.06) !important;
}

/* 6. ONLINE LEARNING & LMS: Clean Bright Digital Tech */
html:not(.city-dark-mode):not([data-theme="dark"]) #cityOnlineLearning,
html:not(.city-dark-mode):not([data-theme="dark"]) .city-online-learning-section {
	padding: 90px 0 !important;
	background: linear-gradient(180deg, #EFF6FF 0%, #E0F2FE 50%, #E8F8FA 100%) !important;
	border-top: 1px solid #BAE6FD !important;
	border-bottom: 1px solid #E0F2FE !important;
	position: relative;
}
html:not(.city-dark-mode):not([data-theme="dark"]) .city-online-learning-section .city-learning-box {
	background: #FFFFFF !important;
	color: #0F172A !important;
	border: 1.5px solid #BAE6FD !important;
	box-shadow: 0 16px 40px rgba(2, 132, 199, 0.08) !important;
	border-radius: 20px !important;
}
html:not(.city-dark-mode):not([data-theme="dark"]) .city-online-learning-section .city-learning-title {
	color: #0F172A !important;
}
html:not(.city-dark-mode):not([data-theme="dark"]) .city-online-learning-section .city-learning-desc {
	color: #334155 !important;
}
html:not(.city-dark-mode):not([data-theme="dark"]) .city-online-learning-section .city-lfeat-text strong {
	color: #0F172A !important;
}
html:not(.city-dark-mode):not([data-theme="dark"]) .city-online-learning-section .city-lfeat-text p {
	color: #475569 !important;
}
html:not(.city-dark-mode):not([data-theme="dark"]) .city-online-learning-section .city-lfeat-icon {
	background: #E0F2FE !important;
	color: #0284C7 !important;
}

/* 7. FEATURED FACULTY & TEACHERS: Refreshing Light Teal & Ice Azure */
html:not(.city-dark-mode):not([data-theme="dark"]) #cityTeachers,
html:not(.city-dark-mode):not([data-theme="dark"]) .city-teachers-section {
	padding: 90px 0 !important;
	background: linear-gradient(180deg, #E8F8FA 0%, #F0FDFA 50%, #F0F9FF 100%) !important;
	border-top: 1px solid #E0F2FE !important;
	border-bottom: 1px solid #BAE6FD !important;
	position: relative;
}
html:not(.city-dark-mode):not([data-theme="dark"]) .city-teachers-section .city-section-badge {
	background: #E0F2FE !important;
	color: #0284C7 !important;
	border: 1px solid #BAE6FD !important;
}
html:not(.city-dark-mode):not([data-theme="dark"]) .city-teachers-section .city-section-title {
	color: #0F172A !important;
}
html:not(.city-dark-mode):not([data-theme="dark"]) .city-teachers-section .city-section-subtitle {
	color: #334155 !important;
}
html:not(.city-dark-mode):not([data-theme="dark"]) .city-teachers-section .city-teacher-card,
html:not(.city-dark-mode):not([data-theme="dark"]) .city-teachers-section .city-faculty-showcase-card {
	background: #FFFFFF !important;
	border: 1.5px solid #E0F2FE !important;
	box-shadow: 0 8px 24px rgba(2, 132, 199, 0.06) !important;
}

/* 8. SCHOOL LIFE & GALLERY: Luminous Pearl Sky & Clean Canvas */
html:not(.city-dark-mode):not([data-theme="dark"]) #citySchoolLife,
html:not(.city-dark-mode):not([data-theme="dark"]) .city-school-life-section {
	padding: 90px 0 !important;
	background: linear-gradient(180deg, #F0F9FF 0%, #F8FAFC 50%, #E0F2FE 100%) !important;
	border-top: 1px solid #BAE6FD !important;
	border-bottom: 1px solid #E0F2FE !important;
	position: relative;
}
html:not(.city-dark-mode):not([data-theme="dark"]) .city-school-life-section .city-section-badge {
	background: #E0F2FE !important;
	color: #0284C7 !important;
	border: 1px solid #BAE6FD !important;
}
html:not(.city-dark-mode):not([data-theme="dark"]) .city-school-life-section .city-section-title {
	color: #0F172A !important;
}
html:not(.city-dark-mode):not([data-theme="dark"]) .city-school-life-section .city-section-subtitle {
	color: #334155 !important;
}
html:not(.city-dark-mode):not([data-theme="dark"]) .city-school-life-section .city-gallery-item,
html:not(.city-dark-mode):not([data-theme="dark"]) .city-school-life-section .city-life-card {
	background: #FFFFFF !important;
	border: 1.5px solid #E0F2FE !important;
	box-shadow: 0 8px 24px rgba(2, 132, 199, 0.06) !important;
}

/* 9. NEWS & UPDATES: Airy Soft Periwinkle to Morning Azure */
html:not(.city-dark-mode):not([data-theme="dark"]) #cityNewsEvents,
html:not(.city-dark-mode):not([data-theme="dark"]) .city-news-events-section {
	padding: 90px 0 !important;
	background: linear-gradient(180deg, #E0F2FE 0%, #EBF6FE 50%, #F0F9FF 100%) !important;
	border-top: 1px solid #E0F2FE !important;
	border-bottom: 1px solid #BAE6FD !important;
	position: relative;
}
html:not(.city-dark-mode):not([data-theme="dark"]) .city-news-events-section .city-section-badge {
	background: #E0F2FE !important;
	color: #0284C7 !important;
	border: 1px solid #BAE6FD !important;
}
html:not(.city-dark-mode):not([data-theme="dark"]) .city-news-events-section .city-section-title {
	color: #0F172A !important;
}
html:not(.city-dark-mode):not([data-theme="dark"]) .city-news-events-section .city-section-subtitle {
	color: #334155 !important;
}
html:not(.city-dark-mode):not([data-theme="dark"]) .city-news-events-section .city-update-col {
	background: #FFFFFF !important;
	border: 1.5px solid #E0F2FE !important;
	box-shadow: 0 8px 24px rgba(2, 132, 199, 0.06) !important;
}

/* 10. FREQUENTLY ASKED QUESTIONS: Ice Sky White to Crystal Pearl */
html:not(.city-dark-mode):not([data-theme="dark"]) #cityFaq,
html:not(.city-dark-mode):not([data-theme="dark"]) .city-faq-section {
	padding: 90px 0 !important;
	background: linear-gradient(180deg, #F0F9FF 0%, #F8FAFC 50%, #FFFFFF 100%) !important;
	border-top: 1px solid #BAE6FD !important;
	border-bottom: 1px solid #E2E8F0 !important;
	position: relative;
}
html:not(.city-dark-mode):not([data-theme="dark"]) .city-faq-section .city-section-badge {
	background: #E0F2FE !important;
	color: #0284C7 !important;
	border: 1px solid #BAE6FD !important;
}
html:not(.city-dark-mode):not([data-theme="dark"]) .city-faq-section .city-section-title {
	color: #0F172A !important;
}
html:not(.city-dark-mode):not([data-theme="dark"]) .city-faq-section .city-section-subtitle {
	color: #334155 !important;
}
html:not(.city-dark-mode):not([data-theme="dark"]) .city-faq-section .city-faq-item {
	background: #FFFFFF !important;
	border: 1.5px solid #E0F2FE !important;
	box-shadow: 0 6px 18px rgba(2, 132, 199, 0.05) !important;
}

/* 11. FINAL CALL TO ACTION: Clean Light Azure Base */
html:not(.city-dark-mode):not([data-theme="dark"]) #cityFinalCta,
html:not(.city-dark-mode):not([data-theme="dark"]) .city-final-cta-section {
	padding: 70px 0 90px !important;
	background: linear-gradient(180deg, #FFFFFF 0%, #F0F9FF 100%) !important;
	position: relative;
}

/* Priority 4.3: Timetable Cell Dropdown Selects - Crystal Clear Pure White Background (Light Mode Only) */
html:not(.city-dark-mode):not([data-theme="dark"]) select.csc-tt-cell,
html:not(.city-dark-mode):not([data-theme="dark"]) .csc-custom-table select,
html:not(.city-dark-mode):not([data-theme="dark"]) .csc-custom-table td select,
html:not(.city-dark-mode):not([data-theme="dark"]) #cscTeacherTimetableBody select {
	background-color: #FFFFFF !important;
	background: #FFFFFF !important;
	color: #0F172A !important;
	-webkit-text-fill-color: #0F172A !important;
	border: 1.5px solid #CBD5E1 !important;
	border-radius: 6px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	padding: 8px 10px !important;
}

html:not(.city-dark-mode):not([data-theme="dark"]) select.csc-tt-cell option,
html:not(.city-dark-mode):not([data-theme="dark"]) .csc-custom-table select option {
	background-color: #FFFFFF !important;
	color: #0F172A !important;
	-webkit-text-fill-color: #0F172A !important;
}

html:not(.city-dark-mode):not([data-theme="dark"]) select.csc-tt-cell:focus,
html:not(.city-dark-mode):not([data-theme="dark"]) .csc-custom-table select:focus {
	border-color: #0284C7 !important;
	box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
	outline: none !important;
}

.city-updates-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	margin-top: 40px;
}

html:not(.city-dark-mode):not([data-theme="dark"]) .city-update-col {
	background: #FFFFFF;
	border: 1px solid rgba(2, 132, 199, 0.12);
	border-radius: var(--cis-radius-md);
	padding: 26px 22px;
	box-shadow: var(--cis-shadow-sm);
	display: flex;
	flex-direction: column;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

html:not(.city-dark-mode):not([data-theme="dark"]) .city-update-col:hover {
	transform: translateY(-4px);
	box-shadow: var(--cis-shadow-md);
	border-color: rgba(2, 132, 199, 0.28);
}

.city-update-col__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 16px;
	border-bottom: 2px solid #F1F5F9;
	margin-bottom: 20px;
}

.city-update-col__title-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
}

.city-update-col__title-wrap .icon {
	font-size: 22px;
}

.city-update-col__title-wrap h3 {
	font-size: 19px;
	font-weight: 800;
	color: var(--cis-title-color);
	margin: 0;
}

.city-update-col__more {
	font-size: 13px;
	font-weight: 700;
	color: var(--cis-sky);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	transition: color 0.2s ease;
}

.city-update-col__more:hover {
	color: var(--cis-teal);
}

.city-update-col__list {
	display: flex;
	flex-direction: column;
	gap: 18px;
	flex: 1;
}

/* Card 1: News */
.city-update-card {
	background: #F8FAFC;
	border: 1px solid #E2E8F0;
	border-radius: var(--cis-radius-sm);
	overflow: hidden;
	transition: all 0.2s ease;
}

.city-update-card:hover {
	background: #FFFFFF;
	border-color: var(--cis-sky-tint);
	box-shadow: var(--cis-shadow-xs);
}

.city-update-card__thumb {
	height: 140px;
	overflow: hidden;
}

.city-update-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.city-update-card:hover .city-update-card__thumb img {
	transform: scale(1.05);
}

.city-update-card__body {
	padding: 16px;
}

.city-update-card__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
	font-size: 12px;
}

.city-update-card__meta .badge {
	background: var(--cis-sky-soft);
	color: var(--cis-sky-dark);
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 6px;
}

.city-update-card__meta .date {
	color: var(--cis-text-muted);
}

.city-update-card__title {
	font-size: 15px;
	font-weight: 800;
	margin: 0 0 6px;
	line-height: 1.5;
}

.city-update-card__title a {
	color: var(--cis-title-color);
	text-decoration: none;
	transition: color 0.18s ease;
}

.city-update-card__title a:hover {
	color: var(--cis-sky);
}

.city-update-card__excerpt {
	font-size: 13px;
	color: var(--cis-text-muted);
	line-height: 1.5;
	margin: 0 0 10px;
}

.city-update-card__readmore {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--cis-teal);
	text-decoration: none;
	display: inline-block;
}

/* Card 2: Events */
.city-event-card {
	display: flex;
	gap: 14px;
	padding: 14px;
	background: #F8FAFC;
	border: 1px solid #E2E8F0;
	border-radius: var(--cis-radius-sm);
	align-items: center;
	transition: all 0.2s ease;
}

.city-event-card:hover {
	background: #FFFFFF;
	border-color: var(--cis-teal-tint);
	box-shadow: var(--cis-shadow-xs);
}

.city-event-card__datebox {
	background: linear-gradient(135deg, var(--cis-teal) 0%, var(--cis-teal-dark) 100%);
	color: #FFFFFF;
	border-radius: 10px;
	padding: 8px 12px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 52px;
	flex-shrink: 0;
	text-align: center;
}

.city-event-card__datebox .day {
	font-size: 18px;
	font-weight: 800;
	line-height: 1;
}

.city-event-card__datebox .month {
	font-size: 11px;
	font-weight: 700;
	margin-top: 2px;
}

.city-event-card__content {
	flex: 1;
	min-width: 0;
}

.city-event-card__content .badge {
	font-size: 11px;
	background: var(--cis-teal-soft);
	color: var(--cis-teal-dark);
	font-weight: 700;
	padding: 2px 7px;
	border-radius: 4px;
	display: inline-block;
	margin-bottom: 4px;
}

.city-event-card__content h4 {
	font-size: 14px;
	font-weight: 700;
	margin: 0 0 4px;
	line-height: 1.4;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.city-event-card__content h4 a {
	color: var(--cis-title-color);
	text-decoration: none;
}

.city-event-card__content h4 a:hover {
	color: var(--cis-teal);
}

.city-event-card__content .loc {
	font-size: 12px;
	color: var(--cis-text-muted);
	display: flex;
	align-items: center;
	gap: 4px;
}

/* Card 3: Announcements */
.city-announcement-card {
	padding: 16px;
	background: #F8FAFC;
	border-radius: var(--cis-radius-sm);
	border: 1px solid #E2E8F0;
	border-right: 4px solid var(--cis-sky);
	transition: all 0.2s ease;
}

.city-announcement-card.priority-urgent {
	border-right-color: var(--cis-coral);
	background: #FFF5F5;
}

.city-announcement-card.priority-important {
	border-right-color: #F59E0B;
	background: #FFFBEB;
}

.city-announcement-card:hover {
	background: #FFFFFF;
	box-shadow: var(--cis-shadow-xs);
}

.city-announcement-card .badge-priority {
	font-size: 11px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 4px;
	background: var(--cis-sky-soft);
	color: var(--cis-sky-dark);
}

.city-announcement-card.priority-urgent .badge-priority {
	background: var(--cis-coral-soft);
	color: var(--cis-coral-dark);
}

.city-announcement-card.priority-important .badge-priority {
	background: #FEF3C7;
	color: #B45309;
}

.city-announcement-card__title {
	font-size: 14.5px;
	font-weight: 800;
	margin: 6px 0 4px;
	line-height: 1.4;
}

.city-announcement-card__title a {
	color: var(--cis-title-color);
	text-decoration: none;
}

.city-announcement-card__title a:hover {
	color: var(--cis-sky);
}

.city-announcement-card p {
	font-size: 13px;
	color: var(--cis-text-muted);
	line-height: 1.5;
	margin: 0 0 8px;
}

/* Empty Mini State */
.city-empty-mini {
	padding: 30px 16px;
	background: #F8FAFC;
	border: 1px dashed #CBD5E1;
	border-radius: var(--cis-radius-sm);
}

.city-empty-mini .empty-icon {
	font-size: 28px;
	display: block;
	margin-bottom: 8px;
}

.city-empty-mini p {
	font-size: 13.5px;
	color: var(--cis-text-muted);
	margin: 0;
}

/* ==========================================================================
   DEDICATED NEWS & ANNOUNCEMENTS HUB PAGE (/news/)
   ========================================================================== */
.city-news-hero {
	background: linear-gradient(135deg, #0284C7 0%, #0369A1 60%, #0D9488 100%) !important;
	padding: 70px 0 50px !important;
	color: #FFFFFF !important;
	position: relative;
	text-align: center;
}

.city-news-hero .city-page-title {
	color: #FFFFFF !important;
	font-size: 36px !important;
	font-weight: 900 !important;
	margin-bottom: 12px !important;
}

.city-news-hero .city-page-subtitle {
	color: #E0F2FE !important;
	max-width: 680px;
	margin: 0 auto 30px !important;
	font-size: 17px !important;
}

.city-news-hero .city-page-tag {
	display: inline-block;
	background: rgba(255, 255, 255, 0.18);
	color: #FFFFFF;
	font-weight: 700;
	padding: 4px 14px;
	border-radius: 999px;
	font-size: 13px;
	margin-bottom: 12px;
	backdrop-filter: blur(8px);
}

.city-news-tabs {
	display: flex;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 24px;
}

.city-news-tab-btn {
	background: rgba(255, 255, 255, 0.15);
	color: #FFFFFF;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 999px;
	padding: 10px 22px;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: all 0.2s ease;
	backdrop-filter: blur(8px);
}

.city-news-tab-btn:hover {
	background: rgba(255, 255, 255, 0.28);
	transform: translateY(-2px);
}

.city-news-tab-btn.is-active {
	background: #FFFFFF !important;
	color: var(--cis-sky-dark) !important;
	border-color: #FFFFFF !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.city-news-tab-btn .tab-badge {
	background: var(--cis-coral);
	color: #FFFFFF;
	font-size: 11px;
	font-weight: 800;
	padding: 2px 7px;
	border-radius: 999px;
}

.city-news-page-container {
	padding: 60px 0 90px;
}

.city-news-block {
	margin-bottom: 60px;
}

.city-news-block__header {
	padding-bottom: 18px;
	border-bottom: 2px solid #E2E8F0;
	margin-bottom: 30px;
}

.city-news-block__header-title {
	display: flex;
	align-items: center;
	gap: 14px;
}

.city-news-block__icon {
	font-size: 32px;
}

.city-news-block__header-title h2 {
	font-size: 24px;
	font-weight: 800;
	color: var(--cis-title-color);
	margin: 0 0 4px;
}

.city-news-block__header-title p {
	font-size: 14.5px;
	color: var(--cis-text-muted);
	margin: 0;
}

/* Full Announcement Card on Page */
.city-announcements-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
	gap: 24px;
}

.city-announcement-card-full {
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	border-top: 4px solid var(--cis-sky);
	border-radius: var(--cis-radius-md);
	padding: 26px;
	box-shadow: var(--cis-shadow-xs);
	transition: all 0.25s ease;
	display: flex;
	flex-direction: column;
}

.city-announcement-card-full.priority-urgent {
	border-top-color: var(--cis-coral);
}

.city-announcement-card-full.priority-important {
	border-top-color: #F59E0B;
}

.city-announcement-card-full:hover {
	box-shadow: var(--cis-shadow-md);
	transform: translateY(-3px);
}

.city-announcement-card-full__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
	flex-wrap: wrap;
	gap: 8px;
}

.city-announcement-card-full__top .badges-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
}

.city-badge-priority {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 800;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--cis-sky-soft);
	color: var(--cis-sky-dark);
}

.city-badge-priority.priority-urgent {
	background: var(--cis-coral-soft);
	color: var(--cis-coral-dark);
}

.city-badge-priority.priority-important {
	background: #FEF3C7;
	color: #B45309;
}

.city-badge-priority .dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.city-badge-target {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	color: var(--cis-text-muted);
	background: #F1F5F9;
	padding: 3px 10px;
	border-radius: 999px;
}

.city-announcement-card-full__date {
	font-size: 12.5px;
	color: var(--cis-text-muted);
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.city-announcement-card-full__title {
	font-size: 18px;
	font-weight: 800;
	color: var(--cis-title-color);
	margin: 0 0 12px;
	line-height: 1.45;
}

.city-announcement-card-full__content {
	font-size: 14.5px;
	color: var(--cis-body-color);
	line-height: 1.7;
	flex: 1;
}

/* News Posts Grid */
.city-posts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 28px;
}

.city-news-item-card {
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	border-radius: var(--cis-radius-md);
	overflow: hidden;
	box-shadow: var(--cis-shadow-xs);
	display: flex;
	flex-direction: column;
	transition: all 0.25s ease;
}

.city-news-item-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--cis-shadow-md);
	border-color: var(--cis-sky-tint);
}

.city-news-item-card__thumb-link,
.city-news-item-card__thumb-placeholder {
	height: 200px;
	position: relative;
	overflow: hidden;
	display: block;
	background: var(--cis-sky-soft);
}

.city-news-item-card__thumb-link img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.city-news-item-card:hover .city-news-item-card__thumb-link img {
	transform: scale(1.06);
}

.city-news-item-card__thumb-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 40px;
}

.city-news-item-card .cat-pill {
	position: absolute;
	top: 14px;
	right: 14px;
	background: rgba(255, 255, 255, 0.95);
	color: var(--cis-sky-dark);
	font-size: 12px;
	font-weight: 800;
	padding: 4px 12px;
	border-radius: 999px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.city-news-item-card__body {
	padding: 22px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.city-news-item-card__body .meta-row {
	font-size: 12.5px;
	color: var(--cis-text-muted);
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.city-news-item-card__title {
	font-size: 17.5px;
	font-weight: 800;
	margin: 0 0 10px;
	line-height: 1.45;
}

.city-news-item-card__title a {
	color: var(--cis-title-color);
	text-decoration: none;
	transition: color 0.18s ease;
}

.city-news-item-card__title a:hover {
	color: var(--cis-sky);
}

.city-news-item-card__excerpt {
	font-size: 14px;
	color: var(--cis-text-muted);
	line-height: 1.6;
	margin: 0 0 18px;
	flex: 1;
}

.city-news-item-card__footer .read-link {
	font-size: 14px;
	font-weight: 800;
	color: var(--cis-sky);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: gap 0.2s ease, color 0.2s ease;
}

.city-news-item-card__footer .read-link:hover {
	color: var(--cis-teal);
	gap: 10px;
}

/* Events Page Grid */
.city-events-page-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
	gap: 24px;
}

.city-event-card-page {
	display: flex;
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	border-radius: var(--cis-radius-md);
	padding: 22px;
	gap: 18px;
	box-shadow: var(--cis-shadow-xs);
	transition: all 0.25s ease;
}

.city-event-card-page:hover {
	transform: translateY(-3px);
	box-shadow: var(--cis-shadow-md);
	border-color: var(--cis-teal-tint);
}

.city-event-card-page__date-badge {
	background: linear-gradient(135deg, var(--cis-teal) 0%, var(--cis-teal-dark) 100%);
	color: #FFFFFF;
	border-radius: var(--cis-radius-sm);
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 68px;
	text-align: center;
	flex-shrink: 0;
}

.city-event-card-page__date-badge .day {
	font-size: 26px;
	font-weight: 900;
	line-height: 1;
}

.city-event-card-page__date-badge .month {
	font-size: 13px;
	font-weight: 800;
	margin-top: 4px;
}

.city-event-card-page__date-badge .year {
	font-size: 11px;
	opacity: 0.85;
}

.city-event-card-page__body {
	flex: 1;
	min-width: 0;
}

.city-event-card-page__body .meta-pills {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 8px;
}

.city-event-card-page__body .badge-type {
	font-size: 11.5px;
	font-weight: 800;
	background: var(--cis-teal-soft);
	color: var(--cis-teal-dark);
	padding: 2px 8px;
	border-radius: 4px;
}

.city-event-card-page__body .loc-pill,
.city-event-card-page__body .time-pill {
	font-size: 12px;
	color: var(--cis-text-muted);
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.city-event-card-page__title {
	font-size: 16.5px;
	font-weight: 800;
	margin: 0 0 8px;
	line-height: 1.45;
}

.city-event-card-page__title a {
	color: var(--cis-title-color);
	text-decoration: none;
	transition: color 0.18s ease;
}

.city-event-card-page__title a:hover {
	color: var(--cis-teal);
}

.city-event-card-page__desc {
	font-size: 13.5px;
	color: var(--cis-text-muted);
	line-height: 1.6;
	margin: 0;
}

/* Empty News Box */
.city-empty-news-box {
	padding: 50px 24px;
	text-align: center;
	background: #F8FAFC;
	border: 2px dashed #CBD5E1;
	border-radius: var(--cis-radius-md);
	max-width: 580px;
	margin: 0 auto;
}

.city-empty-news-box .empty-icon {
	font-size: 42px;
	margin-bottom: 12px;
}

.city-empty-news-box h3 {
	font-size: 18px;
	font-weight: 800;
	color: var(--cis-title-color);
	margin: 0 0 6px;
}

.city-empty-news-box p {
	font-size: 14px;
	color: var(--cis-text-muted);
	margin: 0;
}

/* ==========================================================================
   MOBILE RESPONSIVENESS & AUDIT SAFEGUARDS
   ========================================================================== */
html, body {
	max-width: 100vw !important;
	overflow-x: hidden !important;
}

@media (max-width: 991px) {
	.city-updates-grid {
		grid-template-columns: 1fr !important;
		gap: 24px !important;
	}

	.city-news-hero .city-page-title {
		font-size: 28px !important;
	}

	.city-news-tabs {
		flex-direction: column;
		align-items: stretch;
		max-width: 320px;
		margin: 20px auto 0;
	}

	.city-news-tab-btn {
		justify-content: center;
	}
}

@media (max-width: 768px) {
	.city-announcements-grid,
	.city-posts-grid,
	.city-events-page-grid {
		grid-template-columns: 1fr !important;
	}

	.city-event-card-page {
		flex-direction: column;
		align-items: flex-start;
	}

	.city-event-card-page__date-badge {
		flex-direction: row;
		gap: 8px;
		padding: 8px 14px;
		width: 100%;
		justify-content: center;
	}

	.city-event-card-page__date-badge .day {
		font-size: 18px;
	}

	.city-event-card-page__date-badge .month {
		margin-top: 0;
	}
}

@media (max-width: 480px) {
	.city-news-page-container {
		padding: 40px 14px 60px;
	}

	.city-announcement-card-full {
		padding: 18px 14px;
	}

	.city-update-col {
		padding: 20px 16px;
	}
}

/* ==========================================================================
   TOP ALERT / NOTIFICATION BAR (إعلانات القبول والعام الدراسي)
   ========================================================================== */
.city-top-alert-bar {
	background: linear-gradient(90deg, #0284C7 0%, #0369A1 50%, #0F766E 100%) !important;
	color: #FFFFFF !important;
	padding: 10px 0;
	position: relative;
	z-index: 1010;
	font-size: 14px;
	box-shadow: 0 2px 10px rgba(2, 132, 199, 0.2);
}

/* Strictly hide top alert bar on all student, teacher, parent portals and dashboard */
body.page-template-page-teacher-portal .city-top-alert-bar,
body.page-template-page-student-portal .city-top-alert-bar,
body.page-template-page-parent-portal .city-top-alert-bar,
body.page-template-page-dashboard .city-top-alert-bar,
body.page-template-page-login .city-top-alert-bar,
body[class*="teacher-portal"] .city-top-alert-bar,
body[class*="student-portal"] .city-top-alert-bar,
body[class*="parent-portal"] .city-top-alert-bar,
body[class*="dashboard"] .city-top-alert-bar {
	display: none !important;
	visibility: hidden !important;
	height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}

.city-top-alert-bar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.city-top-alert-bar__content {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-grow: 1;
}

.city-top-alert-bar__badge {
	background: rgba(255, 255, 255, 0.2);
	color: #FFFFFF;
	font-size: 11.5px;
	font-weight: 800;
	padding: 3px 10px;
	border-radius: var(--cis-radius-full);
	backdrop-filter: blur(4px);
	flex-shrink: 0;
}

.city-top-alert-bar__text {
	font-weight: 600;
	line-height: 1.4;
}

.city-top-alert-bar__actions {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-shrink: 0;
}

.city-top-alert-bar__btn {
	background: #FFFFFF;
	color: #0284C7 !important;
	font-size: 12.5px;
	font-weight: 800;
	padding: 5px 14px;
	border-radius: var(--cis-radius-full);
	text-decoration: none !important;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: all 0.25s ease;
}

.city-top-alert-bar__btn:hover {
	background: #F0F9FF;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.city-top-alert-bar__close {
	background: transparent;
	border: none;
	color: #FFFFFF;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	padding: 0 4px;
	opacity: 0.8;
	transition: opacity 0.2s;
}

.city-top-alert-bar__close:hover {
	opacity: 1;
}

@media (max-width: 768px) {
	.city-top-alert-bar__inner {
		justify-content: center;
		text-align: center;
	}
	.city-top-alert-bar__content {
		justify-content: center;
	}
}

/* ==========================================================================
   MOBILE BOTTOM DOCK NAVIGATION (شريط الوصول السريع للهواتف)
   ========================================================================== */
.city-mobile-bottom-dock {
	display: none;
}

@media (max-width: 768px) {
	.city-mobile-bottom-dock {
		display: flex !important;
		position: fixed !important;
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		height: 64px !important;
		background: rgba(255, 255, 255, 0.96) !important;
		backdrop-filter: blur(20px) !important;
		-webkit-backdrop-filter: blur(20px) !important;
		border-top: 1px solid rgba(2, 132, 199, 0.15) !important;
		box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.08) !important;
		z-index: 9999 !important;
		justify-content: space-around !important;
		align-items: center !important;
		padding: 0 10px !important;
	}

	body {
		padding-bottom: 64px !important;
	}

	.city-dock-item {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 3px !important;
		text-decoration: none !important;
		color: #64748B !important;
		font-size: 11px !important;
		font-weight: 700 !important;
		transition: all 0.2s ease !important;
		flex: 1 !important;
		padding: 6px 0 !important;
	}

	.city-dock-item svg {
		transition: transform 0.2s ease !important;
	}

	.city-dock-item:hover,
	.city-dock-item.is-active {
		color: #0284C7 !important;
	}

	.city-dock-item:hover svg,
	.city-dock-item.is-active svg {
		transform: translateY(-2px) !important;
	}

	.city-dock-item--highlight {
		color: #0284C7 !important;
	}

	.city-dock-item--highlight svg {
		color: #0284C7 !important;
	}
}

/* ==========================================================================
   CIS HALL OF FAME (لوحة الشرف والموهوبين)
   ========================================================================== */
.city-hall-of-fame-section {
	padding: 90px 0 !important;
	background: linear-gradient(180deg, #F0F9FF 0%, #E0F2FE 50%, #F8FAFC 100%) !important;
	border-top: 1px solid #BAE6FD !important;
	border-bottom: 1px solid #E0F2FE !important;
	position: relative;
}

.city-honor-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	margin-top: 40px;
}

.city-honor-card {
	background: #FFFFFF !important;
	border: 1.5px solid #BAE6FD !important;
	border-radius: var(--cis-radius-md) !important;
	padding: 30px 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	box-shadow: 0 10px 30px rgba(2, 132, 199, 0.08) !important;
	position: relative;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.city-honor-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 40px rgba(2, 132, 199, 0.15) !important;
	border-color: #0284C7 !important;
}

.city-honor-card__badge-tag {
	position: absolute;
	top: -14px;
	background: linear-gradient(135deg, #0284C7 0%, #0D9488 100%);
	color: #FFFFFF;
	font-size: 11.5px;
	font-weight: 800;
	padding: 5px 14px;
	border-radius: var(--cis-radius-full);
	box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25);
	display: flex;
	align-items: center;
	gap: 6px;
}

.city-honor-card__avatar-wrap {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	overflow: hidden;
	margin-top: 10px;
	margin-bottom: 18px;
	border: 3px solid #E0F2FE;
	box-shadow: 0 4px 16px rgba(2, 132, 199, 0.12);
	background: #F0F9FF;
	display: flex;
	align-items: center;
	justify-content: center;
}

.city-honor-card__avatar {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.city-honor-card__avatar-fallback {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 36px;
	font-weight: 800;
	color: #0284C7;
	background: linear-gradient(135deg, #E0F2FE 0%, #BAE6FD 100%);
}

.city-honor-card__name {
	font-size: 20px !important;
	font-weight: 800 !important;
	color: #0F172A !important;
	margin-bottom: 6px;
}

.city-honor-card__stage {
	font-size: 13px;
	font-weight: 700;
	color: #0284C7;
	background: #E0F2FE;
	padding: 4px 12px;
	border-radius: var(--cis-radius-full);
	display: inline-block;
	margin-bottom: 12px;
}

.city-honor-card__summary {
	font-size: 14.5px !important;
	line-height: 1.6 !important;
	color: #475569 !important;
	margin-bottom: 14px;
	flex-grow: 1;
}

.city-honor-card__year {
	font-size: 12px;
	color: #64748B;
	border-top: 1px solid #F1F5F9;
	padding-top: 10px;
	width: 100%;
}

@media (max-width: 900px) {
	.city-honor-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
}

@media (max-width: 600px) {
	.city-honor-grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   CIS BRAND TEXT ACCENT HIGHLIGHT
   ========================================================================== */
.cis-brand-highlight {
	color: #D97706 !important;
	background: linear-gradient(135deg, #F59E0B 0%, #EA580C 50%, #C2410C 100%) !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	font-weight: 900 !important;
	display: inline-block !important;
	padding-bottom: 0.22em !important;
	margin-bottom: -0.22em !important;
	padding-top: 0.05em !important;
	padding-inline: 0.05em !important;
	line-height: 1.35 !important;
	overflow: visible !important;
	vertical-align: baseline !important;
	filter: drop-shadow(0 2px 8px rgba(245, 158, 11, 0.22));
	letter-spacing: -0.2px;
}
.city-hero__headline .cis-brand-highlight {
	background: linear-gradient(135deg, #F59E0B 0%, #EA580C 45%, #B45309 100%) !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	filter: drop-shadow(0 2px 10px rgba(234, 88, 12, 0.3));
}
.city-final-cta-card .cis-brand-highlight,
.city-final-cta-content .cis-brand-highlight,
.city-final-cta-title .cis-brand-highlight,
.city-footer .cis-brand-highlight {
	color: #FEF08A !important;
	background: linear-gradient(135deg, #FEF08A 0%, #FBBF24 50%, #F59E0B 100%) !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	text-shadow: 0 2px 10px rgba(245, 158, 11, 0.4);
}
.city-hero__badge .cis-brand-highlight,
.city-section-badge .cis-brand-highlight {
	color: #D97706 !important;
	-webkit-text-fill-color: #D97706 !important;
}

/* ==========================================================================
   PORTAL BANNERS - GREETINGS & USER NAMES (WHITE & BRIGHT COLOR IN ALL PORTALS)
   ========================================================================== */
.csc-portal-banner h1,
.csc-portal-banner h2,
.csc-portal-banner h3,
.csc-portal-banner .csc-student-title h2,
.csc-student-profile-header h2,
.csc-student-title h2,
.csc-portal-container .csc-portal-banner h2,
.city-page-content .csc-portal-banner h2,
.csc-portal-banner .csc-student-title,
.csc-portal-banner .csc-meta-tags {
	color: #FFFFFF !important;
	-webkit-text-fill-color: #FFFFFF !important;
	font-weight: 800 !important;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
}
.csc-portal-banner .csc-meta-tags .badge {
	color: #FFFFFF !important;
	background: rgba(255, 255, 255, 0.2) !important;
	border: 1px solid rgba(255, 255, 255, 0.3) !important;
	backdrop-filter: blur(4px) !important;
}

/* ==========================================================================
   PARENT PARTNERSHIP / ONLINE LEARNING PANEL (IMAGE 2 FIX)
   ========================================================================== */
.city-online-learning-section .city-learning-box {
	background: #FFFFFF !important;
	border: 1.5px solid #BAE6FD !important;
	box-shadow: 0 16px 40px rgba(2, 132, 199, 0.08) !important;
	border-radius: 24px !important;
	padding: 48px 44px !important;
	display: grid !important;
	grid-template-columns: 1.15fr 0.85fr !important;
	gap: 48px !important;
	align-items: center !important;
}
.city-learning-content {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
}
.city-learning-kicker-wrap {
	display: flex !important;
	justify-content: flex-start !important;
	width: 100% !important;
	margin-bottom: 14px !important;
}
.city-online-learning-section .city-section-badge {
	width: auto !important;
	max-width: fit-content !important;
	display: inline-flex !important;
	align-items: center !important;
	margin-bottom: 0 !important;
	padding: 6px 18px !important;
	border-radius: 30px !important;
}
.city-learning-features-list {
	width: 100% !important;
}
.city-lfeat-item {
	display: flex !important;
	align-items: flex-start !important;
	gap: 14px !important;
	margin-bottom: 16px !important;
}

/* ==========================================================================
   PWA INSTALL BUTTON & IOS MODAL (IMAGE 3 FIX)
   ========================================================================== */
.city-pwa-install-btn {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	background: rgba(2, 132, 199, 0.1) !important;
	color: #0284C7 !important;
	border: 1px solid rgba(2, 132, 199, 0.3) !important;
	padding: 5px 14px !important;
	border-radius: 20px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	font-family: inherit !important;
	cursor: pointer !important;
	transition: all 0.25s ease !important;
	line-height: normal !important;
	vertical-align: middle !important;
	text-decoration: none !important;
}
.city-pwa-install-btn:hover {
	background: #0284C7 !important;
	color: #FFFFFF !important;
	border-color: #0284C7 !important;
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(2, 132, 199, 0.25);
}
.city-pwa-install-btn.is-installed {
	background: rgba(16, 185, 129, 0.12) !important;
	color: #059669 !important;
	border-color: rgba(16, 185, 129, 0.35) !important;
	cursor: default !important;
	transform: none !important;
	box-shadow: none !important;
}

.cis-ios-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.65);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	direction: rtl;
}
.cis-ios-modal-card {
	background: #FFFFFF;
	border-radius: 24px;
	max-width: 460px;
	width: 100%;
	padding: 24px;
	box-shadow: 0 24px 60px rgba(15, 23, 42, 0.3);
	border: 1px solid #E2E8F0;
	font-family: inherit;
}
.cis-ios-modal-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding-bottom: 16px;
	border-bottom: 1px solid #F1F5F9;
	margin-bottom: 16px;
}
.cis-ios-modal-close {
	background: #F1F5F9;
	border: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	font-size: 20px;
	color: #64748B;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}
.cis-ios-modal-steps {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 20px;
}
.cis-ios-step {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: #F8FAFC;
	padding: 12px 14px;
	border-radius: 14px;
	border: 1px solid #E2E8F0;
}
.cis-step-num {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #0284C7;
	color: #FFFFFF;
	font-weight: 800;
	font-size: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.cis-step-info strong {
	display: block;
	font-size: 14px;
	color: #0F172A;
	margin-bottom: 2px;
}
.cis-step-info p {
	margin: 0;
	font-size: 12.5px;
	color: #475569;
	line-height: 1.45;
}

/* ==========================================================================
   FINAL CTA BANNER & MOBILE RESPONSIVE SUITE
   ========================================================================== */
.city-final-cta-card {
	position: relative !important;
	border-radius: 24px !important;
	overflow: hidden !important;
	padding: 70px 40px !important;
	box-shadow: 0 20px 50px rgba(2, 132, 199, 0.18) !important;
	background-size: cover !important;
	background-position: center !important;
}
.city-final-cta-overlay {
	position: absolute !important;
	inset: 0 !important;
	background: linear-gradient(135deg, rgba(2, 132, 199, 0.94) 0%, rgba(13, 148, 136, 0.92) 100%) !important;
	pointer-events: none !important;
}
.city-cta-tag-wrap {
	display: flex !important;
	justify-content: center !important;
	margin-bottom: 18px !important;
}
.city-cta-tag {
	display: inline-flex !important;
	align-items: center !important;
	background: rgba(255, 255, 255, 0.22) !important;
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
	color: #FFFFFF !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	padding: 6px 20px !important;
	border-radius: 30px !important;
	border: 1px solid rgba(255, 255, 255, 0.4) !important;
}
.city-cta-title {
	font-size: 38px !important;
	font-weight: 900 !important;
	color: #FFFFFF !important;
	line-height: 1.3 !important;
	margin: 0 0 16px !important;
}
.city-cta-desc {
	font-size: 17px !important;
	color: #FFFFFF !important;
	opacity: 0.96 !important;
	line-height: 1.8 !important;
	max-width: 680px !important;
	margin: 0 auto 32px !important;
}
.city-cta-buttons {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 16px !important;
	flex-wrap: wrap !important;
}
.city-btn--cta-apply {
	background: linear-gradient(135deg, #E63946 0%, #D62828 100%) !important;
	color: #FFFFFF !important;
	padding: 13px 28px !important;
	font-weight: 800 !important;
	box-shadow: 0 8px 24px rgba(230, 57, 70, 0.35) !important;
}
.city-btn--cta-contact {
	background: rgba(255, 255, 255, 0.18) !important;
	border: 1.5px solid rgba(255, 255, 255, 0.5) !important;
	color: #FFFFFF !important;
	padding: 13px 28px !important;
	font-weight: 800 !important;
	backdrop-filter: blur(6px) !important;
}

/* ==========================================================================
   MOBILE VIEWPORT AUDIT & RESPONSIVENESS (< 991px, < 768px, < 480px)
   ========================================================================== */
@media (max-width: 991px) {
	.city-online-learning-section .city-learning-box {
		grid-template-columns: 1fr !important;
		gap: 36px !important;
		padding: 36px 28px !important;
	}
	.city-learning-visual {
		width: 100% !important;
		max-width: 520px !important;
		margin: 0 auto !important;
	}
}

@media (max-width: 768px) {
	/* Final CTA Mobile */
	.city-final-cta-section {
		padding: 40px 0 60px !important;
	}
	.city-final-cta-card {
		padding: 36px 18px !important;
		border-radius: 20px !important;
	}
	.city-cta-title {
		font-size: 24px !important;
		line-height: 1.35 !important;
		margin-bottom: 12px !important;
	}
	.city-cta-desc {
		font-size: 14.5px !important;
		line-height: 1.65 !important;
		margin-bottom: 22px !important;
	}
	.city-cta-buttons {
		flex-direction: column !important;
		width: 100% !important;
		gap: 12px !important;
	}
	.city-btn--cta-apply,
	.city-btn--cta-contact {
		width: 100% !important;
		justify-content: center !important;
		padding: 13px 20px !important;
		font-size: 15px !important;
	}

	/* Online Learning Mobile */
	.city-online-learning-section {
		padding: 50px 0 !important;
	}
	.city-online-learning-section .city-learning-box {
		padding: 24px 16px !important;
		border-radius: 18px !important;
	}
	.city-learning-title {
		font-size: 22px !important;
		line-height: 1.35 !important;
	}
	.city-learning-desc {
		font-size: 14px !important;
		line-height: 1.65 !important;
		margin-bottom: 20px !important;
	}
	.city-learning-actions {
		flex-direction: column !important;
		width: 100% !important;
		gap: 10px !important;
	}
	.city-learning-actions .city-btn {
		width: 100% !important;
		justify-content: center !important;
	}
	.city-mockup-frame {
		width: 100% !important;
	}

	/* Hero Section Mobile */
	.city-hero__headline {
		font-size: 26px !important;
		line-height: 1.35 !important;
	}
	.city-hero__badge {
		font-size: 12px !important;
		padding: 5px 12px !important;
	}
	.city-hero__cta-group {
		flex-direction: column !important;
		width: 100% !important;
		gap: 10px !important;
	}
	.city-hero__cta-group .city-btn {
		width: 100% !important;
		justify-content: center !important;
	}

	/* Mobile Dock Space Protection */
	body {
		padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
	}

	/* Form Inputs on Touch Devices */
	select, input[type="text"], input[type="email"], input[type="tel"], input[type="password"] {
		font-size: 15px !important;
	}
}

@media (max-width: 480px) {
	.city-final-cta-card {
		padding: 28px 14px !important;
		border-radius: 16px !important;
	}
	.city-cta-title {
		font-size: 21px !important;
	}
	.city-cta-desc {
		font-size: 13.5px !important;
	}
	.city-cta-tag {
		font-size: 11.5px !important;
		padding: 4px 14px !important;
	}
}

/* ==========================================================================
   PRE-PRODUCTION UI OVERHAUL: HERO DOODLES, BENTO, IMMERSIVE GALLERY & DARK FAQ
   ========================================================================== */

/* 1. Hero Floating Doodles & Enlarged Photo */
.city-hero__visual-wrap {
	position: relative !important;
	display: flex;
	align-items: center;
	justify-content: center;
}

.city-hero__image-card {
	width: 100% !important;
	max-width: 540px !important;
	aspect-ratio: 4/3.1 !important;
	border-radius: 28px !important;
	border: 5px solid #FFFFFF !important;
	box-shadow: 0 30px 70px rgba(15, 23, 42, 0.16), 0 10px 24px rgba(2, 132, 199, 0.12) !important;
	overflow: hidden !important;
	position: relative !important;
	z-index: 2;
}

.city-hero__image-overlay-glow {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.25) 0%, transparent 60%);
}

.cis-hero-doodle {
	position: absolute;
	z-index: 3;
	pointer-events: none;
	animation: cisFloat 6s ease-in-out infinite;
}

.cis-hero-doodle--cloud-top {
	top: -28px;
	left: -20px;
	width: 105px;
	color: rgba(224, 242, 254, 0.85);
	animation-duration: 8s;
}

.cis-hero-ambient-cloud {
	position: absolute;
	pointer-events: none;
	color: #BAE6FD;
	z-index: 1;
	animation: cisAmbientDrift 14s ease-in-out infinite alternate;
}

.cis-hero-ambient-cloud--1 {
	top: 15%;
	left: 8%;
	width: 130px;
}

.cis-hero-ambient-cloud--2 {
	bottom: 12%;
	right: 15%;
	width: 110px;
	animation-duration: 18s;
}

@keyframes cisAmbientDrift {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(25px);
	}
}

.cis-hero-doodle--kite {
	top: -45px;
	right: -15px;
	width: 75px;
	animation-duration: 7s;
	animation-delay: 1s;
}

.cis-hero-doodle--plane {
	bottom: 30px;
	right: -32px;
	width: 58px;
	animation-duration: 6.5s;
	animation-delay: 2s;
}

.cis-hero-doodle--sparkle {
	top: 40%;
	left: -22px;
	width: 26px;
	animation-duration: 4.5s;
	animation-delay: 0.5s;
}

@keyframes cisFloat {
	0%, 100% {
		transform: translateY(0) rotate(0deg);
	}
	50% {
		transform: translateY(-8px) rotate(2deg);
	}
}

/* 2. Bento About & Goals */
.cis-bento-narrative {
	background: #FFFFFF !important;
	border: 1.5px solid var(--cis-border-sky) !important;
	border-radius: 28px !important;
	padding: 38px 36px !important;
	box-shadow: 0 18px 45px rgba(15, 23, 42, 0.05) !important;
}

.cis-bento-badge-row {
	display: flex;
	gap: 10px;
	margin-bottom: 18px;
}

.cis-badge-pill {
	display: inline-flex;
	align-items: center;
	padding: 5px 14px;
	background: #EFF6FF;
	color: #0284C7;
	border-radius: 50px;
	font-size: 12.5px;
	font-weight: 800;
	border: 1px solid #BAE6FD;
}

.cis-badge-pill--accent {
	background: #FEF3C7;
	color: #D97706;
	border-color: #FDE68A;
}

.cis-bento-callout {
	background: #F8FAFC !important;
	border: 1.5px solid #E2E8F0 !important;
	border-radius: 18px !important;
	padding: 20px 22px !important;
	margin: 22px 0 28px !important;
}

.cis-bento-visual {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.cis-bento-photo-card {
	position: relative !important;
	border-radius: 24px !important;
	overflow: hidden !important;
	border: 3px solid #FFFFFF !important;
	box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08) !important;
}

.cis-bento-photo-card img {
	width: 100%;
	height: 290px;
	object-fit: cover;
	display: block;
}

.cis-bento-float-badge {
	position: absolute;
	bottom: 18px;
	right: 18px;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(8px);
	border: 1.5px solid rgba(255, 255, 255, 0.8);
	border-radius: 16px;
	padding: 10px 18px;
	display: flex;
	align-items: center;
	gap: 12px;
	box-shadow: 0 12px 30px rgba(15, 23, 42, 0.15);
}

.cis-bento-float-icon {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: #FEF3C7;
	color: #D97706;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cis-bento-float-text {
	display: flex;
	flex-direction: column;
}

.cis-bento-float-text strong {
	font-size: 14.5px;
	color: #0F2C59;
}

.cis-bento-float-text span {
	font-size: 11.5px;
	color: #64748B;
}

.cis-bento-cards-row {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 16px !important;
}

.cis-bento-mini-card {
	background: #FFFFFF !important;
	border: 1.5px solid #E2E8F0 !important;
	border-radius: 20px !important;
	padding: 24px 20px !important;
	box-shadow: 0 10px 25px rgba(15, 23, 42, 0.03) !important;
	transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.cis-bento-mini-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 36px rgba(2, 132, 199, 0.1) !important;
	border-color: #BAE6FD !important;
}

/* 6 Strategic Goals Modern Bento Style */
.cis-goals-bento-wrap {
	margin-top: 80px !important;
	padding-top: 60px !important;
	border-top: 1px solid #E2E8F0 !important;
}

.cis-goals-bento-title {
	font-size: 32px !important;
	font-weight: 900 !important;
	color: #0F2C59 !important;
	margin: 10px 0 8px !important;
}

.cis-goals-bento-sub {
	font-size: 15.5px !important;
	color: #64748B !important;
	max-width: 650px;
	margin: 0 auto !important;
}

.cis-bento-goals-grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 22px !important;
	margin-top: 36px;
}

.cis-bento-goal-card {
	background: #FAFAFA !important;
	border: 1.5px solid #E2E8F0 !important;
	border-radius: 22px !important;
	padding: 28px 24px !important;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
	position: relative;
	overflow: hidden;
}

.cis-bento-goal-card:hover {
	background: #FFFFFF !important;
	border-color: #0284C7 !important;
	transform: translateY(-6px) !important;
	box-shadow: 0 20px 45px rgba(2, 132, 199, 0.12) !important;
}

.cis-bento-goal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.cis-bento-goal-card .city-goal-num {
	font-size: 26px !important;
	font-weight: 900 !important;
	color: #0284C7 !important;
	line-height: 1;
	opacity: 0.9;
}

.cis-bento-goal-icon {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: #EFF6FF;
	color: #0284C7;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.25s ease, color 0.25s ease;
}

.cis-bento-goal-card:hover .cis-bento-goal-icon {
	background: #0284C7;
	color: #FFFFFF;
}

.cis-bento-goal-card h4 {
	font-size: 19px !important;
	font-weight: 800 !important;
	color: #0F2C59 !important;
	margin: 0 0 10px !important;
}

.cis-bento-goal-card p {
	font-size: 14px !important;
	color: #475569 !important;
	line-height: 1.75 !important;
	margin: 0 0 18px !important;
	flex-grow: 1;
}

.cis-bento-goal-tag {
	align-self: flex-start;
	font-size: 11px;
	font-weight: 800;
	padding: 4px 10px;
	background: #F1F5F9;
	color: #64748B;
	border-radius: 6px;
}

/* 3. Immersive School Life Full-Bleed Gallery */
.cis-gallery-bleed-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	margin-bottom: 55px;
}

.cis-bleed-card {
	position: relative;
	height: 380px;
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 22px;
	box-sizing: border-box;
}

.cis-bleed-card:hover {
	transform: translateY(-7px);
	box-shadow: 0 24px 50px rgba(15, 23, 42, 0.2);
}

.cis-bleed-card__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
	transition: transform 0.6s ease;
}

.cis-bleed-card:hover .cis-bleed-card__bg {
	transform: scale(1.08);
}

.cis-bleed-card__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(180deg, rgba(15, 44, 89, 0.65) 0%, rgba(15, 23, 42, 0.2) 40%, rgba(15, 23, 42, 0.92) 100%);
	pointer-events: none;
}

.cis-bleed-card__top {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.cis-bleed-card__tag {
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(6px);
	color: #0F2C59;
	font-size: 11.5px;
	font-weight: 800;
	padding: 5px 12px;
	border-radius: 50px;
}

.cis-bleed-card__icon {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(6px);
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cis-bleed-card__body {
	position: relative;
	z-index: 3;
}

.cis-bleed-card__title {
	color: #FFFFFF !important;
	font-size: 18.5px !important;
	font-weight: 900 !important;
	margin: 0 0 8px !important;
	line-height: 1.35;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.cis-bleed-card__desc {
	color: rgba(255, 255, 255, 0.88) !important;
	font-size: 13px !important;
	line-height: 1.6 !important;
	margin: 0 0 16px !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cis-bleed-pill-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 7px 18px;
	background: #FFFFFF;
	color: #0F2C59;
	border-radius: 50px;
	font-size: 12.5px;
	font-weight: 800;
	text-decoration: none;
	transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.cis-bleed-pill-btn:hover {
	background: #0284C7;
	color: #FFFFFF;
	transform: scale(1.04);
}

/* 4. Modern Bento Activities Grid */
.cis-bento-activities-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.cis-bento-activity-card {
	background: #F8FAFC !important;
	border: 1.5px solid #E2E8F0 !important;
	border-radius: 20px !important;
	padding: 26px 22px !important;
	transition: all 0.25s ease !important;
}

.cis-bento-activity-card:hover {
	background: #FFFFFF !important;
	border-color: #0284C7 !important;
	transform: translateY(-4px) !important;
	box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08) !important;
}

.cis-bento-activity-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 800;
	color: #0284C7;
	background: #EFF6FF;
	padding: 4px 10px;
	border-radius: 50px;
	margin-bottom: 14px;
}

.cis-bento-activity-badge svg {
	color: #0284C7;
}

.cis-bento-activity-card h4 {
	font-size: 18px !important;
	font-weight: 800 !important;
	color: #0F2C59 !important;
	margin: 0 0 10px !important;
}

.cis-bento-activity-card p {
	font-size: 13.5px !important;
	color: #64748B !important;
	line-height: 1.7 !important;
	margin: 0 !important;
}

/* Background Ambient Doodles (Spread across wide hero canvas) */
.cis-hero-bg-doodle {
	position: absolute;
	pointer-events: none;
	z-index: 1;
	animation: cisFloat 7s ease-in-out infinite;
}

.cis-hero-bg-doodle--kite {
	top: 18%;
	left: 4%;
	width: 80px;
	animation-duration: 8s;
}

.cis-hero-bg-doodle--plane {
	top: 60%;
	left: 6%;
	width: 58px;
	animation-duration: 6.5s;
	animation-delay: 1.5s;
}

.cis-hero-bg-doodle--sparkle {
	top: 30%;
	right: 46%;
	width: 24px;
	animation-duration: 5s;
}

/* 5. Modern High-Contrast FAQ Section */
.cis-faq-modern {
	background: #F0F9FF !important; /* Elegant Light Sky Canvas */
	padding: 90px 0 !important;
	color: #0F172A !important;
}

.cis-faq-layout-grid {
	display: grid;
	grid-template-columns: 0.95fr 1.05fr;
	gap: 48px;
	align-items: flex-start;
}

.cis-faq-editorial-col {
	padding-left: 20px;
}

.cis-faq-pill-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 16px;
	background: #E0F2FE !important;
	border: 1.5px solid #BAE6FD !important;
	border-radius: 50px;
	color: #0284C7 !important;
	font-size: 13.5px;
	font-weight: 800;
	margin-bottom: 22px;
}

.cis-faq-badge-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #0284C7;
}

/* Headline: Distinct Dark Color (Deep Navy-Charcoal with Sky/Teal accent) */
.cis-faq-headline {
	font-size: 42px !important;
	font-weight: 900 !important;
	color: #0F2C59 !important; /* Deep Royal Navy */
	line-height: 1.25 !important;
	margin: 0 0 16px !important;
	text-shadow: none !important;
}

/* Subtitle: Distinct Dark Charcoal/Slate for clear reading */
.cis-faq-lead-desc {
	font-size: 16.5px !important;
	color: #334155 !important; /* Deep Slate Gray */
	font-weight: 600 !important;
	line-height: 1.85 !important;
	margin: 0 0 32px !important;
}

.cis-faq-trust-card {
	display: flex;
	align-items: center;
	gap: 16px;
	background: #0B192C !important; /* Deep Navy Card */
	border: 1.5px solid #1E293B !important;
	border-radius: 20px;
	padding: 18px 24px;
	margin-bottom: 26px;
	box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
}

.cis-faq-trust-avatars {
	display: flex;
	align-items: center;
}

.cis-avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 2px solid #0B192C;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: -8px;
	overflow: hidden;
}

.cis-avatar--count {
	background: #0284C7;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: 900;
}

.cis-faq-trust-text {
	display: flex;
	flex-direction: column;
}

.cis-faq-trust-text strong {
	font-size: 15px;
	color: #FFFFFF !important;
}

.cis-faq-trust-text span {
	font-size: 12.5px;
	color: #CBD5E1 !important;
}

.cis-faq-highlights {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* Highlights Pills: Dark distinct background and readable text */
.cis-faq-mini-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 18px;
	background: #FFFFFF !important;
	border: 1.5px solid #CBD5E1 !important;
	border-radius: 12px;
	font-size: 14px !important;
	font-weight: 800 !important;
	color: #0F2C59 !important; /* Clear Dark Royal Charcoal */
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}

.cis-faq-mini-pill svg {
	color: #059669 !important; /* Vibrant Emerald Green */
}

/* Crystal-Clear FAQ Accordion Boxes (Before and After Opening) */
.cis-faq-box {
	background: #FFFFFF !important; /* Clean White surface before open */
	border: 1.5px solid #CBD5E1 !important;
	border-radius: 18px !important;
	overflow: hidden;
	transition: all 0.28s ease !important;
	margin-bottom: 14px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.cis-faq-box__summary {
	padding: 22px 26px !important;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	list-style: none;
	user-select: none;
}

.cis-faq-box__summary::-webkit-details-marker {
	display: none;
}

/* Question Title: Dark Charcoal Navy BEFORE open for crystal clear readability */
.cis-faq-box__title {
	color: #0F2C59 !important;
	font-size: 17.5px !important;
	font-weight: 800 !important;
	line-height: 1.5;
	transition: color 0.2s ease;
}

.cis-faq-box__icon {
	color: #64748B;
	transition: transform 0.25s ease, color 0.25s ease;
	flex-shrink: 0;
	margin-right: 12px;
}

/* When Accordion is OPEN: Deep Navy background with crisp White/Cyan text */
.cis-faq-box[open] {
	background: #1E293B !important;
	border-color: #38BDF8 !important;
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35) !important;
}

.cis-faq-box[open] .cis-faq-box__title {
	color: #38BDF8 !important; /* Glowing Sky Blue on Dark when open */
}

.cis-faq-box[open] .cis-faq-box__icon {
	transform: rotate(180deg);
	color: #38BDF8 !important;
}

.cis-faq-box__answer {
	padding: 0 26px 24px !important;
	color: #E2E8F0 !important;
	font-size: 15px !important;
	line-height: 1.85 !important;
}

.cis-faq-box__badge {
	background: rgba(56, 189, 248, 0.2) !important;
	color: #38BDF8 !important;
	display: inline-block;
	margin-bottom: 12px;
	font-weight: 800;
	padding: 4px 14px !important;
	border-radius: 50px;
	font-size: 12px;
	border: 1px solid rgba(56, 189, 248, 0.3);
}

.cis-faq-col-footer {
	margin-top: 24px;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	color: #CBD5E1 !important;
}

.cis-faq-col-link {
	color: #38BDF8 !important;
	text-decoration: none;
	font-weight: 800;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: color 0.2s ease;
}

.cis-faq-col-link:hover {
	color: #7DD3FC !important;
}

/* 6. Media Updates (News, Events, Announcements Bento Cards) */
.cis-bento-updates-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 36px;
}

html:not(.city-dark-mode):not([data-theme="dark"]) .cis-bento-update-col {
	background: #FFFFFF !important;
	border: 1.5px solid #E2E8F0 !important;
	border-radius: 24px !important;
	padding: 26px 22px !important;
	box-shadow: 0 12px 35px rgba(15, 23, 42, 0.04) !important;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

html:not(.city-dark-mode):not([data-theme="dark"]) .cis-bento-update-col:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 45px rgba(2, 132, 199, 0.08) !important;
	border-color: #BAE6FD !important;
}

html:not(.city-dark-mode):not([data-theme="dark"]) .cis-bento-update-col__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 18px;
	border-bottom: 1.5px solid #F1F5F9;
	margin-bottom: 20px;
}

.cis-bento-header-icon {
	width: 38px;
	height: 38px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cis-bento-header-icon--news {
	background: #EFF6FF;
	color: #0284C7;
}

.cis-bento-header-icon--events {
	background: #ECFDF5;
	color: #059669;
}

.cis-bento-header-icon--announcements {
	background: #FEF3C7;
	color: #D97706;
}

.cis-bento-pill-tag {
	font-size: 11.5px !important;
	font-weight: 800 !important;
	padding: 4px 10px !important;
	border-radius: 50px !important;
	background: #EFF6FF !important;
	color: #0284C7 !important;
}

.cis-bento-pill-tag--teal {
	background: #ECFDF5 !important;
	color: #059669 !important;
}

.cis-bento-pill-tag--amber {
	background: #FEF3C7 !important;
	color: #D97706 !important;
}

html:not(.city-dark-mode):not([data-theme="dark"]) .cis-bento-news-card {
	background: #F8FAFC !important;
	border: 1px solid #E2E8F0 !important;
	border-radius: 16px !important;
	overflow: hidden;
	margin-bottom: 16px;
}

html:not(.city-dark-mode):not([data-theme="dark"]) .cis-bento-event-card {
	display: flex;
	align-items: center;
	gap: 16px;
	background: #F8FAFC !important;
	border: 1px solid #E2E8F0 !important;
	border-radius: 16px !important;
	padding: 16px !important;
	margin-bottom: 16px;
}

.cis-bento-datebox {
	width: 54px;
	height: 58px;
	border-radius: 12px;
	background: linear-gradient(135deg, #0284C7 0%, #0369A1 100%) !important;
	color: #FFFFFF !important;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25);
}

.cis-bento-datebox .day {
	font-size: 19px !important;
	font-weight: 900 !important;
	line-height: 1;
}

.cis-bento-datebox .month {
	font-size: 11px !important;
	font-weight: 700 !important;
}

html:not(.city-dark-mode):not([data-theme="dark"]) .cis-bento-announcement-card {
	background: #F8FAFC !important;
	border: 1px solid #E2E8F0 !important;
	border-right: 4px solid #D97706 !important;
	border-radius: 16px !important;
	padding: 16px 18px !important;
	margin-bottom: 16px;
}

/* ==========================================================================
   RESPONSIVE OVERRIDES (MOBILE & TABLET EXCELLENCE)
   ========================================================================== */
@media (max-width: 991px) {
	.city-hero__layout {
		grid-template-columns: 1fr !important;
		gap: 32px;
	}
	.city-hero__visual-wrap {
		margin-top: 10px;
		width: 100% !important;
	}
	.city-hero__image-card {
		max-width: 100% !important;
	}
	.cis-bento-cards-row {
		grid-template-columns: 1fr !important;
	}
	.cis-bento-goals-grid,
	.cis-gallery-bleed-grid,
	.cis-bento-activities-grid,
	.cis-bento-updates-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	.cis-faq-layout-grid {
		grid-template-columns: 1fr !important;
		gap: 36px;
	}
	.cis-faq-editorial-col {
		padding-left: 0;
	}
}

@media (max-width: 768px) {
	/* Fix Hero visual card and floating badge squishing on Mobile */
	.city-hero__visual-wrap {
		flex-direction: column !important;
		align-items: center !important;
		width: 100% !important;
		position: relative !important;
	}

	.city-hero__image-card {
		width: 100% !important;
		max-width: 100% !important;
		aspect-ratio: 16/10 !important;
		border-radius: 20px !important;
		border-width: 3px !important;
	}

	.city-hero__floating-badge {
		position: relative !important;
		bottom: auto !important;
		left: auto !important;
		right: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-top: 14px !important;
		box-sizing: border-box !important;
		justify-content: flex-start !important;
		padding: 12px 18px !important;
		border-radius: 14px !important;
		flex-direction: row !important;
	}

	/* Hero Doodles on Mobile: Scaled and positioned gracefully */
	.cis-hero-bg-doodle {
		display: block !important;
		opacity: 0.75;
		z-index: 1;
	}

	.cis-hero-bg-doodle--kite {
		top: 4%;
		left: 3%;
		width: 48px !important;
	}

	.cis-hero-bg-doodle--plane {
		top: 48%;
		left: 4%;
		width: 40px !important;
	}

	.cis-hero-bg-doodle--sparkle {
		top: 12%;
		right: 6%;
		width: 18px !important;
	}

	.cis-bento-narrative {
		padding: 24px 18px !important;
	}

	.cis-bento-goals-grid,
	.cis-gallery-bleed-grid,
	.cis-bento-activities-grid,
	.cis-bento-updates-grid {
		grid-template-columns: 1fr !important;
	}

	.cis-bleed-card {
		height: 320px;
	}

	.cis-faq-headline {
		font-size: 28px !important;
	}

	.cis-faq-col-footer {
		flex-direction: column;
		gap: 12px;
		align-items: flex-start;
	}

	/* ==========================================================================
	   MOBILE FOOTER REORGANIZATION & POLISH (< 768px)
	   ========================================================================== */
	.city-footer {
		padding: 50px 0 30px !important;
	}

	.city-footer__grid {
		display: flex !important;
		flex-direction: column !important;
		gap: 32px !important;
		margin-bottom: 30px !important;
	}

	.city-footer__col {
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
		padding-bottom: 24px;
	}

	.city-footer__col:last-child {
		border-bottom: none;
		padding-bottom: 0;
	}

	.city-footer__col--brand {
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.city-footer__brand {
		justify-content: center;
		margin-bottom: 12px;
	}

	.city-footer__brand-text {
		align-items: center;
		text-align: center;
	}

	.city-footer__about p {
		text-align: center;
		font-size: 13.5px;
		line-height: 1.8;
		max-width: 380px;
		margin: 0 auto 14px;
	}

	.city-footer__countries {
		text-align: center;
		margin-bottom: 16px;
	}

	.city-footer__social {
		justify-content: center;
	}

	.city-footer__heading {
		font-size: 17px !important;
		margin-bottom: 18px !important;
		padding-bottom: 8px !important;
	}

	.city-footer__heading::after {
		width: 32px;
		height: 2.5px;
	}

	.city-footer__links {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px 14px;
	}

	.city-footer__links li {
		margin-bottom: 0;
	}

	.city-footer__links li a {
		font-size: 13.5px !important;
		line-height: 1.5;
	}

	.city-footer__contact {
		gap: 10px;
	}

	.city-footer__contact li {
		font-size: 13px;
	}

	.city-footer-branches-chips {
		margin-top: 14px;
	}

	.city-footer-branch-chip {
		font-size: 12px;
		padding: 7px 12px;
		border-radius: 8px;
	}

	/* Copyright & Bottom Bar on Mobile */
	.city-copyright-bar {
		padding: 20px 0 !important;
		margin-top: 24px !important;
	}

	.city-copyright-bar__inner {
		flex-direction: column !important;
		text-align: center !important;
		gap: 16px !important;
	}

	.city-copyright-bar__text {
		font-size: 12.5px !important;
		line-height: 1.7;
	}

	.city-copyright-bar__links {
		justify-content: center;
		flex-wrap: wrap;
		gap: 12px;
	}

	.city-copyright-bar__links a {
		font-size: 12.5px !important;
	}

	.city-pwa-install-btn {
		width: 100%;
		justify-content: center;
		margin-top: 8px;
	}
}

/* ==========================================================================
   HOMEPAGE & GLOBAL INNER PAGES SECTION HEADERS & BADGES CENTER BALANCING (v3.0.3)
   Guarantees 100% strict center alignment across all sections, inner pages, portals, and dialogs.
   ========================================================================== */
.city-section-header,
.city-section-header.text-center,
.city-section__head,
.city-section__header,
.text-center,
.cis-goals-bento-wrap > .text-center,
.city-goals-wrapper .text-center,
.city-goals-wrapper > div:first-child,
.city-page-banner,
.city-page-banner .city-container,
.city-login__head,
.city-learning-kicker-wrap,
.city-cta-tag-wrap,
.city-final-cta-content {
	text-align: center !important;
	margin-left: auto !important;
	margin-right: auto !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
}

/* Badges / Pills: Absolute center alignment */
.city-section-badge,
.city-section-badge--light,
.city-section__tag,
.city-section__kicker,
.city-page-tag,
.city-cta-tag,
.city-section-header .city-section-badge,
.cis-goals-bento-wrap .city-section-badge,
.city-hero__badge {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	margin-left: auto !important;
	margin-right: auto !important;
	align-self: center !important;
}

/* Section Titles (H1, H2, H3): Absolute center alignment */
.city-section-title,
.city-section__title,
.city-page-title,
.city-cta-title,
.cis-goals-bento-title,
.city-login__title,
.city-section-header h2,
.city-section-header h3,
.city-section__head h2,
.city-section__head h3,
.city-goals-wrapper h3 {
	text-align: center !important;
	margin-left: auto !important;
	margin-right: auto !important;
	width: 100% !important;
	align-self: center !important;
}

/* Section Subtitles: Centered with readable max-width */
.city-section-subtitle,
.city-section__subtitle,
.city-page-subtitle,
.city-cta-desc,
.cis-goals-bento-sub,
.city-login__subtitle,
.city-section-header p,
.city-section__head p,
.city-goals-wrapper p {
	text-align: center !important;
	margin-left: auto !important;
	margin-right: auto !important;
	max-width: 760px !important;
	line-height: 1.85 !important;
	align-self: center !important;
}

/* Responsive balancing for mobile screens */
@media screen and (max-width: 768px) {
	.city-section-title,
	.city-section__title,
	.city-page-title,
	.city-cta-title,
	.cis-goals-bento-title {
		font-size: 24px !important;
		line-height: 1.4 !important;
	}
	.city-section-subtitle,
	.city-section__subtitle,
	.city-page-subtitle,
	.city-cta-desc,
	.cis-goals-bento-sub {
		font-size: 14.5px !important;
		padding: 0 10px !important;
	}
	.city-section-badge,
	.city-page-tag,
	.city-section__tag {
		font-size: 12px !important;
		padding: 5px 14px !important;
	}
}

/* ==========================================================================
   DARK MODE TOGGLE BUTTON & TOP-LEFT LOGOUT BUTTON
   ========================================================================== */
.city-theme-toggle-btn {
	background: #f1f5f9;
	color: #0f172a;
	border: 1px solid #cbd5e1;
	border-radius: 9999px;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	font-size: 18px;
	line-height: 1;
	transition: all 0.25s ease;
	box-shadow: 0 1px 3px rgba(0,0,0,0.06);
	flex-shrink: 0;
}
.city-theme-toggle-btn:hover {
	background: #e2e8f0;
	transform: scale(1.05);
	border-color: #94a3b8;
}
.city-theme-toggle-btn:focus-visible {
	outline: 2px solid var(--cis-sky);
	outline-offset: 2px;
}
.city-btn--mobile-theme-toggle {
	width: 100% !important;
	height: 44px !important;
	border-radius: 10px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	font-size: 14.5px !important;
	font-weight: 700 !important;
	margin-bottom: 10px !important;
	background: #f1f5f9 !important;
	color: #0f172a !important;
	border: 1px solid #cbd5e1 !important;
}

/* Universal Top-Left Logout Button */
.city-btn--header-logout {
	background: #fff1f2 !important;
	color: #e11d48 !important;
	border: 1.5px solid #fecdd3 !important;
	padding: 8px 16px !important;
	border-radius: 9999px !important;
	font-weight: 700 !important;
	font-size: 13.5px !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 7px !important;
	text-decoration: none !important;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
	box-shadow: 0 1px 3px rgba(225, 29, 72, 0.08) !important;
	flex-shrink: 0;
}
.city-btn--header-logout svg {
	stroke: #e11d48;
	transition: transform 0.2s ease;
}
.city-btn--header-logout:hover {
	background: #e11d48 !important;
	color: #ffffff !important;
	border-color: #e11d48 !important;
	box-shadow: 0 4px 12px rgba(225, 29, 72, 0.25) !important;
	transform: translateY(-1px);
}
.city-btn--header-logout:hover svg {
	stroke: #ffffff;
	transform: translateX(-2px);
}
.city-btn--mobile-logout {
	width: 100% !important;
	height: 44px !important;
	border-radius: 10px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	font-size: 14.5px !important;
	font-weight: 700 !important;
	margin-top: 10px !important;
	background: #fff1f2 !important;
	color: #e11d48 !important;
	border: 1.5px solid #fecdd3 !important;
	text-decoration: none !important;
}
.city-btn--mobile-logout:hover {
	background: #e11d48 !important;
	color: #ffffff !important;
}

@media (max-width: 480px) {
	.city-btn--header-logout span {
		display: none !important;
	}
	.city-btn--header-logout {
		padding: 8px 10px !important;
	}
	.city-theme-toggle-btn {
		width: 36px !important;
		height: 36px !important;
		font-size: 16px !important;
	}
}

/* ==========================================================================
   PROFESSIONAL HARMONIOUS DARK MODE PALETTE
   Full High-Contrast Compatibility for All Sections, Bento Cards & Portals
   ========================================================================== */
html.city-dark-mode,
html[data-theme="dark"],
body.city-dark-mode {
	--cis-body-bg: #0b0f19;
	--cis-surface: #111827;
	--cis-surface-elevated: #1e293b;
	--cis-border: #1e293b;
	--cis-border-subtle: #1e293b;
	--cis-border-color: #1e293b;
	--cis-border-light: #1e293b;
	--cis-border-sky: rgba(56, 189, 248, 0.35);
	--cis-text: #f8fafc;
	--cis-text-secondary: #cbd5e1;
	--cis-text-muted: #94a3b8;
	--cis-muted-color: #94a3b8;
	--cis-title-color: #f8fafc;
	--cis-body-color: #cbd5e1;
	--cis-text-dark: #f8fafc;
	--cis-white: #111827;
	--cis-bg-light: #0b0f19;
	--cis-canvas: #0b0f19;
	--cis-canvas-sky: #0b0f19;
	--cis-sky: #38bdf8;
	--cis-sky-dark: #0284c7;
	--cis-sky-bg: rgba(56, 189, 248, 0.12);
	--cis-navy: #f8fafc;
	--cis-navy-dark: #cbd5e1;
	--cis-card-bg: #111827;
	--cis-card-border: #1e293b;
	background-color: #0b0f19 !important;
	color: #f8fafc !important;
	color-scheme: dark;
}

/* Backgrounds & Text */
html.city-dark-mode body,
html[data-theme="dark"] body {
	background-color: #0b0f19 !important;
	color: #f8fafc !important;
}

html.city-dark-mode h1,
html.city-dark-mode h2,
html.city-dark-mode h3,
html.city-dark-mode h4,
html.city-dark-mode h5,
html.city-dark-mode h6,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
	color: #f8fafc !important;
	-webkit-text-fill-color: initial;
}

html.city-dark-mode p,
html[data-theme="dark"] p {
	color: #cbd5e1;
}

/* Top Alert Bar */
html.city-dark-mode .city-top-alert-bar,
html[data-theme="dark"] .city-top-alert-bar {
	background: #0f172a !important;
	border-bottom: 1px solid #1e293b !important;
	color: #e2e8f0 !important;
}

/* Main Site Header (Idle & Scrolled) in Dark Mode */
html.city-dark-mode .city-header,
html.city-dark-mode .city-header.is-scrolled,
html[data-theme="dark"] .city-header,
html[data-theme="dark"] .city-header.is-scrolled {
	background: #0b0f19 !important;
	border-bottom: 1px solid #1e293b !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
}
html.city-dark-mode .city-header::after,
html.city-dark-mode .city-header.is-scrolled::after,
html[data-theme="dark"] .city-header::after,
html[data-theme="dark"] .city-header.is-scrolled::after {
	display: none !important;
	content: none !important;
}
html.city-dark-mode .city-header__name,
html[data-theme="dark"] .city-header__name {
	color: #ffffff !important;
}
html.city-dark-mode .city-header__tagline,
html[data-theme="dark"] .city-header__tagline {
	color: #94a3b8 !important;
}
html.city-dark-mode .city-header__menu > li > a,
html[data-theme="dark"] .city-header__menu > li > a {
	color: #cbd5e1 !important;
}
html.city-dark-mode .city-header__menu > li > a:hover,
html[data-theme="dark"] .city-header__menu > li > a:hover {
	color: #38bdf8 !important;
	background: #1e293b !important;
}
html.city-dark-mode .city-header__menu li.current-menu-item a,
html[data-theme="dark"] .city-header__menu li.current-menu-item a {
	color: #38bdf8 !important;
	background: rgba(56, 189, 248, 0.15) !important;
	box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.3) !important;
}
html.city-dark-mode .city-header__sub-menu,
html[data-theme="dark"] .city-header__sub-menu {
	background: #111827 !important;
	border: 1px solid #334155 !important;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5) !important;
}
html.city-dark-mode .city-header__sub-menu a,
html[data-theme="dark"] .city-header__sub-menu a {
	color: #cbd5e1 !important;
}
html.city-dark-mode .city-header__sub-menu a:hover,
html[data-theme="dark"] .city-header__sub-menu a:hover {
	color: #38bdf8 !important;
	background: #1e293b !important;
}

/* Header Action Buttons in Dark Mode */
html.city-dark-mode .city-theme-toggle-btn,
html[data-theme="dark"] .city-theme-toggle-btn {
	background: #1e293b !important;
	color: #fbbf24 !important;
	border-color: #334155 !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}
html.city-dark-mode .city-theme-toggle-btn:hover,
html[data-theme="dark"] .city-theme-toggle-btn:hover {
	background: #334155 !important;
	border-color: #475569 !important;
	color: #fde047 !important;
}
html.city-dark-mode .city-btn--header-logout,
html[data-theme="dark"] .city-btn--header-logout {
	background: rgba(225, 29, 72, 0.14) !important;
	color: #fda4af !important;
	border-color: rgba(225, 29, 72, 0.35) !important;
}
html.city-dark-mode .city-btn--header-logout svg,
html[data-theme="dark"] .city-btn--header-logout svg {
	stroke: #fda4af !important;
}
html.city-dark-mode .city-btn--header-logout:hover,
html[data-theme="dark"] .city-btn--header-logout:hover {
	background: #e11d48 !important;
	color: #ffffff !important;
	border-color: #e11d48 !important;
}
html.city-dark-mode .city-btn--header-logout:hover svg,
html[data-theme="dark"] .city-btn--header-logout:hover svg {
	stroke: #ffffff !important;
}
html.city-dark-mode .city-btn--header-portal,
html[data-theme="dark"] .city-btn--header-portal {
	background: #1e293b !important;
	color: #38bdf8 !important;
	border-color: #334155 !important;
}
html.city-dark-mode .city-btn--header-portal:hover,
html[data-theme="dark"] .city-btn--header-portal:hover {
	background: #334155 !important;
	color: #7dd3fc !important;
}
html.city-dark-mode .city-btn--header-profile,
html[data-theme="dark"] .city-btn--header-profile {
	background: #1e293b !important;
	color: #cbd5e1 !important;
	border-color: #334155 !important;
}

/* Mobile Drawer in Dark Mode */
html.city-dark-mode .city-header__burger span,
html[data-theme="dark"] .city-header__burger span {
	background: #f8fafc !important;
}
html.city-dark-mode .city-header__mobile-drawer,
html[data-theme="dark"] .city-header__mobile-drawer {
	background: #0b0f19 !important;
	border-top: 1px solid #1e293b !important;
}
html.city-dark-mode .city-mobile-nav a,
html[data-theme="dark"] .city-mobile-nav a {
	color: #cbd5e1 !important;
	border-bottom-color: #1e293b !important;
}
html.city-dark-mode .city-btn--mobile-theme-toggle,
html[data-theme="dark"] .city-btn--mobile-theme-toggle {
	background: #1e293b !important;
	color: #fbbf24 !important;
	border-color: #334155 !important;
}
html.city-dark-mode .city-btn--mobile-logout,
html[data-theme="dark"] .city-btn--mobile-logout {
	background: rgba(225, 29, 72, 0.15) !important;
	color: #fda4af !important;
	border-color: rgba(225, 29, 72, 0.35) !important;
}

/* 1. HERO SECTION IN DARK MODE */
html.city-dark-mode .city-hero,
html[data-theme="dark"] .city-hero {
	background: linear-gradient(135deg, #0b0f19 0%, #0f172a 45%, #111827 100%) !important;
	border-bottom: 1px solid #1e293b !important;
}
html.city-dark-mode .city-hero__overlay,
html[data-theme="dark"] .city-hero__overlay {
	background: radial-gradient(circle at 80% 20%, rgba(56, 189, 248, 0.15), transparent 50%),
	            radial-gradient(circle at 20% 80%, rgba(13, 148, 136, 0.15), transparent 50%),
	            radial-gradient(circle at 50% 50%, rgba(11, 15, 25, 0.75), transparent 70%) !important;
}
html.city-dark-mode .city-hero__badge,
html[data-theme="dark"] .city-hero__badge {
	background: #1e293b !important;
	border-color: #334155 !important;
	color: #38bdf8 !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}
html.city-dark-mode .city-hero__headline,
html[data-theme="dark"] .city-hero__headline {
	color: #ffffff !important;
}
html.city-dark-mode .city-hero__statement,
html[data-theme="dark"] .city-hero__statement {
	color: #cbd5e1 !important;
}
html.city-dark-mode .city-btn--hero-portal,
html[data-theme="dark"] .city-btn--hero-portal {
	background: #1e293b !important;
	border-color: #334155 !important;
	color: #38bdf8 !important;
}
html.city-dark-mode .city-btn--hero-portal:hover,
html[data-theme="dark"] .city-btn--hero-portal:hover {
	background: #334155 !important;
	color: #7dd3fc !important;
}
html.city-dark-mode .cis-hero-ambient-cloud,
html[data-theme="dark"] .cis-hero-ambient-cloud {
	opacity: 0.15 !important;
}

/* 2. QUICK ACCESS CARDS IN DARK MODE */
html.city-dark-mode .city-quick-access,
html[data-theme="dark"] .city-quick-access {
	background: #0b0f19 !important;
}
html.city-dark-mode .city-qa-card,
html[data-theme="dark"] .city-qa-card {
	background: #111827 !important;
	border: 1.5px solid #1e293b !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}
html.city-dark-mode .city-qa-card:hover,
html[data-theme="dark"] .city-qa-card:hover {
	background: #162032 !important;
	border-color: #38bdf8 !important;
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5) !important;
}
html.city-dark-mode .city-qa-card__icon-box,
html[data-theme="dark"] .city-qa-card__icon-box {
	background: rgba(56, 189, 248, 0.12) !important;
	color: #38bdf8 !important;
	border-color: rgba(56, 189, 248, 0.25) !important;
}
html.city-dark-mode .city-qa-card:hover .city-qa-card__icon-box,
html[data-theme="dark"] .city-qa-card:hover .city-qa-card__icon-box {
	background: #0284c7 !important;
	color: #ffffff !important;
}
html.city-dark-mode .city-qa-card__title,
html[data-theme="dark"] .city-qa-card__title {
	color: #f8fafc !important;
}
html.city-dark-mode .city-qa-card__desc,
html[data-theme="dark"] .city-qa-card__desc {
	color: #94a3b8 !important;
}
html.city-dark-mode .city-qa-card__link,
html[data-theme="dark"] .city-qa-card__link {
	color: #38bdf8 !important;
}

/* 3. ABOUT & BENTO SECTION IN DARK MODE */
html.city-dark-mode .city-about-section,
html[data-theme="dark"] .city-about-section {
	background: #0b0f19 !important;
}
html.city-dark-mode .cis-bento-narrative,
html[data-theme="dark"] .cis-bento-narrative {
	background: #111827 !important;
	border: 1.5px solid #1e293b !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}
html.city-dark-mode .city-about__lead-title,
html[data-theme="dark"] .city-about__lead-title {
	color: #f8fafc !important;
}
html.city-dark-mode .city-about__lead-text,
html.city-dark-mode .city-about__lead-sub,
html[data-theme="dark"] .city-about__lead-text,
html[data-theme="dark"] .city-about__lead-sub {
	color: #cbd5e1 !important;
}
html.city-dark-mode .cis-badge-pill,
html[data-theme="dark"] .cis-badge-pill {
	background: rgba(56, 189, 248, 0.15) !important;
	color: #38bdf8 !important;
	border-color: rgba(56, 189, 248, 0.3) !important;
}
html.city-dark-mode .cis-badge-pill--accent,
html[data-theme="dark"] .cis-badge-pill--accent {
	background: rgba(245, 158, 11, 0.15) !important;
	color: #fbbf24 !important;
	border-color: rgba(245, 158, 11, 0.3) !important;
}
html.city-dark-mode .cis-bento-callout,
html.city-dark-mode .city-vision-callout,
html[data-theme="dark"] .cis-bento-callout,
html[data-theme="dark"] .city-vision-callout {
	background: #1e293b !important;
	border: 1.5px solid #334155 !important;
}
html.city-dark-mode .city-vision-callout__content h4,
html[data-theme="dark"] .city-vision-callout__content h4 {
	color: #f8fafc !important;
}
html.city-dark-mode .city-vision-callout__content p,
html[data-theme="dark"] .city-vision-callout__content p {
	color: #cbd5e1 !important;
}
html.city-dark-mode .city-vision-callout__icon,
html[data-theme="dark"] .city-vision-callout__icon {
	background: rgba(56, 189, 248, 0.15) !important;
	color: #38bdf8 !important;
}
html.city-dark-mode .cis-bento-float-badge,
html[data-theme="dark"] .cis-bento-float-badge {
	background: rgba(17, 24, 39, 0.95) !important;
	border: 1.5px solid #334155 !important;
	color: #f8fafc !important;
}
html.city-dark-mode .city-pillar-card,
html.city-dark-mode .cis-bento-mini-card,
html[data-theme="dark"] .city-pillar-card,
html[data-theme="dark"] .cis-bento-mini-card {
	background: #111827 !important;
	border: 1px solid #1e293b !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}
html.city-dark-mode .city-pillar-card__title,
html[data-theme="dark"] .city-pillar-card__title {
	color: #f8fafc !important;
}
html.city-dark-mode .city-pillar-card__text,
html[data-theme="dark"] .city-pillar-card__text {
	color: #cbd5e1 !important;
}

/* 4. 6 GOALS GRID IN DARK MODE */
html.city-dark-mode .cis-goals-bento-title,
html[data-theme="dark"] .cis-goals-bento-title {
	color: #f8fafc !important;
}
html.city-dark-mode .cis-goals-bento-sub,
html[data-theme="dark"] .cis-goals-bento-sub {
	color: #94a3b8 !important;
}
html.city-dark-mode .city-goal-card,
html.city-dark-mode .cis-bento-goal-card,
html[data-theme="dark"] .city-goal-card,
html[data-theme="dark"] .cis-bento-goal-card {
	background: #111827 !important;
	border: 1px solid #1e293b !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}
html.city-dark-mode .city-goal-card:hover,
html.city-dark-mode .cis-bento-goal-card:hover,
html[data-theme="dark"] .city-goal-card:hover,
html[data-theme="dark"] .cis-bento-goal-card:hover {
	background: #162032 !important;
	border-color: #38bdf8 !important;
}
html.city-dark-mode .city-goal-card h4,
html[data-theme="dark"] .city-goal-card h4 {
	color: #f8fafc !important;
}
html.city-dark-mode .city-goal-card p,
html[data-theme="dark"] .city-goal-card p {
	color: #cbd5e1 !important;
}
html.city-dark-mode .city-goal-num,
html[data-theme="dark"] .city-goal-num {
	color: #38bdf8 !important;
}
html.city-dark-mode .cis-bento-goal-icon,
html[data-theme="dark"] .cis-bento-goal-icon {
	background: rgba(56, 189, 248, 0.12) !important;
	color: #38bdf8 !important;
	border-color: rgba(56, 189, 248, 0.25) !important;
}
html.city-dark-mode .cis-bento-goal-tag,
html[data-theme="dark"] .cis-bento-goal-tag {
	background: #1e293b !important;
	color: #94a3b8 !important;
	border-color: #334155 !important;
}

/* 5. ACADEMIC PROGRAMS IN DARK MODE */
html.city-dark-mode .city-academics-section,
html[data-theme="dark"] .city-academics-section {
	background: #0b0f19 !important;
}
html.city-dark-mode .city-tab-btn,
html[data-theme="dark"] .city-tab-btn {
	background: #111827 !important;
	color: #94a3b8 !important;
	border: 1px solid #1e293b !important;
}
html.city-dark-mode .city-tab-btn:hover,
html[data-theme="dark"] .city-tab-btn:hover {
	color: #f8fafc !important;
	background: #1e293b !important;
}
html.city-dark-mode .city-tab-btn.active,
html[data-theme="dark"] .city-tab-btn.active {
	background: #0284c7 !important;
	color: #ffffff !important;
	border-color: #38bdf8 !important;
	box-shadow: 0 4px 14px rgba(2, 132, 199, 0.4) !important;
}
html.city-dark-mode .city-program-card,
html[data-theme="dark"] .city-program-card {
	background: #111827 !important;
	border: 1.5px solid #1e293b !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}
html.city-dark-mode .city-program-card:hover,
html[data-theme="dark"] .city-program-card:hover {
	background: #162032 !important;
	border-color: #38bdf8 !important;
}
html.city-dark-mode .city-program-card__title,
html[data-theme="dark"] .city-program-card__title {
	color: #f8fafc !important;
}
html.city-dark-mode .city-program-card__stage,
html[data-theme="dark"] .city-program-card__stage {
	color: #94a3b8 !important;
}
html.city-dark-mode .city-program-card__desc,
html[data-theme="dark"] .city-program-card__desc {
	color: #cbd5e1 !important;
}
html.city-dark-mode .city-program-card__badge,
html[data-theme="dark"] .city-program-card__badge {
	background: rgba(13, 148, 136, 0.2) !important;
	color: #2dd4bf !important;
}
html.city-dark-mode .city-program-card__badge--en,
html[data-theme="dark"] .city-program-card__badge--en {
	background: rgba(56, 189, 248, 0.2) !important;
	color: #38bdf8 !important;
}
html.city-dark-mode .city-program-card__footer,
html[data-theme="dark"] .city-program-card__footer {
	border-top: 1px solid #1e293b !important;
}

/* 6. CAMPUSES & BRANCHES IN DARK MODE */
html.city-dark-mode .city-branches-section,
html[data-theme="dark"] .city-branches-section {
	background: linear-gradient(180deg, #0b0f19 0%, #0f172a 50%, #0b0f19 100%) !important;
}
html.city-dark-mode .city-branch-card,
html[data-theme="dark"] .city-branch-card {
	background: #111827 !important;
	border: 1.5px solid #1e293b !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}
html.city-dark-mode .city-branch-card:hover,
html[data-theme="dark"] .city-branch-card:hover {
	background: #162032 !important;
	border-color: #38bdf8 !important;
}
html.city-dark-mode .city-branch-card__content,
html[data-theme="dark"] .city-branch-card__content {
	background: #111827 !important;
}
html.city-dark-mode .city-branch-card__title,
html[data-theme="dark"] .city-branch-card__title {
	color: #f8fafc !important;
}
html.city-dark-mode .city-branch-card__en-title,
html[data-theme="dark"] .city-branch-card__en-title {
	color: #94a3b8 !important;
}
html.city-dark-mode .city-branch-card__meta-item,
html[data-theme="dark"] .city-branch-card__meta-item {
	color: #cbd5e1 !important;
}
html.city-dark-mode .city-branch-card__meta-item svg,
html[data-theme="dark"] .city-branch-card__meta-item svg {
	stroke: #38bdf8 !important;
}
html.city-dark-mode .city-branch-card__country,
html.city-dark-mode .city-branch-card__code,
html[data-theme="dark"] .city-branch-card__country,
html[data-theme="dark"] .city-branch-card__code {
	background: rgba(15, 23, 42, 0.85) !important;
	color: #38bdf8 !important;
	border: 1px solid #334155 !important;
}
html.city-dark-mode .city-branch-card__badge,
html[data-theme="dark"] .city-branch-card__badge {
	background: #1e293b !important;
	color: #38bdf8 !important;
	border: 1px solid #334155 !important;
}
html.city-dark-mode .city-branch-card__neutral-emblem,
html[data-theme="dark"] .city-branch-card__neutral-emblem {
	background: #1e293b !important;
	color: #94a3b8 !important;
}
html.city-dark-mode .city-btn--branch-inquire,
html[data-theme="dark"] .city-btn--branch-inquire {
	background: #1e293b !important;
	color: #cbd5e1 !important;
	border: 1px solid #334155 !important;
}
html.city-dark-mode .city-btn--branch-inquire:hover,
html[data-theme="dark"] .city-btn--branch-inquire:hover {
	background: #334155 !important;
	color: #ffffff !important;
}

/* 7. ONLINE LEARNING IN DARK MODE */
html.city-dark-mode .city-online-learning-section,
html[data-theme="dark"] .city-online-learning-section {
	background: #0b0f19 !important;
}
html.city-dark-mode .city-learning-box,
html[data-theme="dark"] .city-learning-box {
	background: linear-gradient(135deg, #111827 0%, #1e293b 100%) !important;
	border: 1px solid #334155 !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}
html.city-dark-mode .city-learning-title,
html[data-theme="dark"] .city-learning-title {
	color: #f8fafc !important;
}
html.city-dark-mode .city-learning-desc,
html[data-theme="dark"] .city-learning-desc {
	color: #cbd5e1 !important;
}
html.city-dark-mode .city-lfeat-text strong,
html[data-theme="dark"] .city-lfeat-text strong {
	color: #f8fafc !important;
}
html.city-dark-mode .city-lfeat-text p,
html[data-theme="dark"] .city-lfeat-text p {
	color: #94a3b8 !important;
}
html.city-dark-mode .city-lfeat-icon,
html[data-theme="dark"] .city-lfeat-icon {
	background: rgba(56, 189, 248, 0.15) !important;
	color: #38bdf8 !important;
}

/* 8. FEATURED TEACHERS IN DARK MODE */
html.city-dark-mode .city-teachers-section,
html[data-theme="dark"] .city-teachers-section {
	background: #0b0f19 !important;
}
html.city-dark-mode .city-teacher-card,
html[data-theme="dark"] .city-teacher-card {
	background: #111827 !important;
	border: 1px solid #1e293b !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}
html.city-dark-mode .city-teacher-card:hover,
html[data-theme="dark"] .city-teacher-card:hover {
	background: #162032 !important;
	border-color: #38bdf8 !important;
}
html.city-dark-mode .city-teacher-card__name,
html[data-theme="dark"] .city-teacher-card__name {
	color: #f8fafc !important;
}
html.city-dark-mode .city-teacher-card__subject,
html[data-theme="dark"] .city-teacher-card__subject {
	color: #38bdf8 !important;
}
html.city-dark-mode .city-teacher-card__bio,
html[data-theme="dark"] .city-teacher-card__bio {
	color: #cbd5e1 !important;
}

/* 9. NEWS & EVENTS IN DARK MODE */
html.city-dark-mode .city-news-events-section,
html.city-dark-mode #cityNewsEvents,
html.city-dark-mode .city-news-section,
html.city-dark-mode .city-news-events,
html[data-theme="dark"] .city-news-events-section,
html[data-theme="dark"] #cityNewsEvents,
html[data-theme="dark"] .city-news-section,
html[data-theme="dark"] .city-news-events {
	background: #0b0f19 !important;
}

html.city-dark-mode .city-update-col,
html.city-dark-mode .cis-bento-update-col,
html[data-theme="dark"] .city-update-col,
html[data-theme="dark"] .cis-bento-update-col {
	background: #111827 !important;
	border: 1.5px solid #1e293b !important;
	box-shadow: 0 12px 35px rgba(0, 0, 0, 0.45) !important;
	color: #f8fafc !important;
}

html.city-dark-mode .city-update-col:hover,
html.city-dark-mode .cis-bento-update-col:hover,
html[data-theme="dark"] .city-update-col:hover,
html[data-theme="dark"] .cis-bento-update-col:hover {
	background: #151e2e !important;
	border-color: #38bdf8 !important;
	box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6) !important;
}

html.city-dark-mode .city-update-col__header,
html.city-dark-mode .cis-bento-update-col__header,
html[data-theme="dark"] .city-update-col__header,
html[data-theme="dark"] .cis-bento-update-col__header {
	border-bottom: 1.5px solid #1e293b !important;
}

html.city-dark-mode .city-update-col__title-wrap h3,
html.city-dark-mode .cis-bento-update-col__header h3,
html[data-theme="dark"] .city-update-col__title-wrap h3,
html[data-theme="dark"] .cis-bento-update-col__header h3 {
	color: #ffffff !important;
}

html.city-dark-mode .city-update-col__more,
html[data-theme="dark"] .city-update-col__more {
	color: #38bdf8 !important;
}
html.city-dark-mode .city-update-col__more:hover,
html[data-theme="dark"] .city-update-col__more:hover {
	color: #7dd3fc !important;
}

html.city-dark-mode .cis-bento-header-icon--news,
html[data-theme="dark"] .cis-bento-header-icon--news {
	background: rgba(56, 189, 248, 0.15) !important;
	color: #38bdf8 !important;
}

html.city-dark-mode .cis-bento-header-icon--events,
html[data-theme="dark"] .cis-bento-header-icon--events {
	background: rgba(16, 185, 129, 0.15) !important;
	color: #34d399 !important;
}

html.city-dark-mode .cis-bento-header-icon--announcements,
html[data-theme="dark"] .cis-bento-header-icon--announcements {
	background: rgba(245, 158, 11, 0.15) !important;
	color: #fbbf24 !important;
}

html.city-dark-mode .city-update-card,
html.city-dark-mode .cis-bento-news-card,
html.city-dark-mode .city-event-card,
html.city-dark-mode .cis-bento-event-card,
html.city-dark-mode .city-announcement-card,
html.city-dark-mode .cis-bento-announcement-card,
html[data-theme="dark"] .city-update-card,
html[data-theme="dark"] .cis-bento-news-card,
html[data-theme="dark"] .city-event-card,
html[data-theme="dark"] .cis-bento-event-card,
html[data-theme="dark"] .city-announcement-card,
html[data-theme="dark"] .cis-bento-announcement-card {
	background: #1e293b !important;
	border: 1px solid #334155 !important;
	color: #f8fafc !important;
}

html.city-dark-mode .city-update-card:hover,
html.city-dark-mode .cis-bento-news-card:hover,
html.city-dark-mode .city-event-card:hover,
html.city-dark-mode .cis-bento-event-card:hover,
html.city-dark-mode .city-announcement-card:hover,
html.city-dark-mode .cis-bento-announcement-card:hover,
html[data-theme="dark"] .city-update-card:hover,
html[data-theme="dark"] .cis-bento-news-card:hover,
html[data-theme="dark"] .city-event-card:hover,
html[data-theme="dark"] .cis-bento-event-card:hover,
html[data-theme="dark"] .city-announcement-card:hover,
html[data-theme="dark"] .cis-bento-announcement-card:hover {
	background: #243248 !important;
	border-color: #475569 !important;
}

html.city-dark-mode .city-update-card__title a,
html.city-dark-mode .city-event-card h4 a,
html.city-dark-mode .cis-bento-event-card h4 a,
html.city-dark-mode .city-announcement-card h4,
html.city-dark-mode .city-announcement-card__body h4,
html[data-theme="dark"] .city-update-card__title a,
html[data-theme="dark"] .city-event-card h4 a,
html[data-theme="dark"] .cis-bento-event-card h4 a,
html[data-theme="dark"] .city-announcement-card h4,
html[data-theme="dark"] .city-announcement-card__body h4 {
	color: #ffffff !important;
}

html.city-dark-mode .city-update-card__excerpt,
html.city-dark-mode .city-event-card p,
html.city-dark-mode .cis-bento-event-card p,
html.city-dark-mode .city-announcement-card p,
html.city-dark-mode .city-announcement-card__body p,
html.city-dark-mode .city-event-card__content .loc,
html[data-theme="dark"] .city-update-card__excerpt,
html[data-theme="dark"] .city-event-card p,
html[data-theme="dark"] .cis-bento-event-card p,
html[data-theme="dark"] .city-announcement-card p,
html[data-theme="dark"] .city-announcement-card__body p,
html[data-theme="dark"] .city-event-card__content .loc {
	color: #cbd5e1 !important;
}

html.city-dark-mode .city-update-card__meta .date,
html.city-dark-mode .city-event-card__datebox,
html[data-theme="dark"] .city-update-card__meta .date,
html[data-theme="dark"] .city-event-card__datebox {
	color: #94a3b8 !important;
}

html.city-dark-mode .city-update-card__readmore,
html[data-theme="dark"] .city-update-card__readmore {
	color: #38bdf8 !important;
}

html.city-dark-mode .cis-bento-pill-tag,
html[data-theme="dark"] .cis-bento-pill-tag {
	background: rgba(56, 189, 248, 0.15) !important;
	color: #38bdf8 !important;
}

html.city-dark-mode .cis-bento-pill-tag--teal,
html[data-theme="dark"] .cis-bento-pill-tag--teal {
	background: rgba(16, 185, 129, 0.15) !important;
	color: #34d399 !important;
}

html.city-dark-mode .cis-bento-pill-tag--amber,
html[data-theme="dark"] .cis-bento-pill-tag--amber {
	background: rgba(245, 158, 11, 0.15) !important;
	color: #fbbf24 !important;
}

html.city-dark-mode .city-empty-mini,
html[data-theme="dark"] .city-empty-mini {
	background: #1e293b !important;
	border: 1px dashed #334155 !important;
	color: #94a3b8 !important;
}

html.city-dark-mode .city-news-card,
html[data-theme="dark"] .city-news-card {
	background: #111827 !important;
	border: 1px solid #1e293b !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}
html.city-dark-mode .city-news-card:hover,
html[data-theme="dark"] .city-news-card:hover {
	background: #162032 !important;
	border-color: #38bdf8 !important;
}
html.city-dark-mode .city-news-card__title,
html[data-theme="dark"] .city-news-card__title {
	color: #f8fafc !important;
}
html.city-dark-mode .city-news-card__desc,
html[data-theme="dark"] .city-news-card__desc {
	color: #cbd5e1 !important;
}
html.city-dark-mode .city-news-card__date,
html[data-theme="dark"] .city-news-card__date {
	color: #94a3b8 !important;
}

/* 10. FAQ SECTION IN DARK MODE */
html.city-dark-mode .city-faq-section,
html[data-theme="dark"] .city-faq-section {
	background: #0b0f19 !important;
}
html.city-dark-mode .city-faq-item,
html[data-theme="dark"] .city-faq-item {
	background: #111827 !important;
	border: 1px solid #1e293b !important;
}
html.city-dark-mode .city-faq-item__header,
html.city-dark-mode .city-faq-item__title,
html[data-theme="dark"] .city-faq-item__header,
html[data-theme="dark"] .city-faq-item__title {
	background: #111827 !important;
	color: #f8fafc !important;
}
html.city-dark-mode .city-faq-item__content,
html[data-theme="dark"] .city-faq-item__content {
	background: #111827 !important;
	color: #cbd5e1 !important;
}

/* 11. SECTION BADGES, TITLES & SUBTITLES */
html.city-dark-mode .city-section-badge,
html[data-theme="dark"] .city-section-badge {
	background: rgba(56, 189, 248, 0.14) !important;
	color: #38bdf8 !important;
	border: 1px solid rgba(56, 189, 248, 0.3) !important;
}
html.city-dark-mode .city-section-title,
html[data-theme="dark"] .city-section-title {
	color: #f8fafc !important;
}
html.city-dark-mode .city-section-subtitle,
html[data-theme="dark"] .city-section-subtitle {
	color: #94a3b8 !important;
}

/* 12. HALL OF FAME & GALLERY */
html.city-dark-mode .city-hall-section,
html.city-dark-mode .city-school-life-gallery,
html[data-theme="dark"] .city-hall-section,
html[data-theme="dark"] .city-school-life-gallery {
	background: #0b0f19 !important;
}
html.city-dark-mode .city-hall-card,
html.city-dark-mode .city-gallery-item,
html[data-theme="dark"] .city-hall-card,
html[data-theme="dark"] .city-gallery-item {
	background: #111827 !important;
	border: 1px solid #1e293b !important;
}
html.city-dark-mode .city-hall-card__name,
html[data-theme="dark"] .city-hall-card__name {
	color: #f8fafc !important;
}
html.city-dark-mode .city-hall-card__meta,
html[data-theme="dark"] .city-hall-card__meta {
	color: #94a3b8 !important;
}

/* 13. INNER PAGES & GENERIC CONTAINERS */
html.city-dark-mode .city-section,
html.city-dark-mode .city-departments-section,
html.city-dark-mode .city-stats-section,
html[data-theme="dark"] .city-section,
html[data-theme="dark"] .city-departments-section,
html[data-theme="dark"] .city-stats-section {
	background-color: #0b0f19 !important;
}
html.city-dark-mode .city-page-hero,
html[data-theme="dark"] .city-page-hero {
	background: linear-gradient(135deg, #0b0f19 0%, #111827 100%) !important;
	border-bottom: 1px solid #1e293b !important;
}
html.city-dark-mode .city-page-hero__title,
html[data-theme="dark"] .city-page-hero__title {
	color: #f8fafc !important;
}
html.city-dark-mode .city-page-hero__desc,
html[data-theme="dark"] .city-page-hero__desc {
	color: #94a3b8 !important;
}
html.city-dark-mode .city-card,
html.city-dark-mode .city-gateway-card,
html.city-dark-mode .city-department-card,
html.city-dark-mode .city-feature-card,
html.city-dark-mode .city-stat-card,
html.city-dark-mode .city-info-card,
html.city-dark-mode .city-bento-card,
html.city-dark-mode .city-content-box,
html.city-dark-mode .city-page-content,
html.city-dark-mode .city-contact-form-wrap,
html.city-dark-mode .city-apply-card,
html.city-dark-mode .city-contact-info-card,
html[data-theme="dark"] .city-card,
html[data-theme="dark"] .city-gateway-card,
html[data-theme="dark"] .city-department-card,
html[data-theme="dark"] .city-feature-card,
html[data-theme="dark"] .city-stat-card,
html[data-theme="dark"] .city-info-card,
html[data-theme="dark"] .city-bento-card,
html[data-theme="dark"] .city-content-box,
html[data-theme="dark"] .city-page-content,
html[data-theme="dark"] .city-contact-form-wrap,
html[data-theme="dark"] .city-apply-card,
html[data-theme="dark"] .city-contact-info-card {
	background-color: #111827 !important;
	border: 1px solid #1e293b !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
	color: #cbd5e1 !important;
}
html.city-dark-mode .city-department-card__inner,
html.city-dark-mode .city-department-card__header,
html[data-theme="dark"] .city-department-card__inner,
html[data-theme="dark"] .city-department-card__header {
	background: #111827 !important;
}

/* 14. FORMS & INPUTS IN DARK MODE */
html.city-dark-mode input[type="text"],
html.city-dark-mode input[type="password"],
html.city-dark-mode input[type="email"],
html.city-dark-mode input[type="number"],
html.city-dark-mode input[type="tel"],
html.city-dark-mode input[type="date"],
html.city-dark-mode select,
html.city-dark-mode textarea,
html.city-dark-mode .csc-form-control,
html.city-dark-mode .csc-select,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .csc-form-control,
html[data-theme="dark"] .csc-select {
	background-color: #1e293b !important;
	color: #f8fafc !important;
	border: 1.5px solid #334155 !important;
}
html.city-dark-mode input:focus,
html.city-dark-mode select:focus,
html.city-dark-mode textarea:focus,
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
	border-color: #38bdf8 !important;
	box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25) !important;
	outline: none !important;
}
html.city-dark-mode select option,
html[data-theme="dark"] select option {
	background-color: #1e293b !important;
	color: #f8fafc !important;
}
html.city-dark-mode label,
html[data-theme="dark"] label {
	color: #cbd5e1 !important;
}

/* 15. PORTALS IN DARK MODE */
html.city-dark-mode .csc-portal-container,
html.city-dark-mode .city-parent-portal-page,
html[data-theme="dark"] .csc-portal-container,
html[data-theme="dark"] .city-parent-portal-page {
	background-color: transparent !important;
}
html.city-dark-mode .csc-portal-banner,
html[data-theme="dark"] .csc-portal-banner {
	background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
	border: 1px solid #334155 !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}
html.city-dark-mode .csc-portal-tabs,
html[data-theme="dark"] .csc-portal-tabs {
	border-bottom: 2px solid #1e293b !important;
}
html.city-dark-mode .csc-tab-btn,
html[data-theme="dark"] .csc-tab-btn {
	background: #111827 !important;
	color: #94a3b8 !important;
	border: 1px solid #1e293b !important;
}
html.city-dark-mode .csc-tab-btn:hover,
html[data-theme="dark"] .csc-tab-btn:hover {
	background: #1e293b !important;
	color: #f8fafc !important;
}
html.city-dark-mode .csc-tab-btn.active,
html[data-theme="dark"] .csc-tab-btn.active {
	background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
	color: #ffffff !important;
	border-color: #38bdf8 !important;
	box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35) !important;
}
html.city-dark-mode .csc-card,
html.city-dark-mode .csc-panel,
html.city-dark-mode .csc-table-container,
html.city-dark-mode .csc-stat-card,
html.city-dark-mode .csc-filter-box,
html[data-theme="dark"] .csc-card,
html[data-theme="dark"] .csc-panel,
html[data-theme="dark"] .csc-table-container,
html[data-theme="dark"] .csc-stat-card,
html[data-theme="dark"] .csc-filter-box {
	background: #111827 !important;
	border: 1px solid #1e293b !important;
	color: #f8fafc !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

/* 16. TABLES IN DARK MODE */
html.city-dark-mode table,
html.city-dark-mode .csc-custom-table,
html[data-theme="dark"] table,
html[data-theme="dark"] .csc-custom-table {
	background: #111827 !important;
	border-color: #1e293b !important;
}
html.city-dark-mode thead th,
html.city-dark-mode .csc-custom-table th,
html[data-theme="dark"] thead th,
html[data-theme="dark"] .csc-custom-table th {
	background: #1e293b !important;
	color: #f8fafc !important;
	border-color: #334155 !important;
}
html.city-dark-mode tbody td,
html.city-dark-mode .csc-custom-table td,
html[data-theme="dark"] tbody td,
html[data-theme="dark"] .csc-custom-table td {
	background: #111827 !important;
	color: #cbd5e1 !important;
	border-color: #1e293b !important;
}
html.city-dark-mode tbody tr:hover td,
html.city-dark-mode .csc-custom-table tr:hover td,
html[data-theme="dark"] tbody tr:hover td,
html[data-theme="dark"] .csc-custom-table tr:hover td {
	background: #1e293b !important;
}

/* Portal Logout & Theme Toggle Button */
.csc-portal-logout {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
}
.csc-portal-theme-toggle {
	width: 36px !important;
	height: 36px !important;
	border-radius: 50% !important;
	border: 1px solid rgba(255, 255, 255, 0.25) !important;
	background: rgba(255, 255, 255, 0.12) !important;
	color: #ffffff !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	font-size: 16px !important;
	padding: 0 !important;
	transition: all 0.2s ease !important;
}
.csc-portal-theme-toggle:hover {
	background: rgba(255, 255, 255, 0.22) !important;
	transform: scale(1.08) !important;
}
.csc-btn-logout {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	color: #ffffff !important;
	background: rgba(255, 255, 255, 0.12) !important;
	border: 1px solid rgba(255, 255, 255, 0.22) !important;
	padding: 7px 16px !important;
	border-radius: 8px !important;
	text-decoration: none !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	transition: all 0.2s ease !important;
}
.csc-btn-logout:hover {
	background: #e11d48 !important;
	border-color: #e11d48 !important;
	color: #ffffff !important;
	box-shadow: 0 4px 12px rgba(225, 29, 72, 0.3) !important;
}

/* 17. MODALS & POPUPS IN DARK MODE */
html.city-dark-mode .csc-modal-overlay,
html[data-theme="dark"] .csc-modal-overlay {
	background: rgba(0, 0, 0, 0.8) !important;
}
html.city-dark-mode .csc-modal-content,
html[data-theme="dark"] .csc-modal-content {
	background: #111827 !important;
	border: 1px solid #334155 !important;
	color: #f8fafc !important;
	box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6) !important;
}

/* 18. FOOTER IN DARK MODE */
html.city-dark-mode .city-footer,
html[data-theme="dark"] .city-footer {
	background: #070b12 !important;
	border-top: 1px solid #1e293b !important;
}
html.city-dark-mode .city-footer__title,
html[data-theme="dark"] .city-footer__title {
	color: #f8fafc !important;
}
html.city-dark-mode .city-footer__links a,
html[data-theme="dark"] .city-footer__links a {
	color: #94a3b8 !important;
}
html.city-dark-mode .city-footer__links a:hover,
html[data-theme="dark"] .city-footer__links a:hover {
	color: #38bdf8 !important;
}
html.city-dark-mode .city-footer__bottom,
html[data-theme="dark"] .city-footer__bottom {
	border-top-color: #1e293b !important;
	color: #64748b !important;
}

/* 19. SECTION ID SPECIFICITY OVERRIDES (FULL THEME DARK MODE) */
html.city-dark-mode #cityHero,
html.city-dark-mode #cityQuickAccess,
html.city-dark-mode #cityAbout,
html.city-dark-mode #cityAcademics,
html.city-dark-mode #cityBranches,
html.city-dark-mode #cityOnlineLearning,
html.city-dark-mode #cityTeachers,
html.city-dark-mode #citySchoolLife,
html.city-dark-mode #cityNewsEvents,
html.city-dark-mode #cityFaq,
html.city-dark-mode #cityFinalCta,
html[data-theme="dark"] #cityHero,
html[data-theme="dark"] #cityQuickAccess,
html[data-theme="dark"] #cityAbout,
html[data-theme="dark"] #cityAcademics,
html[data-theme="dark"] #cityBranches,
html[data-theme="dark"] #cityOnlineLearning,
html[data-theme="dark"] #cityTeachers,
html[data-theme="dark"] #citySchoolLife,
html[data-theme="dark"] #cityNewsEvents,
html[data-theme="dark"] #cityFaq,
html[data-theme="dark"] #cityFinalCta {
	background: #0b0f19 !important;
	border-color: #1e293b !important;
}

/* 20. ONLINE LEARNING MOCKUP WINDOW IN DARK MODE */
html.city-dark-mode .city-mockup-frame,
html[data-theme="dark"] .city-mockup-frame {
	background: #111827 !important;
	border-color: #1e293b !important;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45) !important;
}
html.city-dark-mode .city-mockup-header,
html[data-theme="dark"] .city-mockup-header {
	background: #1e293b !important;
	border-bottom: 1px solid #334155 !important;
}
html.city-dark-mode .city-mockup-header .bar-title,
html[data-theme="dark"] .city-mockup-header .bar-title {
	color: #94a3b8 !important;
}
html.city-dark-mode .city-mockup-student-bar .student-info strong,
html[data-theme="dark"] .city-mockup-student-bar .student-info strong {
	color: #f8fafc !important;
}
html.city-dark-mode .city-mockup-student-bar .student-info span,
html[data-theme="dark"] .city-mockup-student-bar .student-info span {
	color: #94a3b8 !important;
}
html.city-dark-mode .metric-chip,
html[data-theme="dark"] .metric-chip {
	background: #1e293b !important;
	border-color: #334155 !important;
}
html.city-dark-mode .metric-chip .val,
html[data-theme="dark"] .metric-chip .val {
	color: #38bdf8 !important;
}
html.city-dark-mode .metric-chip .lbl,
html[data-theme="dark"] .metric-chip .lbl {
	color: #94a3b8 !important;
}
html.city-dark-mode .city-mockup-course-row,
html[data-theme="dark"] .city-mockup-course-row {
	background: #1e293b !important;
	color: #f8fafc !important;
}
html.city-dark-mode .city-mockup-course-row .badge,
html[data-theme="dark"] .city-mockup-course-row .badge {
	background: rgba(13, 148, 136, 0.25) !important;
	color: #2dd4bf !important;
}

/* 21. LOGIN PORTAL CHOICE & AUTHENTICATION SCREENS IN DARK MODE */
html.city-dark-mode .city-login,
html[data-theme="dark"] .city-login {
	background: #0b0f19 !important;
}
html.city-dark-mode .city-login__card,
html.city-dark-mode .city-login__card--choice,
html[data-theme="dark"] .city-login__card,
html[data-theme="dark"] .city-login__card--choice {
	background: #111827 !important;
	border: 1.5px solid #1e293b !important;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45) !important;
}
html.city-dark-mode .city-login__title,
html[data-theme="dark"] .city-login__title {
	color: #ffffff !important;
}
html.city-dark-mode .city-login__subtitle,
html.city-dark-mode .city-login__choose-hint,
html.city-dark-mode .city-login__note,
html.city-dark-mode .city-login__switch,
html[data-theme="dark"] .city-login__subtitle,
html[data-theme="dark"] .city-login__choose-hint,
html[data-theme="dark"] .city-login__note,
html[data-theme="dark"] .city-login__switch {
	color: #94a3b8 !important;
}
html.city-dark-mode .city-login__choice,
html[data-theme="dark"] .city-login__choice {
	background: #1e293b !important;
	border: 1.5px solid #334155 !important;
}
html.city-dark-mode .city-login__choice:hover,
html[data-theme="dark"] .city-login__choice:hover {
	background: #253347 !important;
	border-color: #38bdf8 !important;
}
html.city-dark-mode .city-login__choice-name,
html[data-theme="dark"] .city-login__choice-name {
	color: #f8fafc !important;
}
html.city-dark-mode .city-login__choice-desc,
html[data-theme="dark"] .city-login__choice-desc {
	color: #94a3b8 !important;
}
html.city-dark-mode .city-login__choice-arrow,
html[data-theme="dark"] .city-login__choice-arrow {
	color: #38bdf8 !important;
}
html.city-dark-mode .city-login__form-title,
html[data-theme="dark"] .city-login__form-title {
	color: #f8fafc !important;
	border-bottom: 1px solid #1e293b !important;
}
html.city-dark-mode .city-login__label,
html[data-theme="dark"] .city-login__label {
	color: #cbd5e1 !important;
}
html.city-dark-mode .city-login__control,
html[data-theme="dark"] .city-login__control {
	background: #0f172a !important;
	background-color: #0f172a !important;
	border-color: #334155 !important;
	box-shadow: none !important;
}
html.city-dark-mode .city-login__control svg,
html[data-theme="dark"] .city-login__control svg {
	color: #94a3b8 !important;
}
html.city-dark-mode .city-login__control input,
html[data-theme="dark"] .city-login__control input {
	background: transparent !important;
	background-color: transparent !important;
	color: #f8fafc !important;
	-webkit-text-fill-color: #f8fafc !important;
	border: 0 !important;
	outline: none !important;
}
html.city-dark-mode .city-login__control:focus-within,
html[data-theme="dark"] .city-login__control:focus-within {
	border-color: #38bdf8 !important;
	box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25) !important;
}

/* WP / In-Portal Login Card inputs in Dark Mode */
html.city-dark-mode .csc-login-card,
html[data-theme="dark"] .csc-login-card {
	background: #111827 !important;
	border: 1.5px solid #1e293b !important;
	color: #f8fafc !important;
}
html.city-dark-mode .csc-login-card form label,
html[data-theme="dark"] .csc-login-card form label {
	color: #cbd5e1 !important;
}
html.city-dark-mode .csc-login-card form input[type="text"],
html.city-dark-mode .csc-login-card form input[type="password"],
html.city-dark-mode .csc-login-card #user_login,
html.city-dark-mode .csc-login-card #user_pass,
html[data-theme="dark"] .csc-login-card form input[type="text"],
html[data-theme="dark"] .csc-login-card form input[type="password"],
html[data-theme="dark"] .csc-login-card #user_login,
html[data-theme="dark"] .csc-login-card #user_pass {
	background: #0f172a !important;
	background-color: #0f172a !important;
	color: #f8fafc !important;
	-webkit-text-fill-color: #f8fafc !important;
	border: 1.5px solid #334155 !important;
}
html.city-dark-mode .csc-login-card form input[type="text"]:focus,
html.city-dark-mode .csc-login-card form input[type="password"]:focus,
html[data-theme="dark"] .csc-login-card form input[type="text"]:focus,
html[data-theme="dark"] .csc-login-card form input[type="password"]:focus {
	background: #0f172a !important;
	background-color: #0f172a !important;
	border-color: #38bdf8 !important;
	color: #f8fafc !important;
	-webkit-text-fill-color: #f8fafc !important;
	box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25) !important;
}

/* Placeholders & Autofill in Dark Mode */
html.city-dark-mode input::placeholder,
html[data-theme="dark"] input::placeholder {
	color: #64748b !important;
	-webkit-text-fill-color: #64748b !important;
}
html.city-dark-mode input:-webkit-autofill,
html.city-dark-mode input:-webkit-autofill:hover, 
html.city-dark-mode input:-webkit-autofill:focus,
html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] input:-webkit-autofill:hover, 
html[data-theme="dark"] input:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 1000px #0f172a inset !important;
	-webkit-text-fill-color: #f8fafc !important;
	border-color: #334155 !important;
	transition: background-color 5000s ease-in-out 0s;
}

/* Class Cards & HOD Cards in Theme Dark Mode */
html.city-dark-mode .csc-class-card,
html[data-theme="dark"] .csc-class-card {
	background: #1e293b !important;
	border: 1px solid #334155 !important;
	color: #f8fafc !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}
html.city-dark-mode .csc-class-card h3,
html.city-dark-mode .csc-class-card h4,
html.city-dark-mode .csc-class-card h5,
html.city-dark-mode .csc-class-card .csc-class-name,
html[data-theme="dark"] .csc-class-card h3,
html[data-theme="dark"] .csc-class-card h4,
html[data-theme="dark"] .csc-class-card h5,
html[data-theme="dark"] .csc-class-card .csc-class-name {
	color: #f8fafc !important;
}
html.city-dark-mode .csc-class-card p,
html[data-theme="dark"] .csc-class-card p {
	color: #cbd5e1 !important;
}
html.city-dark-mode .csc-class-card p strong,
html[data-theme="dark"] .csc-class-card p strong {
	color: #f1f5f9 !important;
}
html.city-dark-mode .csc-class-card .csc-count-badge,
html[data-theme="dark"] .csc-class-card .csc-count-badge {
	background: #0f172a !important;
	color: #38bdf8 !important;
	border: 1px solid #334155 !important;
}
html.city-dark-mode .csc-portal-card,
html.city-dark-mode .csc-hod-card,
html[data-theme="dark"] .csc-portal-card,
html[data-theme="dark"] .csc-hod-card {
	background: #1e293b !important;
	border: 1px solid #334155 !important;
	color: #f8fafc !important;
}
html.city-dark-mode .csc-hod-section-title,
html[data-theme="dark"] .csc-hod-section-title {
	color: #f8fafc !important;
}
html.city-dark-mode .city-login__alert,
html[data-theme="dark"] .city-login__alert {
	background: rgba(225, 29, 72, 0.15) !important;
	border-color: rgba(225, 29, 72, 0.3) !important;
	color: #fda4af !important;
}

/* 22. PORTAL BOXES, KPI CARDS & INCENTIVE BANNER IN DARK MODE */
html.city-dark-mode .csc-kpi-card,
html.city-dark-mode .csc-portal-box,
html.city-dark-mode .csc-profile-section,
html.city-dark-mode .csc-profile-card,
html.city-dark-mode .csc-security-card,
html.city-dark-mode .csc-form-card,
html.city-dark-mode .csc-box,
html.city-dark-mode .csc-student-register-container,
html.city-dark-mode .csc-recruitment-wrap,
html.city-dark-mode .csc-admission-wrapper,
html[data-theme="dark"] .csc-kpi-card,
html[data-theme="dark"] .csc-portal-box,
html[data-theme="dark"] .csc-profile-section,
html[data-theme="dark"] .csc-profile-card,
html[data-theme="dark"] .csc-security-card,
html[data-theme="dark"] .csc-form-card,
html[data-theme="dark"] .csc-box,
html[data-theme="dark"] .csc-student-register-container,
html[data-theme="dark"] .csc-recruitment-wrap,
html[data-theme="dark"] .csc-admission-wrapper {
	background: #111827 !important;
	border: 1px solid #1e293b !important;
	color: #f8fafc !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}

html.city-dark-mode .csc-student-register-container div[style*="padding: 18px"],
html.city-dark-mode .csc-student-register-container div[style*="padding: 20px"],
html.city-dark-mode .csc-recruitment-wrap div[style*="padding: 18px"],
html.city-dark-mode .csc-recruitment-wrap div[style*="padding: 20px"],
html[data-theme="dark"] .csc-student-register-container div[style*="padding: 18px"],
html[data-theme="dark"] .csc-student-register-container div[style*="padding: 20px"],
html[data-theme="dark"] .csc-recruitment-wrap div[style*="padding: 18px"],
html[data-theme="dark"] .csc-recruitment-wrap div[style*="padding: 20px"] {
	background: #1e293b !important;
	border-color: #334155 !important;
}
html.city-dark-mode .csc-kpi-card .kpi-num,
html[data-theme="dark"] .csc-kpi-card .kpi-num {
	color: #38bdf8 !important;
}
html.city-dark-mode .csc-kpi-card .kpi-label,
html[data-theme="dark"] .csc-kpi-card .kpi-label {
	color: #94a3b8 !important;
}
html.city-dark-mode .csc-portal-box h3,
html[data-theme="dark"] .csc-portal-box h3 {
	color: #f8fafc !important;
	border-bottom: 1px solid #1e293b !important;
}
html.city-dark-mode .csc-incentive-card,
html[data-theme="dark"] .csc-incentive-card {
	background: linear-gradient(135deg, #1e1b4b 0%, #311042 50%, #1e1b4b 100%) !important;
	border: 1.5px solid #a21caf !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}
html.city-dark-mode .csc-incentive-card h3,
html[data-theme="dark"] .csc-incentive-card h3 {
	color: #f0abfc !important;
}
html.city-dark-mode .csc-incentive-card p,
html[data-theme="dark"] .csc-incentive-card p {
	color: #e9d5ff !important;
}
html.city-dark-mode .csc-incentive-card div[style*="background: rgba(255, 255, 255"],
html.city-dark-mode .csc-incentive-card div[style*="background:rgba(255,255,255"],
html[data-theme="dark"] .csc-incentive-card div[style*="background: rgba(255, 255, 255"],
html[data-theme="dark"] .csc-incentive-card div[style*="background:rgba(255,255,255"] {
	background: rgba(15, 23, 42, 0.85) !important;
	border-color: #a21caf !important;
	color: #f5d0fe !important;
}
html.city-dark-mode .csc-incentive-card a[style*="background: #ffffff"],
html.city-dark-mode .csc-incentive-card a[style*="background:#ffffff"],
html[data-theme="dark"] .csc-incentive-card a[style*="background: #ffffff"],
html[data-theme="dark"] .csc-incentive-card a[style*="background:#ffffff"] {
	background: #111827 !important;
	border-color: #334155 !important;
}

/* 23. COMPLETE CONTRAST GUARANTEE: PREVENT LIGHT-ON-LIGHT TEXT INVISIBLE ARTIFACTS */
html.city-dark-mode .csc-profile-section,
html.city-dark-mode .csc-profile-card,
html.city-dark-mode .csc-security-card,
html.city-dark-mode .csc-portal-box,
html[data-theme="dark"] .csc-profile-section,
html[data-theme="dark"] .csc-profile-card,
html[data-theme="dark"] .csc-security-card,
html[data-theme="dark"] .csc-portal-box {
	background-color: #111827 !important;
}
html.city-dark-mode .csc-profile-section h2,
html.city-dark-mode .csc-profile-section h3,
html.city-dark-mode .csc-profile-section h4,
html.city-dark-mode .csc-profile-card h2,
html.city-dark-mode .csc-profile-card h3,
html.city-dark-mode .csc-profile-card h4,
html.city-dark-mode .csc-security-card h2,
html.city-dark-mode .csc-security-card h3,
html.city-dark-mode .csc-security-card h4,
html[data-theme="dark"] .csc-profile-section h2,
html[data-theme="dark"] .csc-profile-section h3,
html[data-theme="dark"] .csc-profile-section h4,
html[data-theme="dark"] .csc-profile-card h2,
html[data-theme="dark"] .csc-profile-card h3,
html[data-theme="dark"] .csc-profile-card h4,
html[data-theme="dark"] .csc-security-card h2,
html[data-theme="dark"] .csc-security-card h3,
html[data-theme="dark"] .csc-security-card h4 {
	color: #ffffff !important;
}
html.city-dark-mode .csc-profile-section p,
html.city-dark-mode .csc-profile-card p,
html.city-dark-mode .csc-security-card p,
html[data-theme="dark"] .csc-profile-section p,
html[data-theme="dark"] .csc-profile-card p,
html[data-theme="dark"] .csc-security-card p {
	color: #cbd5e1 !important;
}
html[data-theme="dark"] .csc-profile-section label,
html[data-theme="dark"] .csc-security-card label {
	color: #e2e8f0 !important;
}

/* 24. ALL REMAINING SITE PAGES & NOTICES (100% EXHAUSTIVE DARK MODE COVERAGE) */
html.city-dark-mode #cityHallOfFame,
html.city-dark-mode .city-hall-of-fame-section,
html[data-theme="dark"] #cityHallOfFame,
html[data-theme="dark"] .city-hall-of-fame-section {
	background: #0b0f19 !important;
	border-color: #1e293b !important;
}

html.city-dark-mode .city-empty-state-card,
html[data-theme="dark"] .city-empty-state-card {
	background: #111827 !important;
	border-color: #334155 !important;
	color: #f8fafc !important;
}
html.city-dark-mode .city-empty-state-card p,
html[data-theme="dark"] .city-empty-state-card p {
	color: #cbd5e1 !important;
}

html.city-dark-mode .city-talents-section,
html[data-theme="dark"] .city-talents-section {
	background: #111827 !important;
	border-color: #1e293b !important;
	color: #f8fafc !important;
}

html.city-dark-mode .city-404-wrap,
html[data-theme="dark"] .city-404-wrap {
	background: transparent !important;
}
html.city-dark-mode .city-404-code,
html[data-theme="dark"] .city-404-code {
	color: #38bdf8 !important;
}
html.city-dark-mode .city-404-title,
html[data-theme="dark"] .city-404-title {
	color: #ffffff !important;
}
html.city-dark-mode .city-404-desc,
html[data-theme="dark"] .city-404-desc {
	color: #94a3b8 !important;
}

html.city-dark-mode .city-single-article,
html.city-dark-mode .city-page-content,
html[data-theme="dark"] .city-single-article,
html[data-theme="dark"] .city-page-content {
	color: #cbd5e1 !important;
}
html.city-dark-mode .city-single-article h1,
html.city-dark-mode .city-single-article h2,
html.city-dark-mode .city-single-article h3,
html[data-theme="dark"] .city-single-article h1,
html[data-theme="dark"] .city-single-article h2,
html[data-theme="dark"] .city-single-article h3 {
	color: #ffffff !important;
}
html.city-dark-mode .entry-content,
html[data-theme="dark"] .entry-content {
	color: #cbd5e1 !important;
}
html.city-dark-mode .entry-content p,
html.city-dark-mode .entry-content li,
html[data-theme="dark"] .entry-content p,
html[data-theme="dark"] .entry-content li {
	color: #cbd5e1 !important;
}
html.city-dark-mode .entry-content h1,
html.city-dark-mode .entry-content h2,
html.city-dark-mode .entry-content h3,
html.city-dark-mode .entry-content h4,
html[data-theme="dark"] .entry-content h1,
html[data-theme="dark"] .entry-content h2,
html[data-theme="dark"] .entry-content h3,
html[data-theme="dark"] .entry-content h4 {
	color: #ffffff !important;
}

html.city-dark-mode .city-share-box,
html[data-theme="dark"] .city-share-box {
	border-color: #1e293b !important;
}
html.city-dark-mode .city-share__btn,
html[data-theme="dark"] .city-share__btn {
	background: #1e293b !important;
	color: #38bdf8 !important;
	border: 1px solid #334155 !important;
}

html.city-dark-mode .city-login__current-session,
html[data-theme="dark"] .city-login__current-session {
	background: rgba(6, 78, 59, 0.25) !important;
	border-color: rgba(52, 211, 153, 0.35) !important;
	color: #6ee7b7 !important;
}
html.city-dark-mode .city-login__current-session p,
html[data-theme="dark"] .city-login__current-session p {
	color: #6ee7b7 !important;
}

html.city-dark-mode .city-admission-policy-card,
html[data-theme="dark"] .city-admission-policy-card {
	background: #111827 !important;
	border-color: #1e293b !important;
	color: #cbd5e1 !important;
}
html.city-dark-mode .city-admission-policy-card h4,
html[data-theme="dark"] .city-admission-policy-card h4 {
	color: #ffffff !important;
}
html.city-dark-mode .city-admission-policy-card div,
html[data-theme="dark"] .city-admission-policy-card div {
	color: #cbd5e1 !important;
}

/* ==========================================================================
   COMPREHENSIVE MOBILE VIEWPORT, DIMENSIONS & COMPONENT AUDIT
   Fixes all screens <= 768px, <= 640px, <= 480px, <= 375px
   ========================================================================== */

/* 1. Global Viewport & Container Safeguards */
@media (max-width: 768px) {
	html, body {
		overflow-x: hidden !important;
		max-width: 100vw !important;
	}

	.city-container {
		padding-left: 14px !important;
		padding-right: 14px !important;
	}

	/* Prevent mobile fixed bottom dock from hiding buttons and form footers */
	.city-site-main,
	main#main {
		padding-bottom: 78px !important;
	}

	/* 2. All Major Form Containers */
	.csc-student-register-container,
	.csc-recruitment-wrap,
	.csc-admission-wrapper,
	.csc-portal-container,
	.csc-login-card {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		margin-left: auto !important;
		margin-right: auto !important;
		border-radius: 14px !important;
	}

	.csc-student-register-container,
	.csc-recruitment-wrap,
	.csc-admission-wrapper {
		padding: 18px 14px !important;
		margin-top: 14px !important;
		margin-bottom: 30px !important;
	}

	.csc-login-card {
		padding: 24px 16px 20px !important;
	}

	/* Inner fieldset and card sections */
	.csc-student-register-container div[style*="padding: 18px"],
	.csc-student-register-container div[style*="padding: 20px"],
	.csc-recruitment-wrap div[style*="padding: 18px"],
	.csc-recruitment-wrap div[style*="padding: 20px"],
	.csc-admission-wrapper div[style*="padding: 18px"] {
		padding: 14px 10px !important;
		margin-bottom: 16px !important;
		border-radius: 10px !important;
	}

	/* 3. Form Grids - Single Column on Mobile */
	.csc-student-register-container div[style*="display: grid"],
	.csc-recruitment-wrap div[style*="display: grid"],
	.csc-admission-wrapper div[style*="display: grid"],
	.csc-grid-2,
	.csc-grid-3,
	.csc-grid-4,
	.csc-form-grid {
		grid-template-columns: 1fr !important;
		gap: 12px !important;
	}

	/* 4. Inputs, Selects, and Textareas */
	.csc-student-register-container input[type="text"],
	.csc-student-register-container input[type="email"],
	.csc-student-register-container input[type="tel"],
	.csc-student-register-container input[type="date"],
	.csc-student-register-container input[type="password"],
	.csc-student-register-container select,
	.csc-student-register-container textarea,
	.csc-recruitment-wrap input[type="text"],
	.csc-recruitment-wrap input[type="email"],
	.csc-recruitment-wrap input[type="tel"],
	.csc-recruitment-wrap select,
	.csc-recruitment-wrap textarea,
	.csc-admission-wrapper input,
	.csc-admission-wrapper select,
	.csc-admission-wrapper textarea,
	.csc-form-control,
	.csc-select,
	.csc-input {
		width: 100% !important;
		max-width: 100% !important;
		min-height: 44px !important;
		height: 44px !important;
		padding: 8px 12px !important;
		font-size: 13.5px !important;
		border-radius: 8px !important;
		box-sizing: border-box !important;
	}

	.csc-student-register-container textarea,
	.csc-recruitment-wrap textarea,
	.csc-admission-wrapper textarea {
		min-height: 85px !important;
		height: auto !important;
		line-height: 1.5 !important;
	}

	/* Select Box Arrow & Padding */
	.csc-student-register-container select,
	.csc-recruitment-wrap select,
	.csc-admission-wrapper select {
		padding-inline-start: 10px !important;
		padding-inline-end: 28px !important;
		text-overflow: ellipsis !important;
		white-space: nowrap !important;
		overflow: hidden !important;
	}

	/* Labels & Step Badges */
	.csc-student-register-container label,
	.csc-recruitment-wrap label,
	.csc-admission-wrapper label {
		font-size: 13px !important;
		margin-bottom: 5px !important;
		line-height: 1.4 !important;
	}

	.csc-step-pill {
		display: inline-flex !important;
		align-items: center !important;
		background: #eff6ff !important;
		color: #1d4ed8 !important;
		font-size: 11px !important;
		font-weight: 800 !important;
		padding: 2px 7px !important;
		border-radius: 10px !important;
		border: 1px solid #bfdbfe !important;
		white-space: nowrap !important;
	}

	/* 5. File Inputs (CV Upload etc.) - Absolute Mobile Boundary Constraint */
	.csc-recruitment-wrap input[type="file"],
	.csc-student-register-container input[type="file"],
	.csc-recruitment-file-input,
	.csc-file-input,
	input[type="file"] {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		display: block !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		font-size: 12.5px !important;
		padding: 10px !important;
		min-height: 44px !important;
		height: auto !important;
	}

	/* 6. Admissions Stepper on Mobile */
	.csc-stepper {
		display: flex !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch !important;
		gap: 10px !important;
		padding: 6px 2px 14px !important;
		margin-bottom: 20px !important;
		scroll-snap-type: x mandatory !important;
	}

	.csc-stepper::before {
		display: none !important;
	}

	.csc-step {
		flex: 0 0 auto !important;
		min-width: 68px !important;
		text-align: center !important;
		scroll-snap-align: center !important;
	}

	.csc-step .step-title {
		font-size: 11px !important;
		white-space: nowrap !important;
		margin-top: 3px !important;
	}

	.csc-step .step-sub {
		display: none !important;
	}

	.csc-step .step-num {
		width: 32px !important;
		height: 32px !important;
		font-size: 12px !important;
		margin: 0 auto !important;
	}

	/* 7. Portal Banner & Tabs on Mobile */
	.csc-portal-banner {
		flex-direction: column !important;
		align-items: center !important;
		text-align: center !important;
		padding: 20px 14px !important;
		gap: 14px !important;
	}

	.csc-student-profile-header {
		flex-direction: column !important;
		align-items: center !important;
		text-align: center !important;
		gap: 10px !important;
	}

	.csc-student-title h2 {
		font-size: 19px !important;
	}

	.csc-meta-tags {
		justify-content: center !important;
		gap: 6px !important;
	}

	.csc-portal-logout {
		width: 100% !important;
		justify-content: center !important;
		margin-top: 4px !important;
	}

	.csc-portal-tabs {
		display: flex !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch !important;
		flex-wrap: nowrap !important;
		gap: 6px !important;
		padding-bottom: 6px !important;
		margin-bottom: 18px !important;
	}

	.csc-tab-btn {
		flex: 0 0 auto !important;
		white-space: nowrap !important;
		font-size: 13px !important;
		padding: 8px 14px !important;
	}

	/* Tables Scrollable Container */
	.csc-table-container,
	.csc-tab-content {
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.csc-custom-table {
		min-width: 540px !important;
	}

	/* 8. Submit Buttons */
	#cscBtnSubmitTeacher,
	#cscBtnSubmitStudent,
	.csc-btn-submit,
	button[type="submit"].csc-btn {
		width: 100% !important;
		min-height: 48px !important;
		font-size: 15px !important;
		border-radius: 8px !important;
	}

	/* 9. Header actions and burger on small mobile */
	.city-header__bar {
		padding: 8px 12px !important;
	}

	.city-header__brand img,
	.city-header__logo {
		max-height: 42px !important;
		width: auto !important;
	}

	.city-header__name {
		font-size: 14px !important;
	}

	.city-header__tagline {
		font-size: 10.5px !important;
	}

	.city-header__actions {
		gap: 6px !important;
	}

	.city-btn--header-logout {
		padding: 6px 12px !important;
		font-size: 12.5px !important;
	}

	.city-theme-toggle-btn {
		width: 36px !important;
		height: 36px !important;
		font-size: 15px !important;
	}

	/* 10. Bottom Dock in Dark Mode */
	html.city-dark-mode .city-mobile-bottom-dock,
	html[data-theme="dark"] .city-mobile-bottom-dock {
		background: rgba(11, 15, 25, 0.96) !important;
		border-top: 1px solid #1e293b !important;
		box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5) !important;
	}
	html.city-dark-mode .city-dock-item,
	html[data-theme="dark"] .city-dock-item {
		color: #94a3b8 !important;
	}
	html.city-dark-mode .city-dock-item:hover,
	html.city-dark-mode .city-dock-item.is-active,
	html.city-dark-mode .city-dock-item--highlight,
	html[data-theme="dark"] .city-dock-item:hover,
	html[data-theme="dark"] .city-dock-item.is-active,
	html[data-theme="dark"] .city-dock-item--highlight {
		color: #38bdf8 !important;
	}
}

/* Extra small devices (iPhone SE, Galaxy A series, <= 480px) */
@media (max-width: 480px) {
	.city-container {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}

	.csc-student-register-container,
	.csc-recruitment-wrap,
	.csc-admission-wrapper {
		padding: 14px 10px !important;
	}

	.csc-student-register-container div[style*="padding: 18px"],
	.csc-recruitment-wrap div[style*="padding: 18px"] {
		padding: 12px 8px !important;
	}

	.city-btn--header-logout span {
		display: none !important;
	}

	.city-btn--header-logout {
		padding: 7px 10px !important;
	}
}







/* Department HOD Tables & Faculty Contrast in Dark Mode */
.csc-table-custom {
	width: 100%;
	border-collapse: collapse;
	text-align: right;
}
.csc-table-custom thead tr,
.csc-table-custom thead tr.csc-table-head-row {
	background: #f1f5f9;
	border-bottom: 2px solid #cbd5e1;
	color: #0f172a;
}
.csc-table-custom th {
	padding: 12px 16px;
	color: #0f172a;
	font-weight: 800;
}
.csc-table-custom td {
	color: #0f172a;
}
.csc-faculty-name,
.csc-lead-teacher-name,
.csc-hod-student-name {
	font-weight: 800;
	font-size: 14.5px;
	color: #0f172a;
}
.csc-faculty-email {
	font-size: 12px;
	font-weight: 600;
	color: #475569;
}
.csc-lead-teacher-meta {
	font-size: 12px;
	color: #475569;
	font-weight: 600;
}
.csc-faculty-code,
.csc-lead-class-name,
.csc-lead-count,
.csc-faculty-subject {
	color: #0f172a;
}
.csc-hod-prompt-box {
	background: #f8fafc;
	border: 1.5px dashed #94a3b8;
	color: #1e293b;
}
.csc-hod-prompt-title {
	color: #0f172a;
}
.csc-hod-prompt-sub {
	color: #475569;
}

html.city-dark-mode .csc-table-custom,
html[data-theme="dark"] .csc-table-custom,
body.city-dark-mode .csc-table-custom {
	color: #f8fafc !important;
}
html.city-dark-mode .csc-table-custom thead tr,
html.city-dark-mode .csc-table-custom thead tr.csc-table-head-row,
html[data-theme="dark"] .csc-table-custom thead tr,
html[data-theme="dark"] .csc-table-custom thead tr.csc-table-head-row,
body.city-dark-mode .csc-table-custom thead tr,
body.city-dark-mode .csc-table-custom thead tr.csc-table-head-row {
	background: #0f172a !important;
	border-bottom: 2px solid #334155 !important;
	color: #38bdf8 !important;
}
html.city-dark-mode .csc-table-custom th,
html[data-theme="dark"] .csc-table-custom th,
body.city-dark-mode .csc-table-custom th {
	background: #0f172a !important;
	color: #38bdf8 !important;
	border-bottom-color: #334155 !important;
}
html.city-dark-mode .csc-table-custom td,
html[data-theme="dark"] .csc-table-custom td,
body.city-dark-mode .csc-table-custom td {
	color: #f8fafc !important;
	border-bottom-color: #1e293b !important;
}
html.city-dark-mode .csc-table-custom tbody tr,
html[data-theme="dark"] .csc-table-custom tbody tr,
body.city-dark-mode .csc-table-custom tbody tr {
	border-bottom-color: #1e293b !important;
}
html.city-dark-mode .csc-faculty-name,
html.city-dark-mode .csc-faculty-name *,
html.city-dark-mode .csc-lead-teacher-name,
html.city-dark-mode .csc-lead-teacher-name *,
html.city-dark-mode .csc-hod-student-name,
html.city-dark-mode .csc-hod-student-name *,
html.city-dark-mode .csc-lead-class-name,
html.city-dark-mode .csc-lead-count,
html.city-dark-mode .csc-faculty-code,
html.city-dark-mode .csc-faculty-subject,
html[data-theme="dark"] .csc-faculty-name,
html[data-theme="dark"] .csc-faculty-name *,
html[data-theme="dark"] .csc-lead-teacher-name,
html[data-theme="dark"] .csc-lead-teacher-name *,
html[data-theme="dark"] .csc-hod-student-name,
html[data-theme="dark"] .csc-hod-student-name *,
html[data-theme="dark"] .csc-lead-class-name,
html[data-theme="dark"] .csc-lead-count,
html[data-theme="dark"] .csc-faculty-code,
html[data-theme="dark"] .csc-faculty-subject,
body.city-dark-mode .csc-faculty-name,
body.city-dark-mode .csc-faculty-name *,
body.city-dark-mode .csc-lead-teacher-name,
body.city-dark-mode .csc-lead-teacher-name *,
body.city-dark-mode .csc-hod-student-name,
body.city-dark-mode .csc-hod-student-name * {
	color: #f8fafc !important;
	-webkit-text-fill-color: #f8fafc !important;
}
html.city-dark-mode .csc-faculty-email,
html.city-dark-mode .csc-lead-teacher-meta,
html[data-theme="dark"] .csc-faculty-email,
html[data-theme="dark"] .csc-lead-teacher-meta,
body.city-dark-mode .csc-faculty-email,
body.city-dark-mode .csc-lead-teacher-meta {
	color: #94a3b8 !important;
	-webkit-text-fill-color: #94a3b8 !important;
}
html.city-dark-mode .csc-faculty-avatar,
html[data-theme="dark"] .csc-faculty-avatar,
body.city-dark-mode .csc-faculty-avatar {
	background: #334155 !important;
	color: #f8fafc !important;
}
html.city-dark-mode .csc-faculty-mail-btn,
html[data-theme="dark"] .csc-faculty-mail-btn,
body.city-dark-mode .csc-faculty-mail-btn {
	color: #38bdf8 !important;
}
html.city-dark-mode .csc-table-custom code,
html[data-theme="dark"] .csc-table-custom code,
body.city-dark-mode .csc-table-custom code {
	background: #0f172a !important;
	color: #38bdf8 !important;
	border-color: #334155 !important;
}
html.city-dark-mode .csc-hod-prompt-box,
html[data-theme="dark"] .csc-hod-prompt-box,
body.city-dark-mode .csc-hod-prompt-box {
	background: #1e293b !important;
	border-color: #334155 !important;
	color: #f8fafc !important;
}
html.city-dark-mode .csc-hod-prompt-title,
html[data-theme="dark"] .csc-hod-prompt-title,
body.city-dark-mode .csc-hod-prompt-title {
	color: #f8fafc !important;
}
html.city-dark-mode .csc-hod-prompt-sub,
html[data-theme="dark"] .csc-hod-prompt-sub,
body.city-dark-mode .csc-hod-prompt-sub {
	color: #94a3b8 !important;
}

/* Department Students Table in Theme Dark Mode */
html.city-dark-mode .csc-hod-student-row td,
html.city-dark-mode .csc-hod-student-name,
html.city-dark-mode .csc-guardian-name,
html.city-dark-mode .csc-guardian-phone,
html[data-theme="dark"] .csc-hod-student-row td,
html[data-theme="dark"] .csc-hod-student-name,
html[data-theme="dark"] .csc-guardian-name,
html[data-theme="dark"] .csc-guardian-phone {
	color: #f8fafc !important;
}
html.city-dark-mode .csc-hod-student-row code,
html[data-theme="dark"] .csc-hod-student-row code {
	background: #0f172a !important;
	color: #38bdf8 !important;
	border-color: #334155 !important;
}

/* ==========================================================================
   Comprehensive Mobile Responsiveness Across School Portals & Tables
   ========================================================================== */
.csc-table-responsive-wrapper,
.csc-table-responsive,
.csc-table-container,
#cscHodStudentsListWrap,
.csc-tab-content > div[style*="overflow-x"],
.csc-portal-card > div[style*="overflow-x"] {
	overflow-x: auto !important;
	-webkit-overflow-scrolling: touch !important;
	width: 100% !important;
	display: block !important;
	position: relative;
}

.csc-scroll-hint {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: 11.5px;
	font-weight: 700;
	color: #0284c7;
	background: #f0f9ff;
	border: 1px dashed #bae6fd;
	border-radius: 6px;
	padding: 6px 12px;
	margin-bottom: 10px;
}

html.city-dark-mode .csc-scroll-hint,
html[data-theme="dark"] .csc-scroll-hint,
body.city-dark-mode .csc-scroll-hint {
	background: #0f172a !important;
	border-color: #0369a1 !important;
	color: #38bdf8 !important;
}

@media (max-width: 768px) {
	.csc-scroll-hint {
		display: flex !important;
	}

	.csc-portal-card,
	.csc-card,
	.csc-hod-card {
		padding: 14px 12px !important;
		border-radius: 12px !important;
	}

	.csc-table-custom,
	.csc-custom-table,
	.csc-data-table:not(.csc-profile-card .csc-data-table):not(.csc-portal-box .csc-data-table) {
		min-width: 680px !important;
		font-size: 13px !important;
	}

	.csc-table-custom th,
	.csc-table-custom td,
	.csc-custom-table th,
	.csc-custom-table td {
		padding: 10px 12px !important;
		white-space: nowrap !important;
	}

	/* Never wrap codes, phone numbers, buttons or badges on mobile */
	.csc-table-custom code,
	.csc-custom-table code,
	.csc-data-table code,
	.csc-faculty-code code,
	.csc-hod-student-row code,
	span.csc-guardian-phone,
	.csc-lead-teacher-name,
	.csc-faculty-name,
	.csc-hod-student-name {
		white-space: nowrap !important;
	}

	.csc-table-custom code,
	.csc-custom-table code,
	.csc-data-table code {
		display: inline-block !important;
		font-size: 12px !important;
		padding: 3px 8px !important;
	}

	/* Filter bar responsiveness */
	.csc-hod-students-filter-bar {
		padding: 12px !important;
		gap: 10px !important;
	}

	.csc-hod-students-filter-bar > div {
		min-width: 100% !important;
		width: 100% !important;
		flex: 1 1 100% !important;
	}

	.csc-hod-students-filter-bar button {
		width: 100% !important;
		justify-content: center !important;
	}

	/* Modal dialog mobile optimization */
	.csc-modal-dialog {
		width: 95% !important;
		max-width: 95vw !important;
		padding: 16px 14px !important;
	}

	.csc-modal-details-grid {
		grid-template-columns: 1fr !important;
		gap: 8px !important;
	}

	/* Teacher Recruitment Mobile Enhancements */
	.city-container {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}

	.city-page-content {
		padding: 24px 0 !important;
	}

	.csc-lead-class-picker-row {
		flex-direction: column !important;
		gap: 8px !important;
	}

	.csc-lead-class-picker-row button,
	.csc-class-adder-grid button,
	.csc-manual-subj-row button {
		width: 100% !important;
		min-height: 44px !important;
		justify-content: center !important;
	}

	.csc-manual-subj-row {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 8px !important;
	}

	.csc-manual-subj-row span {
		white-space: normal !important;
	}

	/* Redundant floating OneSignal bell in mobile portals */
	body.page-template-page-student-portal #onesignal-bell-container,
	body.page-template-page-parent-portal #onesignal-bell-container,
	body.page-template-page-teacher-portal #onesignal-bell-container,
	body.page-template-page-dashboard #onesignal-bell-container,
	.csc-portal-container ~ #onesignal-bell-container {
		display: none !important;
	}
}