/* Tajawal محلي لقسم آراء العملاء: العربية والإنجليزية بالخط نفسه.
   ملفان للأوزان المستخدمة فعليًا لتجنب توليد وزن وهمي. */
@font-face {
  font-family: 'Tajawal';
  src: url('../fonts/Tajawal-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Tajawal';
  src: url('../fonts/Tajawal-Medium.ttf') format('truetype');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

/* ملف الخط محلي؛ لا توجد اتصالات بـ Google Fonts أثناء عرض الموقع. */
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

/* ======================================================================
   Straight Line Interiors — تنسيق القالب
   الترتيب: متغيرات / أساسيات / رأس الصفحة / الأقسام / التذييل / الاستجابة.
   عدّل ألوان وأبعاد الهوية هنا؛ لا تعدّل ملفات Bootstrap الأصلية.
   ====================================================================== */
:root {
  /* ==================================================================
     إعدادات الخط حسب القسم — مرحلة تجميع القيم قبل ضبطها النهائي.
     المؤكد من المرجع: عائلة Roboto للموقع وإعدادات نص القسم الثاني فقط.
     بقية القيم من القالب الحالي وليست قياسات مؤكدة للموقع القديم.
     إعدادات الجوال المختلفة محفوظة كمتغيرات داخل media queries أدناه.
     قسم آراء العملاء يستخدم Tajawal للعربية والإنجليزية عبر متغير مستقل.
     ================================================================== */
  --font-family-site: 'Roboto', Arial, sans-serif;
  /* استثناء قسم Customer Reviews لدعم النصوص العربية بخط تجوال. */
  --reviews-font-family: 'Tajawal', Arial, sans-serif;
  --bs-font-sans-serif: var(--font-family-site);
  --bs-body-font-family: var(--font-family-site);

  /* الأساس العام */
  --body-size: 16px;
  --body-weight: 400;
  --body-line-height: 1.7;
  /* روابط القائمة */
  --header-nav-size: 15px;
  --header-nav-weight: 400;
  --header-nav-line-height: var(--body-line-height);
  /* أزرار القائمة */
  --header-button-size: 14px;
  --header-button-weight: 400;
  --header-button-line-height: 1.5;
  /* القسم الأول: عنوان الفيديو */
  --hero-title-size: clamp(38px, 5vw, 106px);
  --hero-title-weight: 600;
  --hero-title-line-height: 1.2;
  /* القسم الثاني: النص — مؤكد من الصورة: Roboto / 15px / 400 / 29px */
  --about-text-size: 15px;
  --about-text-weight: 400;
  --about-text-line-height: 29px;
  --about-text-style: normal;
  --about-text-transform: none;
  --about-text-decoration: none;
  --about-text-letter-spacing: normal;
  --about-text-word-spacing: normal;
  /* القسم الثاني: زر Read More */
  --about-button-size: 16px;
  --about-button-weight: 400;
  --about-button-line-height: 1.5;
  /* القسم الثاني: النص الإضافي */
  --about-extra-size: 14px;
  --about-extra-weight: var(--about-text-weight);
  --about-extra-line-height: var(--about-text-line-height);
  /* القسم الثالث: 20px في جميع الشاشات حسب تأكيد المستخدم، وزن 300 وCapitalize.
     ارتفاع السطر الحالي مؤقت؛ حقول ارتفاع السطر والتباعد فارغة في المرجع. */
  --expertise-label-size: 20px;
  --expertise-label-weight: 300;
  --expertise-label-line-height: 1.1;
  --expertise-label-transform: capitalize;
  --expertise-label-style: normal;
  --expertise-label-decoration: none;
  --expertise-label-letter-spacing: normal;
  --expertise-label-word-spacing: normal;
  /* القيم الحالية المشتركة لعناوين الأقسام؛ لكل قسم متغيراته أدناه */
  --section-title-size: clamp(26px, 2.7vw, 48px);
  --section-title-weight: 400;
  --section-title-line-height: 1.3;
  /* تسميات بطاقات الخدمات */
  --service-label-size: 16px;
  --service-label-weight: 400;
  --service-label-line-height: var(--body-line-height);
  /* تأثير بطاقات الخدمات: متغيرات مستقلة للتحكم بدرجة التعتيم والحركة. */
  --service-hover-overlay: 0.32;
  --service-hover-image-scale: 1.055;
  --service-hover-image-position: 68%;
  --service-image-pan-duration: 500ms;
  --service-image-pan-easing: cubic-bezier(.4, 0, .2, 1);
  --service-hover-text-scale: 1.25;
  --service-hover-arrow-scale: 1.5;
  --service-hover-label-offset: -18px;
  --service-motion-duration: 320ms;
  /* الآراء: اسم العميل */
  --review-name-size: 19px;
  --review-name-weight: 500;
  --review-name-line-height: var(--body-line-height);
  /* الآراء: اسم المنشأة */
  --review-company-size: 15px;
  --review-company-weight: 400;
  --review-company-line-height: var(--body-line-height);
  /* الآراء: نص التقييم */
  --review-text-size: 15px;
  --review-text-weight: 400;
  --review-text-line-height: 1.8;
  /* التواصل: العنوان */
  --contact-title-size: 29px;
  --contact-title-weight: 600;
  --contact-title-line-height: 1.2;
  /* التواصل: البيانات */
  --contact-text-size: 15px;
  --contact-text-weight: 400;
  --contact-text-style: normal;
  /* التواصل: ارتفاع سطر البيانات */
  --contact-details-line-height: 1.55;
  /* النموذج: تسميات الحقول */
  --form-label-size: 14px;
  --form-label-weight: 400;
  --form-label-line-height: var(--body-line-height);
  /* النموذج: النص المدخل */
  --form-input-size: 16px;
  --form-input-color: var(--color-white);
  --form-input-weight: 400;
  --form-input-line-height: 1.5;
  /* النموذج: الملاحظة */
  --form-note-size: 12px;
  --form-note-weight: 400;
  --form-note-line-height: var(--body-line-height);
  /* النموذج: رسالة الحالة */
  --form-status-size: 14px;
  --form-status-weight: 400;
  --form-status-line-height: var(--body-line-height);
  /* روابط التذييل */
  --footer-nav-size: 15px;
  --footer-nav-weight: 400;
  --footer-nav-line-height: var(--body-line-height);
  --footer-nav-decoration: none;
  /* حقوق النشر */
  --copyright-size: 14px;
  --copyright-weight: 400;
  --copyright-line-height: var(--body-line-height);
  /* عنوان services: مؤقت حتى وصول إعداداته من الموقع القديم. */
  --services-title-size: var(--section-title-size);
  --services-title-weight: var(--section-title-weight);
  --services-title-line-height: var(--section-title-line-height);
  /* عنوان reviews: مؤقت حتى وصول إعداداته من الموقع القديم. */
  --reviews-title-size: var(--section-title-size);
  --reviews-title-weight: var(--section-title-weight);
  --reviews-title-line-height: var(--section-title-line-height);
  /* عنوان clients: مؤقت حتى وصول إعداداته من الموقع القديم. */
  --clients-title-size: var(--section-title-size);
  --clients-title-weight: var(--section-title-weight);
  --clients-title-line-height: var(--section-title-line-height);
  /* عنوان partners: مؤقت حتى وصول إعداداته من الموقع القديم. */
  --partners-title-size: var(--section-title-size);
  --partners-title-weight: var(--section-title-weight);
  --partners-title-line-height: var(--section-title-line-height);

  /* أكواد Global Colors من الموقع القديم كما وردت في الصورة، دون تقريب.
     Accent يحتفظ بقناة الشفافية D4، وText يختلف عن TEXT-THEME الداكن. */
  --color-primary: #BC1213;
  /* واتساب يحتفظ بهوية مستقلة عن هوفر أزرار الموقع. */
  --whatsapp-green: #25D366;
  --whatsapp-green-hover: #128C7E;
  --whatsapp-pulse-duration: 2.4s;
  --color-secondary: #696864;
  --color-text: #B8B8B6;
  --color-accent: #BC1213D4;
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-text-theme: #3A3A3A;

  /* هوفر الأزرار حسب المرجع: رمادي ثانوي، نص أبيض، وحد TEXT-THEME داكن.
     الأحمر محفوظ ضمن لوحة الهوية، لكنه ليس لون الهوفر أو الضغط. */
  --button-hover-bg: var(--color-secondary);
  --button-hover-text: var(--color-white);
  --button-hover-border: var(--color-text-theme);

  /* توزيع الألوان على الأقسام؛ التدرج بين لون الخلفية واللون الثانوي. */
  --page-bg: var(--color-text);
  --text: var(--color-text-theme);
  --line: var(--color-secondary);
  --panel-top: var(--color-text);
  --panel-bottom: var(--color-secondary);
  --review-bg: var(--color-secondary);
  --header-bg: var(--color-secondary);
  /* ربط مكونات Bootstrap بالهوية نفسها، دون تعديل المكتبة. */
  --bs-primary: var(--color-primary);
  --bs-primary-rgb: 188, 18, 19;
  --bs-secondary: var(--color-secondary);
  --bs-secondary-rgb: 105, 104, 100;
  --bs-body-color: var(--color-text-theme);
  --bs-body-bg: var(--color-text);
  --bs-secondary-color: var(--color-secondary);
  --bs-border-color: var(--color-secondary);
  --bs-link-color: var(--color-primary);
  --bs-link-hover-color: var(--color-text-theme);
  --radius: 18px;
  --header-height: 78px;
}
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: var(--page-bg); color: var(--text); font-family: var(--font-family-site); font-size: var(--body-size); line-height: var(--body-line-height); font-weight: var(--body-weight); }
img { max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 4px; }
button, input, textarea { font: inherit; }
:focus-visible:not(.form-control) { outline: 3px solid var(--color-text-theme) !important; outline-offset: 5px; }
.btn { border-radius: 3px; padding: 6px 24px; }
.btn-outline-dark { --bs-btn-color: var(--color-text-theme); --bs-btn-border-color: var(--color-secondary); --bs-btn-hover-color: var(--button-hover-text); --bs-btn-hover-bg: var(--button-hover-bg); --bs-btn-hover-border-color: var(--button-hover-border); --bs-btn-active-color: var(--color-white); --bs-btn-active-bg: var(--button-hover-bg); --bs-btn-active-border-color: var(--button-hover-border); --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb); }
.btn-outline-light { --bs-btn-color: var(--color-white); --bs-btn-border-color: var(--color-white); --bs-btn-hover-color: var(--button-hover-text); --bs-btn-hover-bg: var(--button-hover-bg); --bs-btn-hover-border-color: var(--button-hover-border); --bs-btn-active-color: var(--color-white); --bs-btn-active-bg: var(--button-hover-bg); --bs-btn-active-border-color: var(--button-hover-border); }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 2000; padding: 10px 20px; background: var(--color-white); color: var(--color-black); }
.skip-link:focus { top: 12px; }
/* رأس الصفحة: Offcanvas جانبية تحت 1200px، وقائمة أفقية على الكمبيوتر. */
.site-header { position: absolute; top: 0; left: 0; width: 100%; z-index: 100; background: var(--header-bg); border-bottom: 1px solid #ffffff30; }
.navbar { min-height: var(--header-height); padding: 4px 0; }
.header-container { max-width: 1380px; }
.navbar-brand { padding: 0; margin-right: 40px; }
.navbar-brand img { display: block; width: 60px; height: 60px; }
.navbar-nav { gap: 14px; }
.navbar .nav-link { color: var(--color-white); font-size: var(--header-nav-size); padding: 12px 6px; border-bottom: 2px solid transparent; font-weight: var(--header-nav-weight); line-height: var(--header-nav-line-height); }
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--color-white); border-color: var(--color-white); }
/* ألوان المنصات مأخوذة من أيقونات المرجع، مستقلة عن ألوان أزرار الموقع. */
.header-social { display: flex; align-items: center; gap: 8px; margin-left: 12px; }
.social-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; color: #fff; font-size: 16px; line-height: 1; }
.social-linkedin { background: #0077b5; }
.social-instagram { background: linear-gradient(45deg, #ffb642, #f43d51 45%, #993cb5 80%); }
.social-facebook { background: #3b5998; }
#main-nav { --bs-offcanvas-width: min(340px, 88vw); --bs-offcanvas-bg: var(--color-secondary); --bs-offcanvas-color: var(--color-white); }
#main-nav .offcanvas-title { font-family: var(--font-family-site); font-size: 22px; font-weight: 400; }
@media (min-width: 1200px) {
  #main-nav .offcanvas-body { align-items: center; }
  .navbar-nav { gap: 8px; }
}
@media (max-width: 1199.98px) {
  .navbar-brand { order: 2; margin-right: 0; }
  .navbar-toggler { order: 1; }
  #main-nav .offcanvas-header { padding: 24px; border-bottom: 1px solid #ffffff30; }
  #main-nav .offcanvas-body { display: flex; flex-direction: column; padding: 20px 24px 32px; }
  #main-nav .navbar-nav { width: 100%; margin: 0 !important; gap: 4px; }
  #main-nav .nav-link { padding: 12px 0; }
  #main-nav .header-social { margin: 28px 0 22px; gap: 12px; }
  #main-nav .social-icon { width: 38px; height: 38px; flex-basis: 38px; font-size: 20px; }
  #main-nav .header-actions { flex-direction: column; margin: 0; gap: 12px; }
  #main-nav .header-actions .btn { min-height: 44px; padding: 10px 14px; }
}
.header-actions { display: flex; gap: 9px; margin-left: 18px; }
.header-actions .btn { white-space: nowrap; font-size: var(--header-button-size); padding: 5px 16px; font-weight: var(--header-button-weight); line-height: var(--header-button-line-height); }
/* تبديل نص الأزرار بالهوفر أو تركيز لوحة المفاتيح، مع ثبات عرض الزر.
   إعدادات الألوان مستقلة عن هذا السلوك ولا تتغير هنا. */
.button-swap-label { display: inline-grid; vertical-align: middle; }
.button-swap-label > span { grid-area: 1 / 1; }
.button-swap-label .label-hover { visibility: hidden; }
.button-swap:hover .label-default, .button-swap:focus-visible .label-default { visibility: hidden; }
.button-swap:hover .label-hover, .button-swap:focus-visible .label-hover { visibility: visible; }
/* مقاسات أيقونات الواجهة مستقلة عن متغيرات خط النصوص. */
.navbar-toggler { border: 0; }
.navbar-toggler .bi { font-size: 30px; line-height: 1; }
.header-actions .bi { display: inline-block; vertical-align: middle; line-height: 1; }
.floating-contact .bi { font-size: 27px; line-height: 1; }
/* صورة بديلة للفيديو تمنع ظهور واجهة فارغة قبل تحميله. */
.hero { position: relative; height: clamp(510px, 57vw, 1420px); min-height: 420px; display: grid; place-items: center; isolation: isolate; background: var(--color-secondary); }
.hero-video, .hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.hero-video { object-fit: cover; pointer-events: none; }
.hero-shade { background: rgb(0 0 0 / 40%); }
.hero h1 { color: var(--color-white); font-family: var(--font-family-site); font-size: var(--hero-title-size); font-weight: var(--hero-title-weight); text-align: center; padding: 0 22px; margin: 0 0 5%; text-shadow: 0 2px 18px #0004; line-height: var(--hero-title-line-height); }
/* الإطار يحافظ على نسبة المرجع على الكمبيوتر ويتمدد تدريجيًا للشاشات الأصغر. */
.content-frame { width: 60%; max-width: 1540px; margin: 36px auto 0; border: 1px solid var(--text); }
.about-section { padding: 60px 6% 24px; }
.about-copy p { text-align: justify; font-size: var(--about-text-size); font-weight: var(--about-text-weight); line-height: var(--about-text-line-height); font-style: var(--about-text-style); text-transform: var(--about-text-transform); text-decoration: var(--about-text-decoration); letter-spacing: var(--about-text-letter-spacing); word-spacing: var(--about-text-word-spacing); margin-bottom: 0; }
.read-more { margin-top: 48px; min-width: 145px; font-size: var(--about-button-size); font-weight: var(--about-button-weight); line-height: var(--about-button-line-height); }
.about-copy .about-extra { margin-top: 20px; font-size: var(--about-extra-size); font-weight: var(--about-extra-weight); line-height: var(--about-extra-line-height); }
.about-logo { width: 88%; filter: drop-shadow(5px 6px 5px #0005); }
.expertise-section { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.expertise-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; height: 225px; padding: 18px 10px; border-right: 1px solid var(--line); }
.expertise-section .row > div:last-child .expertise-item { border-right: 0; }
.expertise-item img { height: 135px; width: 140px; object-fit: contain; }
/* التسميات على سطر واحد مثل المرجع، دون فواصل أسطر إجبارية. */
.expertise-item span { white-space: nowrap; min-height: 46px; display: flex; align-items: center; text-align: center; font-size: var(--expertise-label-size); line-height: var(--expertise-label-line-height); font-weight: var(--expertise-label-weight); text-transform: var(--expertise-label-transform); font-style: var(--expertise-label-style); text-decoration: var(--expertise-label-decoration); letter-spacing: var(--expertise-label-letter-spacing); word-spacing: var(--expertise-label-word-spacing); }
.portfolio-surface { background: linear-gradient(var(--panel-top), var(--panel-bottom)); padding: 0 14px; }
.section-block { padding: 40px 8px; border-bottom: 1px solid var(--color-text); }
.section-block h2 { color: var(--color-white); font-size: var(--heading-size); font-weight: var(--heading-weight); text-align: center; margin: 0 0 28px; line-height: var(--heading-line-height); }
/* بطاقات الخدمات: التسمية والسهم ظاهران في أسفل الصورة في الحالة العادية.
   الطبقة السوداء منفصلة عن الصورة والنص حتى يبقى النص أبيض وواضحًا.
   التحولات لا تغير أبعاد البطاقة ولا تؤثر على ترتيب الشبكة. */
.service-card {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  background: var(--color-secondary);
  border: 0;
  border-radius: var(--radius);
  box-shadow: 0 3px 12px #0005;
  overflow: hidden;
  isolation: isolate;
  text-align: left;
}
.service-card img {
  display: block;
  width: 100%;
  aspect-ratio: 0.615;
  object-fit: cover;
  object-position: 50% 50%;
  transition: transform var(--service-image-pan-duration) var(--service-image-pan-easing), object-position var(--service-image-pan-duration) var(--service-image-pan-easing);
}
.service-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--color-black);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--service-motion-duration) ease;
}
.service-caption {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 48px 18px 20px;
  color: var(--color-white);
  background: linear-gradient(transparent, rgb(0 0 0 / 75%));
  font-size: var(--service-label-size);
  font-weight: var(--service-label-weight);
  line-height: var(--service-label-line-height);
}
.service-name { transform-origin: left center; }
.service-caption .bi { flex-shrink: 0; line-height: 1; transform-origin: right center; }
.service-name, .service-caption .bi { transition: transform var(--service-motion-duration) ease; }
/* نفس الإشارة البصرية عند التنقل بلوحة المفاتيح. */
.service-card:focus-visible::after { opacity: var(--service-hover-overlay); }
.service-card:focus-visible img { transform: scale(var(--service-hover-image-scale)); object-position: var(--service-hover-image-position) 50%; }
.service-card:focus-visible .service-name { transform: translateY(var(--service-hover-label-offset)) scale(var(--service-hover-text-scale)); }
.service-card:focus-visible .bi { transform: translateY(var(--service-hover-label-offset)) scale(var(--service-hover-arrow-scale)); }
/* تجنب بقاء حالة الهوفر عالقة بعد اللمس على الجوال. */
@media (hover: hover) and (pointer: fine) {
  .service-card:hover::after { opacity: var(--service-hover-overlay); }
  .service-card:hover img { transform: scale(var(--service-hover-image-scale)); object-position: var(--service-hover-image-position) 50%; }
  .service-card:hover .service-name { transform: translateY(var(--service-hover-label-offset)) scale(var(--service-hover-text-scale)); }
  .service-card:hover .bi { transform: translateY(var(--service-hover-label-offset)) scale(var(--service-hover-arrow-scale)); }
}
/* ارتفاع الآراء يتبع المحتوى؛ لا تُقص النصوص العربية أو الطويلة. */
.reviews-section { font-family: var(--reviews-font-family); padding-top: 36px; padding-bottom: 10px; }
.review-card { margin: 10px 0 0; padding: 26px; background: var(--review-bg); border-radius: var(--radius); color: var(--color-white); box-shadow: 0 2px 12px #0003; text-align: right; }
.review-card figcaption strong { display: block; font-size: var(--review-name-size); font-weight: var(--review-name-weight); line-height: var(--review-name-line-height); }
.review-card figcaption span { color: var(--color-text); font-size: var(--review-company-size); font-weight: var(--review-company-weight); line-height: var(--review-company-line-height); }
.review-card blockquote { margin: 12px 0 0; color: var(--color-text); font-size: var(--review-text-size); line-height: var(--review-text-line-height); font-weight: var(--review-text-weight); }
.carousel-indicators { position: static; margin: 50px 0 0; }
.carousel-indicators [data-bs-target] { width: 10px; height: 10px; border-radius: 50%; border-top: 12px solid transparent; border-bottom: 12px solid transparent; background-color: var(--color-white); }
.brand-board { display: block; width: 100%; height: auto; margin: 34px auto 20px; }
.partners-section { border: 0; padding-bottom: 50px; }
/* نموذج التواصل: أسماء الحقول جاهزة لربط Controller وعمليات التحقق في Laravel. */
.site-footer { padding-top: clamp(90px, 12vw, 300px); }
.site-footer .container { max-width: 1320px; padding-inline: 24px; }
.site-footer h2 { font-size: var(--contact-title-size); font-weight: var(--contact-title-weight); margin-bottom: 20px; line-height: var(--contact-title-line-height); }
.contact-details address { font-style: var(--contact-text-style); font-size: var(--contact-text-size); font-weight: var(--contact-text-weight); }
.contact-details address p { display: flex; align-items: center; gap: 12px; margin-bottom: 34px; line-height: var(--contact-details-line-height); }
.contact-details a { text-decoration: none; overflow-wrap: anywhere; }
.contact-icon { font-size: 27px; width: 25px; flex-shrink: 0; text-align: center; }
#contact-form label { display: block; font-size: var(--form-label-size); font-weight: var(--form-label-weight); line-height: var(--form-label-line-height); }
.form-control { border: 1px solid transparent; border-bottom-color: var(--line); border-radius: 0; background: transparent; padding: 4px 1px 5px; color: var(--form-input-color); caret-color: var(--form-input-color); font-size: var(--form-input-size); font-weight: var(--form-input-weight); line-height: var(--form-input-line-height); }
/* إطار شفاف محجوز يمنع تغير الأبعاد: يظهر الخط السفلي فقط في الوضع العادي،
   وتصبح الجهات الأربع بيضاء عند التركيز، ثم تعود تلقائيًا عند مغادرة الحقل. */
.form-control:focus, .form-control:focus-visible {
  color: var(--form-input-color);
  background: transparent;
  border-color: var(--color-white);
  box-shadow: none;
  outline: none;
}
textarea.form-control { resize: vertical; min-height: 95px; }
.form-note { font-size: var(--form-note-size); margin: 12px 0 0; font-weight: var(--form-note-weight); line-height: var(--form-note-line-height); }
#form-status { font-size: var(--form-status-size); border-left: 3px solid var(--color-primary); padding: 8px 12px; margin-top: 12px; font-weight: var(--form-status-weight); line-height: var(--form-status-line-height); }
.footer-nav { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding-left: 20px; }
.footer-nav a { font-size: var(--footer-nav-size); text-decoration: var(--footer-nav-decoration); font-weight: var(--footer-nav-weight); line-height: var(--footer-nav-line-height); }
.footer-nav a:hover { text-decoration: underline; }
.copyright { text-align: center; font-size: var(--copyright-size); margin: 46px 0 0; padding: 0 0 16px; font-weight: var(--copyright-weight); line-height: var(--copyright-line-height); }
/* تأثير Ripple: حلقتان خضراوان تتمددان للخارج وتتلاشيان بالتتابع مثل تموج الماء.
   الأيقونة والنقطة الحمراء ومساحة الضغط ثابتة، دون إطار أبيض أو دوران. */
.floating-contact {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 90;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  color: var(--whatsapp-green);
  background: var(--color-white);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 3px 12px #0003;
  transition: background-color .2s ease;
}
.floating-contact::before, .floating-contact .whatsapp-ripple {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid var(--whatsapp-green);
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  animation: whatsapp-ripple var(--whatsapp-pulse-duration) ease-out infinite;
}
/* فرق نصف دورة يجعل التموج مستمرًا دون تحريك الأيقونة. */
.floating-contact .whatsapp-ripple {
  animation-delay: calc(var(--whatsapp-pulse-duration) / -2);
}
.floating-contact::after {
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 1;
  width: 10px;
  height: 10px;
  background: #ff303b;
  border-radius: 50%;
  pointer-events: none;
}
.floating-contact:hover, .floating-contact:focus-visible {
  color: var(--whatsapp-green-hover);
  background: var(--color-white);
}
@keyframes whatsapp-ripple {
  0% { transform: scale(1); opacity: .8; }
  80%, 100% { transform: scale(1.65); opacity: 0; }
}
.modal-content { background: var(--color-text); border-radius: 10px; }
.modal-service-image { width: 100%; max-height: 55vh; object-fit: cover; border-radius: 8px; }

/* ربط عناوين الأقسام بمتغيراتها المستقلة. */
.services-section { --heading-size: var(--services-title-size); --heading-weight: var(--services-title-weight); --heading-line-height: var(--services-title-line-height); }
.reviews-section { --heading-size: var(--reviews-title-size); --heading-weight: var(--reviews-title-weight); --heading-line-height: var(--reviews-title-line-height); }
.clients-section { --heading-size: var(--clients-title-size); --heading-weight: var(--clients-title-weight); --heading-line-height: var(--clients-title-line-height); }
.partners-section { --heading-size: var(--partners-title-size); --heading-weight: var(--partners-title-weight); --heading-line-height: var(--partners-title-line-height); }
/* تابلت وكمبيوتر صغير: تقليل الهوامش وعدم ضغط القائمة أو البطاقات. */
@media (max-width: 1199.98px) {
  .content-frame { width: 78%; }
  .navbar-nav { gap: 3px; }
  .navbar-brand { margin-right: 16px; }
  .header-actions { margin-left: 8px; }
  
  .header-actions .btn { padding-inline: 9px; }
}
@media (max-width: 991.98px) {
  .content-frame { width: 90%; }
  .navbar-brand { order: 2; margin-right: 0; }
  .navbar-toggler { order: 1; }
  .site-header { background: var(--header-bg); }
  .header-actions { margin: 18px 0 0; }
  
  .navbar .nav-link { padding: 8px; }
  .expertise-item { border-bottom: 1px solid var(--line); }
  .expertise-section .row > div:nth-child(2n) .expertise-item { border-right: 0; }
  .expertise-section .row > div:nth-last-child(-n+2) .expertise-item { border-bottom: 0; }
  .footer-nav { padding-left: 0; flex-direction: row; flex-wrap: wrap; }
}
/* الجوال: نفس ترتيب المرجع، مع أحجام نصوص وأهداف لمس مريحة. */
@media (max-width: 767.98px) {
  :root { --header-height: 64px; }
  .navbar-brand img { width: 50px; height: 50px; }
  .hero { height: 460px; min-height: 0; }
  :root { --hero-title-size: clamp(28px, 6.2vw, 44px); }
  .hero h1 { margin: 0; }
  .content-frame { width: calc(100% - 24px); margin-top: 26px; }
  .about-section { padding: 42px 28px 28px; }
  
  .read-more { margin-top: 32px; }
  .about-logo { width: 100%; max-width: 390px; margin-top: 8px; }
  .portfolio-surface { padding-inline: 12px; }
  .section-block { padding: 42px 4px; }
  :root { --section-title-size: 28px; }
  .section-block h2 { margin-bottom: 30px; }
  .service-card img { aspect-ratio: .66; }
  
  .reviews-section { padding-top: 60px; padding-bottom: 0; }
  .review-card { padding: 24px 20px; }
  .carousel-indicators { margin-top: 44px; }
  .brand-board { margin: 20px auto 0; }
  .site-footer { padding: 95px 28px 0; }
  :root { --contact-title-size: 28px; }
  .footer-nav { flex-direction: column; gap: 18px; }
  :root { --copyright-size: 12px; }
  .copyright { margin-top: 58px; }
  .floating-contact { width: 48px; height: 48px; right: 20px; bottom: 20px; }
}
@media (max-width: 575.98px) {
  .expertise-item { height: 182px; border-right: 0; gap: 10px; }
  .expertise-item img { height: 115px; width: 125px; }
  .expertise-item span { min-height: auto; }
  .expertise-section .row > div:nth-last-child(2) .expertise-item { border-bottom: 1px solid var(--line); }
  .hero { height: 410px; }
}
/* تقليل حركة التمرير والتحولات؛ فيديو الخلفية يبدأ تلقائيًا وفق طلب التصميم. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* عند تقليل الحركة: تتغير حالة النص والسهم فورًا دون انتقال متحرك. */
  /* تموج واتساب يبقى فعالًا حسب طلب المستخدم؛ تقليل الحركة يخص انتقالات الواجهة. */
  *, *::before, *::after { transition: none !important; }
  /* حركة الصورة المطلوبة فقط تبقى سلسة، مع بقاء بقية تأثيرات تقليل الحركة. */
  .service-card img { transition: transform var(--service-image-pan-duration) var(--service-image-pan-easing), object-position var(--service-image-pan-duration) var(--service-image-pan-easing) !important; }
}


/* صفحة About Us: مبنية على لقطة الصفحة القديمة. */
.about-page { background: #b8b8b6; padding: 160px 24px 180px; }
.about-page-layout { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; align-items: start; }
.about-page-video { position: relative; width: 100%; aspect-ratio: 0.72; border-radius: 24px; overflow: hidden; box-shadow: 0 0 10px #0008; }
.about-page-video .hero-video { width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.about-page-copy { color: #3a3a3a; font-size: 15px; line-height: 1.5; }
.about-page-copy h1, .about-page-copy h2 { text-align: center; font-weight: 300; font-size: 48px; line-height: 1.2; margin: -10px 0 28px; }
.about-page-copy h2 { margin: 42px 0 28px; }
.about-page-copy p { text-align: justify; margin: 0 0 52px; }
.about-page-copy p:last-child { margin-bottom: 0; }
@media (max-width: 767px) { .about-page { padding: 60px 20px 80px; } .about-page-layout { grid-template-columns: 1fr; gap: 45px; } .about-page-video { max-width: 560px; margin: auto; } .about-page-copy h1, .about-page-copy h2 { font-size: 38px; } }

/* صفحة الخدمات: شبكة مستمدة من مرجع الصفحة القديمة. */
.services-page { padding: 245px 24px 0; }
.services-grid { max-width: 924px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid #3a3a3a; border-left: 1px solid #3a3a3a; }
.services-grid > * { min-width: 0; min-height: 350px; border-right: 1px solid #3a3a3a; border-bottom: 1px solid #3a3a3a; }
.services-grid-title, .services-grid-projects { display: flex; align-items: center; background: #333; color: #fff; padding: 12px; font-size: 38px; font-weight: 300; line-height: 1.18; text-decoration: none; }
.services-grid-title h1 { font-size: inherit; font-weight: inherit; margin: 0; }
.services-grid-projects:hover, .services-grid-projects:focus-visible { color: #fff; background: #484848; }
.services-grid-item { padding: 10px; display: flex; flex-direction: column; color: #202020; }
.services-grid-item h2 { font-size: 25px; font-weight: 300; line-height: 1; margin: 0 0 32px; }
.services-grid-item span { line-height: 1; }
.services-grid-item p { font-size: 13px; line-height: 1.5; text-align: justify; margin: auto 24px 56px; }
.services-grid-image { overflow: hidden; }
.services-grid-image img { width: 100%; height: 100%; display: block; object-fit: cover; }
@media (max-width: 991px) { .services-page { padding-top: 160px; } .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 600px; } }
@media (max-width: 575px) { .services-page { padding: 110px 20px 0; } .services-grid { grid-template-columns: 1fr; max-width: 360px; } .services-grid > * { min-height: 280px; } .services-grid-image { height: 350px; } .services-grid-item p { margin: auto 20px 40px; font-size: 15px; } }

/* صفحة التواصل المستقلة. الخريطة تحتاج اتصالاً بالإنترنت. */
.contact-page { padding: 116px 10px 0; }
.contact-map { position: relative; width: 100%; height: 235px; }
.contact-map iframe { display: block; width: 100%; height: 100%; border: 0; }
.contact-map > a { position: absolute; top: 8px; left: 8px; background: #fff; color: #1674d1; padding: 8px 12px; font-size: 13px; font-weight: 500; text-decoration: none; box-shadow: 0 1px 4px #0004; }
.contact-page-card { max-width: 966px; margin: 90px auto 0; display: grid; grid-template-columns: 3fr 2fr; box-shadow: 0 0 12px #0007; }
.contact-page-form { background: #fff; color: #222; padding: 20px 10px 10px; }
.contact-page-kicker { font-size: 14px; color: #555; }
.contact-page-form h1 { font-size: 21px; font-weight: 400; margin: 0; }
.contact-page-rule { width: 28px; border-bottom: 3px solid #222; margin-top: 12px; }
.contact-intro { font-size: 14px; line-height: 1.5; text-align: justify; margin: 52px 10px 42px; }
.contact-page-form .form-control { color: #222; border-bottom-color: #aaa; }
.contact-page-form .form-control:focus { border-color: #555; box-shadow: none; }
.contact-page-send { width: 100%; border: 0; border-radius: 5px; background: #333; color: white; font-weight: 600; padding: 10px; }
.contact-page-send:hover, .contact-page-send:focus-visible { background: #555; }
.contact-page-details { background: #333; color: #eee; padding: 46px 36px; }
.contact-detail { display: flex; gap: 16px; align-items: center; margin-bottom: 78px; }
.contact-detail:last-child { margin-bottom: 0; }
.contact-detail i { font-size: 28px; flex-shrink: 0; }
.contact-detail h2 { font-size: 20px; font-weight: 400; margin: 0 0 14px; }
.contact-detail p { font-size: 14px; line-height: 1.5; margin: 0; color: #c3c3c3; }
.contact-detail a { color: inherit; text-decoration: none; }
.contact-page-footer { padding: 250px 20px 20px; text-align: center; }
.contact-page-footer .copyright { margin: 0; }
@media (max-width: 767px) { .contact-page { padding-top: 75px; } .contact-map { height: 240px; } .contact-page-card { grid-template-columns: 1fr; margin-top: 45px; } .contact-page-form { padding: 22px; } .contact-page-details { padding: 36px 25px; } .contact-detail { margin-bottom: 40px; } .contact-page-footer { padding-top: 90px; } }

/* صفحة المشاريع تستخدم قسم الصفحة الرئيسية نفسه. */
.projects-page { padding-top: 180px; }
.projects-page .content-frame { margin-top: 0; }
@media (max-width: 767px) { .projects-page { padding-top: 110px; } }

/* قوالب معارض المشاريع. لقطات المرجع مؤقتة حتى ترد الصور الأصلية. */
.gallery-page { max-width: 1180px; margin: 0 auto; padding: 250px 24px 0; }
.gallery-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 32px; }
.gallery-filter { border: 1px solid #333; border-radius: 3px; padding: 10px 15px; background: #333; color: #fff; font-size: 14px; font-weight: 500; }
.gallery-filter:hover, .gallery-filter:focus-visible { background: #555; }
.gallery-filter.is-active { color: #333; background: white; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.gallery-card { overflow: hidden; border-radius: 18px; box-shadow: 0 3px 12px #0005; background-repeat: no-repeat; background-position: var(--sprite-x) var(--sprite-y); }
.gallery-card[hidden] { display: none; }
.gallery-commercial { aspect-ratio: 360 / 250; background-image: url('../img/commercial-reference.png'); background-size: 477.222% auto; }
.gallery-residential { aspect-ratio: 305 / 330; background-image: url('../img/residential-reference.png'); background-size: 563.279% auto; }
@media (max-width: 991px) { .gallery-page { padding-top: 160px; } .gallery-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; } }
@media (max-width: 575px) { .gallery-page { padding: 110px 20px 0; } .gallery-grid { grid-template-columns: 1fr; max-width: 390px; margin: auto; } .gallery-filter { padding: 8px 10px; } }

.gallery-office { aspect-ratio: 305 / 330; background-image: url('../img/office-reference.png'); background-size: 563.279% auto; }

/* قالب مشروع واحد: بيانات ثابتة مؤقتًا إلى حين ربط CodeIgniter. */
.project-detail { max-width: 1080px; margin: 0 auto; padding: 155px 24px 0; }
.project-detail-title { background: #41413f; color: white; border-radius: 25px; min-height: 170px; display: flex; align-items: center; padding: 12px; box-shadow: 0 3px 12px #0005; }
.project-detail-title h1 { font-size: 40px; font-weight: 300; margin: 0; }
.project-detail-panel { margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr; border: 2px solid #777; border-radius: 25px; overflow: hidden; box-shadow: 0 3px 10px #0004; }
.project-detail-photo { aspect-ratio: 515 / 702; background: url('../img/single-project-reference.png') 28.6% 24.1% / 333.59% auto no-repeat; }
.project-detail-info { padding: 20px 36px; text-align: center; color: #696864; }
.project-facts { display: flex; gap: 24px; justify-content: space-around; }
.project-fact { background: #696864; color: #fff; border-radius: 18px; box-shadow: 0 2px 10px #0005; width: 46%; min-height: 126px; padding: 12px; display: flex; flex-direction: column; justify-content: center; gap: 6px; font-size: 14px; }
.project-fact i { font-size: 28px; line-height: 1; }.project-fact strong { font-weight: 500; }
.project-detail-block { padding: 30px 0 24px; border-bottom: 1px solid #696864; }.project-detail-block > i { font-size: 32px; }.project-detail-block h2 { font-size: 20px; font-weight: 400; margin: 8px 0 14px; }.project-detail-block p { margin: 0; font-size: 16px; }
.project-detail-share { padding-top: 28px; }.project-share-links { display: flex; justify-content: center; gap: 12px; width: fit-content; margin: 14px auto 0; background: #696864; padding: 9px 14px; border-radius: 30px; }.project-share-links a { color: white; font-size: 22px; line-height: 1; }
.similar-projects { margin-top: 70px; }.similar-projects h2 { display: flex; align-items: center; gap: 10px; color: white; font-size: 19px; font-weight: 500; margin: 0 0 50px; }.similar-projects h2::after { content: ''; flex: 1; height: 1px; background: white; }
.similar-project-controls { display: flex; justify-content: center; gap: 9px; margin-top: 24px; }.similar-project-controls button { width: 12px; height: 12px; padding: 0; border: 0; border-radius: 50%; background: #696864; }.similar-project-controls button[aria-pressed="true"] { background: #fff; }.similar-project-controls button:focus-visible { outline: 2px solid #333; outline-offset: 3px; }
.gallery-card[href] { display: block; }.gallery-card[href]:focus-visible { outline: 3px solid #333; outline-offset: 3px; }
.gallery-card[hidden] { display: none; }
@media (max-width: 767px) { .project-detail { padding-top: 105px; }.project-detail-title { min-height: 110px; }.project-detail-title h1 { font-size: 30px; }.project-detail-panel { grid-template-columns: 1fr; }.project-detail-info { padding: 25px; }.similar-projects { margin-top: 50px; } }

/* معرض المشروع ومعاينة الصورة بملء الشاشة. */
.project-detail-photo { position: relative; background: #222; overflow: hidden; }
.project-gallery-image { position: absolute; inset: 0; background-repeat: no-repeat; }
.project-gallery-image.shot-wide { background-image: url('../img/flat-moda-preview-reference.png'); background-position: center; background-size: cover; }
.project-gallery-image.shot-portrait { background-image: url('../img/single-project-reference.png'); background-position: 28.6% 24.1%; background-size: 333.59% auto; }
.project-gallery-open { position: absolute; inset: 0; z-index: 1; border: 0; background: transparent; color: white; display: grid; place-items: center; transition: background 350ms ease; }
.gallery-plus { font-size: 70px; line-height: 1; font-weight: 200; opacity: 0; transform: rotate(0deg); transition: transform 500ms ease, opacity 350ms ease; }
.project-gallery-open:hover, .project-gallery-open:focus-visible { background: rgb(0 0 0 / 45%); }
.project-gallery-open:hover .gallery-plus, .project-gallery-open:focus-visible .gallery-plus { opacity: 1; transform: rotate(360deg); }
.project-gallery-controls { position: absolute; z-index: 2; left: 20px; top: 50%; transform: translateY(-50%); display: grid; background: #fff; }
.project-gallery-controls button { border: 0; color: #333; background: #fff; width: 38px; height: 38px; }
.project-gallery-controls button:hover, .project-gallery-controls button:focus-visible { background: #ddd; }
.project-lightbox .modal-content, .project-lightbox .modal-body { background: #000; color: #fff; }
.project-lightbox .modal-body { display: flex; align-items: center; justify-content: center; padding: 50px 55px; }
.lightbox-image { max-width: 100%; max-height: 100%; background-repeat: no-repeat; }
.lightbox-image.shot-wide { width: min(100%, calc((100vh - 100px) * 1.85)); aspect-ratio: 1.85; background-image: url('../img/flat-moda-preview-reference.png'); background-position: center; background-size: 121.4% 100%; }
.lightbox-image.shot-portrait { height: 100%; aspect-ratio: 515 / 702; background-image: url('../img/single-project-reference.png'); background-position: 28.6% 24.1%; background-size: 333.59% auto; }
.lightbox-close, .lightbox-prev, .lightbox-next { position: absolute; z-index: 2; border: 0; background: transparent; color: white; font-size: 24px; padding: 12px; }
.lightbox-close { top: 8px; right: 12px; }.lightbox-prev { left: 6px; top: 50%; transform: translateY(-50%); }.lightbox-next { right: 6px; top: 50%; transform: translateY(-50%); }
.lightbox-count { position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); font-size: 14px; color: #ddd; }
@media (prefers-reduced-motion: reduce) { .project-gallery-open { transition: background 350ms ease !important; }.gallery-plus { transition: transform 500ms ease, opacity 350ms ease !important; } }
@media (max-width: 575px) { .project-lightbox .modal-body { padding: 45px 38px; }.lightbox-image.shot-portrait { height: auto; width: min(100%, calc((100vh - 90px) * 0.7336)); } }

/* Dynamic project cards use original images and editable text. */
.real-gallery-card { position: relative; display: block; aspect-ratio: 360 / 250; color: white; text-decoration: none; }
.real-gallery-card[hidden] { display: none; }
.real-gallery-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.real-gallery-card span { position: absolute; left: 8%; right: 8%; bottom: 12%; padding: 8px 12px; border-radius: 25px; background: linear-gradient(90deg, #222e, #2226); color: #fff; }
.real-gallery-card:focus-visible { outline: 3px solid #333; outline-offset: 3px; }
.project-live-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lightbox-live-image { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.similar-project-controls button.active { background: #fff; }