@charset "UTF-8";
/* =====================================================================
   واجهة بوّابة مدارس المنار
   =====================================================================

   لغة تصميمٍ على نسق البوّابات التعليمية الرسمية: شريط علوي رفيع،
   ترويسة بيضاء ثابتة، واجهة كبيرة، ثم أشرطة أقسامٍ تتناوب بين الأبيض
   والرمادي الفاتح، وبطاقاتٌ بحوافّ دائرية وظلٍّ خفيف.

   اللون يُؤخذ من ‎--thm-primary‎ التي يضبطها المستخدم من لوحة التحكّم
   (إعدادات الموقع ← الألوان). فالشكل واحد والهوية هويّتكم.

   وكل الأصناف هنا تبدأ بـ‎mn-p-‎ فلا تشتبك مع ‎style.css‎ القديم ولا
   مع ‎almanar-cms.css‎ — صفحاتٌ أخرى ما زالت تستعملهما.
   ===================================================================== */

:root {
	--mn-p: #0f7a4f;
	--mn-p-ink: #ffffff;
	--mn-ink: #16202b;
	--mn-dim: #5c6875;
	--mn-line: #e3e8ef;
	--mn-bg: #f5f7f9;
	--mn-card: #ffffff;
	--mn-radius: 16px;
	--mn-shadow: 0 1px 2px rgba(16, 32, 56, .05), 0 10px 30px rgba(16, 32, 56, .06);
	--mn-shadow-sm: 0 1px 2px rgba(16, 32, 56, .06), 0 4px 14px rgba(16, 32, 56, .05);
	--mn-soft: #eef6f2;
	--mn-maxw: 1240px;
}

/* لون الموقع المضبوط من اللوحة يغلب الافتراضي */
:root {
	--mn-p: var(--thm-primary, #0f7a4f);
}

/* تدرّجٌ فاتح من لون الهوية. المتصفّح الذي لا يعرف ‎color-mix‎
   يتجاهل السطر ويبقى على الافتراضي أعلاه — لا ينكسر شيء. */
@supports (background: color-mix(in srgb, red 10%, white)) {
	:root {
		--mn-soft: color-mix(in srgb, var(--mn-p) 9%, #ffffff);
	}
}

/* ---------------------------------------------------------------
   أساسيات
   --------------------------------------------------------------- */
.mn-p {
	color: var(--mn-ink);
}

.mn-p * {
	box-sizing: border-box;
}

.mn-p-wrap {
	max-width: var(--mn-maxw);
	margin: 0 auto;
	padding: 0 20px;
}

.mn-p-sec {
	padding: 58px 0;
}

.mn-p-sec.alt {
	background: var(--mn-bg);
}

/* عنوان القسم: اسمٌ كبير يمينه، وزرّ «عرض الكل» يساره */
.mn-p-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
	margin-bottom: 26px;
}

.mn-p-head .tt {
	flex: 1 1 auto;
	min-width: 0;
}

.mn-p .mn-p-head h2 {
	margin: 0;
	font-size: 29px;
	font-weight: 800;
	line-height: 1.4;
	color: var(--mn-ink);
}

.mn-p .mn-p-head p {
	margin: 8px 0 0;
	font-size: 15px;
	line-height: 1.9;
	color: var(--mn-dim);
	max-width: 70ch;
}

.mn-p-all {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 42px;
	padding: 0 18px;
	border-radius: 11px;
	border: 1px solid var(--mn-line);
	background: var(--mn-card);
	color: var(--mn-ink);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease;
}

.mn-p-all:hover,
.mn-p-all:focus {
	border-color: var(--mn-p);
	color: var(--mn-p);
	text-decoration: none;
}

/* أزرار */
.mn-p-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 48px;
	padding: 0 26px;
	border: 0;
	border-radius: 12px;
	background: var(--mn-p);
	color: #fff !important;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	transition: filter .15s ease, transform .15s ease;
}

.mn-p-btn:hover,
.mn-p-btn:focus {
	filter: brightness(1.08);
	color: #fff !important;
	text-decoration: none;
}

.mn-p-btn.ghost {
	background: transparent;
	border: 1.5px solid rgba(255, 255, 255, .75);
	color: #fff !important;
}

.mn-p-btn.ghost:hover {
	background: rgba(255, 255, 255, .14);
}

.mn-p-btn.line {
	background: transparent;
	border: 1.5px solid var(--mn-line);
	color: var(--mn-ink) !important;
}

.mn-p-btn.line:hover {
	border-color: var(--mn-p);
	color: var(--mn-p) !important;
}

/* نقشة النقاط — توقيع التصميم */
.mn-p-dots {
	position: absolute;
	width: 230px;
	height: 230px;
	pointer-events: none;
	opacity: .55;
	background-image: radial-gradient(currentColor 2.6px, transparent 2.7px);
	background-size: 22px 22px;
	color: var(--mn-p);
}

/* ---------------------------------------------------------------
   الشريط العلوي + الترويسة
   --------------------------------------------------------------- */
.mn-p-util {
	background: var(--mn-soft);
	border-bottom: 1px solid var(--mn-line);
	font-size: 13px;
	color: var(--mn-dim);
}

.mn-p-util .mn-p-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	min-height: 40px;
	padding-top: 6px;
	padding-bottom: 6px;
}

.mn-p-util ul {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mn-p-util a {
	color: var(--mn-dim);
	text-decoration: none;
}

.mn-p-util a:hover {
	color: var(--mn-p);
	text-decoration: none;
}

.mn-p-util i {
	color: var(--mn-p);
	margin-inline-end: 5px;
}

.mn-p-nav {
	position: sticky;
	top: 0;
	z-index: 900;
	background: #fff;
	border-bottom: 1px solid var(--mn-line);
}

.mn-p-nav .mn-p-wrap {
	display: flex;
	align-items: center;
	gap: 18px;
	min-height: 74px;
}

/* الترتيب صراحةً: الشعار، ثم القائمة، ثم زرّ الدخول في الطرف الآخر.
   وبلا هذا يقع الزرّ ملاصقاً للشعار لأن ترتيب DOM يضعه قبل القائمة. */
.mn-p-logo {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	order: 1;
}

.mn-p-logo img {
	max-height: 52px;
	width: auto;
}

.mn-p-menu {
	order: 2;
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mn-p-menu > li {
	position: relative;
}

.mn-p-menu > li > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 13px;
	border-radius: 9px;
	color: var(--mn-ink);
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background .15s ease, color .15s ease;
}

.mn-p-menu > li > a:hover,
.mn-p-menu > li.active > a {
	background: var(--mn-soft);
	color: var(--mn-p);
	text-decoration: none;
}

.mn-p-menu .caret {
	font-size: 10px;
	opacity: .6;
}

/* القوائم المنسدلة */
.mn-p-menu .sub {
	position: absolute;
	top: 100%;
	inset-inline-start: 0;
	min-width: 230px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: #fff;
	border: 1px solid var(--mn-line);
	border-radius: 13px;
	box-shadow: var(--mn-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
	z-index: 20;
}

/*
	آخر بندين تُفتح قائمتهما إلى الداخل لا إلى الخارج.

	القائمة المنسدلة مُطلقة الموضع، وعرضها 230 بكسلاً تمتدّ من حافّة
	بندها نحو طرف الصفحة. فعند آخر البنود تخرج عن الشاشة — وتزيد
	عرض المستند حتى وهي **مخفيّة**، لأن ‎visibility:hidden‎ لا يُخرج
	العنصر من حساب ‎scrollWidth‎.

	وهذا ما كان يُحدث شريط تمريرٍ أفقياً عند عرض الآيباد الأفقي:
	٤٥ بكسلاً زائدة في كل صفحات الموقع، بلا عنصرٍ ظاهرٍ يُفسّرها.
*/
.mn-p-menu > li:nth-last-child(-n+2) .sub {
	inset-inline-start: auto;
	inset-inline-end: 0;
}

.mn-p-menu > li:hover .sub,
.mn-p-menu > li:focus-within .sub {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.mn-p-menu .sub a {
	display: block;
	padding: 9px 12px;
	border-radius: 9px;
	color: var(--mn-ink);
	font-size: 14px;
	text-decoration: none;
}

.mn-p-menu .sub a:hover {
	background: var(--mn-soft);
	color: var(--mn-p);
	text-decoration: none;
}

.mn-p-acts {
	order: 3;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 9px;
}

.mn-p-acts .mn-p-btn {
	min-height: 42px;
	padding: 0 18px;
	font-size: 14px;
	border-radius: 10px;
}

.mn-p-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--mn-line);
	border-radius: 11px;
	background: #fff;
	color: var(--mn-ink);
	font-size: 18px;
	cursor: pointer;
}

/* شريط الأخبار */
.mn-p-ticker {
	background: var(--mn-p);
	color: #fff;
	font-size: 13.5px;
}

.mn-p-ticker .mn-p-wrap {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 44px;
}

.mn-p-ticker .lab {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-weight: 700;
	white-space: nowrap;
	padding-inline-end: 14px;
	border-inline-end: 1px solid rgba(255, 255, 255, .3);
}

/*
	الشريط يتحرّك بـCSS لا بإضافة ‎jquery.marquee‎.

	تلك الإضافة تعيد بناء ما بداخلها، ومع تنسيقٍ جديد خرج الشريط
	فارغاً تماماً على الموقع الحيّ — والعنوان ظاهرٌ وتحته لا شيء.
	والحركة هنا من الشيفرة نفسها، فلا تعتمد على ملفٍّ قد لا يُحمَّل.
*/
.mn-p-ticker .strip {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
}

.mn-p-ticker .track {
	display: flex;
	width: max-content;
	animation: mn-tick 42s linear infinite;
}

.mn-p-ticker:hover .track,
.mn-p-ticker:focus-within .track {
	animation-play-state: paused;
}

@keyframes mn-tick {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

.mn-p-ticker ul {
	display: flex;
	align-items: center;
	gap: 36px;
	margin: 0;
	padding: 0 18px 0 0;
	list-style: none;
	white-space: nowrap;
}

/* من يكره الحركة يراه ثابتاً يُمرَّر باليد */
@media (prefers-reduced-motion: reduce) {
	.mn-p-ticker .track {
		animation: none;
		width: auto;
	}

	.mn-p-ticker .track ul + ul {
		display: none;
	}

	.mn-p-ticker .strip {
		overflow-x: auto;
	}
}

.mn-p-ticker a {
	color: #fff;
	text-decoration: none;
}

.mn-p-ticker a:hover {
	text-decoration: underline;
}

.mn-p-ticker .d {
	opacity: .75;
	font-size: 12.5px;
}

/* ---------------------------------------------------------------
   الواجهة
   --------------------------------------------------------------- */
.mn-p-hero {
	position: relative;
	overflow: hidden;
	background: #0d1b2a;
}

.mn-p-slide {
	position: relative;
	min-height: 540px;
	display: flex;
	align-items: center;
}

.mn-p-slide .bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}

.mn-p-slide .veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(to left, rgba(10, 20, 30, .88) 0%, rgba(10, 20, 30, .72) 45%, rgba(10, 20, 30, .42) 100%);
}

/*
	لوحٌ خلف نصّ الواجهة.

	صور الشرائح المرفوعة مكتوبٌ عليها نصٌّ محروقٌ في الصورة نفسها،
	فعنوان الشريحة كان يقع فوق كلامٍ آخر ويصير الاثنان غير مقروءين.
	واللوح يفصل النصّ عمّا تحته مهما كانت الصورة.

	ومن رفع صوراً نظيفة بلا كتابة يكفيه أن يُخفّف هذا من لوحة التحكّم
	— أو يُترك، فهو خفيفٌ لا يحجب الصورة.
*/
.mn-p-slide .box {
	padding: 30px 32px;
	border-radius: 20px;
	background: linear-gradient(to left, rgba(8, 18, 28, .72), rgba(8, 18, 28, .46));
	border: 1px solid rgba(255, 255, 255, .08);
}

@supports (backdrop-filter: blur(4px)) {
	.mn-p-slide .box {
		backdrop-filter: blur(4px);
	}
}

.mn-p-slide .mn-p-dots {
	top: -40px;
	inset-inline-start: -40px;
	color: #fff;
	opacity: .22;
}

.mn-p-slide .mn-p-wrap {
	position: relative;
	z-index: 2;
	width: 100%;
	padding-top: 54px;
	padding-bottom: 54px;
}

.mn-p-slide .box {
	max-width: 640px;
}

.mn-p .mn-p-slide h1 {
	margin: 0 0 16px;
	color: #fff;
	font-size: 46px;
	font-weight: 800;
	line-height: 1.35;
	overflow-wrap: break-word;
}

.mn-p-slide .lead {
	color: rgba(255, 255, 255, .9);
	font-size: 17px;
	line-height: 2;
	margin-bottom: 26px;
}

.mn-p-slide .lead p {
	margin: 0 0 8px;
	color: inherit;
}

.mn-p-slide .acts {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

/* ---------------------------------------------------------------
   الإحصائيات
   --------------------------------------------------------------- */
/*
	‎170px‎ لا ‎190px‎: على الآيباد العمودي (عرض المحتوى ~753) كان
	الحدّ الأعلى يسمح بثلاثة أعمدة فقط، فينزل الرقم الرابع وحده في
	سطرٍ تحته. و170 تُبقي الأربعة في صفٍّ واحد كما على الحاسوب.
*/
.mn-p-stats .grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 20px;
	margin-top: 30px;
}

.mn-p-stat {
	text-align: center;
	padding: 10px 6px;
}

.mn-p-stat .ic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	margin-bottom: 14px;
	border: 2px solid var(--mn-p);
	border-radius: 50%;
	color: var(--mn-p);
	font-size: 23px;
}

.mn-p-stat .num {
	font-size: 38px;
	font-weight: 800;
	color: var(--mn-p);
	line-height: 1.2;
	direction: ltr;
	unicode-bidi: isolate;
}

.mn-p .mn-p-stat h3 {
	margin: 6px 0 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--mn-dim);
}

/* ---------------------------------------------------------------
   الفئات
   --------------------------------------------------------------- */
.mn-p-cats .grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 18px;
}

.mn-p-cat {
	position: relative;
	display: block;
	padding: 26px 22px 24px;
	border: 1px solid var(--mn-line);
	border-radius: var(--mn-radius);
	background: var(--mn-card);
	box-shadow: var(--mn-shadow-sm);
	text-decoration: none;
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.mn-p-cat::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	bottom: 0;
	width: 100%;
	height: 4px;
	background: var(--mn-p);
	transform: scaleX(0);
	transform-origin: inset-inline-start;
	transition: transform .22s ease;
}

.mn-p-cat:hover {
	transform: translateY(-4px);
	box-shadow: var(--mn-shadow);
	border-color: transparent;
	text-decoration: none;
}

.mn-p-cat:hover::after {
	transform: scaleX(1);
}

.mn-p-cat .ic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 16px;
	border-radius: 15px;
	background: var(--mn-soft);
	color: var(--mn-p);
	font-size: 23px;
}

.mn-p .mn-p-cat h4 {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 700;
	color: var(--mn-ink);
}

.mn-p-cat p {
	margin: 0 0 14px;
	font-size: 14px;
	line-height: 1.9;
	color: var(--mn-dim);
}

.mn-p-cat .go {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	font-weight: 700;
	color: var(--mn-p);
}

/* ---------------------------------------------------------------
   صفّ البطاقات الصورية (الكادر التعليمي)
   ---------------------------------------------------------------

   صفٌّ ممتدّ من صورٍ متلاصقة يفصلها خطٌّ رفيع، على كلٍّ منها تدرّجٌ
   بلون الهوية واسمٌ في أسفلها. والصورة هي البطاقة — لا إطار حولها
   ولا متن أبيض تحتها.
*/
.mn-p-people-wrap {
	max-width: calc(var(--mn-maxw) + 80px);
	margin: 0 auto;
	padding: 0 20px;
}

.mn-p-people {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2px;
	border-radius: var(--mn-radius);
	overflow: hidden;
	box-shadow: var(--mn-shadow);
	background: #fff;
}

.mn-p-person {
	position: relative;
	display: block;
	aspect-ratio: 5 / 4;
	min-height: 240px;
	overflow: hidden;
	background: var(--mn-soft);
	text-decoration: none;
}

.mn-p-person img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* الوجه في أعلى الصورة عادةً، فالقصّ من الأسفل لا من الرأس */
	object-position: center top;
	transition: transform .5s ease;
}

.mn-p-person:hover img {
	transform: scale(1.06);
}

/* بديل الصورة: حرفٌ كبير على خلفية الهوية — تحت طبقتَي التلوين */
.mn-p-person .ph {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(160deg, var(--mn-p), rgba(8, 20, 16, .9));
	color: rgba(255, 255, 255, .34);
	font-size: 96px;
	font-weight: 800;
	line-height: 1;
	user-select: none;
}

/* طبقتان: مسحةٌ بلون الهوية، وتعتيمٌ متدرّج يجعل الاسم مقروءاً */
.mn-p-person::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--mn-p);
	opacity: .30;
	transition: opacity .25s ease;
}

.mn-p-person::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(to top, rgba(8, 20, 16, .82) 0%, rgba(8, 20, 16, .30) 45%, rgba(8, 20, 16, 0) 72%);
}

.mn-p-person:hover::before {
	opacity: .16;
}

.mn-p-person .cap {
	position: absolute;
	z-index: 3;
	inset-inline-start: 0;
	bottom: 0;
	width: 100%;
	padding: 20px 22px;
}

.mn-p .mn-p-person h4 {
	margin: 0;
	color: #fff;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.5;
	text-shadow: 0 1px 10px rgba(0, 0, 0, .35);
	overflow-wrap: break-word;
}

.mn-p-person .role {
	display: block;
	margin-top: 4px;
	color: rgba(255, 255, 255, .86);
	font-size: 13.5px;
	font-weight: 500;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}

/* شريطٌ رفيع بلون الهوية أسفل الصفّ، كما في المرجع */
.mn-p-people-bar {
	height: 6px;
	margin-top: 26px;
	background: var(--mn-p);
	opacity: .9;
}

/*
	أقلّ من أربعة معلّمين: تُملأ العرض بعددهم لا بأربعة أعمدة فيها فراغ.
	ومحصورٌ بالشاشات الكبيرة، فلا يغلب قاعدةَ العمودين على الجوّال —
	ولو كُتب خارج استعلامٍ لَغَلَبها، لأن ‎[data-n]‎ أعلى تخصيصاً.
*/
@media (min-width: 992px) {
	.mn-p-people[data-n="1"] { grid-template-columns: 1fr; }
	.mn-p-people[data-n="2"] { grid-template-columns: repeat(2, 1fr); }
	.mn-p-people[data-n="3"] { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 991px) {
	.mn-p-people {
		grid-template-columns: repeat(2, 1fr);
	}

	.mn-p-person {
		min-height: 210px;
	}

	.mn-p .mn-p-person h4 {
		font-size: 17px;
	}
}

@media (max-width: 575px) {

	/* عمودان لا عمود: صورةٌ واحدة بعرض الشاشة تبتلعها كلّها */
	.mn-p-people {
		gap: 2px;
	}

	.mn-p-person {
		aspect-ratio: 4 / 5;
		min-height: 180px;
	}

	.mn-p-person .cap {
		padding: 14px 13px;
	}

	.mn-p .mn-p-person h4 {
		font-size: 15px;
	}

	.mn-p-person .role {
		font-size: 12px;
	}

	.mn-p-people-wrap {
		padding: 0 16px;
	}
}

/* ---------------------------------------------------------------
   الخدمات
   --------------------------------------------------------------- */
.mn-p-serv .grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
	gap: 18px;
}

.mn-p-svc {
	padding: 22px;
	border: 1px solid var(--mn-line);
	border-radius: var(--mn-radius);
	background: var(--mn-card);
	box-shadow: var(--mn-shadow-sm);
	transition: box-shadow .18s ease, transform .18s ease;
}

.mn-p-svc:hover {
	transform: translateY(-3px);
	box-shadow: var(--mn-shadow);
}

.mn-p-svc .ic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: 14px;
	border-radius: 50%;
	border: 1.5px solid var(--mn-p);
	color: var(--mn-p);
	font-size: 19px;
}

.mn-p .mn-p-svc h5 {
	margin: 0 0 8px;
	font-size: 16.5px;
	font-weight: 700;
	color: var(--mn-ink);
	line-height: 1.6;
}

.mn-p-svc p {
	margin: 0;
	font-size: 14px;
	line-height: 1.9;
	color: var(--mn-dim);
}

/* ---------------------------------------------------------------
   نبذة
   --------------------------------------------------------------- */
.mn-p-about .row2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 44px;
	align-items: center;
}

.mn-p-about .pic {
	position: relative;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: var(--mn-shadow);
}

.mn-p-about .pic img {
	display: block;
	width: 100%;
	height: auto;
}

.mn-p-about .mn-p-dots {
	inset-inline-end: -30px;
	bottom: -40px;
	z-index: -1;
}

.mn-p-about .txt .kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 15px;
	margin-bottom: 15px;
	border-radius: 99px;
	background: var(--mn-soft);
	color: var(--mn-p);
	font-size: 13px;
	font-weight: 700;
}

.mn-p .mn-p-about h2 {
	margin: 0 0 16px;
	font-size: 31px;
	font-weight: 800;
	line-height: 1.45;
	color: var(--mn-ink);
}

.mn-p-about .body {
	font-size: 15.5px;
	line-height: 2.05;
	color: var(--mn-dim);
}

.mn-p-about .body p {
	margin: 0 0 12px;
	color: inherit;
}

/* ---------------------------------------------------------------
   المركز الإعلامي
   --------------------------------------------------------------- */
.mn-p-media .grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: 20px;
}

.mn-p-news {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--mn-line);
	border-radius: var(--mn-radius);
	background: var(--mn-card);
	box-shadow: var(--mn-shadow-sm);
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease;
}

.mn-p-news:hover {
	transform: translateY(-4px);
	box-shadow: var(--mn-shadow);
}

.mn-p-news .pic {
	display: block;
	position: relative;
	aspect-ratio: 16 / 10;
	background: var(--mn-soft);
	overflow: hidden;
}

.mn-p-news .pic img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s ease;
}

.mn-p-news:hover .pic img {
	transform: scale(1.05);
}

.mn-p-news .pic .ph {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--mn-p);
	font-size: 34px;
	opacity: .35;
}

.mn-p-news .bd {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	padding: 17px 18px 19px;
}

.mn-p-news .date {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 9px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--mn-p);
}

.mn-p .mn-p-news h5 {
	margin: 0 0 10px;
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.75;
}

.mn-p-news h5 a {
	color: var(--mn-ink);
	text-decoration: none;
}

.mn-p-news h5 a:hover {
	color: var(--mn-p);
	text-decoration: none;
}

.mn-p-news .sum {
	margin: 0 0 14px;
	font-size: 14px;
	line-height: 1.9;
	color: var(--mn-dim);
}

.mn-p-news .more {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--mn-p);
	text-decoration: none;
}

/* ---------------------------------------------------------------
   آراء
   --------------------------------------------------------------- */
.mn-p-voices .grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 18px;
}

.mn-p-voice {
	padding: 24px;
	border: 1px solid var(--mn-line);
	border-radius: var(--mn-radius);
	background: var(--mn-card);
	box-shadow: var(--mn-shadow-sm);
}

.mn-p-voice .stars {
	display: flex;
	gap: 3px;
	margin-bottom: 13px;
	color: #f0a500;
	font-size: 14px;
}

.mn-p-voice .say {
	margin: 0 0 18px;
	font-size: 15px;
	line-height: 2;
	color: var(--mn-dim);
}

.mn-p-voice .who {
	display: flex;
	align-items: center;
	gap: 12px;
}

.mn-p-voice .who img {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
}

.mn-p .mn-p-voice .who h3 {
	margin: 0;
	font-size: 15.5px;
	font-weight: 700;
	color: var(--mn-ink);
}

.mn-p-voice .who span {
	display: block;
	font-size: 13px;
	color: var(--mn-dim);
}

/* ---------------------------------------------------------------
   شريط الدعوة
   --------------------------------------------------------------- */
.mn-p-cta {
	position: relative;
	overflow: hidden;
	background: var(--mn-p);
	color: #fff;
}

.mn-p-cta .mn-p-wrap {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	flex-wrap: wrap;
	padding-top: 42px;
	padding-bottom: 42px;
}

.mn-p-cta .mn-p-dots {
	inset-inline-start: -50px;
	top: -60px;
	color: #fff;
	opacity: .16;
}

.mn-p-cta .t {
	flex: 1 1 320px;
	min-width: 0;
}

.mn-p .mn-p-cta h4 {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 600;
	color: rgba(255, 255, 255, .88);
}

.mn-p .mn-p-cta h3 {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 29px;
	font-weight: 800;
	color: #fff;
	direction: ltr;
	unicode-bidi: isolate;
}

.mn-p-cta h3 i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .16);
	font-size: 19px;
}

.mn-p-cta .mn-p-btn {
	background: #fff;
	color: var(--mn-p) !important;
}

.mn-p-cta .mn-p-btn:hover {
	color: var(--mn-p) !important;
}

/* ---------------------------------------------------------------
   التذييل
   --------------------------------------------------------------- */
.mn-p-foot {
	background: #10212f;
	color: #c3cdd8;
	font-size: 14px;
}

.mn-p-foot a {
	color: #c3cdd8;
	text-decoration: none;
}

.mn-p-foot a:hover {
	color: #fff;
	text-decoration: none;
}

/* ثلاثة أعمدة: الهوية، الروابط السريعة، التواصل */
/*
	الحاشية الأفقية تُذكر صراحةً.

	هذا العنصر يحمل ‎.mn-p-wrap‎ كذلك، وهي تعطيه ‎padding: 0 20px‎.
	وكتابة ‎padding: 52px 0 38px‎ اختصاراً تُصفّر الجانبين — فيلتصق
	نصّ التذييل بحافّة الشاشة ويُقصّ على الجوّال، ولا يُرى ذلك على
	الحاسوب لأن المساحة واسعة.
*/
.mn-p-foot .cols {
	display: grid;
	grid-template-columns: 1.7fr 1fr 1.3fr;
	gap: 36px;
	padding: 52px 20px 38px;
}

/*
	عناصر الشبكة لا تنكمش دون عرض محتواها إلا بهذا.

	‎min-width‎ الافتراضية لعنصر الشبكة ‎auto‎ لا ‎0‎: فطفلٌ عريض —
	مثل قائمة اختيار الفرع التي يبنيها select2 بعرضٍ محسوب — يشدّ
	العمود فيصير التذييل أعرض من الشاشة، وينزاح محتواه ويُقصّ على
	الجوّال. والعلّة لا تظهر على الحاسوب لأن المساحة تكفي.
*/
.mn-p-foot .cols > * {
	min-width: 0;
}

.mn-p-foot p,
.mn-p-foot li,
.mn-p-foot a {
	overflow-wrap: break-word;
}

/* قائمة الفروع لا تتجاوز عمودها مهما حسب لها select2 من عرض */
.mn-p-foot .form-control,
.mn-p-foot .select2-container,
.mn-p-foot select {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box;
}

.mn-p-foot .logo img {
	max-height: 58px;
	width: auto;
	margin-bottom: 16px;
}

.mn-p-foot .about {
	line-height: 2;
	margin: 0 0 18px;
	color: #9fb0bf;
}

.mn-p .mn-p-foot h4 {
	margin: 0 0 17px;
	font-size: 16px;
	font-weight: 700;
	color: #fff;
}

.mn-p-foot ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mn-p-foot ul li {
	margin-bottom: 11px;
	line-height: 1.8;
}

.mn-p-foot .contact li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.mn-p-foot .contact i {
	flex: 0 0 auto;
	margin-top: 5px;
	color: var(--mn-p);
}

.mn-p-foot .social {
	display: flex;
	gap: 9px;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mn-p-foot .social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: rgba(255, 255, 255, .08);
	color: #fff;
	font-size: 15px;
}

.mn-p-foot .social a:hover {
	background: var(--mn-p);
}

.mn-p-foot .bar {
	border-top: 1px solid rgba(255, 255, 255, .1);
	padding: 18px 0;
	font-size: 13px;
	color: #8fa1b1;
}

.mn-p-foot .bar .mn-p-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
}

/* ---------------------------------------------------------------
   اللوحي والجوّال
   --------------------------------------------------------------- */
@media (max-width: 1100px) {
	.mn-p-menu > li > a {
		padding: 10px 9px;
		font-size: 13.5px;
	}
}

/*
   القائمة تنطوي خلف زرّ من 1199 لا من 991.

   سبعة بنودٍ عربية في صفٍّ واحد عند عرض الآيباد الأفقي تتزاحم حتى
   يكاد الحرف يلتصق بالحرف، وتُفتح قوائمها المنسدلة عند الحافّة.
   والزرّ أوضح من صفٍّ مضغوط.

   وتُفتح بإضافة ‎is-open‎ من جافاسكربت في الترويسة — لا باعتمادٍ
   على bootstrap، فنسخته هنا قديمة وسِماتها (‎data-bs-*‎) لا تعمل
   مع كل الإصدارات.
*/
@media (max-width: 1199px) {

	.mn-p-burger {
		display: inline-flex;
		order: 3;
		margin-inline-start: auto;
	}

	.mn-p-nav .mn-p-wrap {
		flex-wrap: wrap;
		min-height: 64px;
	}

	.mn-p-logo img {
		max-height: 44px;
	}

	.mn-p-menu {
		order: 5;
		flex: 1 1 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
		max-height: 0;
		overflow: hidden;
		transition: max-height .25s ease;
	}

	.mn-p-menu.is-open {
		max-height: 78vh;
		overflow-y: auto;
		padding-bottom: 12px;
	}

	.mn-p-menu > li > a {
		padding: 13px 12px;
		font-size: 15px;
		justify-content: space-between;
	}

	.mn-p-menu .sub {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		border-inline-start: 2px solid var(--mn-line);
		border-radius: 0;
		margin: 0 0 6px;
		padding: 0 14px;
		display: none;
	}

	.mn-p-menu > li.is-open .sub {
		display: block;
	}

	.mn-p-acts {
		order: 2;
	}

	.mn-p-acts .mn-p-btn {
		padding: 0 14px;
		font-size: 13.5px;
	}
}

/* تخطيط الأقسام يتغيّر عند 991 كما كان — لا علاقة له بالقائمة */
@media (max-width: 991px) {

	.mn-p-about .row2 {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.mn-p-about .pic {
		order: -1;
	}

	.mn-p-foot .cols {
		grid-template-columns: 1fr 1fr;
		gap: 28px;
		padding: 40px 20px 30px;
	}
}

@media (max-width: 767px) {
	.mn-p-wrap {
		padding: 0 16px;
	}

	.mn-p-sec {
		padding: 40px 0;
	}

	.mn-p .mn-p-head h2 {
		font-size: 23px;
	}

	.mn-p-head {
		margin-bottom: 20px;
	}

	.mn-p-slide {
		min-height: 0;
	}

	.mn-p-slide .mn-p-wrap {
		padding-top: 56px;
		padding-bottom: 56px;
	}

	.mn-p .mn-p-slide h1 {
		font-size: 30px;
	}

	.mn-p-slide .lead {
		font-size: 15px;
		line-height: 1.95;
		margin-bottom: 20px;
	}

	.mn-p-slide .veil {
		background: linear-gradient(to bottom, rgba(10, 20, 30, .55) 0%, rgba(10, 20, 30, .82) 100%);
	}

	.mn-p-slide .acts {
		flex-direction: column;
		align-items: stretch;
	}

	.mn-p-slide .acts .mn-p-btn {
		width: 100%;
	}

	.mn-p-stat .num {
		font-size: 31px;
	}

	.mn-p-stats .grid {
		grid-template-columns: 1fr 1fr;
		gap: 14px;
	}

	.mn-p .mn-p-about h2 {
		font-size: 24px;
	}

	.mn-p .mn-p-cta h3 {
		font-size: 23px;
	}

	.mn-p-cta .mn-p-btn {
		width: 100%;
	}

	/*
		على الهاتف يُتوسَّط عمود الهوية: شعارٌ ونصٌّ وأيقونات محاذاة
		إلى طرفٍ واحد تبدو مائلة، والتوسيط يزيل ذلك ويريح العين.
	*/
	.mn-p-foot .cols {
		grid-template-columns: 1fr;
		gap: 26px;
		padding: 34px 16px 26px;
		text-align: center;
	}

	.mn-p-foot .brand .logo img {
		max-height: 50px;
	}

	.mn-p-foot .social {
		justify-content: center;
	}

	.mn-p-foot .brand .form-group {
		margin-inline: auto;
	}

	/* القوائم تبقى بمحاذاة القراءة، وبلا تسنين */
	.mn-p-foot .cols > div:not(.brand) {
		text-align: start;
	}

	.mn-p-foot .contact li {
		justify-content: flex-start;
	}

	.mn-p-util .mn-p-wrap {
		justify-content: center;
		text-align: center;
	}

	.mn-p-ticker .lab span {
		display: none;
	}

	.mn-p-dots {
		width: 150px;
		height: 150px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.mn-p-cat,
	.mn-p-svc,
	.mn-p-news,
	.mn-p-news .pic img,
	.mn-p-menu .sub {
		transition: none;
	}
}