:root {
  --header-offset-desktop: 165px;
  --header-offset-mobile: 95px;
}

.projects-hero-section {
  position: relative;
  padding-top: var(--header-offset-desktop);
  background: var(--color-bg);
}

.projects-hero-bg {
  min-height: 42vh;
  display: flex;
  align-items: center;
  position: relative;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.projects-hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.62), rgba(0,0,0,0.52)),
    radial-gradient(circle at 20% 20%, rgba(109, 59, 23, 0.16), transparent 28%),
    radial-gradient(circle at 80% 30%, rgba(109, 59, 23, 0.12), transparent 30%);
  z-index: 0;
}

.projects-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 44px 0;
}

.projects-hero-title {
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: clamp(2.6rem, 5vw, 4.6rem);
  line-height: 1.02;
  margin-bottom: 18px;
}

.projects-hero-text {
  max-width: 920px;
  margin: 0 auto;
  color: var(--color-text-muted);
  line-height: 1.95;
  font-size: 1.05rem;
}

.projects-page-section {
  padding: 54px 0 90px;
  background:
    radial-gradient(circle at 20% 20%, rgba(109, 59, 23, 0.10), transparent 26%),
    radial-gradient(circle at 80% 30%, rgba(109, 59, 23, 0.08), transparent 28%),
    var(--color-bg);
}

.projects-tabs {
  border-bottom: 1px solid var(--color-border);
  gap: 10px;
}

.projects-tabs .nav-link {
  color: var(--color-primary) !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-pill) !important;
  padding: 12px 20px !important;
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.projects-tabs .nav-link:hover,
.projects-tabs .nav-link.active,
.projects-tabs .nav-link:focus {
  background-color: var(--color-primary) !important;
  color: #fff !important;
  border-color: var(--color-primary) !important;
  box-shadow: var(--glow-soft) !important;
  transform: translateY(-2px);
}

.project-card {
  height: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.project-card:hover {
  transform: translateY(-6px) scale(1.015);
  border-color: rgba(109, 59, 23, 0.30);
  box-shadow: var(--shadow-md), var(--glow-soft);
}

.project-card .card-img-top {
  height: 300px;
  width: 100%;
  object-fit: cover;
  object-position: center;
  background: rgba(255,255,255,0.03);
  transition: transform var(--transition-slow), filter var(--transition-slow);
}

.project-card:hover .card-img-top {
  transform: scale(1.05);
  filter: saturate(1.05);
}

.project-card .card-body {
  padding: 20px 18px;
  text-align: center;
  background: transparent;
}

.project-card .card-title {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: 1.35rem;
  line-height: 1.15;
}

.project-details-btn {
  appearance: none;
  -webkit-appearance: none;
  min-height: 48px;
  padding: 0 22px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-strong);
  background: rgba(255,255,255,0.04);
  color: var(--color-text);
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.project-details-btn:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  box-shadow: var(--glow-soft);
  transform: translateY(-2px);
}

.project-modal .modal-content {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.project-modal .modal-header {
  border-bottom: 1px solid var(--color-border);
  background: rgba(255,255,255,0.02);
}

.project-modal .modal-title {
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: 1.8rem;
}

.project-modal .btn-close {
  margin: 0;
  filter: invert(1);
  opacity: 0.8;
}

.project-modal .modal-body {
  color: var(--color-text-muted);
}

.project-modal-description {
  line-height: 1.95;
  margin: 0;
}

.project-modal-image {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  background: rgba(255,255,255,0.03);
}

.projects-page-section .alert-warning {
  background: rgba(109, 59, 23, 0.12);
  color: var(--color-text);
  border: 1px solid rgba(109, 59, 23, 0.22);
  border-radius: var(--radius-md);
}

/* فصلت قسم الخدمات عن باقي الأقسام لضبط الطبقة الشفافة (Overlay) */
.dimensions-about-section,
.featured-projects-section,
.dimensions-tools-section,
.contact-cta-section {
  position: relative;
  padding: var(--section-space) 0;
}

.dimensions-about-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 34px;
  align-items: center;
}

.about-image {
  min-height: 620px;
  border-radius: var(--radius-xl);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-lg);
}

.about-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.55) 100%);
}

.about-image-overlay {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 2;
  padding: 14px 18px;
  border-radius: 18px;
  background: rgba(255,255,255,0.06);
  color: var(--color-text);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(10px);
}

.about-copy-box {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.about-copy {
  color: var(--color-text-muted);
  line-height: 1.95;
}

.about-feature-list {
  display: grid;
  gap: 16px;
  margin-top: 10px;
}

.about-feature-card {
  position: relative;
  padding: 24px;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  transition: var(--transition-fast);
}

.about-feature-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--glow-soft);
}

.about-feature-card h3 {
  color: var(--color-text);
  margin-bottom: 10px;
}

.about-feature-card p {
  color: var(--color-text-muted);
}


/* =========================================
   قسم الخدمات - التعديل الجذري والدقيق
========================================= */

/* 1. إعداد الخلفية والـ Overlay الأسود الشفاف */
.dimensions-services-section {
  position: relative;
  padding: var(--section-space) 0;
  background-size: cover; 
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  z-index: 1; /* أساسي من أجل الـ Overlay */
}

.dimensions-services-section::before {
  content: "";
  position: absolute;
  inset: 0; /* تغطي كامل مساحة القسم */
  background-color: rgba(0, 0, 0, 0.0); /* درجة الشفافية للون الأسود */
  z-index: -1; /* لجعل اللون خلف النصوص */
}

/* 2. التوسيط المطلق والإجباري للعنوان والشرح */
.dimensions-services-section .section-head {
  display: flex;
  flex-direction: column;
  align-items: center;     /* توسيط العناصر أفقياً */
  justify-content: center; /* توسيط العناصر عمودياً */
  text-align: center;      /* توسيط النصوص داخل العناصر */
  width: 100%;             /* أخذ العرض الكامل للكونتينر */
  margin-bottom: 60px;
}

.dimensions-services-section .section-eyebrow {
  display: inline-block;
  color: var(--color-primary);
  font-size: 0.9rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  margin-bottom: 16px;
  position: relative;
}

.dimensions-services-section .section-eyebrow::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background: var(--color-primary);
  border-radius: 50%;
}

.dimensions-services-section .section-title {
  max-width: 750px; /* تحديد العرض لكي لا يمتد النص للأطراف */
  margin: 0 auto;   /* ضمان بقاء الكتلة في المنتصف */
  color: #fff;
}

/* 3. شبكة الكروت (التحكم في الحجم الكلي حتى لا تتضخم) */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 5%; /* تقليل المسافات */
  max-width: 1050px; /* السر هنا: منع الشبكة من التمدد بشكل مفرط على الشاشات الكبيرة */
  margin: 0 auto;    /* توسيط الشبكة بالكامل */
  counter-reset: arch-counter;
}

/* 4. الكرت المعماري - تصغير الحجم والمسافات الداخلية */
.service-card {
  position: relative;
  min-height: 240px; /* تصغير الارتفاع (كان 320px) */
  padding: 30px 25px; /* تصغير الحشوة الداخلية (كانت 50px 30px) */
  border-radius: 0;
  background-color: rgba(12, 12, 12, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.03);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  z-index: 1;
  overflow: hidden;

  background-image:
    linear-gradient(var(--color-primary), var(--color-primary)),
    linear-gradient(var(--color-primary), var(--color-primary)),
    linear-gradient(var(--color-primary), var(--color-primary)),
    linear-gradient(var(--color-primary), var(--color-primary));
  background-repeat: no-repeat;
  background-position: top right, top left, bottom left, bottom right;
  background-size: 0 2px, 2px 0, 0 2px, 2px 0;

  transition: background-size 0.7s cubic-bezier(0.19, 1, 0.22, 1), transform 0.5s ease, background-color 0.5s ease;
}

.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 24px 24px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.7s ease;
}

.service-card::after {
  counter-increment: arch-counter;
  content: "0" counter(arch-counter);
  position: absolute;
  top: 25px; /* تعديل المكان ليتناسب مع الحجم الجديد */
  right: 25px;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.15);
  font-family: monospace;
  transition: all 0.5s ease;
}

.service-card:hover {
  background-color: rgba(18, 18, 18, 0.85);
  transform: translateY(-8px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
  background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
}

.service-card:hover::before {
  opacity: 1;
}

.service-card:hover::after {
  color: var(--color-primary);
  top: 20px;
  right: 20px;
}

/* تصغير نصوص الكروت */
.service-card-title {
  font-size: 1.15rem; /* تصغير الخط (كان 1.3rem) */
  color: var(--color-text);
  margin-bottom: 12px;
  font-weight: 700;
  position: relative;
  padding-bottom: 16px;
  transition: transform 0.5s ease, color 0.3s ease;
}

.service-card-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 40px;
  height: 2px;
  background: rgba(255, 255, 255, 0.1);
  transition: width 0.5s ease, background 0.5s ease;
}

.service-card:hover .service-card-title {
  transform: translateX(-8px);
  color: #fff;
}

.service-card:hover .service-card-title::after {
  width: 80px;
  background: var(--color-primary);
}

.service-card-text {
  color: var(--color-text-muted);
  font-size: 0.85rem; /* تصغير الخط (كان 0.95rem) */
  line-height: 1.7;
  margin: 0;
  opacity: 0.7;
  transition: opacity 0.5s ease;
}

.service-card:hover .service-card-text {
  opacity: 1;
}


/* =========================================
   التجاوب مع الشاشات (Responsive Layout)
========================================= */

@media (min-width: 1024px) {
  .services-grid {
    grid-template-columns: repeat(6, 1fr);
  }
  
  /* توزيع أول 3 كروت في السطر الأول لتماثل الكتل المعمارية */
  .service-card:nth-child(1),
  .service-card:nth-child(2),
  .service-card:nth-child(3) {
    grid-column: span 2;
  }
  
  /* تمركز الكرتين الرابع والخامس في السطر الثاني بشكل مثالي */
  .service-card:nth-child(4) {
    grid-column: 2 / span 2;
  }
  
  .service-card:nth-child(5) {
    grid-column: 4 / span 2;
  }
}

@media (max-width: 1023px) and (min-width: 641px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .service-card:nth-child(5) {
    grid-column: 1 / -1; 
  }
}

@media (max-width: 991px) {
  .projects-hero-section {
    padding-top: var(--header-offset-mobile);
  }

  .projects-hero-bg {
    min-height: 34vh;
  }
}

@media (max-width: 768px) {
  .projects-page-section {
    padding: 40px 0 70px;
  }

  .project-card .card-img-top {
    height: 240px;
  }
}

@media (max-width: 640px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
  .service-card {
    min-height: 220px;
  }
}

/* =========================================
   فرض التوسيط الإجباري للعنوان
========================================= */

.dimensions-services-section .section-head {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.dimensions-services-section .section-title {
  text-align: center !important;
  margin: 0 auto !important;
  width: 100% !important;
  max-width: 750px !important;
  display: block !important;
}

.dimensions-services-section .section-eyebrow {
  text-align: center !important;
  margin: 0 auto 16px auto !important;
  display: inline-block !important;
}

/* إصلاح النقطة الهندسية فوق العنوان الصغير لتبقى بالمنتصف */
.dimensions-services-section .section-eyebrow::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 4px;
  height: 4px;
  background: var(--color-primary);
  border-radius: 50%;
}

/* =========================================
   تجاوب قسم "حول الشركة" (About Section) مع الهواتف
========================================= */

/* للشاشات المتوسطة (التابلت) والأصغر */
@media (max-width: 991px) {
    .dimensions-about-grid {
        grid-template-columns: 1fr; /* تحويل الشبكة لعمود واحد لتصبح العناصر فوق بعضها */
        gap: 40px; /* مسافة مريحة بين الصورة والنصوص */
    }

    .about-image {
        min-height: 400px; /* تقليل الارتفاع المبالغ فيه على التابلت */
        width: 100%;
    }
}

/* للشاشات الصغيرة (الهواتف المحمولة) */
@media (max-width: 768px) {
    .dimensions-about-section {
        padding: 50px 0; /* تقليل المسافات العلوية والسفلية للقسم */
    }

    /* تصغير حجم العنوان ليناسب شاشة الموبايل */
    .dimensions-about-section .section-title {
        font-size: 1.4rem !important; 
        line-height: 1.5;
    }

    .dimensions-about-section .section-head {
        margin-bottom: 30px; /* تقليل الفراغ تحت العنوان */
    }

    /* ضبط صورة "حول الشركة" للهواتف */
    .about-image {
        min-height: 280px; /* ارتفاع مثالي لصورة الجوال */
        border-radius: 20px; /* تصغير انحناء الزوايا قليلاً */
    }

    /* تنسيق النصوص والبطاقات */
    .about-copy-box {
        gap: 15px; /* تقليل المسافة بين الفقرات */
    }

    .about-copy {
        font-size: 0.95rem; /* تصغير الخط قليلاً لسهولة القراءة */
        text-align: right; /* المحافظة على المحاذاة لليمين للنص العربي */
    }

    .about-feature-card {
        padding: 20px 15px; /* تقليل الحشوة الداخلية للبطاقات */
    }
    
    .about-feature-card h3 {
        font-size: 1.1rem;
    }
    
    .about-feature-card p {
        font-size: 0.85rem;
    }
}

/* للشاشات الصغيرة جداً */
@media (max-width: 480px) {
    .about-image {
        min-height: 240px;
    }
}

/* =========================================
   دعم اللغة الإنجليزية (LTR) لبطاقات الخدمات
========================================= */

/* 1. نقل الترقيم الهندسي (01, 02) إلى جهة اليسار بدلاً من اليمين */
[dir="ltr"] .service-card::after,
html[lang="en"] .service-card::after {
  right: auto;
  left: 25px;
}

[dir="ltr"] .service-card:hover::after,
html[lang="en"] .service-card:hover::after {
  right: auto;
  left: 20px;
}

/* 2. نقل خط القياس النحاسي الصغير تحت العنوان ليبدأ من اليسار */
[dir="ltr"] .service-card-title::after,
html[lang="en"] .service-card-title::after {
  right: auto;
  left: 0;
}

/* 3. عكس اتجاه حركة النص عند التمرير (Hover) ليندفع للأمام في الإنجليزية */
[dir="ltr"] .service-card:hover .service-card-title,
html[lang="en"] .service-card:hover .service-card-title {
  transform: translateX(8px); /* القيمة موجبة بدلاً من سالبة */
}