/* =========================================================
   Royal Quality Trading — Main Stylesheet
   جدول المحتويات:
   1. المتغيرات (Variables)
   2. إعادة الضبط (Reset) + عناصر أساسية
   3. الأزرار
   4. الشريط العلوي + الهيدر + القائمة
   5. قسم البداية (Hero)
   6. شريط الشركاء المتحرك
   7. قسم النبذة + العدادات
   8. الخدمات
   9. الأعمال (بورتفوليو)
   10. آراء العملاء
   11. قسم CTA
   12. الفوتر
   13. صفحات داخلية (Banner / Breadcrumb / نموذج التواصل / المقالات)
   14. مؤثرات الظهور عند التمرير (Reveal Animations)
   15. تجاوب الشاشات (Responsive)
   ========================================================= */

/* 1. المتغيرات ------------------------------------------------ */
:root {
	--rqt-primary: #123A73;      /* الأزرق الملكي - أساسي */
	--rqt-primary-light: #1D5AA8;
	--rqt-secondary: #2E9E4F;    /* الأخضر - ثانوي */
	--rqt-secondary-light: #3FBE65;
	--rqt-accent: #2FB6D9;       /* التركواز - تمييز */
	--rqt-gold: #D4A017;         /* الذهبي - تفاصيل التاج */
	--rqt-dark: #0E2444;         /* داكن للنصوص والفوتر */
	--rqt-light-bg: #F4F8FC;
	--rqt-text: #33445A;
	--rqt-text-light: #6B7A90;
	--rqt-white: #FFFFFF;
	--rqt-border: #E4EAF2;

	--rqt-font-ar: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
	--rqt-font-en: 'Cairo', 'Segoe UI', sans-serif;

	--rqt-radius: 14px;
	--rqt-radius-sm: 8px;
	--rqt-shadow: 0 10px 30px rgba(14, 36, 68, 0.08);
	--rqt-shadow-lg: 0 20px 50px rgba(14, 36, 68, 0.14);
	--rqt-transition: all .35s cubic-bezier(.25,.8,.25,1);
	--container-width: 1240px;
}

/* 2. إعادة الضبط ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; max-width: 100%; }
body {
	margin: 0;
	font-family: var(--rqt-font-en);
	color: var(--rqt-text);
	background: var(--rqt-white);
	line-height: 1.8;
	font-size: 16px;
	overflow-x: hidden;
	width: 100%;
	max-width: 100%;
	position: relative;
}
/* تبديل نوع الخط حسب اللغة الحالية للزائر (يُضبط عبر صنف body.lang-en/lang-ar) */
body.lang-en { font-family: var(--rqt-font-en); }
img { max-width: 100%; height: auto; display: block; }
/* شبكة أمان عامة: يمنع أي نص طويل غير قابل للف (بريد إلكتروني، رابط، اسم إنجليزي طويل)
   من دفع الصفحة للتمدد أفقيًا خارج عرض شاشة الجوال. */
p, span, a, li, h1, h2, h3, h4, small, strong {
	overflow-wrap: break-word;
	word-break: break-word;
}
a { text-decoration: none; color: inherit; transition: var(--rqt-transition); }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; font-weight: 700; color: var(--rqt-dark); line-height: 1.35; }
p { margin: 0 0 1em; }
button { font-family: inherit; cursor: pointer; }
input, textarea { font-family: inherit; }
.container { max-width: var(--container-width); margin: 0 auto; padding: 0 20px; }
.section-padding { padding: 90px 0; }
.bg-light { background: var(--rqt-light-bg); }
.bg-dark { background: linear-gradient(160deg, var(--rqt-dark), var(--rqt-primary)); }
.text-center { text-align: center; }
.section-header { max-width: 680px; margin: 0 auto 50px; }
.section-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--rqt-secondary);
	font-weight: 700;
	letter-spacing: .5px;
	font-size: 14px;
	margin-bottom: 10px;
}
.section-eyebrow::before {
	content: '';
	width: 24px; height: 3px;
	background: var(--rqt-gold);
	border-radius: 2px;
}
.section-title { font-size: clamp(26px, 3.2vw, 40px); }
.section-title.light { color: var(--rqt-white); }
.section-desc { color: var(--rqt-text-light); font-size: 17px; }
.page-content-narrow { max-width: 860px; margin: 0 auto; }
.page-content-narrow img { border-radius: var(--rqt-radius); }

/* 3. الأزرار ------------------------------------------------ */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 32px;
	border-radius: 50px;
	font-weight: 700;
	font-size: 15px;
	border: 2px solid transparent;
	transition: var(--rqt-transition);
	white-space: nowrap;
}
.btn-primary { background: var(--rqt-primary); color: var(--rqt-white); box-shadow: 0 10px 25px rgba(18,58,115,.28); }
.btn-primary:hover { background: var(--rqt-primary-light); transform: translateY(-3px); box-shadow: 0 16px 32px rgba(18,58,115,.35); }
.btn-outline { background: transparent; color: var(--rqt-white); border-color: rgba(255,255,255,.5); }
.btn-outline:hover { background: var(--rqt-white); color: var(--rqt-primary); border-color: var(--rqt-white); transform: translateY(-3px); }
.btn-gold { background: linear-gradient(135deg, var(--rqt-gold), #f0c34a); color: var(--rqt-dark); box-shadow: 0 10px 25px rgba(212,160,23,.35); }
.btn-gold:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(212,160,23,.45); }

/* 4. الشريط العلوي + الهيدر + القائمة ------------------------------------------------ */
.top-bar { background: var(--rqt-dark); color: rgba(255,255,255,.85); font-size: 13.5px; }
.top-bar-inner { display: flex; align-items: center; justify-content: space-between; padding: 9px 20px; gap: 20px; flex-wrap: wrap; }
.top-bar-info { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.top-bar-info a, .top-bar-address { display: inline-flex; align-items: center; gap: 7px; color: inherit; }
.top-bar-info a:hover { color: var(--rqt-gold); }
.top-bar-info i { color: var(--rqt-gold); }

.top-bar-right { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

.rqt-social-icons { display: flex; align-items: center; gap: 10px; }
.rqt-social-icon {
	width: 32px; height: 32px;
	display: flex; align-items: center; justify-content: center;
	background: rgba(255,255,255,.08);
	border-radius: 50%;
	color: var(--rqt-white);
	font-size: 13px;
}
.rqt-social-icon:hover { background: var(--rqt-gold); color: var(--rqt-dark); transform: translateY(-3px); }

/* هيدر شفاف (زجاجي) معلّق فوق كل صفحات الموقع دائمًا — لا يتحول لأبيض صلب عند التمرير */
#site-header-wrap {
	position: fixed; top: 0; inset-inline: 0; left: 0; right: 0; z-index: 500;
	width: 100%; max-width: 100%; overflow-x: hidden;
}
.site-header {
	/* ملاحظة: عمدًا بلا z-index هنا. position:relative وحدها (بدون z-index) لا تُنشئ
	   "سياق تكديس" (stacking context) جديدًا، فتبقى القائمة الجانبية الجوّالة
	   (.main-navigation، بداخل هذا العنصر) تتنافس على الظهور مباشرة مع الغطاء
	   المعتم (#rqt-nav-overlay، شقيق لهذا العنصر) على نفس المستوى — بحسب قيم
	   z-index الفعلية لكل منهما. لو أُضيف z-index هنا مجددًا، ستُحبَس القائمة
	   داخل سياق تكديس هذا العنصر وتُصبح دائمًا خلف الغطاء المعتم مهما كانت قيمة
	   z-index الخاصة بها — وهذا بالضبط ما كان يمنع النقر على روابط القائمة. */
	position: relative;
	box-shadow: 0 2px 20px rgba(14,36,68,.15);
}
/* خلفية الهيدر الزجاجية (blur) موضوعة في طبقة ::before منفصلة بدل تطبيقها مباشرة على .site-header:
   أي عنصر بخاصية backdrop-filter (أو transform/filter) يتحوّل تلقائيًا إلى "حاوية تموضع" (containing block)
   لكل عنصر ابن بخاصية position:fixed بداخله — وهذا بالضبط ما كان يكسر القائمة الجانبية على الجوال
   (نفس القائمة #site-navigation تصبح position:fixed عبر الميديا كويري أدناه): بدل أن تنزلق من فوق كامل
   الشاشة، كانت "تُسجن" داخل صندوق الهيدر القصير (~100px) فتظهر مقصوصة أو لا تظهر إطلاقًا. */
.site-header::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(14, 36, 68, .55);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	z-index: -1;
}
.top-bar { background: rgba(14, 36, 68, .35); box-shadow: none; }
/* الهيدر معلّق (fixed) خارج تدفق الصفحة في كل مكان، فيلزم حشو علوي يساوي ارتفاعه الفعلي
   حتى لا يغطي عناوين الصفحات الداخلية — تُحسب القيمة الدقيقة عبر main.js وتُبقي على قيمة احتياطية هنا.
   الصفحة الرئيسية وحدها تبقى بلا حشو، لأن قسم البداية مصمَّم عمدًا ليمتد خلف الهيدر الشفاف. */
#page { padding-top: var(--rqt-header-h, 140px); }
.rqt-home #page { padding-top: 0; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 14px 20px; max-width: 100%; }
.site-branding { min-width: 0; max-width: 100%; }
.site-branding img { max-height: 96px; width: auto; max-width: 100%; }
.site-logo-text { display: flex; align-items: center; gap: 12px; }
.site-logo-img { height: 96px; width: auto; }
.logo-words { display: flex; flex-direction: column; line-height: 1.3; }
.logo-words strong { font-size: 19px; color: var(--rqt-white); }
.logo-words small { font-size: 11.5px; color: rgba(255,255,255,.8); font-weight: 600; }

.main-navigation { flex: 1; display: flex; justify-content: center; }
#primary-menu { display: flex; align-items: center; gap: 6px; }
#primary-menu > li { position: relative; }
#primary-menu > li > a {
	display: block; padding: 12px 18px; font-weight: 600; color: var(--rqt-white); border-radius: 50px; position: relative;
}
#primary-menu > li > a::after {
	content: ''; position: absolute; bottom: 6px; inset-inline-start: 18px; inset-inline-end: 18px; height: 2px;
	background: var(--rqt-gold); transform: scaleX(0); transition: var(--rqt-transition); transform-origin: center;
}
#primary-menu > li > a:hover, #primary-menu > li.current-menu-item > a { color: var(--rqt-gold); }
#primary-menu > li > a:hover::after, #primary-menu > li.current-menu-item > a::after { transform: scaleX(1); }

#primary-menu .sub-menu {
	position: absolute; top: calc(100% + 10px); inset-inline-start: 0; min-width: 220px;
	background: var(--rqt-white); border-radius: var(--rqt-radius-sm); box-shadow: var(--rqt-shadow-lg);
	padding: 10px; opacity: 0; visibility: hidden; transform: translateY(10px);
	transition: var(--rqt-transition); z-index: 50;
}
#primary-menu li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
#primary-menu .sub-menu a { padding: 10px 14px; border-radius: 6px; display: block; }
#primary-menu .sub-menu a:hover { background: var(--rqt-light-bg); color: var(--rqt-secondary); }

.header-actions { display: flex; align-items: center; gap: 14px; }
.header-cta { padding: 12px 26px; font-size: 14px; }

.menu-toggle {
	display: none; flex-direction: column; gap: 5px; background: transparent; border: 0; padding: 8px;
}
.menu-toggle span { width: 26px; height: 2.5px; background: var(--rqt-white); border-radius: 2px; transition: var(--rqt-transition); }
.menu-toggle.is-active span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.menu-toggle.is-active span:nth-child(2) { opacity: 0; }
.menu-toggle.is-active span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* 5. قسم البداية (Hero) ------------------------------------------------ */
.hero-section {
	position: relative;
	min-height: 92vh;
	min-height: 92dvh; /* يمنع اهتزاز/تراكب المحتوى عند ظهور واختفاء شريط عنوان المتصفح أثناء التمرير على الجوال الحقيقي */
	overflow: hidden;
	color: var(--rqt-white);
	background: var(--rqt-dark);
}
.hero-slides { position: relative; width: 100%; min-height: 92vh; min-height: 92dvh; }
.hero-slide {
	position: absolute; inset: 0;
	display: flex; align-items: center;
	background-size: cover; background-position: center;
	background-color: var(--rqt-dark);
	opacity: 0; visibility: hidden; z-index: 1;
	transition: opacity 1.2s ease, visibility 1.2s ease;
}
.hero-slide.is-active { opacity: 1; visibility: visible; z-index: 2; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,36,68,.6), rgba(14,36,68,.88)); }
.hero-shapes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.shape { position: absolute; border-radius: 50%; opacity: .18; filter: blur(2px); animation: floatShape 9s ease-in-out infinite; }
.shape-1 { width: 260px; height: 260px; background: var(--rqt-gold); top: -60px; inset-inline-end: -60px; }
.shape-2 { width: 180px; height: 180px; background: var(--rqt-secondary); bottom: 40px; inset-inline-start: 6%; animation-delay: 1.5s; }
.shape-3 { width: 120px; height: 120px; border: 3px solid var(--rqt-white); background: transparent; top: 30%; inset-inline-end: 20%; opacity: .12; animation-delay: 3s; }
@keyframes floatShape { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-25px) scale(1.06); } }

.hero-inner { position: relative; z-index: 2; }
.hero-content { max-width: 760px; }
.hero-badge {
	display: inline-flex; align-items: center; gap: 8px;
	background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
	padding: 8px 18px; border-radius: 50px; font-size: 13.5px; font-weight: 700;
	backdrop-filter: blur(6px); color: var(--rqt-gold); margin-bottom: 22px;
}
.hero-title { font-size: clamp(32px, 5vw, 58px); color: var(--rqt-white); margin-bottom: 20px; }
.hero-subtitle { font-size: 18px; color: rgba(255,255,255,.85); max-width: 620px; margin-bottom: 34px; }
.hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; }

.fade-in-up { opacity: 0; transform: translateY(24px); animation: fadeInUp .8s ease forwards; animation-delay: var(--reveal-delay, 0s); }
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }

.hero-scroll-indicator {
	position: absolute; bottom: 28px; inset-inline-start: 50%; transform: translateX(-50%);
	width: 28px; height: 46px; border: 2px solid rgba(255,255,255,.6); border-radius: 20px; z-index: 5;
}
.hero-scroll-indicator span {
	position: absolute; top: 8px; inset-inline-start: 50%; transform: translateX(-50%);
	width: 5px; height: 5px; background: var(--rqt-gold); border-radius: 50%;
	animation: scrollDot 1.6s ease infinite;
}
@keyframes scrollDot { 0% { top: 8px; opacity: 1; } 80% { top: 26px; opacity: 0; } 100% { opacity: 0; } }

/* أسهم ونقاط سلايدر البداية */
.hero-arrow {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
	width: 48px; height: 48px; border-radius: 50%;
	background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3);
	color: var(--rqt-white); display: flex; align-items: center; justify-content: center;
	backdrop-filter: blur(6px); transition: var(--rqt-transition);
}
.hero-arrow:hover { background: var(--rqt-gold); color: var(--rqt-dark); border-color: var(--rqt-gold); }
.hero-arrow-prev { inset-inline-start: 24px; }
.hero-arrow-next { inset-inline-end: 24px; }
.hero-dots { position: absolute; bottom: 76px; inset-inline-start: 50%; transform: translateX(-50%); z-index: 6; display: flex; gap: 10px; }
.hero-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.4); border: 0; padding: 0; transition: var(--rqt-transition); }
.hero-dot.active { background: var(--rqt-gold); width: 26px; border-radius: 6px; }

/* 6. شريط الشركاء المتحرك ------------------------------------------------ */
.partners-strip { background: var(--rqt-white); border-bottom: 1px solid var(--rqt-border); overflow: hidden; padding: 18px 0; }
.partners-track { display: flex; gap: 50px; width: max-content; animation: marquee 22s linear infinite; }
.partners-track span { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--rqt-primary); font-size: 14px; white-space: nowrap; opacity: .85; }
.partners-track i { color: var(--rqt-secondary); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
[dir="rtl"] .partners-track { animation-name: marqueeRtl; }
@keyframes marqueeRtl { from { transform: translateX(0); } to { transform: translateX(50%); } }

/* 6.5 نطاق عملنا — تأثير الحلقة الدائرية (Ring / Donut Effect) ------------------------------------------------ */
.scope-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.scope-ring-wrap { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.scope-ring { position: relative; width: 100%; max-width: 440px; aspect-ratio: 1/1; }
.scope-ring-outline {
	position: absolute; inset: -16px; border: 2px dashed rgba(18,58,115,.18); border-radius: 50%;
	pointer-events: none; animation: scopeSpin 40s linear infinite;
}
@keyframes scopeSpin { to { transform: rotate(360deg); } }
.scope-ring-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility .8s ease; }
.scope-ring-slide.is-active { opacity: 1; visibility: visible; z-index: 2; }
.scope-ring-photo {
	position: absolute; inset: 0; border-radius: 50%;
	background-size: cover; background-position: center;
	box-shadow: var(--rqt-shadow-lg);
	-webkit-mask-image: radial-gradient(circle, transparent 0 42%, #000 44% 100%);
	        mask-image: radial-gradient(circle, transparent 0 42%, #000 44% 100%);
}
.scope-ring-hole {
	position: absolute; inset: 0; margin: auto; width: 62%; height: 62%;
	display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px;
}
.scope-ring-hole i { font-size: 32px; color: var(--rqt-secondary); margin-bottom: 4px; }
.scope-ring-hole h3 { font-size: 17px; margin: 0; }
.scope-ring-hole p { font-size: 13px; color: var(--rqt-text-light); margin: 0; }
.scope-ring-dots { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.scope-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rqt-border); border: 0; padding: 0; transition: var(--rqt-transition); }
.scope-dot.active { background: var(--rqt-secondary); width: 22px; border-radius: 5px; }

/* 7. قسم النبذة + العدادات ------------------------------------------------ */
.about-grid { display: grid; grid-template-columns: .85fr 1fr; gap: 60px; align-items: center; margin-bottom: 70px; }
.about-media { position: relative; }
.about-media img { border-radius: var(--rqt-radius); box-shadow: var(--rqt-shadow-lg); aspect-ratio: 1/1; object-fit: cover; }
.about-media-placeholder {
	aspect-ratio: 1/1; border-radius: var(--rqt-radius);
	background: linear-gradient(135deg, var(--rqt-primary), var(--rqt-accent));
	display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.5); font-size: 90px;
	box-shadow: var(--rqt-shadow-lg);
}
.about-badge {
	position: absolute; bottom: -20px; inset-inline-start: -20px;
	background: var(--rqt-white); border-radius: var(--rqt-radius-sm); box-shadow: var(--rqt-shadow-lg);
	padding: 16px 22px; display: flex; align-items: center; gap: 12px;
}
.about-badge i { font-size: 26px; color: var(--rqt-gold); }
.about-badge strong { display: block; font-size: 20px; color: var(--rqt-primary); }
.about-badge span { font-size: 12.5px; color: var(--rqt-text-light); }
.about-text { color: var(--rqt-text-light); font-size: 16.5px; }
.about-points { margin: 20px 0 28px; display: flex; flex-direction: column; gap: 12px; }
.about-points li { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--rqt-dark); }
.about-points i { color: var(--rqt-secondary); }

.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; background: var(--rqt-primary); border-radius: var(--rqt-radius); padding: 40px 20px; background: linear-gradient(120deg, var(--rqt-primary), var(--rqt-dark)); }
.stat-item { text-align: center; color: var(--rqt-white); border-inline-end: 1px solid rgba(255,255,255,.12); }
.stat-item:last-child { border-inline-end: none; }
.stat-number { display: block; font-size: clamp(28px, 3vw, 40px); font-weight: 800; color: var(--rqt-gold); font-family: var(--rqt-font-en); }
.stat-label { font-size: 14px; color: rgba(255,255,255,.8); }

/* 8. الخدمات ------------------------------------------------ */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.service-card {
	background: var(--rqt-white); border: 1px solid var(--rqt-border); border-radius: var(--rqt-radius);
	padding: 36px 30px; text-align: center; transition: var(--rqt-transition); position: relative; overflow: hidden;
}
.service-card::before {
	content: ''; position: absolute; inset-inline-start: 0; top: 0; height: 4px; width: 100%;
	background: linear-gradient(90deg, var(--rqt-secondary), var(--rqt-accent));
	transform: scaleX(0); transform-origin: center; transition: var(--rqt-transition);
}
.service-card:hover { transform: translateY(-10px); box-shadow: var(--rqt-shadow-lg); border-color: transparent; }
.service-card:hover::before { transform: scaleX(1); }
.service-card-icon {
	width: 74px; height: 74px; margin: 0 auto 22px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%; font-size: 30px; color: var(--rqt-primary);
	background: linear-gradient(135deg, rgba(18,58,115,.1), rgba(47,182,217,.12));
	transition: var(--rqt-transition);
}
.service-card:hover .service-card-icon { background: var(--rqt-primary); color: var(--rqt-white); transform: rotate(-8deg) scale(1.05); }
.service-card-title { font-size: 19px; margin-bottom: 10px; }
.service-card-title a { color: inherit; }
.service-card-text { color: var(--rqt-text-light); font-size: 14.5px; margin-bottom: 16px; }
.service-card-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--rqt-secondary); font-size: 14px; }
.service-card-link i { transition: var(--rqt-transition); }
.service-card-link:hover i { transform: translateX(4px); }
[dir="rtl"] .service-card-link:hover i { transform: translateX(-4px); }

/* 9. الأعمال (بورتفوليو) ------------------------------------------------ */
.portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-bottom: 40px; }
.portfolio-card { border-radius: var(--rqt-radius); overflow: hidden; background: var(--rqt-white); box-shadow: var(--rqt-shadow); }
.portfolio-card-image { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.portfolio-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.portfolio-card:hover .portfolio-card-image img { transform: scale(1.1); }
.portfolio-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--rqt-light-bg); color: var(--rqt-text-light); font-size: 44px; }
.portfolio-card-overlay {
	position: absolute; inset: 0; background: rgba(18,58,115,.75);
	display: flex; align-items: center; justify-content: center;
	opacity: 0; transition: var(--rqt-transition);
}
.portfolio-card:hover .portfolio-card-overlay { opacity: 1; }
.portfolio-zoom {
	width: 52px; height: 52px; border-radius: 50%; background: var(--rqt-gold); color: var(--rqt-dark);
	display: flex; align-items: center; justify-content: center; font-size: 18px;
	transform: scale(.5); transition: var(--rqt-transition);
}
.portfolio-card:hover .portfolio-zoom { transform: scale(1); }
.portfolio-card-body { padding: 18px 20px; }
.portfolio-card-cat { color: var(--rqt-secondary); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.portfolio-card-title { font-size: 17px; margin: 6px 0 0; }
.portfolio-empty { grid-column: 1/-1; text-align: center; color: var(--rqt-text-light); padding: 60px 0; }
.portfolio-empty i { font-size: 40px; margin-bottom: 14px; color: var(--rqt-border); }

.portfolio-filters { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 40px; }
.filter-btn {
	background: var(--rqt-white); border: 1.5px solid var(--rqt-border); color: var(--rqt-text);
	padding: 10px 22px; border-radius: 50px; font-weight: 600; font-size: 14px; transition: var(--rqt-transition);
}
.filter-btn:hover, .filter-btn.active { background: var(--rqt-primary); border-color: var(--rqt-primary); color: var(--rqt-white); }
.portfolio-item { transition: var(--rqt-transition); }
.portfolio-item.is-hidden { display: none; }

/* 10. آراء العملاء ------------------------------------------------ */
.testimonials-track { display: flex; gap: 26px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; scrollbar-width: none; }
.testimonials-track::-webkit-scrollbar { display: none; }
.testimonial-card {
	scroll-snap-align: start; flex: 0 0 min(380px, 88vw);
	background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(6px);
	border-radius: var(--rqt-radius); padding: 32px; color: var(--rqt-white);
}
.testimonial-stars { color: var(--rqt-gold); margin-bottom: 14px; font-size: 14px; }
.testimonial-stars .star-empty { color: rgba(255,255,255,.25); }
.testimonial-text { position: relative; color: rgba(255,255,255,.85); font-size: 15px; }
.quote-icon { color: var(--rqt-gold); opacity: .4; font-size: 20px; margin-inline-end: 8px; }
.testimonial-author { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.testimonial-avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; }
.testimonial-avatar img { width: 100%; height: 100%; object-fit: cover; }
.testimonial-avatar-placeholder { display: flex; align-items: center; justify-content: center; background: var(--rqt-gold); color: var(--rqt-dark); font-weight: 800; font-size: 18px; }
.testimonial-name { margin: 0; font-size: 15.5px; color: var(--rqt-white); }
.testimonial-role { font-size: 12.5px; color: var(--rqt-gold); }
.testimonials-dots { display: flex; justify-content: center; gap: 8px; margin-top: 30px; }
.testimonials-dots button { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.3); border: 0; padding: 0; }
.testimonials-dots button.active { background: var(--rqt-gold); width: 22px; border-radius: 5px; }

/* 11. قسم CTA ------------------------------------------------ */
.cta-section { padding: 70px 0; background: linear-gradient(120deg, var(--rqt-secondary), var(--rqt-primary)); }
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; text-align: start; }
.cta-inner h2 { color: var(--rqt-white); margin-bottom: 6px; font-size: 26px; }
.cta-inner p { color: rgba(255,255,255,.85); margin: 0; }

/* 12. الفوتر ------------------------------------------------ */
.footer-cta { background: var(--rqt-dark); }
.footer-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 40px 20px; border-bottom: 1px solid rgba(255,255,255,.08); flex-wrap: wrap; }
.footer-cta-inner h3 { color: var(--rqt-white); margin-bottom: 4px; }
.footer-cta-inner p { color: rgba(255,255,255,.65); margin: 0; }
.footer-main { background: var(--rqt-dark); color: rgba(255,255,255,.7); padding: 60px 0 30px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.footer-col-about p { color: rgba(255,255,255,.6); font-size: 14.5px; }
.footer-logo { display: block; max-width: 240px; margin-inline-start: 0; }
.footer-logo img { display: block; width: auto; height: 84px; max-height: 84px; max-width: 100%; object-fit: contain; margin-bottom: 16px; }
.footer-logo .custom-logo-link { display: inline-block; }
.footer-logo-text { color: var(--rqt-white); }
.footer-widget-title { color: var(--rqt-white); font-size: 17px; margin-bottom: 20px; position: relative; padding-bottom: 12px; }
.footer-widget-title::after { content: ''; position: absolute; bottom: 0; inset-inline-start: 0; width: 36px; height: 3px; background: var(--rqt-gold); border-radius: 2px; }
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a { color: rgba(255,255,255,.65); font-size: 14.5px; }
.footer-links a::before { content: '›'; margin-inline-end: 8px; color: var(--rqt-gold); }
.footer-links a:hover { color: var(--rqt-white); padding-inline-start: 4px; }
.footer-contact { display: flex; flex-direction: column; gap: 16px; }
.footer-contact li { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; }
.footer-contact i { color: var(--rqt-gold); margin-top: 4px; }
.footer-contact a { color: rgba(255,255,255,.75); }
.footer-contact a:hover { color: var(--rqt-white); }
.footer-bottom { background: #081831; padding: 18px 0; }
.footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer-bottom-inner p { margin: 0; color: rgba(255,255,255,.55); font-size: 13.5px; }
.footer-bottom-menu { display: flex; gap: 20px; }
.footer-bottom-menu a { color: rgba(255,255,255,.55); font-size: 13.5px; }
.footer-bottom-menu a:hover { color: var(--rqt-gold); }

.rqt-whatsapp-float {
	position: fixed; bottom: 26px; inset-inline-start: 26px; z-index: 400;
	width: 58px; height: 58px; border-radius: 50%; background: #25D366; color: var(--rqt-white);
	display: flex; align-items: center; justify-content: center; font-size: 27px;
	box-shadow: 0 10px 25px rgba(37,211,102,.45); animation: pulseWa 2.4s ease infinite;
}
@keyframes pulseWa { 0%,100% { box-shadow: 0 0 0 0 rgba(37,211,102,.45); } 50% { box-shadow: 0 0 0 14px rgba(37,211,102,0); } }
.rqt-scroll-top {
	position: fixed; bottom: 26px; inset-inline-end: 26px; z-index: 400;
	width: 46px; height: 46px; border-radius: 50%; background: var(--rqt-primary); color: var(--rqt-white);
	display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(10px);
	transition: var(--rqt-transition); box-shadow: var(--rqt-shadow);
}
.rqt-scroll-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.rqt-scroll-top:hover { background: var(--rqt-secondary); }

/* 13. صفحات داخلية ------------------------------------------------ */
.page-banner {
	position: relative; padding: 70px 0; text-align: center; overflow: hidden;
	background: linear-gradient(135deg, var(--rqt-dark), var(--rqt-primary) 70%, var(--rqt-accent) 160%);
}
.page-banner-title { color: var(--rqt-white); margin-bottom: 12px; font-size: clamp(26px, 4vw, 38px); }
.rqt-breadcrumb { color: rgba(255,255,255,.7); font-size: 14px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.rqt-breadcrumb a { color: rgba(255,255,255,.85); font-weight: 600; }
.rqt-breadcrumb a:hover { color: var(--rqt-gold); }
.rqt-breadcrumb span { color: var(--rqt-gold); }

.mission-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.mission-card { background: var(--rqt-white); border: 1px solid var(--rqt-border); border-radius: var(--rqt-radius); padding: 34px; text-align: center; transition: var(--rqt-transition); }
.mission-card:hover { transform: translateY(-8px); box-shadow: var(--rqt-shadow-lg); }
.mission-card h3 { margin: 14px 0 10px; }
.mission-card p { color: var(--rqt-text-light); font-size: 14.5px; margin: 0; }

.alliances-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.alliance-card { background: linear-gradient(135deg, var(--rqt-primary), var(--rqt-dark)); color: var(--rqt-white); padding: 28px; border-radius: var(--rqt-radius); text-align: center; }
.alliance-card h4 { color: var(--rqt-white); margin-bottom: 8px; }
.alliance-card span { font-size: 13px; color: var(--rqt-gold); }

.contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 60px; margin-bottom: 60px; }
.contact-info-list { display: flex; flex-direction: column; gap: 22px; margin: 26px 0; }
.contact-info-list li { display: flex; align-items: flex-start; gap: 16px; }
.contact-info-icon { width: 46px; height: 46px; border-radius: 50%; background: var(--rqt-light-bg); color: var(--rqt-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-info-list strong { display: block; margin-bottom: 4px; color: var(--rqt-dark); }
.contact-info-list p { margin: 0; color: var(--rqt-text-light); }
.contact-info-list a { color: var(--rqt-text-light); }
.contact-info-list a:hover { color: var(--rqt-secondary); }

.contact-form-wrap { background: var(--rqt-white); border: 1px solid var(--rqt-border); border-radius: var(--rqt-radius); padding: 36px; box-shadow: var(--rqt-shadow); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-weight: 600; margin-bottom: 8px; font-size: 14px; color: var(--rqt-dark); }
.form-group input, .form-group textarea {
	width: 100%; padding: 13px 16px; border: 1.5px solid var(--rqt-border); border-radius: var(--rqt-radius-sm);
	font-size: 15px; transition: var(--rqt-transition); background: var(--rqt-light-bg);
}
.form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--rqt-secondary); background: var(--rqt-white); box-shadow: 0 0 0 4px rgba(46,158,79,.1); }
.hp-field { position: absolute !important; left: -9999px !important; opacity: 0; height: 0; width: 0; }
.form-response { margin-top: 16px; padding: 12px 16px; border-radius: var(--rqt-radius-sm); font-size: 14.5px; display: none; }
.form-response.success { display: block; background: rgba(46,158,79,.1); color: var(--rqt-secondary); }
.form-response.error { display: block; background: rgba(220,53,69,.1); color: #dc3545; }
#rqt-submit-btn.is-loading { opacity: .7; pointer-events: none; }

.contact-map { border-radius: var(--rqt-radius); overflow: hidden; box-shadow: var(--rqt-shadow); }
.contact-map iframe { display: block; filter: grayscale(.15); }

.rqt-search-form { display: flex; max-width: 420px; margin: 0 auto; border: 1.5px solid var(--rqt-border); border-radius: 50px; overflow: hidden; }
.rqt-search-form input { flex: 1; border: 0; padding: 12px 18px; background: transparent; }
.rqt-search-form input:focus { outline: none; }
.rqt-search-form button { background: var(--rqt-primary); color: var(--rqt-white); border: 0; padding: 0 20px; }

.posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.post-card { background: var(--rqt-white); border: 1px solid var(--rqt-border); border-radius: var(--rqt-radius); overflow: hidden; transition: var(--rqt-transition); }
.post-card:hover { box-shadow: var(--rqt-shadow-lg); transform: translateY(-6px); }
.post-card-thumb { display: block; aspect-ratio: 4/3; overflow: hidden; }
.post-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.post-card:hover .post-card-thumb img { transform: scale(1.08); }
.post-card-body { padding: 22px; }
.post-card-title { font-size: 18px; margin-bottom: 10px; }
.post-card-excerpt { color: var(--rqt-text-light); font-size: 14.5px; margin-bottom: 14px; }

.single-thumb { border-radius: var(--rqt-radius); overflow: hidden; margin-bottom: 30px; }
.entry-content { color: var(--rqt-text); font-size: 16.5px; }
.entry-content h2, .entry-content h3 { margin-top: 1.4em; }
.single-service-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 50px; align-items: start; }
.single-service-sidebar { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 22px; }
.sidebar-box { background: var(--rqt-light-bg); border-radius: var(--rqt-radius); padding: 26px; }
.sidebar-box h3 { font-size: 17px; margin-bottom: 16px; }
.sidebar-cta { background: linear-gradient(135deg, var(--rqt-primary), var(--rqt-dark)); }
.sidebar-cta h3 { color: var(--rqt-white); }

.not-found-code { font-size: 110px; font-weight: 800; color: var(--rqt-primary); font-family: var(--rqt-font-en); line-height: 1; }

.comments-area { margin-top: 50px; padding-top: 40px; border-top: 1px solid var(--rqt-border); }
.comments-title { font-size: 22px; }
.comment-list { margin-top: 24px; }
.comment-list .comment-body { background: var(--rqt-light-bg); border-radius: var(--rqt-radius-sm); padding: 20px; margin-bottom: 16px; }

/* 14. مؤثرات الظهور عند التمرير ------------------------------------------------ */
.reveal-up, .reveal-left, .reveal-right { opacity: 0; transition: opacity .8s ease, transform .8s ease; transition-delay: var(--reveal-delay, 0s); }
.reveal-up { transform: translateY(40px); }
.reveal-left { transform: translateX(-40px); }
.reveal-right { transform: translateX(40px); }
[dir="rtl"] .reveal-left { transform: translateX(40px); }
[dir="rtl"] .reveal-right { transform: translateX(-40px); }
.reveal-up.is-visible, .reveal-left.is-visible, .reveal-right.is-visible { opacity: 1; transform: translate(0,0); }

/* 15. تجاوب الشاشات ------------------------------------------------ */
@media (max-width: 1080px) {
	.about-grid, .contact-grid, .scope-grid { grid-template-columns: 1fr; }
	.about-media { max-width: 420px; margin: 0 auto; }
	.scope-content { text-align: center; }
	.scope-content .about-points { align-items: center; }
	.scope-content .about-points li { justify-content: center; }
	.services-grid, .posts-grid { grid-template-columns: repeat(2, 1fr); }
	.portfolio-grid { grid-template-columns: repeat(2, 1fr); }
	.mission-grid, .alliances-grid { grid-template-columns: 1fr; }
	.single-service-grid { grid-template-columns: 1fr; }
	.single-service-sidebar { position: static; }
}

@media (max-width: 900px) {
	/* لوحة القائمة الجانبية: زجاجية شفافة بلون الهوية الملكية (كحلي غامق + بلور)
	   بدل الأبيض الصلب، مع حد ذهبي رفيع يفصلها عن الصفحة. */
	.main-navigation {
		position: fixed; inset-inline-end: -340px; top: 0; height: 100vh; height: 100dvh; width: min(320px, 85%);
		background: rgba(10, 28, 56, .88);
		backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
		border-inline-start: 1px solid rgba(212,160,23,.35);
		box-shadow: -16px 0 45px rgba(0,0,0,.45);
		transition: inset-inline-end .4s ease; padding: 100px 26px 26px; z-index: 600;
		flex-direction: column; align-items: stretch; overflow-y: auto;
	}
	.main-navigation.is-open { inset-inline-end: 0; }
	#primary-menu { flex-direction: column; align-items: stretch; gap: 2px; }
	#primary-menu .sub-menu {
		position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; display: none;
		margin-inline-start: 14px; background: transparent; padding: 0;
	}
	#primary-menu li.sub-menu-open > .sub-menu { display: block; }
	.menu-toggle { display: flex; }
	.header-cta { display: none; }
	.top-bar-inner { justify-content: center; text-align: center; }

	/* روابط القائمة بيضاء/ذهبية فوق الخلفية الزجاجية الكحلية، بفواصل خفيفة بين العناصر */
	#primary-menu > li { border-bottom: 1px solid rgba(255,255,255,.08); }
	#primary-menu > li:last-child { border-bottom: none; }
	#primary-menu > li > a { color: var(--rqt-white); padding: 14px 6px; }
	#primary-menu > li > a:hover,
	#primary-menu > li.current-menu-item > a { color: var(--rqt-gold); }
	#primary-menu .sub-menu a { color: rgba(255,255,255,.75); padding: 10px 6px; }
	#primary-menu .sub-menu a:hover { color: var(--rqt-gold); }

	/* غطاء معتم خلف اللوحة: يظهر تدريجيًا مع فتح القائمة، والنقر عليه يغلقها */
	.rqt-nav-overlay {
		position: fixed; inset: 0; background: rgba(6, 14, 28, .5);
		opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s ease; z-index: 590;
	}
	.rqt-nav-overlay.is-open { opacity: 1; visibility: visible; }
}
@media (min-width: 901px) {
	.rqt-nav-overlay { display: none; }
}

/* شعار الهيدر على الجوال: إخفاء اسم الشركة الطويل بجانب الشعار لمنع التداخل مع القائمة */
@media (max-width: 600px) {
	.header-inner { gap: 10px; }
	.site-logo-text { gap: 8px; }
	.logo-words { display: none; }
	.site-branding img { max-height: 62px; }
	.site-logo-img { height: 62px; }
}

@media (max-width: 780px) {
	.section-padding { padding: 60px 0; }
	.hero-arrow { width: 36px; height: 36px; font-size: 12px; top: auto; bottom: 20px; transform: none; }
	.hero-arrow-prev { inset-inline-start: 16px; }
	.hero-arrow-next { inset-inline-end: 16px; }
	.hero-dots { bottom: 26px; }
	.scope-ring { max-width: 300px; }
	.stats-grid { grid-template-columns: repeat(2, 1fr); }
	.stat-item:nth-child(2) { border-inline-end: none; }
	.services-grid, .portfolio-grid, .posts-grid { grid-template-columns: 1fr; }
	.form-row { grid-template-columns: 1fr; }
	.footer-grid { grid-template-columns: 1fr 1fr; }
	.cta-inner { text-align: center; justify-content: center; }
	.footer-cta-inner { text-align: center; justify-content: center; }
}

@media (max-width: 520px) {
	.footer-grid { grid-template-columns: 1fr; }
	.hero-buttons { flex-direction: column; align-items: stretch; }
	.hero-buttons .btn { justify-content: center; }
	.top-bar-info { justify-content: center; }
	.top-bar-right { justify-content: center; }
	.footer-bottom-inner { flex-direction: column; text-align: center; }
}

/* تفضيل تقليل الحركة لأصحاب الاحتياجات الخاصة */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}