diff --git a/src/Components/Sections/DepartmentDetail/DepartmentDetail.jsx b/src/Components/Sections/DepartmentDetail/DepartmentDetail.jsx
index de465ed..b9364da 100644
--- a/src/Components/Sections/DepartmentDetail/DepartmentDetail.jsx
+++ b/src/Components/Sections/DepartmentDetail/DepartmentDetail.jsx
@@ -1,15 +1,13 @@
 import React, { useState, useEffect, useRef, useCallback } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { useTranslation } from "react-i18next";
-import "../../../../src/i18n"; // احتفظت بالاستيراد كما طلبت
+import "../../../../src/i18n";
 
-// استيراد الصور كما كانت في واجهتك
 import d1 from "../../../../src/assets/Images/d1.jpeg";
 import d2 from "../../../../src/assets/Images/d2.jpeg";
 import d3 from "../../../../src/assets/Images/d3.jpeg";
 import d4 from "../../../../src/assets/Images/d4.jpeg";
 
-/* -------------------- ProjectsTimeline (مضمن داخل نفس الملف كما في واجهتك) -------------------- */
 function ProjectsTimeline({
   projects,
   mainTitle = "المشاريع المنفذة",
@@ -130,7 +128,11 @@ function ProjectsTimeline({
       const scrollLeft = scrollContainer.scrollLeft;
 
       const targetScroll =
-        scrollLeft + itemRect.left - containerRect.left - containerRect.width / 2 + itemRect.width / 2;
+        scrollLeft +
+        itemRect.left -
+        containerRect.left -
+        containerRect.width / 2 +
+        itemRect.width / 2;
 
       scrollContainer.scrollTo({ left: targetScroll, behavior: "smooth" });
       setActiveItem(index);
@@ -187,7 +189,8 @@ function ProjectsTimeline({
 
     return () => {
       clearTimeout(t);
-      if (scrollContainer) scrollContainer.removeEventListener("scroll", onScroll);
+      if (scrollContainer)
+        scrollContainer.removeEventListener("scroll", onScroll);
       window.removeEventListener("resize", onResize);
     };
   }, [itemsRefs, drawCurvedLines, setActiveItem]);
@@ -238,25 +241,64 @@ function ProjectsTimeline({
     .projects-timeline-root.plain-bleed .project-card { max-width:420px; }
   `;
 
-  const mainStyle = plain ? { background: "#ffffff", paddingBottom: 0 } : { background: "linear-gradient(135deg, var(--bg-start) 0%, var(--bg-mid) 30%, var(--bg-end) 60%)" };
+  const mainStyle = plain
+    ? { background: "#ffffff", paddingBottom: 0 }
+    : {
+        background:
+          "linear-gradient(135deg, var(--bg-start) 0%, var(--bg-mid) 30%, var(--bg-end) 60%)",
+      };
 
   return (
-    <div className={`projects-timeline-root w-full h-full ${plain ? "plain-bleed" : ""}`}>
+    <div
+      className={`projects-timeline-root w-full h-full ${
+        plain ? "plain-bleed" : ""
+      }`}
+    >
       <style>{css}</style>
       <main className="w-full h-full overflow-hidden" style={mainStyle}>
         <div className="h-full flex flex-col">
           {!plain && (
             <header className="text-center py-8 px-4">
-              <h1 id="main-title" className={` ${plain ? "text-3xl md:text-4xl font-bold text-gray-900" : "text-5xl font-bold text-white"} mb-3`} style={plain ? { textShadow: "none" } : { textShadow: "0 4px 20px rgba(0,0,0,0.3)" }}>
+              <h1
+                id="main-title"
+                className={` ${
+                  plain
+                    ? "text-3xl md:text-4xl font-bold text-gray-900"
+                    : "text-5xl font-bold text-white"
+                } mb-3`}
+                style={
+                  plain
+                    ? { textShadow: "none" }
+                    : { textShadow: "0 4px 20px rgba(0,0,0,0.3)" }
+                }
+              >
                 {mainTitle}
               </h1>
-              <p id="subtitle" className={`${plain ? "text-base text-gray-700" : "text-xl text-white opacity-90"}`}>{subtitle}</p>
+              <p
+                id="subtitle"
+                className={`${
+                  plain
+                    ? "text-base text-gray-700"
+                    : "text-xl text-white opacity-90"
+                }`}
+              >
+                {subtitle}
+              </p>
             </header>
           )}
 
           <div className="flex-1 relative">
-            <div className="timeline-scroll h-full" id="timeline-scroll" ref={scrollRef} aria-label="خط زمني قابل للتمرير">
-              <div className="timeline-wrapper" id="timeline-wrapper" ref={wrapperRef}>
+            <div
+              className="timeline-scroll h-full"
+              id="timeline-scroll"
+              ref={scrollRef}
+              aria-label="خط زمني قابل للتمرير"
+            >
+              <div
+                className="timeline-wrapper"
+                id="timeline-wrapper"
+                ref={wrapperRef}
+              >
                 <svg className="svg-container" id="timeline-svg" ref={svgRef} />
                 {projects.map((project, idx) => (
                   <div
@@ -285,8 +327,24 @@ function ProjectsTimeline({
             </div>
 
             <div className="scroll-indicator">
-              <button className="scroll-btn" aria-label="السابق" onClick={onPrev} disabled={currentIndex === 0} title="السابق">◄</button>
-              <button className="scroll-btn" aria-label="التالي" onClick={onNext} disabled={currentIndex === projects.length - 1} title="التالي">►</button>
+              <button
+                className="scroll-btn"
+                aria-label="السابق"
+                onClick={onPrev}
+                disabled={currentIndex === 0}
+                title="السابق"
+              >
+                ◄
+              </button>
+              <button
+                className="scroll-btn"
+                aria-label="التالي"
+                onClick={onNext}
+                disabled={currentIndex === projects.length - 1}
+                title="التالي"
+              >
+                ►
+              </button>
             </div>
           </div>
         </div>
@@ -295,8 +353,6 @@ function ProjectsTimeline({
   );
 }
 
-/* -------------------- نهاية ProjectsTimeline -------------------- */
-
 const defaultProjects = [
   {
     year: "1999-2015",
@@ -308,7 +364,10 @@ const defaultProjects = [
     ],
   },
   { year: "2001", items: ["أعمال تشغيل وصيانة الدورة لمعمل الوهيب ستوك إير"] },
-  { year: "2002", items: ["أعمال تشغيل وصيانة الدورة لمعمل العربية لدرفلة إير"] },
+  {
+    year: "2002",
+    items: ["أعمال تشغيل وصيانة الدورة لمعمل العربية لدرفلة إير"],
+  },
   { year: "2004", items: ["أعمال متنوعة في مجال الدرفلة والتصنيع"] },
   {
     year: "2016",
@@ -317,7 +376,10 @@ const defaultProjects = [
       "أي أم، التايتيك - التروت، تصميم وتنفيذ",
     ],
   },
-  { year: "2016-2017", items: ["التدريب العالمي 600 طن/يوم", "التدريب للصناعات الغذائية"] },
+  {
+    year: "2016-2017",
+    items: ["التدريب العالمي 600 طن/يوم", "التدريب للصناعات الغذائية"],
+  },
   { year: "2017", items: ["دراسة تأهيلية معمل الشمس (العسافي - حمص)"] },
   {
     year: "2019",
@@ -327,8 +389,17 @@ const defaultProjects = [
     ],
   },
   { year: "2020", items: ["استكمال دراسة تأهيلية للصم وقياس الشمس"] },
-  { year: "2021", items: ["منشأ تيسير لمعمل المتحدة، تصميم الاسور - أبو الشامات"] },
-  { year: "2022", items: ["استكمال منشأ تيسير لمعمل المتحدة", "معمل المثنى للتصنيع السريع - طرطوس"] },
+  {
+    year: "2021",
+    items: ["منشأ تيسير لمعمل المتحدة، تصميم الاسور - أبو الشامات"],
+  },
+  {
+    year: "2022",
+    items: [
+      "استكمال منشأ تيسير لمعمل المتحدة",
+      "معمل المثنى للتصنيع السريع - طرطوس",
+    ],
+  },
   { year: "2023", items: ["مشاريع متنوعة في مجال التصنيع والدرفلة"] },
 ];
 
@@ -342,29 +413,47 @@ export default function DepartmentDetail() {
     { id: 3, title: t("department.buttons.works"), key: "works" },
   ];
 
-  const expertiseItems = t("department.expertiseItems", { returnObjects: true }) || [
-    "دراسات الجدوى الاقتصادية وتحليل الربحية والمخاطر للمشاريع الصناعية والهندسية",
-    "الدراسات الهندسية الأولية والنهائية والتفصيلية",
-    "تصميم المخططات التنفيذية",
-    "تنفيذ الأعمال المدنية والمعمارية والمعدنية للمنشآت الصناعية",
-    "تصنيع وتركيب خطوط الإنتاج محلياً أو خطوط الانتاج المستوردة",
-    "تنفيذ الأعمال الميكانيكية والكهربائية وأنظمة التحكم",
-    "الإشراف على التشغيل التجريبي وتدريب الكوادر الفنية",
-  ];
+  const expertiseItemsRaw = t("department.expertiseItems", {
+    returnObjects: true,
+  });
+  const expertiseItems = Array.isArray(expertiseItemsRaw)
+    ? expertiseItemsRaw
+    : [
+        "دراسات الجدوى الاقتصادية وتحليل الربحية والمخاطر للمشاريع الصناعية والهندسية",
+        "الدراسات الهندسية الأولية والنهائية والتفصيلية",
+        "تصميم المخططات التنفيذية",
+        "تنفيذ الأعمال المدنية والمعمارية والمعدنية للمنشآت الصناعية",
+        "تصنيع وتركيب خطوط الإنتاج محلياً أو خطوط الانتاج المستوردة",
+        "تنفيذ الأعمال الميكانيكية والكهربائية وأنظمة التحكم",
+        "الإشراف على التشغيل التجريبي وتدريب الكوادر الفنية",
+      ];
 
-  const servicesItems = t("department.servicesItems", { returnObjects: true }) || [
-    "الصيانة الدورية والوقائية.",
-    "الصيانة الطارئة ومعالجة الأعطال.",
-    "إعادة التأهيل والتحديث الفني للمنشآت.",
-    "فحص وتقييم الحالة الفنية للتجهيزات والآلات.",
-    "أعمال التفتيش الفني والهندسي وفق المعايير العالمية.",
-    "رفع كفاءة التشغيل وتقليل تكاليف الأعطال",
-  ];
+  const servicesItemsRaw = t("department.servicesItems", {
+    returnObjects: true,
+  });
+  const servicesItems = Array.isArray(servicesItemsRaw)
+    ? servicesItemsRaw
+    : [
+        "الصيانة الدورية والوقائية.",
+        "الصيانة الطارئة ومعالجة الأعطال.",
+        "إعادة التأهيل والتحديث الفني للمنشآت.",
+        "فحص وتقييم الحالة الفنية للتجهيزات والآلات.",
+        "أعمال التفتيش الفني والهندسي وفق المعايير العالمية.",
+        "رفع كفاءة التشغيل وتقليل تكاليف الأعطال",
+      ];
 
-  const defaultProjectsTranslated = t("department.defaultProjects", { returnObjects: true }) || defaultProjects;
+  const defaultProjectsTranslated =
+    t("department.defaultProjects", { returnObjects: true }) || defaultProjects;
 
   const displayItems = active === "services" ? servicesItems : expertiseItems;
-  const heroImage = active === "expertise" ? d2 : active === "services" ? d3 : active === "works" ? d4 : d1;
+  const heroImage =
+    active === "expertise"
+      ? d2
+      : active === "services"
+      ? d3
+      : active === "works"
+      ? d4
+      : d1;
 
   const handleButtonClick = (key) => {
     setActive((prev) => (prev === key ? null : key));
@@ -400,12 +489,21 @@ export default function DepartmentDetail() {
                 <div className="max-w-7xl mx-auto px-4 sm:px-6 w-full">
                   <AnimatePresence mode="wait">
                     {active === "expertise" ? (
-                      <motion.div key="expertise-title" initial={{ opacity: 0, x: -50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} transition={{ duration: 0.5 }} className="text-white max-w-4xl">
+                      <motion.div
+                        key="expertise-title"
+                        initial={{ opacity: 0, x: -50 }}
+                        animate={{ opacity: 1, x: 0 }}
+                        exit={{ opacity: 0, x: 50 }}
+                        transition={{ duration: 0.5 }}
+                        className="text-white max-w-4xl"
+                      >
                         <div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">
-                          {t("department.hero.expertiseBadge") || "اختصاص القسم"}
+                          {t("department.hero.expertiseBadge") ||
+                            "اختصاص القسم"}
                         </div>
                         <h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight mb-3 sm:mb-6">
-                          {t("department.hero.expertiseTitle") || "حلول متكاملة للمنشآت الصناعية"}
+                          {t("department.hero.expertiseTitle") ||
+                            "حلول متكاملة للمنشآت الصناعية"}
                         </h2>
                         <p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">
                           {t("department.hero.expertiseSubtitle") ||
@@ -413,19 +511,35 @@ export default function DepartmentDetail() {
                         </p>
                       </motion.div>
                     ) : active === "services" ? (
-                      <motion.div key="services-title" initial={{ opacity: 0, x: -50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} transition={{ duration: 0.5 }} className="text-white max-w-4xl">
+                      <motion.div
+                        key="services-title"
+                        initial={{ opacity: 0, x: -50 }}
+                        animate={{ opacity: 1, x: 0 }}
+                        exit={{ opacity: 0, x: 50 }}
+                        transition={{ duration: 0.5 }}
+                        className="text-white max-w-4xl"
+                      >
                         <div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">
                           {t("department.hero.servicesBadge") || "خدمات القسم"}
                         </div>
                         <h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight mb-3 sm:mb-6">
-                          {t("department.hero.servicesTitle") || "خدمات الصيانة للمنشآت وخطوط الإنتاج"}
+                          {t("department.hero.servicesTitle") ||
+                            "خدمات الصيانة للمنشآت وخطوط الإنتاج"}
                         </h2>
                         <p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">
-                          {t("department.hero.servicesSubtitle") || "يتضمن هذا القسم خدمات الصيانة الشاملة والدورية للمنشآت الصناعية وخطوط الانتاج، وتشمل:"}
+                          {t("department.hero.servicesSubtitle") ||
+                            "يتضمن هذا القسم خدمات الصيانة الشاملة والدورية للمنشآت الصناعية وخطوط الانتاج، وتشمل:"}
                         </p>
                       </motion.div>
                     ) : active === "works" ? (
-                      <motion.div key="works-title" initial={{ opacity: 0, x: -50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} transition={{ duration: 0.5 }} className="text-white max-w-4xl">
+                      <motion.div
+                        key="works-title"
+                        initial={{ opacity: 0, x: -50 }}
+                        animate={{ opacity: 1, x: 0 }}
+                        exit={{ opacity: 0, x: 50 }}
+                        transition={{ duration: 0.5 }}
+                        className="text-white max-w-4xl"
+                      >
                         <div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">
                           {t("department.hero.worksBadge") || "الأعمال المنفذة"}
                         </div>
@@ -433,13 +547,22 @@ export default function DepartmentDetail() {
                           {t("department.hero.worksTitle") || "الأعمال المنفذة"}
                         </h2>
                         <p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">
-                          {t("department.hero.worksSubtitle") || "عرض مشروعاتنا وخط الزمن الخاص بالأعمال المنفذة."}
+                          {t("department.hero.worksSubtitle") ||
+                            "عرض مشروعاتنا وخط الزمن الخاص بالأعمال المنفذة."}
                         </p>
                       </motion.div>
                     ) : (
-                      <motion.div key="default-title" initial={{ opacity: 0, x: -50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} transition={{ duration: 0.5 }} className="text-white max-w-4xl">
+                      <motion.div
+                        key="default-title"
+                        initial={{ opacity: 0, x: -50 }}
+                        animate={{ opacity: 1, x: 0 }}
+                        exit={{ opacity: 0, x: 50 }}
+                        transition={{ duration: 0.5 }}
+                        className="text-white max-w-4xl"
+                      >
                         <h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight">
-                          {t("department.sectionTitle") || "قسم إنشاء وصيانة المنشآت الصناعية وخطوط الإنتاج"}
+                          {t("department.sectionTitle") ||
+                            "قسم إنشاء وصيانة المنشآت الصناعية وخطوط الإنتاج"}
                         </h2>
                       </motion.div>
                     )}
@@ -447,7 +570,10 @@ export default function DepartmentDetail() {
                 </div>
               </div>
 
-              <div className="absolute left-1/2 bottom-0 transform -translate-x-1/2 translate-y-1/2 w-full px-4 pointer-events-auto hidden md:block" style={{ zIndex: 99999 }}>
+              <div
+                className="absolute left-1/2 bottom-0 transform -translate-x-1/2 translate-y-1/2 w-full px-4 pointer-events-auto hidden md:block"
+                style={{ zIndex: 99999 }}
+              >
                 <AnimatePresence>
                   {!active && (
                     <motion.div
@@ -465,7 +591,11 @@ export default function DepartmentDetail() {
                             initial={{ opacity: 0, y: 20 }}
                             animate={{ opacity: 1, y: 0 }}
                             transition={{ delay: index * 0.08, duration: 0.5 }}
-                            whileHover={{ scale: 1.03, y: -6, transition: { duration: 0.2 } }}
+                            whileHover={{
+                              scale: 1.03,
+                              y: -6,
+                              transition: { duration: 0.2 },
+                            }}
                             whileTap={{ scale: 0.97 }}
                             onClick={() => handleButtonClick(b.key)}
                             className="group relative rounded-2xl p-4 sm:p-6 shadow-2xl border border-transparent flex flex-col h-full text-right focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-300 overflow-hidden bg-white/80 backdrop-blur-sm"
@@ -477,12 +607,24 @@ export default function DepartmentDetail() {
                                 <div className="w-10 h-10 sm:w-14 sm:h-14 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white text-base sm:text-2xl font-extrabold shadow-xl group-hover:scale-110 group-hover:rotate-6 transition-transform duration-300">
                                   {b.id}
                                 </div>
-                                <h3 className="text-sm sm:text-base font-bold text-gray-800 group-hover:text-amber-700 transition-colors duration-300">{b.title}</h3>
+                                <h3 className="text-sm sm:text-base font-bold text-gray-800 group-hover:text-amber-700 transition-colors duration-300">
+                                  {b.title}
+                                </h3>
                               </div>
                               <p className="text-xs sm:text-sm text-gray-600 mt-auto flex items-center gap-2 group-hover:text-amber-600 transition-colors duration-300">
                                 <span>{t("department.clickForDetails")}</span>
-                                <svg className="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-2 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
+                                <svg
+                                  className="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-2 transition-transform duration-300"
+                                  fill="none"
+                                  stroke="currentColor"
+                                  viewBox="0 0 24 24"
+                                >
+                                  <path
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    strokeWidth="2.5"
+                                    d="M15 19l-7-7 7-7"
+                                  />
                                 </svg>
                               </p>
                             </div>
@@ -495,8 +637,16 @@ export default function DepartmentDetail() {
               </div>
 
               <div className="absolute bottom-0 left-0 right-0 z-10">
-                <svg className="w-full h-12 sm:h-16 md:h-24" viewBox="0 0 1200 120" preserveAspectRatio="none">
-                  <path d="M0,0 C300,80 900,80 1200,0 L1200,120 L0,120 Z" fill="#ffffff" opacity="1"/>
+                <svg
+                  className="w-full h-12 sm:h-16 md:h-24"
+                  viewBox="0 0 1200 120"
+                  preserveAspectRatio="none"
+                >
+                  <path
+                    d="M0,0 C300,80 900,80 1200,0 L1200,120 L0,120 Z"
+                    fill="#ffffff"
+                    opacity="1"
+                  />
                 </svg>
               </div>
             </motion.div>
@@ -529,11 +679,25 @@ export default function DepartmentDetail() {
                       {b.id}
                     </div>
                     <div className="flex-1">
-                      <h3 className="text-sm font-bold text-gray-800">{b.title}</h3>
-                      <p className="text-xs text-gray-600 mt-1">{t("department.clickForDetails")}</p>
+                      <h3 className="text-sm font-bold text-gray-800">
+                        {b.title}
+                      </h3>
+                      <p className="text-xs text-gray-600 mt-1">
+                        {t("department.clickForDetails")}
+                      </p>
                     </div>
-                    <svg className="w-5 h-5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
+                    <svg
+                      className="w-5 h-5 text-amber-500"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth="2.5"
+                        d="M15 19l-7-7 7-7"
+                      />
                     </svg>
                   </motion.button>
                 ))}
@@ -546,25 +710,92 @@ export default function DepartmentDetail() {
       <section className="max-w-7xl mx-auto px-4 sm:px-6 md:px-6 -mt-6 md:-mt-8 relative z-20">
         <AnimatePresence mode="wait">
           {!active ? (
-            <motion.div key="buttons-spacer" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.25 }} className="h-0" />
+            <motion.div
+              key="buttons-spacer"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.25 }}
+              className="h-0"
+            />
           ) : active === "works" ? (
-            <motion.div key="timeline-view" initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }} transition={{ duration: 0.45 }} className="w-full">
-              <motion.button initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: 0.15, duration: 0.45 }} onClick={() => setActive(null)} whileHover={{ x: 8 }} className="inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 sm:mb-8 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2 mr-0 md:-mr-4">
-                <svg className="w-5 h-5 sm:w-6 sm:h-6 transition-transform group-hover:translate-x-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
+            <motion.div
+              key="timeline-view"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -10 }}
+              transition={{ duration: 0.45 }}
+              className="w-full"
+            >
+              <motion.button
+                initial={{ opacity: 0, x: 20 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ delay: 0.15, duration: 0.45 }}
+                onClick={() => setActive(null)}
+                whileHover={{ x: 8 }}
+                className="inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 sm:mb-8 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2 mr-0 md:-mr-4"
+              >
+                <svg
+                  className="w-5 h-5 sm:w-6 sm:h-6 transition-transform group-hover:translate-x-2"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2.5"
+                    d="M15 19l-7-7 7-7"
+                  />
                 </svg>
                 <span>{t("department.backToMenu")}</span>
               </motion.button>
 
-              <div style={{ position: 'relative', left: '50%', right: '50%', marginLeft: '-50vw', marginRight: '-50vw', width: '100vw' }}>
-                <ProjectsTimeline projects={defaultProjectsTranslated} plain={true} />
+              <div
+                style={{
+                  position: "relative",
+                  left: "50%",
+                  right: "50%",
+                  marginLeft: "-50vw",
+                  marginRight: "-50vw",
+                  width: "100vw",
+                }}
+              >
+                <ProjectsTimeline
+                  projects={defaultProjectsTranslated}
+                  plain={true}
+                />
               </div>
             </motion.div>
           ) : (
-            <motion.div key="details-view" initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -20 }} transition={{ duration: 0.45 }} className="w-full">
-              <motion.button initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: 0.08, duration: 0.45 }} onClick={() => setActive(null)} whileHover={{ x: 8 }} className="inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 sm:mb-8 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2 mr-0 md:-mr-4">
-                <svg className="w-5 h-5 sm:w-6 sm:h-6 transition-transform group-hover:translate-x-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
+            <motion.div
+              key="details-view"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -20 }}
+              transition={{ duration: 0.45 }}
+              className="w-full"
+            >
+              <motion.button
+                initial={{ opacity: 0, x: 20 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ delay: 0.08, duration: 0.45 }}
+                onClick={() => setActive(null)}
+                whileHover={{ x: 8 }}
+                className="inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 sm:mb-8 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2 mr-0 md:-mr-4"
+              >
+                <svg
+                  className="w-5 h-5 sm:w-6 sm:h-6 transition-transform group-hover:translate-x-2"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2.5"
+                    d="M15 19l-7-7 7-7"
+                  />
                 </svg>
                 <span>{t("department.backToMenu")}</span>
               </motion.button>
@@ -581,19 +812,51 @@ export default function DepartmentDetail() {
                   >
                     <div className="relative flex items-start gap-3 sm:gap-6 rounded-2xl p-3 sm:p-6 border-r-4 border-amber-400 hover:border-orange-500 hover:shadow-xl transition-all duration-300 bg-white">
                       <div className="relative flex-shrink-0">
-                        <motion.div whileHover={{ rotate: 360, scale: 1.08 }} transition={{ duration: 0.6 }} className="w-10 h-10 sm:w-14 sm:h-14 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white shadow-lg group-hover:shadow-2xl transition-shadow duration-300 relative z-10">
-                          <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/></svg>
+                        <motion.div
+                          whileHover={{ rotate: 360, scale: 1.08 }}
+                          transition={{ duration: 0.6 }}
+                          className="w-10 h-10 sm:w-14 sm:h-14 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white shadow-lg group-hover:shadow-2xl transition-shadow duration-300 relative z-10"
+                        >
+                          <svg
+                            className="w-6 h-6"
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              strokeWidth="2.5"
+                              d="M15 19l-7-7 7-7"
+                            />
+                          </svg>
                         </motion.div>
                         <div className="absolute inset-0 bg-amber-500 rounded-xl blur-xl opacity-0 group-hover:opacity-30 transition-opacity duration-300" />
                       </div>
 
                       <div className="flex-1 pt-1">
-                        <p className="text-xs sm:text-sm md:text-base text-gray-800 leading-relaxed font-medium group-hover:text-gray-900 transition-colors duration-300">{text}</p>
+                        <p className="text-xs sm:text-sm md:text-base text-gray-800 leading-relaxed font-medium group-hover:text-gray-900 transition-colors duration-300">
+                          {text}
+                        </p>
                       </div>
 
-                      <motion.div initial={{ opacity: 0, x: -8 }} whileHover={{ opacity: 1, x: 0 }} className="flex-shrink-0 text-amber-500 opacity-0 group-hover:opacity-100 transition-all duration-300">
-                        <svg className="w-4 h-4 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
+                      <motion.div
+                        initial={{ opacity: 0, x: -8 }}
+                        whileHover={{ opacity: 1, x: 0 }}
+                        className="flex-shrink-0 text-amber-500 opacity-0 group-hover:opacity-100 transition-all duration-300"
+                      >
+                        <svg
+                          className="w-4 h-4 sm:w-6 sm:h-6"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth="2.5"
+                            d="M15 19l-7-7 7-7"
+                          />
                         </svg>
                       </motion.div>
                     </div>
@@ -601,11 +864,21 @@ export default function DepartmentDetail() {
                 ))}
               </div>
 
-              <motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} transition={{ delay: 0.6, duration: 0.45 }} className="mt-8 sm:mt-12 pt-6 border-t-2 border-gray-100 text-center">
+              <motion.div
+                initial={{ opacity: 0, scale: 0.95 }}
+                animate={{ opacity: 1, scale: 1 }}
+                transition={{ delay: 0.6, duration: 0.45 }}
+                className="mt-8 sm:mt-12 pt-6 border-t-2 border-gray-100 text-center"
+              >
                 <div className="inline-flex items-center gap-2 sm:gap-3 text-gray-500">
                   <div className="w-2 h-2 bg-amber-500 rounded-full animate-pulse" />
-                  <span className="text-xs sm:text-sm font-medium">Professional integrated services</span>
-                  <div className="w-2 h-2 bg-orange-500 rounded-full animate-pulse" style={{ animationDelay: "0.5s" }} />
+                  <span className="text-xs sm:text-sm font-medium">
+                    Professional integrated services
+                  </span>
+                  <div
+                    className="w-2 h-2 bg-orange-500 rounded-full animate-pulse"
+                    style={{ animationDelay: "0.5s" }}
+                  />
                 </div>
               </motion.div>
             </motion.div>
diff --git a/src/Components/Sections/DepartmentDetail6/DepartmentDetail6.jsx b/src/Components/Sections/DepartmentDetail6/DepartmentDetail6.jsx
index 760c52b..cea183c 100644
--- a/src/Components/Sections/DepartmentDetail6/DepartmentDetail6.jsx
+++ b/src/Components/Sections/DepartmentDetail6/DepartmentDetail6.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, useCallback } from "react"; 
+import React, { useState, useEffect, useRef, useCallback } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { useTranslation } from "react-i18next";
 import d19 from "../../../../src/assets/Images/d19.jpeg";
@@ -15,7 +15,7 @@ function ProjectsTimeline({
   dir = "rtl",
   scrollLabel = "خط زمني قابل للتمرير",
   prevLabel = "السابق",
-  nextLabel = "التالي"
+  nextLabel = "التالي",
 }) {
   const wrapperRef = useRef(null);
   const scrollRef = useRef(null);
@@ -131,7 +131,11 @@ function ProjectsTimeline({
       const scrollLeft = scrollContainer.scrollLeft;
 
       const targetScroll =
-        scrollLeft + itemRect.left - containerRect.left - containerRect.width / 2 + itemRect.width / 2;
+        scrollLeft +
+        itemRect.left -
+        containerRect.left -
+        containerRect.width / 2 +
+        itemRect.width / 2;
 
       scrollContainer.scrollTo({ left: targetScroll, behavior: "smooth" });
       setActiveItem(index);
@@ -188,7 +192,8 @@ function ProjectsTimeline({
 
     return () => {
       clearTimeout(t);
-      if (scrollContainer) scrollContainer.removeEventListener("scroll", onScroll);
+      if (scrollContainer)
+        scrollContainer.removeEventListener("scroll", onScroll);
       window.removeEventListener("resize", onResize);
     };
   }, [itemsRefs, drawCurvedLines, setActiveItem]);
@@ -253,25 +258,65 @@ function ProjectsTimeline({
     .projects-timeline-root.plain-bleed .project-card { max-width:420px; }
   `;
 
-  const mainStyle = plain ? { background: "#ffffff", paddingBottom: 0 } : { background: "linear-gradient(135deg, var(--bg-start) 0%, var(--bg-mid) 30%, var(--bg-end) 60%)" };
+  const mainStyle = plain
+    ? { background: "#ffffff", paddingBottom: 0 }
+    : {
+        background:
+          "linear-gradient(135deg, var(--bg-start) 0%, var(--bg-mid) 30%, var(--bg-end) 60%)",
+      };
 
   return (
-    <div className={`projects-timeline-root w-full h-full ${plain ? "plain-bleed" : ""}`} dir={dir}>
+    <div
+      className={`projects-timeline-root w-full h-full ${
+        plain ? "plain-bleed" : ""
+      }`}
+      dir={dir}
+    >
       <style>{css}</style>
       <main className="w-full h-full overflow-hidden" style={mainStyle}>
         <div className="h-full flex flex-col">
           {!plain && (
             <header className="text-center py-8 px-4">
-              <h1 id="main-title" className={` ${plain ? "text-3xl md:text-4xl font-bold text-gray-900" : "text-5xl font-bold text-white"} mb-3`} style={plain ? { textShadow: "none" } : { textShadow: "0 4px 20px rgba(0,0,0,0.3)" }}>
+              <h1
+                id="main-title"
+                className={` ${
+                  plain
+                    ? "text-3xl md:text-4xl font-bold text-gray-900"
+                    : "text-5xl font-bold text-white"
+                } mb-3`}
+                style={
+                  plain
+                    ? { textShadow: "none" }
+                    : { textShadow: "0 4px 20px rgba(0,0,0,0.3)" }
+                }
+              >
                 {mainTitle}
               </h1>
-              <p id="subtitle" className={`${plain ? "text-base text-gray-700" : "text-xl text-white opacity-90"}`}>{subtitle}</p>
+              <p
+                id="subtitle"
+                className={`${
+                  plain
+                    ? "text-base text-gray-700"
+                    : "text-xl text-white opacity-90"
+                }`}
+              >
+                {subtitle}
+              </p>
             </header>
           )}
 
           <div className="flex-1 relative">
-            <div className="timeline-scroll h-full" id="timeline-scroll" ref={scrollRef} aria-label={scrollLabel}>
-              <div className="timeline-wrapper" id="timeline-wrapper" ref={wrapperRef}>
+            <div
+              className="timeline-scroll h-full"
+              id="timeline-scroll"
+              ref={scrollRef}
+              aria-label={scrollLabel}
+            >
+              <div
+                className="timeline-wrapper"
+                id="timeline-wrapper"
+                ref={wrapperRef}
+              >
                 <svg className="svg-container" id="timeline-svg" ref={svgRef} />
                 {projects.map((project, idx) => (
                   <div
@@ -300,8 +345,24 @@ function ProjectsTimeline({
             </div>
 
             <div className="scroll-indicator">
-              <button className="scroll-btn" aria-label={prevLabel} onClick={onPrev} disabled={currentIndex === 0} title={prevLabel}>◄</button>
-              <button className="scroll-btn" aria-label={nextLabel} onClick={onNext} disabled={currentIndex === projects.length - 1} title={nextLabel}>►</button>
+              <button
+                className="scroll-btn"
+                aria-label={prevLabel}
+                onClick={onPrev}
+                disabled={currentIndex === 0}
+                title={prevLabel}
+              >
+                ◄
+              </button>
+              <button
+                className="scroll-btn"
+                aria-label={nextLabel}
+                onClick={onNext}
+                disabled={currentIndex === projects.length - 1}
+                title={nextLabel}
+              >
+                ►
+              </button>
             </div>
           </div>
         </div>
@@ -319,19 +380,53 @@ export default function DepartmentDetail6() {
   const cycleImgs = [d28, d27, d29];
   const [cycleIndex, setCycleIndex] = useState(0);
   useEffect(() => {
-    const tInterval = setInterval(() => setCycleIndex((i) => (i + 1) % cycleImgs.length), 3000);
+    const tInterval = setInterval(
+      () => setCycleIndex((i) => (i + 1) % cycleImgs.length),
+      3000
+    );
     return () => clearInterval(tInterval);
   }, []);
 
   // buttons from translations (array)
-  const buttons = t("departmentDetail6.buttons", { returnObjects: true });
+  const buttons = [
+    { id: 1, title: t("departmentDetail6.buttons.1"), key: "expertise" },
+    { id: 3, title: t("departmentDetail6.buttons.3"), key: "works" },
+  ];
 
   // card groups from translations
-  const cardGroups = t("departmentDetail6.cardGroups", { returnObjects: true });
+  const cardGroupsRaw = t("departmentDetail6.cardGroups", {
+    returnObjects: true,
+  });
 
-  const projectsTimeline = t("departmentDetail6.projectsTimeline.defaultProjects", { returnObjects: true });
+  const expertiseItemsRaw = t("departmentDetail6.expertiseItems", {
+    returnObjects: true,
+  });
+  const validExpertiseItems = Array.isArray(expertiseItemsRaw)
+    ? expertiseItemsRaw
+    : [];
 
-  const heroImage = active === "expertise" ? cycleImgs[cycleIndex] : active === "works" ? d30 : d19;
+  const cardGroups = Array.isArray(cardGroupsRaw)
+    ? cardGroupsRaw
+    : [
+        {
+          title:
+            t("departmentDetail6.hero.expertiseBadge") ||
+            "Department Expertise",
+          items: validExpertiseItems,
+        },
+      ];
+
+  const projectsTimeline = t(
+    "departmentDetail6.projectsTimeline.defaultProjects",
+    { returnObjects: true }
+  );
+
+  const heroImage =
+    active === "expertise"
+      ? cycleImgs[cycleIndex]
+      : active === "works"
+      ? d30
+      : d19;
 
   const handleButtonClick = (key) => {
     setActive((prev) => (prev === key ? null : key));
@@ -344,7 +439,10 @@ export default function DepartmentDetail6() {
   const backToMenu = t("departmentDetail6.backToMenu");
 
   return (
-    <div dir={isRTL ? "rtl" : "ltr"} className="w-full min-h-screen bg-white pb-12">
+    <div
+      dir={isRTL ? "rtl" : "ltr"}
+      className="w-full min-h-screen bg-white pb-12"
+    >
       <section className="relative">
         <div className="w-full">
           <AnimatePresence mode="wait">
@@ -354,7 +452,11 @@ export default function DepartmentDetail6() {
               animate={{ opacity: 1, scale: 1 }}
               exit={{ opacity: 0, scale: 0.98 }}
               transition={{ duration: 0.6 }}
-              className={`relative ${active ? 'h-80 sm:h-96 md:h-[540px] lg:h-[680px]' : 'h-72 sm:h-80 md:h-[480px] lg:h-[580px]'} overflow-visible`} 
+              className={`relative ${
+                active
+                  ? "h-80 sm:h-96 md:h-[540px] lg:h-[680px]"
+                  : "h-72 sm:h-80 md:h-[480px] lg:h-[580px]"
+              } overflow-visible`}
             >
               <img
                 src={heroImage}
@@ -373,27 +475,71 @@ export default function DepartmentDetail6() {
                 <div className="max-w-7xl mx-auto px-4 sm:px-6 w-full">
                   <AnimatePresence mode="wait">
                     {active === "expertise" ? (
-                      <motion.div key="expertise-title" initial={{ opacity: 0, x: -50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} transition={{ duration: 0.5 }} className={`text-white max-w-4xl ${isRTL ? 'text-right' : 'text-left'}`}>
-                        <div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">{t("departmentDetail6.hero.expertiseBadge")}</div>
-                        <h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight mb-3 sm:mb-6">{t("departmentDetail6.hero.expertiseTitle")}</h2>
-                        <p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">{t("departmentDetail6.hero.expertiseSubtitle")}</p>
+                      <motion.div
+                        key="expertise-title"
+                        initial={{ opacity: 0, x: -50 }}
+                        animate={{ opacity: 1, x: 0 }}
+                        exit={{ opacity: 0, x: 50 }}
+                        transition={{ duration: 0.5 }}
+                        className={`text-white max-w-4xl ${
+                          isRTL ? "text-right" : "text-left"
+                        }`}
+                      >
+                        <div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">
+                          {t("departmentDetail6.hero.expertiseBadge")}
+                        </div>
+                        <h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight mb-3 sm:mb-6">
+                          {t("departmentDetail6.hero.expertiseTitle")}
+                        </h2>
+                        <p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">
+                          {t("departmentDetail6.hero.expertiseSubtitle")}
+                        </p>
                       </motion.div>
                     ) : active === "works" ? (
-                      <motion.div key="works-title" initial={{ opacity: 0, x: -50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} transition={{ duration: 0.5 }} className={`text-white max-w-4xl ${isRTL ? 'text-right' : 'text-left'}`}>
-                        <div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">{t("departmentDetail6.hero.worksBadge")}</div>
-                        <h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight mb-3 sm:mb-6">{t("departmentDetail6.hero.worksTitle")}</h2>
-                        <p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">{t("departmentDetail6.hero.worksSubtitle")}</p>
+                      <motion.div
+                        key="works-title"
+                        initial={{ opacity: 0, x: -50 }}
+                        animate={{ opacity: 1, x: 0 }}
+                        exit={{ opacity: 0, x: 50 }}
+                        transition={{ duration: 0.5 }}
+                        className={`text-white max-w-4xl ${
+                          isRTL ? "text-right" : "text-left"
+                        }`}
+                      >
+                        <div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">
+                          {t("departmentDetail6.hero.worksBadge")}
+                        </div>
+                        <h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight mb-3 sm:mb-6">
+                          {t("departmentDetail6.hero.worksTitle")}
+                        </h2>
+                        <p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">
+                          {t("departmentDetail6.hero.worksSubtitle")}
+                        </p>
                       </motion.div>
                     ) : (
-                      <motion.div key="default-title" initial={{ opacity: 0, x: -50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} transition={{ duration: 0.5 }} className={`text-white max-w-4xl ${isRTL ? 'text-right' : 'text-left'}`}>
-                        <h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight">{t("departmentDetail6.hero.defaultTitle")}</h2>
+                      <motion.div
+                        key="default-title"
+                        initial={{ opacity: 0, x: -50 }}
+                        animate={{ opacity: 1, x: 0 }}
+                        exit={{ opacity: 0, x: 50 }}
+                        transition={{ duration: 0.5 }}
+                        className={`text-white max-w-4xl ${
+                          isRTL ? "text-right" : "text-left"
+                        }`}
+                      >
+                        <h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight">
+                          {t("departmentDetail6.hero.defaultTitle")}
+                        </h2>
                       </motion.div>
                     )}
                   </AnimatePresence>
                 </div>
               </div>
 
-              <div className="absolute left-1/2 bottom-0 transform -translate-x-1/2 translate-y-1/2 w-full px-4 pointer-events-auto hidden md:block" style={{ zIndex: 99999 }}>
+              <div
+                className="absolute left-1/2 bottom-0 transform -translate-x-1/2 translate-y-1/2 w-full px-4 pointer-events-auto hidden md:block"
+                style={{ zIndex: 99999 }}
+              >
                 <AnimatePresence>
                   {!active && (
                     <motion.div
@@ -411,10 +557,16 @@ export default function DepartmentDetail6() {
                             initial={{ opacity: 0, y: 20 }}
                             animate={{ opacity: 1, y: 0 }}
                             transition={{ delay: index * 0.08, duration: 0.5 }}
-                            whileHover={{ scale: 1.03, y: -6, transition: { duration: 0.2 } }}
+                            whileHover={{
+                              scale: 1.03,
+                              y: -6,
+                              transition: { duration: 0.2 },
+                            }}
                             whileTap={{ scale: 0.97 }}
                             onClick={() => handleButtonClick(b.key)}
-                            className={`group relative rounded-2xl p-4 sm:p-6 shadow-2xl border border-transparent flex flex-col h-full ${isRTL ? 'text-right' : 'text-left'} focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-300 overflow-hidden bg-white/80 backdrop-blur-sm`}
+                            className={`group relative rounded-2xl p-4 sm:p-6 shadow-2xl border border-transparent flex flex-col h-full ${
+                              isRTL ? "text-right" : "text-left"
+                            } focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-300 overflow-hidden bg-white/80 backdrop-blur-sm`}
                           >
                             <div className="absolute top-0 right-0 w-20 h-20 sm:w-24 sm:h-24 bg-gradient-to-br from-amber-500 to-orange-600 rounded-full -mr-12 -mt-12 group-hover:scale-125 transition-transform duration-500" />
                             <div className="absolute top-0 right-0 w-2 h-0 bg-gradient-to-b from-amber-500 to-orange-600 rounded-r-2xl group-hover:h-full transition-all duration-500" />
@@ -424,12 +576,24 @@ export default function DepartmentDetail6() {
                                 <div className="w-10 h-10 sm:w-14 sm:h-14 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white text-base sm:text-2xl font-extrabold shadow-xl group-hover:scale-110 group-hover:rotate-6 transition-transform duration-300">
                                   {b.id}
                                 </div>
-                                <h3 className="text-sm sm:text-base font-bold text-gray-800 group-hover:text-amber-700 transition-colors duration-300">{b.title}</h3>
+                                <h3 className="text-sm sm:text-base font-bold text-gray-800 group-hover:text-amber-700 transition-colors duration-300">
+                                  {b.title}
+                                </h3>
                               </div>
                               <p className="text-xs sm:text-sm text-gray-600 mt-auto flex items-center gap-2 group-hover:text-amber-600 transition-colors duration-300">
                                 <span>{ui.clickToView}</span>
-                                <svg className="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-2 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
+                                <svg
+                                  className="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-2 transition-transform duration-300"
+                                  fill="none"
+                                  stroke="currentColor"
+                                  viewBox="0 0 24 24"
+                                >
+                                  <path
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    strokeWidth="2.5"
+                                    d="M15 19l-7-7 7-7"
+                                  />
                                 </svg>
                               </p>
                             </div>
@@ -442,8 +606,16 @@ export default function DepartmentDetail6() {
               </div>
 
               <div className="absolute bottom-0 left-0 right-0 z-10">
-                <svg className="w-full h-12 sm:h-16 md:h-24" viewBox="0 0 1200 120" preserveAspectRatio="none">
-                  <path d="M0,0 C300,80 900,80 1200,0 L1200,120 L0,120 Z" fill="#ffffff" opacity="1"/>
+                <svg
+                  className="w-full h-12 sm:h-16 md:h-24"
+                  viewBox="0 0 1200 120"
+                  preserveAspectRatio="none"
+                >
+                  <path
+                    d="M0,0 C300,80 900,80 1200,0 L1200,120 L0,120 Z"
+                    fill="#ffffff"
+                    opacity="1"
+                  />
                 </svg>
               </div>
             </motion.div>
@@ -470,17 +642,33 @@ export default function DepartmentDetail6() {
                     transition={{ delay: index * 0.05, duration: 0.35 }}
                     whileHover={{ scale: 1.02 }}
                     onClick={() => handleButtonClick(b.key)}
-                    className={`group relative rounded-2xl p-3 shadow-md border border-transparent flex items-center gap-3 ${isRTL ? 'text-right' : 'text-left'} focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-200 overflow-hidden bg-white/90`}
+                    className={`group relative rounded-2xl p-3 shadow-md border border-transparent flex items-center gap-3 ${
+                      isRTL ? "text-right" : "text-left"
+                    } focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-200 overflow-hidden bg-white/90`}
                   >
                     <div className="w-10 h-10 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white text-base font-extrabold shadow">
                       {b.id}
                     </div>
                     <div className="flex-1">
-                      <h3 className="text-sm font-bold text-gray-800">{b.title}</h3>
-                      <p className="text-xs text-gray-600 mt-1">{ui.clickToView}</p>
+                      <h3 className="text-sm font-bold text-gray-800">
+                        {b.title}
+                      </h3>
+                      <p className="text-xs text-gray-600 mt-1">
+                        {ui.clickToView}
+                      </p>
                     </div>
-                    <svg className="w-5 h-5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
+                    <svg
+                      className="w-5 h-5 text-amber-500"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth="2.5"
+                        d="M15 19l-7-7 7-7"
+                      />
                     </svg>
                   </motion.button>
                 ))}
@@ -493,21 +681,63 @@ export default function DepartmentDetail6() {
       <section className="max-w-7xl mx-auto px-4 sm:px-6 md:px-6 -mt-6 md:-mt-8 relative z-20">
         <AnimatePresence mode="wait">
           {!active ? (
-            <motion.div key="buttons-spacer" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.25 }} className="h-0" />
+            <motion.div
+              key="buttons-spacer"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.25 }}
+              className="h-0"
+            />
           ) : active === "works" ? (
-            <motion.div key="timeline-view" initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }} transition={{ duration: 0.45 }} className="w-full">
-              <motion.button initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: 0.15, duration: 0.45 }} onClick={() => setActive(null)} whileHover={{ x: 8 }} className={`inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 sm:mb-8 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2 ${isRTL ? 'mr-0 md:-mr-4' : 'ml-0 md:-ml-4'}`}>
-                <svg className="w-5 h-5 sm:w-6 sm:h-6 transition-transform group-hover:translate-x-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
+            <motion.div
+              key="timeline-view"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -10 }}
+              transition={{ duration: 0.45 }}
+              className="w-full"
+            >
+              <motion.button
+                initial={{ opacity: 0, x: 20 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ delay: 0.15, duration: 0.45 }}
+                onClick={() => setActive(null)}
+                whileHover={{ x: 8 }}
+                className={`inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 sm:mb-8 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2 ${
+                  isRTL ? "mr-0 md:-mr-4" : "ml-0 md:-ml-4"
+                }`}
+              >
+                <svg
+                  className="w-5 h-5 sm:w-6 sm:h-6 transition-transform group-hover:translate-x-2"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2.5"
+                    d="M15 19l-7-7 7-7"
+                  />
                 </svg>
                 <span>{backToMenu}</span>
               </motion.button>
 
-              <div style={{ position: 'relative', left: '50%', right: '50%', marginLeft: '-50vw', marginRight: '-50vw', width: '100vw' }}>
+              <div
+                style={{
+                  position: "relative",
+                  left: "50%",
+                  right: "50%",
+                  marginLeft: "-50vw",
+                  marginRight: "-50vw",
+                  width: "100vw",
+                }}
+              >
                 <ProjectsTimeline
                   projects={projectsTimeline}
                   plain={true}
-                  dir={isRTL ? 'rtl' : 'ltr'}
+                  dir={isRTL ? "rtl" : "ltr"}
                   mainTitle={t("departmentDetail6.hero.worksTitle")}
                   subtitle={t("departmentDetail6.hero.worksSubtitle")}
                   scrollLabel={t("departmentDetail6.scroll.ariaLabel")}
@@ -517,36 +747,102 @@ export default function DepartmentDetail6() {
               </div>
             </motion.div>
           ) : (
-            <motion.div key="details-view" initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -20 }} transition={{ duration: 0.45 }} className="w-full">
-              <motion.button initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: 0.08, duration: 0.45 }} onClick={() => setActive(null)} whileHover={{ x: 8 }} className={`inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 sm:mb-8 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2 ${isRTL ? 'mr-0 md:-mr-4' : 'ml-0 md:-ml-4'}`}>
-                <svg className="w-5 h-5 sm:w-6 sm:h-6 transition-transform group-hover:translate-x-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
+            <motion.div
+              key="details-view"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -20 }}
+              transition={{ duration: 0.45 }}
+              className="w-full"
+            >
+              <motion.button
+                initial={{ opacity: 0, x: 20 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ delay: 0.08, duration: 0.45 }}
+                onClick={() => setActive(null)}
+                whileHover={{ x: 8 }}
+                className={`inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 sm:mb-8 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2 ${
+                  isRTL ? "mr-0 md:-mr-4" : "ml-0 md:-ml-4"
+                }`}
+              >
+                <svg
+                  className="w-5 h-5 sm:w-6 sm:h-6 transition-transform group-hover:translate-x-2"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2.5"
+                    d="M15 19l-7-7 7-7"
+                  />
                 </svg>
                 <span>{backToMenu}</span>
               </motion.button>
 
               <div className="grid grid-cols-1 gap-6">
                 {cardGroups.map((group, gIndex) => (
-                  <div key={gIndex} className="bg-white rounded-2xl p-4 sm:p-6 shadow-lg border border-gray-100">
-                    <h3 className="text-lg font-bold text-gray-800 mb-3">{group.title}</h3>
+                  <div
+                    key={gIndex}
+                    className="bg-white rounded-2xl p-4 sm:p-6 shadow-lg border border-gray-100"
+                  >
+                    <h3 className="text-lg font-bold text-gray-800 mb-3">
+                      {group.title}
+                    </h3>
                     <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                       {group.items.map((text, idx) => (
-                        <motion.div key={idx} initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true, amount: 0.2 }} transition={{ delay: idx * 0.06, duration: 0.4 }} className="relative group">
+                        <motion.div
+                          key={idx}
+                          initial={{ opacity: 0, y: 20 }}
+                          whileInView={{ opacity: 1, y: 0 }}
+                          viewport={{ once: true, amount: 0.2 }}
+                          transition={{ delay: idx * 0.06, duration: 0.4 }}
+                          className="relative group"
+                        >
                           <div className="relative flex items-start gap-3 sm:gap-6 rounded-2xl p-3 sm:p-6 border-r-4 border-amber-400 hover:border-orange-500 hover:shadow-xl transition-all duration-300 bg-white">
                             <div className="relative flex-shrink-0">
-                              <motion.div whileHover={{ rotate: 360, scale: 1.03 }} transition={{ duration: 0.6 }} className="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white text-base sm:text-2xl font-extrabold shadow-lg group-hover:shadow-2xl transition-shadow duration-300 relative z-10">
-                                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"/></svg>
+                              <motion.div
+                                whileHover={{ rotate: 360, scale: 1.03 }}
+                                transition={{ duration: 0.6 }}
+                                className="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white text-base sm:text-2xl font-extrabold shadow-lg group-hover:shadow-2xl transition-shadow duration-300 relative z-10"
+                              >
+                                <svg
+                                  className="w-6 h-6"
+                                  fill="none"
+                                  stroke="currentColor"
+                                  viewBox="0 0 24 24"
+                                >
+                                  <path
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    strokeWidth="2"
+                                    d="M5 13l4 4L19 7"
+                                  />
+                                </svg>
                               </motion.div>
                               <div className="absolute inset-0 bg-amber-500 rounded-xl blur-xl opacity-0 group-hover:opacity-30 transition-opacity duration-300" />
                             </div>
 
                             <div className="flex-1 pt-1">
-                              <p className="text-xs sm:text-sm md:text-base text-gray-800 leading-relaxed font-medium">{text}</p>
+                              <p className="text-xs sm:text-sm md:text-base text-gray-800 leading-relaxed font-medium">
+                                {text}
+                              </p>
                             </div>
 
                             <div className="flex-shrink-0 text-amber-500 opacity-0 group-hover:opacity-100 transition-all duration-300">
-                              <svg className="w-4 h-4 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
+                              <svg
+                                className="w-4 h-4 sm:w-6 sm:h-6"
+                                fill="none"
+                                stroke="currentColor"
+                                viewBox="0 0 24 24"
+                              >
+                                <path
+                                  strokeLinecap="round"
+                                  strokeLinejoin="round"
+                                  strokeWidth="2.5"
+                                  d="M15 19l-7-7 7-7"
+                                />
                               </svg>
                             </div>
                           </div>
@@ -557,11 +853,21 @@ export default function DepartmentDetail6() {
                 ))}
               </div>
 
-              <motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} transition={{ delay: 0.6, duration: 0.45 }} className="mt-8 sm:mt-12 pt-6 border-t-2 border-gray-100 text-center">
+              <motion.div
+                initial={{ opacity: 0, scale: 0.95 }}
+                animate={{ opacity: 1, scale: 1 }}
+                transition={{ delay: 0.6, duration: 0.45 }}
+                className="mt-8 sm:mt-12 pt-6 border-t-2 border-gray-100 text-center"
+              >
                 <div className="inline-flex items-center gap-2 sm:gap-3 text-gray-500">
                   <div className="w-2 h-2 bg-amber-500 rounded-full animate-pulse" />
-                  <span className="text-xs sm:text-sm font-medium">{t("departmentDetail6.ui.servicesProfessional")}</span>
-                  <div className="w-2 h-2 bg-orange-500 rounded-full animate-pulse" style={{ animationDelay: "0.5s" }} />
+                  <span className="text-xs sm:text-sm font-medium">
+                    {t("departmentDetail6.ui.servicesProfessional")}
+                  </span>
+                  <div
+                    className="w-2 h-2 bg-orange-500 rounded-full animate-pulse"
+                    style={{ animationDelay: "0.5s" }}
+                  />
                 </div>
               </motion.div>
             </motion.div>
diff --git a/src/Components/Sections/DepartmentDetail7/DepartmentDetail7.jsx b/src/Components/Sections/DepartmentDetail7/DepartmentDetail7.jsx
index fc39036..7c03e0f 100644
--- a/src/Components/Sections/DepartmentDetail7/DepartmentDetail7.jsx
+++ b/src/Components/Sections/DepartmentDetail7/DepartmentDetail7.jsx
@@ -320,9 +320,13 @@ export default function DepartmentDetail7() {
   };
 
   // جلب الأزرار/البيانات من الترجمة
-  const buttons = t("departmentDetail7.buttons", { returnObjects: true });
+  const buttons = [
+    { id: 1, title: t("departmentDetail7.buttons.1"), key: "expertise" },
+    { id: 2, title: t("departmentDetail7.buttons.2"), key: "works" },
+  ];
   const projectsTimeline = t("departmentDetail7.projectsTimeline.defaultProjects", { returnObjects: true });
-  const expertiseTexts = t("departmentDetail7.expertiseItems", { returnObjects: true });
+  const expertiseTextsRaw = t("departmentDetail7.expertiseItems", { returnObjects: true });
+  const expertiseTexts = Array.isArray(expertiseTextsRaw) ? expertiseTextsRaw : [];
   const hero = t("departmentDetail7.hero", { returnObjects: true });
   const ui = t("departmentDetail7.ui", { returnObjects: true });
   const backToMenu = t("departmentDetail7.backToMenu");
diff --git a/src/Components/Sections/DepartmentDetail8/DepartmentDetail8.jsx b/src/Components/Sections/DepartmentDetail8/DepartmentDetail8.jsx
index 394483a..74f4860 100644
--- a/src/Components/Sections/DepartmentDetail8/DepartmentDetail8.jsx
+++ b/src/Components/Sections/DepartmentDetail8/DepartmentDetail8.jsx
@@ -15,7 +15,7 @@ function ProjectsTimeline({
   dir = "rtl",
   scrollLabel = "خط زمني قابل للتمرير",
   prevLabel = "السابق",
-  nextLabel = "التالي"
+  nextLabel = "التالي",
 }) {
   const wrapperRef = useRef(null);
   const scrollRef = useRef(null);
@@ -25,7 +25,9 @@ function ProjectsTimeline({
 
   useEffect(() => {
     setItemsRefs((r) => {
-      const arr = Array(projects.length).fill().map((_, i) => r[i] || React.createRef());
+      const arr = Array(projects.length)
+        .fill()
+        .map((_, i) => r[i] || React.createRef());
       return arr;
     });
   }, [projects.length]);
@@ -129,7 +131,11 @@ function ProjectsTimeline({
       const scrollLeft = scrollContainer.scrollLeft;
 
       const targetScroll =
-        scrollLeft + itemRect.left - containerRect.left - containerRect.width / 2 + itemRect.width / 2;
+        scrollLeft +
+        itemRect.left -
+        containerRect.left -
+        containerRect.width / 2 +
+        itemRect.width / 2;
 
       scrollContainer.scrollTo({ left: targetScroll, behavior: "smooth" });
       setActiveItem(index);
@@ -186,7 +192,8 @@ function ProjectsTimeline({
 
     return () => {
       clearTimeout(t);
-      if (scrollContainer) scrollContainer.removeEventListener("scroll", onScroll);
+      if (scrollContainer)
+        scrollContainer.removeEventListener("scroll", onScroll);
       window.removeEventListener("resize", onResize);
     };
   }, [itemsRefs, drawCurvedLines, setActiveItem]);
@@ -250,25 +257,65 @@ function ProjectsTimeline({
     .projects-timeline-root.plain-bleed .project-card { max-width:420px; }
   `;
 
-  const mainStyle = plain ? { background: "#ffffff", paddingBottom: 0 } : { background: "linear-gradient(135deg, var(--bg-start) 0%, var(--bg-mid) 30%, var(--bg-end) 60%)" };
+  const mainStyle = plain
+    ? { background: "#ffffff", paddingBottom: 0 }
+    : {
+        background:
+          "linear-gradient(135deg, var(--bg-start) 0%, var(--bg-mid) 30%, var(--bg-end) 60%)",
+      };
 
   return (
-    <div className={`projects-timeline-root w-full h-full ${plain ? "plain-bleed" : ""}`} dir={dir}>
+    <div
+      className={`projects-timeline-root w-full h-full ${
+        plain ? "plain-bleed" : ""
+      }`}
+      dir={dir}
+    >
       <style>{css}</style>
       <main className="w-full h-full overflow-hidden" style={mainStyle}>
         <div className="h-full flex flex-col">
           {!plain && (
             <header className="text-center py-8 px-4">
-              <h1 id="main-title" className={` ${plain ? "text-3xl md:text-4xl font-bold text-gray-900" : "text-5xl font-bold text-white"} mb-3`} style={plain ? { textShadow: "none" } : { textShadow: "0 4px 20px rgba(0,0,0,0.3)" }}>
+              <h1
+                id="main-title"
+                className={` ${
+                  plain
+                    ? "text-3xl md:text-4xl font-bold text-gray-900"
+                    : "text-5xl font-bold text-white"
+                } mb-3`}
+                style={
+                  plain
+                    ? { textShadow: "none" }
+                    : { textShadow: "0 4px 20px rgba(0,0,0,0.3)" }
+                }
+              >
                 {mainTitle}
               </h1>
-              <p id="subtitle" className={`${plain ? "text-base text-gray-700" : "text-xl text-white opacity-90"}`}>{subtitle}</p>
+              <p
+                id="subtitle"
+                className={`${
+                  plain
+                    ? "text-base text-gray-700"
+                    : "text-xl text-white opacity-90"
+                }`}
+              >
+                {subtitle}
+              </p>
             </header>
           )}
 
           <div className="flex-1 relative">
-            <div className="timeline-scroll h-full" id="timeline-scroll" ref={scrollRef} aria-label={scrollLabel}>
-              <div className="timeline-wrapper" id="timeline-wrapper" ref={wrapperRef}>
+            <div
+              className="timeline-scroll h-full"
+              id="timeline-scroll"
+              ref={scrollRef}
+              aria-label={scrollLabel}
+            >
+              <div
+                className="timeline-wrapper"
+                id="timeline-wrapper"
+                ref={wrapperRef}
+              >
                 <svg className="svg-container" id="timeline-svg" ref={svgRef} />
                 {projects.map((project, idx) => (
                   <div
@@ -297,8 +344,24 @@ function ProjectsTimeline({
             </div>
 
             <div className="scroll-indicator">
-              <button className="scroll-btn" aria-label={prevLabel} onClick={onPrev} disabled={currentIndex === 0} title={prevLabel}>◄</button>
-              <button className="scroll-btn" aria-label={nextLabel} onClick={onNext} disabled={currentIndex === projects.length - 1} title={nextLabel}>►</button>
+              <button
+                className="scroll-btn"
+                aria-label={prevLabel}
+                onClick={onPrev}
+                disabled={currentIndex === 0}
+                title={prevLabel}
+              >
+                ◄
+              </button>
+              <button
+                className="scroll-btn"
+                aria-label={nextLabel}
+                onClick={onNext}
+                disabled={currentIndex === projects.length - 1}
+                title={nextLabel}
+              >
+                ►
+              </button>
             </div>
           </div>
         </div>
@@ -315,44 +378,110 @@ export default function DepartmentDetail8() {
   const [active, setActive] = useState(null);
 
   const hero = t("departmentDetail8.hero", { returnObjects: true });
-  const buttons = t("departmentDetail8.buttons", { returnObjects: true });
-  const projectsTimeline = t("departmentDetail8.projectsTimeline.defaultProjects", { returnObjects: true });
-  const expertiseTexts = t("departmentDetail8.expertiseItems", { returnObjects: true });
+
+  const buttons = [
+    { id: 1, title: t("departmentDetail8.buttons.1"), key: "expertise" },
+    { id: 2, title: t("departmentDetail8.buttons.2"), key: "works" },
+  ];
+  const projectsTimeline = t(
+    "departmentDetail8.projectsTimeline.defaultProjects",
+    { returnObjects: true }
+  );
+  const expertiseTextsRaw = t("departmentDetail8.expertiseItems", {
+    returnObjects: true,
+  });
+  const expertiseTexts = Array.isArray(expertiseTextsRaw)
+    ? expertiseTextsRaw
+    : [];
   const ui = t("departmentDetail8.ui", { returnObjects: true });
   const backToMenu = t("departmentDetail8.backToMenu");
   const scrollLabels = t("departmentDetail8.scroll", { returnObjects: true });
 
   const icons = [
-    (
-      <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" key="i1">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.2" d="M3 7h13l3 3v7a1 1 0 01-1 1h-1a2 2 0 11-4 0H9a2 2 0 11-4 0H4a1 1 0 01-1-1V7zM16 7v4" />
-      </svg>
-    ),
-    (
-      <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" key="i2">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.2" d="M4 7h4l4 5 4-5h4M5 19a2 2 0 104 0 2 2 0 00-4 0zm10 0a2 2 0 104 0 2 2 0 00-4 0z" />
-      </svg>
-    ),
-    (
-      <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" key="i3">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.2" d="M3 7l9-4 9 4-9 4-9-4zM21 8v8a2 2 0 01-2 2H5a2 2 0 01-2-2V8" />
-      </svg>
-    ),
-    (
-      <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" key="i4">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.2" d="M3 12l4 4 8-8 4 4M14 7l3-3M7 17l-3 3" />
-      </svg>
-    ),
-    (
-      <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" key="i5">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.2" d="M3 9l9-5 9 5v8a2 2 0 01-2 2H5a2 2 0 01-2-2V9zM9 22V12" />
-      </svg>
-    ),
-    (
-      <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" key="i6">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.2" d="M12 8v4l2 2M6.16 4.94l1.42 1.42M17.42 4.94l-1.42 1.42M4 13h2M18 13h2M6.16 19.06l1.42-1.42M17.42 19.06l-1.42-1.42" />
-      </svg>
-    )
+    <svg
+      className="w-7 h-7"
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+      key="i1"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2.2"
+        d="M3 7h13l3 3v7a1 1 0 01-1 1h-1a2 2 0 11-4 0H9a2 2 0 11-4 0H4a1 1 0 01-1-1V7zM16 7v4"
+      />
+    </svg>,
+    <svg
+      className="w-7 h-7"
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+      key="i2"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2.2"
+        d="M4 7h4l4 5 4-5h4M5 19a2 2 0 104 0 2 2 0 00-4 0zm10 0a2 2 0 104 0 2 2 0 00-4 0z"
+      />
+    </svg>,
+    <svg
+      className="w-7 h-7"
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+      key="i3"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2.2"
+        d="M3 7l9-4 9 4-9 4-9-4zM21 8v8a2 2 0 01-2 2H5a2 2 0 01-2-2V8"
+      />
+    </svg>,
+    <svg
+      className="w-7 h-7"
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+      key="i4"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2.2"
+        d="M3 12l4 4 8-8 4 4M14 7l3-3M7 17l-3 3"
+      />
+    </svg>,
+    <svg
+      className="w-7 h-7"
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+      key="i5"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2.2"
+        d="M3 9l9-5 9 5v8a2 2 0 01-2 2H5a2 2 0 01-2-2V9zM9 22V12"
+      />
+    </svg>,
+    <svg
+      className="w-7 h-7"
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+      key="i6"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2.2"
+        d="M12 8v4l2 2M6.16 4.94l1.42 1.42M17.42 4.94l-1.42 1.42M4 13h2M18 13h2M6.16 19.06l1.42-1.42M17.42 19.06l-1.42-1.42"
+      />
+    </svg>,
   ];
 
   const expertiseItems = expertiseTexts.map((text, idx) => {
@@ -368,10 +497,14 @@ export default function DepartmentDetail8() {
     setActive((prev) => (prev === key ? null : key));
   };
 
-  const heroImage = active === "expertise" ? d34 : active === "works" ? d33 : d21;
+  const heroImage =
+    active === "expertise" ? d34 : active === "works" ? d33 : d21;
 
   return (
-    <div dir={isRTL ? "rtl" : "ltr"} className="w-full min-h-screen bg-white pb-12">
+    <div
+      dir={isRTL ? "rtl" : "ltr"}
+      className="w-full min-h-screen bg-white pb-12"
+    >
       <section className="relative">
         <div className="w-full">
           <AnimatePresence mode="wait">
@@ -400,27 +533,71 @@ export default function DepartmentDetail8() {
                 <div className="max-w-7xl mx-auto px-4 sm:px-6 w-full">
                   <AnimatePresence mode="wait">
                     {active === "expertise" ? (
-                      <motion.div key="expertise-title" initial={{ opacity: 0, x: -50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} transition={{ duration: 0.5 }} className={`text-white max-w-4xl ${isRTL ? 'text-right' : 'text-left'}`}>
-                        <div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">{hero.expertiseBadge}</div>
-                        <h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight mb-3 sm:mb-6">{hero.expertiseTitle}</h2>
-                        <p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">{hero.expertiseSubtitle}</p>
+                      <motion.div
+                        key="expertise-title"
+                        initial={{ opacity: 0, x: -50 }}
+                        animate={{ opacity: 1, x: 0 }}
+                        exit={{ opacity: 0, x: 50 }}
+                        transition={{ duration: 0.5 }}
+                        className={`text-white max-w-4xl ${
+                          isRTL ? "text-right" : "text-left"
+                        }`}
+                      >
+                        <div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">
+                          {hero.expertiseBadge}
+                        </div>
+                        <h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight mb-3 sm:mb-6">
+                          {hero.expertiseTitle}
+                        </h2>
+                        <p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">
+                          {hero.expertiseSubtitle}
+                        </p>
                       </motion.div>
                     ) : active === "works" ? (
-                      <motion.div key="works-title" initial={{ opacity: 0, x: -50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} transition={{ duration: 0.5 }} className={`text-white max-w-4xl ${isRTL ? 'text-right' : 'text-left'}`}>
-                        <div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">{hero.worksBadge}</div>
-                        <h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight mb-3 sm:mb-6">{hero.worksTitle}</h2>
-                        <p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">{hero.worksSubtitle}</p>
+                      <motion.div
+                        key="works-title"
+                        initial={{ opacity: 0, x: -50 }}
+                        animate={{ opacity: 1, x: 0 }}
+                        exit={{ opacity: 0, x: 50 }}
+                        transition={{ duration: 0.5 }}
+                        className={`text-white max-w-4xl ${
+                          isRTL ? "text-right" : "text-left"
+                        }`}
+                      >
+                        <div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">
+                          {hero.worksBadge}
+                        </div>
+                        <h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight mb-3 sm:mb-6">
+                          {hero.worksTitle}
+                        </h2>
+                        <p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">
+                          {hero.worksSubtitle}
+                        </p>
                       </motion.div>
                     ) : (
-                      <motion.div key="default-title" initial={{ opacity: 0, x: -50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} transition={{ duration: 0.5 }} className={`text-white max-w-4xl ${isRTL ? 'text-right' : 'text-left'}`}>
-                        <h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight">{hero.defaultTitle}</h2>
+                      <motion.div
+                        key="default-title"
+                        initial={{ opacity: 0, x: -50 }}
+                        animate={{ opacity: 1, x: 0 }}
+                        exit={{ opacity: 0, x: 50 }}
+                        transition={{ duration: 0.5 }}
+                        className={`text-white max-w-4xl ${
+                          isRTL ? "text-right" : "text-left"
+                        }`}
+                      >
+                        <h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight">
+                          {hero.defaultTitle}
+                        </h2>
                       </motion.div>
                     )}
                   </AnimatePresence>
                 </div>
               </div>
 
-              <div className="absolute left-1/2 bottom-0 transform -translate-x-1/2 translate-y-1/2 w-full px-4 pointer-events-auto hidden sm:block" style={{ zIndex: 99999 }}>
+              <div
+                className="absolute left-1/2 bottom-0 transform -translate-x-1/2 translate-y-1/2 w-full px-4 pointer-events-auto hidden sm:block"
+                style={{ zIndex: 99999 }}
+              >
                 <AnimatePresence>
                   {!active && (
                     <motion.div
@@ -438,10 +615,16 @@ export default function DepartmentDetail8() {
                             initial={{ opacity: 0, y: 20 }}
                             animate={{ opacity: 1, y: 0 }}
                             transition={{ delay: index * 0.08, duration: 0.5 }}
-                            whileHover={{ scale: 1.03, y: -6, transition: { duration: 0.2 } }}
+                            whileHover={{
+                              scale: 1.03,
+                              y: -6,
+                              transition: { duration: 0.2 },
+                            }}
                             whileTap={{ scale: 0.97 }}
                             onClick={() => handleButtonClick(b.key)}
-                            className={`group relative rounded-2xl p-4 sm:p-6 shadow-2xl border border-transparent flex flex-col h-full ${isRTL ? 'text-right' : 'text-left'} focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-300 overflow-hidden bg-white/85 backdrop-blur-sm`}
+                            className={`group relative rounded-2xl p-4 sm:p-6 shadow-2xl border border-transparent flex flex-col h-full ${
+                              isRTL ? "text-right" : "text-left"
+                            } focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-300 overflow-hidden bg-white/85 backdrop-blur-sm`}
                           >
                             <div className="absolute top-0 right-0 w-20 h-20 sm:w-24 sm:h-24 bg-gradient-to-br from-amber-500/10 to-orange-600/10 rounded-full -mr-12 -mt-12 group-hover:scale-125 transition-transform duration-500" />
                             <div className="absolute top-0 right-0 w-2 h-0 bg-gradient-to-b from-amber-500 to-orange-600 rounded-r-2xl group-hover:h-full transition-all duration-500" />
@@ -450,12 +633,24 @@ export default function DepartmentDetail8() {
                                 <div className="w-10 h-10 sm:w-14 sm:h-14 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white text-base sm:text-2xl font-extrabold shadow-xl group-hover:scale-110 group-hover:rotate-6 transition-transform duration-300">
                                   {b.id}
                                 </div>
-                                <h3 className="text-sm sm:text-base font-bold text-gray-800 group-hover:text-amber-700 transition-colors duration-300">{b.title}</h3>
+                                <h3 className="text-sm sm:text-base font-bold text-gray-800 group-hover:text-amber-700 transition-colors duration-300">
+                                  {b.title}
+                                </h3>
                               </div>
                               <p className="text-xs sm:text-sm text-gray-600 mt-auto flex items-center gap-2 group-hover:text-amber-600 transition-colors duration-300">
                                 <span>{ui.clickToView}</span>
-                                <svg className="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-2 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
+                                <svg
+                                  className="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-2 transition-transform duration-300"
+                                  fill="none"
+                                  stroke="currentColor"
+                                  viewBox="0 0 24 24"
+                                >
+                                  <path
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    strokeWidth="2.5"
+                                    d="M15 19l-7-7 7-7"
+                                  />
                                 </svg>
                               </p>
                             </div>
@@ -468,8 +663,16 @@ export default function DepartmentDetail8() {
               </div>
 
               <div className="absolute bottom-0 left-0 right-0 z-10">
-                <svg className="w-full h-12 sm:h-16 md:h-24" viewBox="0 0 1200 120" preserveAspectRatio="none">
-                  <path d="M0,0 C300,80 900,80 1200,0 L1200,120 L0,120 Z" fill="#ffffff" opacity="1"/>
+                <svg
+                  className="w-full h-12 sm:h-16 md:h-24"
+                  viewBox="0 0 1200 120"
+                  preserveAspectRatio="none"
+                >
+                  <path
+                    d="M0,0 C300,80 900,80 1200,0 L1200,120 L0,120 Z"
+                    fill="#ffffff"
+                    opacity="1"
+                  />
                 </svg>
               </div>
             </motion.div>
@@ -496,17 +699,33 @@ export default function DepartmentDetail8() {
                     transition={{ delay: index * 0.05, duration: 0.35 }}
                     whileHover={{ scale: 1.02 }}
                     onClick={() => handleButtonClick(b.key)}
-                    className={`group relative rounded-2xl p-3 shadow-md border border-transparent flex items-center gap-3 ${isRTL ? 'text-right' : 'text-left'} focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-200 overflow-hidden bg-white/90`}
+                    className={`group relative rounded-2xl p-3 shadow-md border border-transparent flex items-center gap-3 ${
+                      isRTL ? "text-right" : "text-left"
+                    } focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-200 overflow-hidden bg-white/90`}
                   >
                     <div className="w-10 h-10 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white text-base font-extrabold shadow">
                       {b.id}
                     </div>
                     <div className="flex-1">
-                      <h3 className="text-sm font-bold text-gray-800">{b.title}</h3>
-                      <p className="text-xs text-gray-600 mt-1">{ui.clickToView}</p>
+                      <h3 className="text-sm font-bold text-gray-800">
+                        {b.title}
+                      </h3>
+                      <p className="text-xs text-gray-600 mt-1">
+                        {ui.clickToView}
+                      </p>
                     </div>
-                    <svg className="w-5 h-5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
+                    <svg
+                      className="w-5 h-5 text-amber-500"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth="2.5"
+                        d="M15 19l-7-7 7-7"
+                      />
                     </svg>
                   </motion.button>
                 ))}
@@ -519,21 +738,63 @@ export default function DepartmentDetail8() {
       <section className="max-w-7xl mx-auto px-4 sm:px-6 md:px-6 -mt-6 md:-mt-8 relative z-20">
         <AnimatePresence mode="wait">
           {!active ? (
-            <motion.div key="buttons-spacer" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.25 }} className="h-0" />
+            <motion.div
+              key="buttons-spacer"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.25 }}
+              className="h-0"
+            />
           ) : active === "works" ? (
-            <motion.div key="timeline-view" initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }} transition={{ duration: 0.45 }} className="w-full">
-              <motion.button initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: 0.15, duration: 0.45 }} onClick={() => setActive(null)} whileHover={{ x: 8 }} className={`inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 sm:mb-8 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2 ${isRTL ? 'mr-0 md:-mr-4' : 'ml-0 md:-ml-4'}`}>
-                <svg className="w-5 h-5 sm:w-6 sm:h-6 transition-transform group-hover:translate-x-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
+            <motion.div
+              key="timeline-view"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -10 }}
+              transition={{ duration: 0.45 }}
+              className="w-full"
+            >
+              <motion.button
+                initial={{ opacity: 0, x: 20 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ delay: 0.15, duration: 0.45 }}
+                onClick={() => setActive(null)}
+                whileHover={{ x: 8 }}
+                className={`inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 sm:mb-8 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2 ${
+                  isRTL ? "mr-0 md:-mr-4" : "ml-0 md:-ml-4"
+                }`}
+              >
+                <svg
+                  className="w-5 h-5 sm:w-6 sm:h-6 transition-transform group-hover:translate-x-2"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2.5"
+                    d="M15 19l-7-7 7-7"
+                  />
                 </svg>
                 <span>{backToMenu}</span>
               </motion.button>
 
-              <div style={{ position: 'relative', left: '50%', right: '50%', marginLeft: '-50vw', marginRight: '-50vw', width: '100vw' }}>
+              <div
+                style={{
+                  position: "relative",
+                  left: "50%",
+                  right: "50%",
+                  marginLeft: "-50vw",
+                  marginRight: "-50vw",
+                  width: "100vw",
+                }}
+              >
                 <ProjectsTimeline
                   projects={projectsTimeline}
                   plain={true}
-                  dir={isRTL ? 'rtl' : 'ltr'}
+                  dir={isRTL ? "rtl" : "ltr"}
                   mainTitle={hero.worksTitle}
                   subtitle={hero.worksSubtitle}
                   scrollLabel={scrollLabels.ariaLabel}
@@ -543,10 +804,36 @@ export default function DepartmentDetail8() {
               </div>
             </motion.div>
           ) : (
-            <motion.div key="details-view" initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -20 }} transition={{ duration: 0.45 }} className="w-full">
-              <motion.button initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: 0.08, duration: 0.45 }} onClick={() => setActive(null)} whileHover={{ x: 8 }} className={`inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 sm:mb-8 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2 ${isRTL ? 'mr-0 md:-mr-4' : 'ml-0 md:-ml-4'}`}>
-                <svg className="w-5 h-5 sm:w-6 sm:h-6 transition-transform group-hover:translate-x-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
+            <motion.div
+              key="details-view"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -20 }}
+              transition={{ duration: 0.45 }}
+              className="w-full"
+            >
+              <motion.button
+                initial={{ opacity: 0, x: 20 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ delay: 0.08, duration: 0.45 }}
+                onClick={() => setActive(null)}
+                whileHover={{ x: 8 }}
+                className={`inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 sm:mb-8 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2 ${
+                  isRTL ? "mr-0 md:-mr-4" : "ml-0 md:-ml-4"
+                }`}
+              >
+                <svg
+                  className="w-5 h-5 sm:w-6 sm:h-6 transition-transform group-hover:translate-x-2"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2.5"
+                    d="M15 19l-7-7 7-7"
+                  />
                 </svg>
                 <span>{backToMenu}</span>
               </motion.button>
@@ -563,30 +850,60 @@ export default function DepartmentDetail8() {
                   >
                     <div className="relative flex items-start gap-3 sm:gap-6 rounded-2xl p-3 sm:p-6 border-r-4 border-amber-400 hover:border-orange-500 hover:shadow-xl transition-all duration-300 bg-white">
                       <div className="relative flex-shrink-0">
-                        <motion.div whileHover={{ rotate: 360, scale: 1.08 }} transition={{ duration: 0.6 }} className="w-10 h-10 sm:w-14 sm:h-14 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white shadow-lg group-hover:shadow-2xl transition-shadow duration-300 relative z-10">
+                        <motion.div
+                          whileHover={{ rotate: 360, scale: 1.08 }}
+                          transition={{ duration: 0.6 }}
+                          className="w-10 h-10 sm:w-14 sm:h-14 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white shadow-lg group-hover:shadow-2xl transition-shadow duration-300 relative z-10"
+                        >
                           {item.icon}
                         </motion.div>
                         <div className="absolute inset-0 bg-amber-500 rounded-xl blur-xl opacity-0 group-hover:opacity-30 transition-opacity duration-300" />
                       </div>
 
                       <div className="flex-1 pt-1">
-                        <p className="text-sm md:text-base text-gray-800 leading-relaxed font-medium group-hover:text-gray-900 transition-colors duration-300">{item.text}</p>
+                        <p className="text-sm md:text-base text-gray-800 leading-relaxed font-medium group-hover:text-gray-900 transition-colors duration-300">
+                          {item.text}
+                        </p>
                       </div>
 
-                      <motion.div initial={{ opacity: 0, x: -8 }} whileHover={{ opacity: 1, x: 0 }} className="flex-shrink-0 text-amber-500 opacity-0 group-hover:opacity-100 transition-all duration-300">
-                        <svg className="w-4 h-4 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.2" d="M15 19l-7-7 7-7"/>
+                      <motion.div
+                        initial={{ opacity: 0, x: -8 }}
+                        whileHover={{ opacity: 1, x: 0 }}
+                        className="flex-shrink-0 text-amber-500 opacity-0 group-hover:opacity-100 transition-all duration-300"
+                      >
+                        <svg
+                          className="w-4 h-4 sm:w-6 sm:h-6"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth="2.2"
+                            d="M15 19l-7-7 7-7"
+                          />
                         </svg>
                       </motion.div>
                     </div>
                   </motion.div>
                 ))}
 
-                <motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} transition={{ delay: 0.6, duration: 0.45 }} className="mt-2 sm:mt-6 pt-4 border-t-2 border-gray-100 text-center col-span-full">
+                <motion.div
+                  initial={{ opacity: 0, scale: 0.95 }}
+                  animate={{ opacity: 1, scale: 1 }}
+                  transition={{ delay: 0.6, duration: 0.45 }}
+                  className="mt-2 sm:mt-6 pt-4 border-t-2 border-gray-100 text-center col-span-full"
+                >
                   <div className="inline-flex items-center gap-2 sm:gap-3 text-gray-500">
                     <div className="w-2 h-2 bg-amber-500 rounded-full animate-pulse" />
-                    <span className="text-xs sm:text-sm font-medium">{ui.servicesProfessional}</span>
-                    <div className="w-2 h-2 bg-orange-500 rounded-full animate-pulse" style={{ animationDelay: "0.5s" }} />
+                    <span className="text-xs sm:text-sm font-medium">
+                      {ui.servicesProfessional}
+                    </span>
+                    <div
+                      className="w-2 h-2 bg-orange-500 rounded-full animate-pulse"
+                      style={{ animationDelay: "0.5s" }}
+                    />
                   </div>
                 </motion.div>
               </div>
diff --git a/src/Components/Sections/Departments/Departments.jsx b/src/Components/Sections/Departments/Departments.jsx
index 61e2d69..d6bd3dd 100644
--- a/src/Components/Sections/Departments/Departments.jsx
+++ b/src/Components/Sections/Departments/Departments.jsx
@@ -21,7 +21,11 @@ import d21 from "../../../../src/assets/Images/d21.jpeg";
 import d22 from "../../../../src/assets/Images/d22.jpg";
 
 const departments = [
-  { id: 1, title: "قسم إنشاء وصيانة المنشآت الصناعية وخطوط الإنتاج", image: d1 },
+  {
+    id: 1,
+    title: "قسم إنشاء وصيانة المنشآت الصناعية وخطوط الإنتاج",
+    image: d1,
+  },
   { id: 2, title: "قسم تنفيذ المرافق السكنية والخدمية", image: d7 },
   { id: 3, title: "قسم اعادة تأهيل وصيانة المباني", image: d14 },
   { id: 4, title: "قسم محطات الوقود وصيانة المنشآت النفطية", image: d17 },
@@ -79,11 +83,14 @@ function DepartmentCard({ dept, offset, index }) {
 
   const progressParallax = useTransform(scrollYProgress, [0, 1], [15, -15]);
 
-  const y = useTransform([velocityParallax, progressParallax], ([v, p]) => v + p);
+  const y = useTransform(
+    [velocityParallax, progressParallax],
+    ([v, p]) => v + p
+  );
 
   const handleClick = () => {
     if (dept.id === 1) {
-      navigate("/departments/:id");
+      navigate("/departments/1");
     }
     if (dept.id === 9) {
       navigate("/department-detail9");
@@ -110,7 +117,9 @@ function DepartmentCard({ dept, offset, index }) {
     }
   };
 
-  const translatedTitle = t(`departments.list.${dept.id - 1}`, { defaultValue: dept.title });
+  const translatedTitle = t(`departments.list.${dept.id - 1}`, {
+    defaultValue: dept.title,
+  });
 
   return (
     <div
@@ -140,7 +149,8 @@ function DepartmentCard({ dept, offset, index }) {
           scale: s,
           y,
           transformStyle: "preserve-3d",
-          boxShadow: "0 18px 50px rgba(2,6,23,0.12), 0 6px 18px rgba(2,6,23,0.06)",
+          boxShadow:
+            "0 18px 50px rgba(2,6,23,0.12), 0 6px 18px rgba(2,6,23,0.06)",
         }}
         className="cursor-pointer w-full h-56 sm:h-72 md:h-96 lg:h-[28rem] object-cover rounded-2xl bg-white/20 backdrop-blur-md border border-white/10"
       />
@@ -152,10 +162,14 @@ export default function Departments() {
   const { t } = useTranslation();
 
   return (
-    <section id="departments" className="min-h-screen text-black bg-transparent" dir="rtl">
+    <section
+      id="departments"
+      className="min-h-screen text-black bg-transparent"
+      dir="rtl"
+    >
       <header className="max-w-6xl mx-auto px-4 sm:px-6 md:px-8 pt-10 sm:pt-12 relative z-20">
         <h1 className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-[#041c40] via-[#57acd9] to-[#041c40] drop-shadow-lg">
-          {t('departments.heading', { defaultValue: 'أقسامنا' })}
+          {t("departments.heading", { defaultValue: "أقسامنا" })}
         </h1>
       </header>
 
diff --git a/src/Components/Sections/Home/Home.jsx b/src/Components/Sections/Home/Home.jsx
index ab1d9d6..1718eff 100644
--- a/src/Components/Sections/Home/Home.jsx
+++ b/src/Components/Sections/Home/Home.jsx
@@ -1,12 +1,16 @@
 import React, { useEffect, useState, useRef } from "react";
-import styled from 'styled-components';
-import { useTranslation } from 'react-i18next';
-
+import styled from "styled-components";
+import { useTranslation } from "react-i18next";
+import REXNT from "../../../assets/Images/REXNT.png";
+import TPSlogo from "../../../assets/Images/TPS-logo.png";
+import NSC from "../../../assets/Images/NSC.png";
+import LOGO from "../../../assets/Images/LOGO.png";
 export default function EngineeringHeroFlowbite() {
   const { t, i18n } = useTranslation();
 
   const defaultConfig = {
-    main_title: "عندما تطلب الرؤية مستشارًا,  ويحتاج المخطط منفذًا استراتيجيًا…نكون القرار بالقيادة من الرؤية حتى التسليم",
+    main_title:
+      "عندما تطلب الرؤية مستشارًا,  ويحتاج المخطط منفذًا استراتيجيًا…نكون القرار بالقيادة من الرؤية حتى التسليم",
     subtitle:
       "حلول متكاملة تشمل التصميم، التنفيذ، التشغيل، والصيانة\nللمشاريع الصناعية والمدنية، وفق أحدث المعايير والتقنيات",
     primary_color: "#e67e22",
@@ -20,8 +24,8 @@ export default function EngineeringHeroFlowbite() {
 
   const [config, setConfig] = useState({
     ...defaultConfig,
-    main_title: t ? t('hero.main_title') : defaultConfig.main_title,
-    subtitle: t ? t('hero.subtitle') : defaultConfig.subtitle,
+    main_title: t ? t("hero.main_title") : defaultConfig.main_title,
+    subtitle: t ? t("hero.subtitle") : defaultConfig.subtitle,
   });
   const [isMounted, setIsMounted] = useState(false);
 
@@ -34,7 +38,8 @@ export default function EngineeringHeroFlowbite() {
       const link = document.createElement("link");
       link.id = id;
       link.rel = "stylesheet";
-      link.href = "https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&display=swap";
+      link.href =
+        "https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&display=swap";
       document.head.appendChild(link);
     }
   }, []);
@@ -46,23 +51,23 @@ export default function EngineeringHeroFlowbite() {
 
   useEffect(() => {
     const updateFromI18n = () => {
-      const lang = i18n.language || 'en';
-      let main = t('hero.main_title');
-      if (lang && lang.startsWith('en')) {
-        main = main.replace(/[—–]/g, ' - ');
+      const lang = i18n.language || "en";
+      let main = t("hero.main_title");
+      if (lang && lang.startsWith("en")) {
+        main = main.replace(/[—–]/g, " - ");
       }
       setConfig((c) => ({
         ...c,
         main_title: main,
-        subtitle: t('hero.subtitle'),
+        subtitle: t("hero.subtitle"),
       }));
       document.documentElement.lang = lang;
-      document.documentElement.dir = lang.startsWith('ar') ? 'rtl' : 'ltr';
+      document.documentElement.dir = lang.startsWith("ar") ? "rtl" : "ltr";
     };
     updateFromI18n();
-    i18n.on && i18n.on('languageChanged', updateFromI18n);
+    i18n.on && i18n.on("languageChanged", updateFromI18n);
     return () => {
-      i18n.off && i18n.off('languageChanged', updateFromI18n);
+      i18n.off && i18n.off("languageChanged", updateFromI18n);
     };
   }, [i18n, t]);
 
@@ -70,23 +75,34 @@ export default function EngineeringHeroFlowbite() {
     const main = mainTitleRef.current;
     const sub = subtitleRef.current;
     const baseFontStack = "Arial, sans-serif";
-    const font = (config.font_family || defaultConfig.font_family) + ", " + baseFontStack;
+    const font =
+      (config.font_family || defaultConfig.font_family) + ", " + baseFontStack;
     const baseSize = config.font_size || defaultConfig.font_size;
 
     const applyStyles = () => {
-      const lang = i18n.language || 'en';
-      const isArabic = lang.startsWith('ar');
+      const lang = i18n.language || "en";
+      const isArabic = lang.startsWith("ar");
       const width = typeof window !== "undefined" ? window.innerWidth : 1024;
-      const responsiveBase = width <= 400 ? baseSize * 0.78 : width <= 640 ? baseSize * 0.88 : width <= 1024 ? baseSize * 0.96 : baseSize;
+      const responsiveBase =
+        width <= 400
+          ? baseSize * 0.78
+          : width <= 640
+          ? baseSize * 0.88
+          : width <= 1024
+          ? baseSize * 0.96
+          : baseSize;
       const headingMultiplier = width <= 640 ? 2.6 : 3.2;
       const subtitleMultiplier = width <= 640 ? 0.95 : 1.1;
-      const mainText = (config.main_title || defaultConfig.main_title).replace(/\s+/g, " ").trim();
+      const mainText = (config.main_title || defaultConfig.main_title)
+        .replace(/\s+/g, " ")
+        .trim();
       const mainTextLength = mainText.length;
-      const lengthFactor = mainTextLength > 100 ? 0.78 : mainTextLength > 70 ? 0.86 : 1.0;
+      const lengthFactor =
+        mainTextLength > 100 ? 0.78 : mainTextLength > 70 ? 0.86 : 1.0;
       const maxFont = 68;
-      const minFont = Math.max( Math.round(responsiveBase * 1.6), 14 );
+      const minFont = Math.max(Math.round(responsiveBase * 1.6), 14);
       const root = document.documentElement;
-      root.style.setProperty('--base', `${responsiveBase}px`);
+      root.style.setProperty("--base", `${responsiveBase}px`);
 
       if (main) {
         const headingText = (config.main_title || defaultConfig.main_title)
@@ -96,12 +112,20 @@ export default function EngineeringHeroFlowbite() {
         if (headingText.length === 1) {
           main.textContent = headingText[0];
         } else {
-          main.innerHTML = `<span style="display:block;line-height:1.02">${headingText[0]}</span><span style="display:block;font-weight:700;opacity:0.95;margin-top:6px">${headingText
+          main.innerHTML = `<span style="display:block;line-height:1.02">${
+            headingText[0]
+          }</span><span style="display:block;font-weight:700;opacity:0.95;margin-top:6px">${headingText
             .slice(1)
             .join("<br/>")}</span>`;
         }
         main.style.fontFamily = font;
-        const computedSize = Math.min(Math.max(Math.round(responsiveBase * headingMultiplier * lengthFactor), minFont), maxFont);
+        const computedSize = Math.min(
+          Math.max(
+            Math.round(responsiveBase * headingMultiplier * lengthFactor),
+            minFont
+          ),
+          maxFont
+        );
         main.style.fontSize = `${computedSize}px`;
         main.style.color = config.text_color || defaultConfig.text_color;
         main.style.fontWeight = 800;
@@ -131,10 +155,22 @@ export default function EngineeringHeroFlowbite() {
         sub.style.display = "block";
       }
 
-      root.style.setProperty("--ehb-primary", config.primary_color || defaultConfig.primary_color);
-      root.style.setProperty("--ehb-background", config.background_color || defaultConfig.background_color);
-      root.style.setProperty("--ehb-surface", config.secondary_surface || defaultConfig.secondary_surface);
-      root.style.setProperty("--ehb-action", config.secondary_action || defaultConfig.secondary_action);
+      root.style.setProperty(
+        "--ehb-primary",
+        config.primary_color || defaultConfig.primary_color
+      );
+      root.style.setProperty(
+        "--ehb-background",
+        config.background_color || defaultConfig.background_color
+      );
+      root.style.setProperty(
+        "--ehb-surface",
+        config.secondary_surface || defaultConfig.secondary_surface
+      );
+      root.style.setProperty(
+        "--ehb-action",
+        config.secondary_action || defaultConfig.secondary_action
+      );
     };
 
     applyStyles();
@@ -155,20 +191,37 @@ export default function EngineeringHeroFlowbite() {
   const OrangeActionButton = ({ onClick }) => {
     return (
       <StyledWrapper>
-        <button className="button" onClick={onClick} aria-label={t('hero.action')}>
-          {t('hero.action')}
-          <svg className="icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
-            <path fillRule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm4.28 10.28a.75.75 0 000-1.06l-3-3a.75.75 0 10-1.06 1.06l1.72 1.72H8.25a.75.75 0 000 1.5h5.69l-1.72 1.72a.75.75 0 101.06 1.06l3-3z" clipRule="evenodd" />
+        <button
+          className="button"
+          onClick={onClick}
+          aria-label={t("hero.action")}
+        >
+          {t("hero.action")}
+          <svg
+            className="icon"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            aria-hidden
+          >
+            <path
+              fillRule="evenodd"
+              d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm4.28 10.28a.75.75 0 000-1.06l-3-3a.75.75 0 10-1.06 1.06l1.72 1.72H8.25a.75.75 0 000 1.5h5.69l-1.72 1.72a.75.75 0 101.06 1.06l3-3z"
+              clipRule="evenodd"
+            />
           </svg>
         </button>
       </StyledWrapper>
     );
   };
 
-  const isArabic = i18n.language && i18n.language.startsWith('ar');
+  const isArabic = i18n.language && i18n.language.startsWith("ar");
 
   return (
-    <div dir={isArabic ? "rtl" : "ltr"} className="h-screen w-full overflow-hidden content-container" style={{ background: "transparent" }}>
+    <div
+      dir={isArabic ? "rtl" : "ltr"}
+      className="h-screen w-full overflow-hidden content-container"
+      style={{ background: "transparent" }}
+    >
       <style>{` 
         :root { --ehb-primary: #e67e22; --ehb-background: #000000; --ehb-surface: #95a5a6; --ehb-action: #34495e; --base: 16px }
 
@@ -328,25 +381,57 @@ export default function EngineeringHeroFlowbite() {
 
       <div className={`hero-section ${isMounted ? "is-mounted" : ""}`}>
         <div className="hero-overlay" />
-        <div className={`hero-layout ${isArabic ? '' : 'layout-ltr'}`}>
+        <div className={`hero-layout ${isArabic ? "" : "layout-ltr"}`}>
           <div className="hero-left">
-            <img src="src/assets/Images/REXNT.png" alt="REXNT" />
+            <img src={REXNT} alt="REXNT" />
             <div className="partner-logos" aria-hidden>
-              <div className="partner-bubble" style={{ animationDelay: "0ms" }} aria-label="شريك TPS">
-                <img src="src/assets/Images/TPS-logo.png" alt="TPS" />
+              <div
+                className="partner-bubble"
+                style={{ animationDelay: "0ms" }}
+                aria-label="شريك TPS"
+              >
+                <img src={TPSlogo} alt="TPS" />
               </div>
-              <div className="partner-bubble" style={{ animationDelay: "180ms" }} aria-label="شريك NSC">
-                <img src="src/assets/Images/NSC.png" alt="NSC" />
+              <div
+                className="partner-bubble"
+                style={{ animationDelay: "180ms" }}
+                aria-label="شريك NSC"
+              >
+                <img src={NSC} alt="NSC" />
               </div>
-              <div className="partner-bubble" style={{ animationDelay: "360ms" }} aria-label="شريك LOGO">
-                <img src="src/assets/Images/LOGO.png" alt="LOGO" />
+              <div
+                className="partner-bubble"
+                style={{ animationDelay: "360ms" }}
+                aria-label="شريك LOGO"
+              >
+                <img src={LOGO} alt="LOGO" />
               </div>
             </div>
           </div>
 
-          <div className={`hero-content ${isArabic ? 'content-rtl' : 'content-ltr'}`}>
-            <h1 ref={mainTitleRef} className="hero-title text-white" style={{ fontWeight: 800, marginBottom: 16, textShadow: "2px 2px 10px rgba(0,0,0,0.6)" }} />
-            <p ref={subtitleRef} className="hero-subtitle text-white" style={{ maxWidth: 800, textShadow: "1px 1px 6px rgba(0,0,0,0.45)", lineHeight: 1.6 }} />
+          <div
+            className={`hero-content ${
+              isArabic ? "content-rtl" : "content-ltr"
+            }`}
+          >
+            <h1
+              ref={mainTitleRef}
+              className="hero-title text-white"
+              style={{
+                fontWeight: 800,
+                marginBottom: 16,
+                textShadow: "2px 2px 10px rgba(0,0,0,0.6)",
+              }}
+            />
+            <p
+              ref={subtitleRef}
+              className="hero-subtitle text-white"
+              style={{
+                maxWidth: 800,
+                textShadow: "1px 1px 6px rgba(0,0,0,0.45)",
+                lineHeight: 1.6,
+              }}
+            />
             <div className="action-wrapper" style={{ marginTop: 18 }}>
               <OrangeActionButton onClick={goToDepartments} />
             </div>
@@ -379,11 +464,22 @@ const StyledWrapper = styled.div`
     cursor: pointer;
   }
 
-  .icon { width: 24px; height: 24px; transition: all 0.3s ease-in-out; }
+  .icon {
+    width: 24px;
+    height: 24px;
+    transition: all 0.3s ease-in-out;
+  }
 
-  .button:hover { transform: scale(1.05); border-color: #fff9; }
-  .button:hover .icon { transform: translate(4px); }
-  .button:hover::before { animation: shine 1.5s ease-out infinite; }
+  .button:hover {
+    transform: scale(1.05);
+    border-color: #fff9;
+  }
+  .button:hover .icon {
+    transform: translate(4px);
+  }
+  .button:hover::before {
+    animation: shine 1.5s ease-out infinite;
+  }
 
   .button::before {
     content: "";
@@ -402,8 +498,14 @@ const StyledWrapper = styled.div`
   }
 
   @keyframes shine {
-    0% { left: -100px; }
-    60% { left: 100%; }
-    to { left: 100%; }
+    0% {
+      left: -100px;
+    }
+    60% {
+      left: 100%;
+    }
+    to {
+      left: 100%;
+    }
   }
 `;
diff --git a/src/i18n.js b/src/i18n.js
index 093b686..938e077 100644
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -3,6 +3,7 @@ import { initReactI18next } from "react-i18next";
 import LanguageDetector from "i18next-browser-languagedetector";
 
 const resources = {
+<<<<<<< HEAD
     en: {
         translation: {
             nav: {
@@ -106,6 +107,330 @@ Work Areas: Ready to implement works in all Syrian governorates`,
                     description: "Our team is available to answer your inquiries and provide the best solutions for your projects",
                     badges: ["Direct call", "Technical support", "Quick response", "Integrated solutions"]
                 }
+=======
+  en: {
+    translation: {
+      dir: "ltr",
+      nav: {
+        home: "Home",
+        services: "Services",
+        about: "About",
+        contact: "Contact"
+      },
+      hero: {
+        main_title:
+          "When vision asks for a consultant, and the planner needs a strategic executor… we become the decision — leading from vision to delivery",
+        subtitle:
+          "Integrated solutions including design, implementation, operation and maintenance\nfor industrial and civil projects, following the latest standards and technologies",
+        action: "Explore Departments"
+      },
+      home: {
+        phrases: [
+          "Construction of strategic fuel stations and warehouses",
+          "Development of fuel stations",
+          "Manufacturing fuel tanks and related services",
+          "Electrical works",
+          "Specialized technical tests",
+          "Engineering studies and metal and concrete constructions",
+          "Fuel tank cleaning"
+        ],
+        subtitle1: "Your smart engineering partner in the fuel and energy sector",
+        subtitle2: "Integrated solutions for building, developing and maintaining fuel stations",
+        contactUs: "Contact Us"
+      },
+      about: {
+        mainTitle: "About Us",
+        subtitle: "The journey of engineering and technical excellence, where experience meets innovation",
+        cards: {
+          aboutUs: {
+            title: "About Us",
+            description: `Our goal is to provide integrated engineering and technical solutions that include design, implementation, supervision, and management of industrial and service projects starting from studies and planning, through implementation and installation, to operation and maintenance. Supplying and installing equipment, machines, production lines, and spare parts. Representing companies and agencies, and participating in tenders and auctions with both public and private sectors in accordance with applicable laws and regulations.`,
+            features: [
+              "Implementation of civil, architectural, metal, mechanical, and electrical works",
+              "Control, design, development, and implementation of systems, software applications, and databases according to each project's requirements, including automation and control systems",
+              "Development and implementation of specialized systems for managing and operating industrial facilities and fuel stations",
+              "Technical inspection of all types"
+            ]
+          },
+          vision: {
+            title: "Our Vision",
+            description: `To be the trusted technical engineering partner in implementing and managing industrial, residential, and oil projects, and contributing to the development of infrastructure and productive sectors through modern and sustainable solutions.`,
+            features: [
+              "Trusted Engineering Partner",
+              "Infrastructure Development",
+              "Sustainable and Modern Solutions",
+              "Leadership in the Engineering Sector"
+            ]
+          },
+          mission: {
+            title: "Our Mission",
+            description: `Providing engineering services, executive studies, and integrated supervision with the highest standards of quality and safety, through qualified cadres and specialized expertise, while committing to time and cost and achieving the highest added value for our clients.`,
+            features: [
+              "Highest Standards of Quality and Safety",
+              "Commitment to Time and Cost",
+              "Specialized and Qualified Teams",
+              "Achieving Added Value for Clients"
+            ]
+          },
+          values: {
+            title: "Our Values",
+            description: `We believe in constant values that guide our work and our relationships with clients and partners: Quality and excellence in everything we offer, professional integrity in dealing, commitment to sustainability, and environmental and social responsibility.`,
+            features: [
+              "Professional Quality",
+              "Occupational Safety",
+              "Sustainability and Responsibility",
+              "Continuous Development",
+              "Transparency and Building Trust"
+            ]
+          }
+        },
+        buttons: {
+          viewDetails: "Click to view details",
+          next: "Next",
+          prev: "Previous",
+          close: "Close"
+        }
+      },
+      contact: {
+        title: "Contact Us",
+        subtitle: "Ready to serve you around the clock",
+        address: "Address",
+        addressText: `Headquarters: Syria - Damascus - Baramkeh
+Flexible Offices: Homs - Fairouzeh, Aleppo - Industrial Zone, Tartous - Dubai Street
+Work Areas: Ready to implement works in all Syrian governorates`,
+        phone: "Phone Numbers",
+        email: "Email",
+        formTitle:
+          "From vision to execution... a partnership that creates successful projects. One message could be the turning point in executing your project successfully.",
+        name: "Name",
+        namePlaceholder: "Enter your name",
+        emailPlaceholder: "example@example.com",
+        message: "Message",
+        messagePlaceholder: "Write your message here",
+        send: "Send",
+        successMessage: "Message sent successfully",
+        errorMessage: "An error occurred while sending",
+        contactSection: {
+          title: "Ready to serve you around the clock",
+          description: "Our team is available to answer your inquiries and provide the best solutions for your projects",
+          badges: ["Direct call", "Technical support", "Quick response", "Integrated solutions"]
+        }
+      },
+      services: {
+        pageTitle: "Our Services",
+        summary: "Work Summary",
+        mainHeading: "Extensive accumulated expertise in executing industrial and construction projects",
+        description: "Implementing integrated projects with partners according to the highest standards of quality and safety",
+        features: {
+          industrial: {
+            title: "Design and implementation of integrated industrial production lines",
+            description:
+              "Including iron, cement, food, pharmaceuticals, and plastics sectors with the highest quality and safety standards"
+          },
+          residential: {
+            title: "Implementation of integrated residential and service projects",
+            description:
+              "Prefabricated housing units, service and administrative buildings, adhering to the highest engineering standards"
+          },
+          infrastructure: {
+            title: "Construction and maintenance of infrastructure facilities",
+            description: "Fuel stations, oil facilities, water stations, and water pumping and treatment systems"
+          },
+          maintenance: {
+            title: "Comprehensive operation and maintenance of facilities",
+            description: "Advanced automation systems, station management, 24/7 maintenance, and continuous facility development"
+          }
+        }
+      },
+      departments: {
+        heading: "Departments",
+        list: [
+          "Industrial Facilities & Production Lines",
+          "Residential & Service Facilities",
+          "Building Rehabilitation & Maintenance",
+          "Fuel Stations & Oil Facilities Maintenance",
+          "Technical & Engineering Inspection",
+          "Strategic Projects",
+          "Metal Works & Industrial Support",
+          "Services & Logistic Support",
+          "Automation & Control"
+        ]
+      },
+      footer: {
+        copyright: "© {{year}} REXNT - All rights reserved"
+      },
+
+      // main department block used by the component
+      department: {
+        hero: {
+          expertiseBadge: "Department Expertise",
+          expertiseTitle: "Integrated expertise for industrial facilities",
+          expertiseSubtitle: "This section covers studies, design, implementation and supervision of industrial production lines and facilities.",
+          servicesBadge: "Services",
+          servicesTitle: "Our Services",
+          servicesSubtitle: "Maintenance, rehabilitation and technical support services for industrial facilities.",
+          worksBadge: "Executed Works",
+          worksTitle: "Executed Works",
+          worksSubtitle: "Showcasing completed projects and timeline.",
+          heroAlt: "Industrial Facilities"
+        },
+        sectionTitle: "Industrial Facilities & Production Lines Department",
+        dir: "ltr",
+        buttons: {
+          expertise: "Department Expertise",
+          services: "Services",
+          works: "Executed Works"
+        },
+        clickForDetails: "Click to view details",
+        backToMenu: "Back to main menu",
+        expertiseItems: [
+          "Feasibility studies, profitability and risk analysis for industrial and engineering projects",
+          "Preliminary, final and detailed engineering studies",
+          "Execution and shop drawing design",
+          "Construction of civil, architectural and metal works for industrial facilities",
+          "Manufacturing and installation of production lines (local and imported)",
+          "Mechanical, electrical and control systems implementation",
+          "Supervision of trial operation and technical staff training"
+        ],
+        servicesItems: [
+          "Routine and preventive maintenance",
+          "Emergency maintenance and fault resolution",
+          "Rehabilitation and technical upgrades",
+          "Technical condition assessment and inspection",
+          "Engineering inspection according to international standards",
+          "Improving operational efficiency and reducing downtime costs"
+        ],
+        defaultProjects: [
+          {
+            year: "1999-2015",
+            items: [
+              "Design, manufacture and installation of rolling and mill structures (Al-Wahib projects)",
+              "Metal works for Al-Arabiya and Al-International rolling lines"
+            ]
+          },
+          { year: "2001", items: ["Operation and maintenance works for Al-Wahib stock line"] },
+          { year: "2002", items: ["Operation and maintenance works for Al-Arabiya rolling line"] },
+          { year: "2004", items: ["Various rolling and manufacturing works"] },
+          {
+            year: "2016",
+            items: ["Design and implementation of rolling lines (Al-Anam)", "Industrial turnkey projects design and execution"]
+          },
+          { year: "2016-2017", items: ["Global training 600 t/day", "Food industry training"] },
+          { year: "2017", items: ["Preliminary study for Al-Shams plant (Al-Asafi - Homs)"] },
+          {
+            year: "2019",
+            items: ["Rehabilitation and maintenance of loading and stock systems at Tartous port", "Preliminary study for Al-Shams measurement systems"]
+          },
+          { year: "2020", items: ["Completion of preliminary study for Al-Shams measurement systems"] },
+          { year: "2021", items: ["Design works for Al-Muttahida plant - Abu Al-Shamat"] },
+          { year: "2022", items: ["Completion of facilitation works for Al-Muttahida", "Al-Muthanna rapid manufacturing plant - Tartous"] },
+          { year: "2023", items: ["Various manufacturing and rolling projects"] }
+        ]
+      },
+
+      // department detail english sections (optional per-department)
+      departmentDetail2: {
+        hero: {
+          defaultTitle: "Residential & Service Facilities Department",
+          expertiseBadge: "Department Expertise",
+          expertiseTitle: "Integrated solutions for residential and service projects",
+          expertiseSubtitle: "This department implements residential and service projects of various types, and includes:",
+          worksBadge: "Executed Works",
+          worksTitle: "Executed Works",
+          worksSubtitle: "Showcasing our projects and the timeline of executed works",
+          heroAlt: "Residential and service facilities"
+        },
+        buttons: {
+          "1": "Department Expertise",
+          "3": "Executed Works",
+          clickForDetails: "Click to view details",
+          backToMenu: "Back to main menu"
+        },
+        scroll: {
+          ariaLabel: "Scrollable timeline",
+          prev: "Previous",
+          next: "Next"
+        },
+        projectsTimeline: {
+          defaultProjects: [
+            { year: "2016", items: ["Implementation of service and administrative buildings and rehabilitation projects."] },
+            { year: "2017", items: ["Construction of an exhibition city and car offices (200 offices) - Lattakia Industrial City"] },
+            { year: "2023", items: ["Design and implementation of a 1,000-unit residential project (shelter housing) supervised by the UAE Red Crescent"] }
+          ]
+        },
+        expertiseItems: [
+          "Implementation of residential complexes and service zones.",
+          "Administrative and commercial buildings.",
+          "Prefabricated buildings, sandwich panels, hangars, mobile caravans and cold rooms.",
+          "Comprehensive civil and architectural works.",
+          "Interior and exterior finishing.",
+          "Commitment to quality standards and occupational safety during execution."
+        ],
+        ui: { servicesProfessional: "Comprehensive professional services", clickToView: "Click to view details" }
+      },
+
+      departmentDetail3: {
+        hero: {
+          defaultTitle: "Building Rehabilitation & Maintenance Department",
+          expertiseBadge: "Department Expertise",
+          expertiseTitle: "Integrated rehabilitation and maintenance solutions",
+          expertiseSubtitle:
+            "This department delivers comprehensive maintenance and rehabilitation services for residential, service, administrative and industrial buildings, including:",
+          worksBadge: "Executed Works",
+          worksTitle: "Executed Works",
+          worksSubtitle: "Showcasing our projects and the timeline of executed works",
+          heroAlt: "Building rehabilitation and maintenance"
+        },
+        buttons: {
+          "1": "Department Expertise",
+          "3": "Executed Works",
+          clickForDetails: "Click to view details",
+          backToMenu: "Back to main menu"
+        },
+        projectsTimeline: {
+          defaultProjects: [
+            { year: "2019–2022", items: ["Maintenance and rehabilitation of service centers, regional buildings, and ATM rooms for telecommunications operators"] },
+            { year: "2023", items: ["Maintenance of administrative facilities and buildings for commercial clients"] }
+          ]
+        },
+        expertiseItems: [
+          "Routine and emergency maintenance.",
+          "Rehabilitation and restoration (civil & architectural works).",
+          "Electrical, mechanical and control systems works.",
+          "Thermal and waterproofing insulation works.",
+          "Facility management and long-term maintenance contracts.",
+          "Adherence to quality and occupational safety standards in execution."
+        ],
+        ui: { servicesProfessional: "Comprehensive professional services", clickToView: "Click to view details" }
+      },
+
+      departmentDetail4: {
+        hero: {
+          defaultTitle: "Fuel Stations & Oil Facilities Department",
+          expertiseBadge: "Department Expertise",
+          expertiseTitle: "Integrated fuel stations and oil facilities services",
+          expertiseSubtitle:
+            "This department specializes in design, construction, maintenance and technical services for fuel stations and strategic fuel facilities, including:",
+          worksBadge: "Executed Works",
+          worksTitle: "Executed Works",
+          worksSubtitle: "Showcasing our projects and the timeline of executed works",
+          heroAlt: "Fuel stations and oil facilities"
+        },
+        buttons: {
+          "1": "Department Expertise",
+          "3": "Executed Works",
+          clickForDetails: "Click to view details",
+          backToMenu: "Back to main menu"
+        },
+        projectsTimeline: {
+          defaultProjects: [
+            {
+              year: "2009",
+              items: [
+                "Study and supervision of natural gas treatment plant at Adra smelting plant 2009",
+                "Study and supervision of gas separation stations at Adra smelting plant 2009"
+              ]
+>>>>>>> d3f4bb9349101680ca4ebeae297bd79a58006631
             },
             services: {
                 pageTitle: "Our Services",
@@ -620,6 +945,7 @@ Work Areas: Ready to implement works in all Syrian governorates`,
                 backToMenu: "Back to main menu"
             }
         }
+<<<<<<< HEAD
     },
     ar: {
         translation: {
@@ -628,6 +954,35 @@ Work Areas: Ready to implement works in all Syrian governorates`,
                 services: "الخدمات",
                 about: "من نحن",
                 contact: "تواصل معنا"
+=======
+      },
+
+      departmentDetail5: {
+        hero: {
+          defaultTitle: "Technical & Engineering Inspection Department",
+          expertiseBadge: "Department Expertise",
+          expertiseTitle: "NDT & Technical Inspection Services",
+          expertiseSubtitle:
+            "This department provides comprehensive non-destructive testing (NDT), welding inspection and technical verification services according to international standards, including:",
+          worksBadge: "Executed Works",
+          worksTitle: "Executed Works",
+          worksSubtitle: "Showcasing our inspection and testing projects and timeline",
+          heroAlt: "Inspection and testing services"
+        },
+        buttons: {
+          "1": "Department Expertise",
+          "3": "Executed Works",
+          clickForDetails: "Click to view details",
+          backToMenu: "Back to main menu"
+        },
+        projectsTimeline: {
+          defaultProjects: [
+            {
+              year: "2009-2010",
+              items: [
+                "Review and verification of engineering & technological drawings for rolling and smelting lines — Manufacturer: Danieli (Italy) 2009-2010"
+              ]
+>>>>>>> d3f4bb9349101680ca4ebeae297bd79a58006631
             },
             hero: {
                 main_title: "عندما تطلب الرؤية مستشارًا, ويحتاج المخطط منفذًا استراتيجيًا…نكون القرار بالقيادة من الرؤية حتى التسليم",
@@ -701,11 +1056,397 @@ Work Areas: Ready to implement works in all Syrian governorates`,
                     close: "إغلاق"
                 }
             },
+<<<<<<< HEAD
             contact: {
                 title: "تواصل معنا",
                 subtitle: "مستعدون لخدمتك على مدار الساعة",
                 address: "العنوان",
                 addressText: `المقر الرئيسي: سوريا - دمشق - البرامكة
+=======
+            {
+              year: "2022",
+              items: ["Technical inspection and testing of furnace foundations and structure at Al-Muttahida Cement Plant - Abu Al-Shamat (2022)"]
+            },
+            {
+              year: "2017-2019",
+              items: ["Technical inspection and testing of Mahrouqat tanks (Sadkop / Shanshar - Buqa - Adra) (2017-2019)"]
+            },
+            {
+              year: "2023-2024",
+              items: ["NDT inspection of MTN-SYRIATEL strategic and secondary fuel depot tanks (2023-2024)"]
+            }
+          ]
+        },
+        expertiseItems: [
+          "Non-Destructive Testing (NDT) services for metallic components.",
+          "Welding inspection including:",
+          "Ultrasonic Testing (UT).",
+          "Magnetic Particle Testing (MT).",
+          "Penetrant Testing (PT).",
+          "Visual Testing (VT) and welding quality assessment.",
+          "Verification and matching of technological and engineering drawings for metal fabrication, mechanical, electrical and control systems.",
+          "Equipment readiness & conformity checks to international standards.",
+          "Strict adherence to safety and quality standards during inspections."
+        ],
+        ui: {
+          servicesProfessional: "Comprehensive professional services",
+          clickToView: "Click to view details"
+        }
+      },
+
+      departmentDetail6: {
+        hero: {
+          defaultTitle: "Strategic Projects Department",
+          expertiseBadge: "Department Expertise",
+          expertiseTitle: "Strategic projects, water & energy systems",
+          expertiseSubtitle: "This department handles large-scale strategic projects: water treatment, pumping stations, solar power plants and special industrial rehabilitation projects.",
+          worksBadge: "Executed Works",
+          worksTitle: "Executed Works",
+          worksSubtitle: "Showcasing our strategic projects and timeline",
+          heroAlt: "Strategic projects and water-energy systems"
+        },
+        buttons: {
+          "1": "Department Expertise",
+          "3": "Executed Works",
+          clickForDetails: "Click to view details",
+          backToMenu: "Back to main menu"
+        },
+        backToMenu: "Back to main menu",
+        scroll: {
+          ariaLabel: "Scrollable timeline",
+          prev: "Previous",
+          next: "Next"
+        },
+        projectsTimeline: {
+          defaultProjects: [
+            {
+              year: "1999-2015",
+              items: [
+                "Execution of industrial water treatment plants for steel smelting and rolling factories — multiple projects (1999-2015)."
+              ]
+            },
+            {
+              year: "2009",
+              items: [
+                "Conversion substation 66/20 kV for steel rolling works (2009)."
+              ]
+            },
+            {
+              year: "2015",
+              items: [
+                "Supervision of 230/66 & 66/20 kV substations for smelting plants (2015)."
+              ]
+            },
+            {
+              year: "2018",
+              items: [
+                "Drinking water network implementation for 22 villages in northern Lattakia — 73 km (2018)."
+              ]
+            },
+            {
+              year: "2019",
+              items: [
+                "Phosphate facility maintenance at Tartous port (2019)."
+              ]
+            },
+            {
+              year: "2021",
+              items: [
+                "Feasibility and rehabilitation study for rock salt mine in Deir ez-Zor (2021)."
+              ]
+            },
+            {
+              year: "2022",
+              items: [
+                "Study and implementation of pumping & filtration station for 16 Tishreen Dam (Lattakia) (2022)."
+              ]
+            },
+            {
+              year: "2023",
+              items: [
+                "Design and installation of 3.6 MW solar power array for Green Coast mill (2023)."
+              ]
+            }
+          ]
+        },
+        expertiseItems: [
+          "Design and implementation of industrial and potable water treatment plants.",
+          "Electrical substations and high-voltage systems implementation.",
+          "Solar power plant studies and deployment.",
+          "Large-scale project supervision and commissioning.",
+          "Environmental compliance and operational efficiency improvements."
+        ],
+        ui: {
+          servicesProfessional: "Comprehensive professional services",
+          clickToView: "Click to view details"
+        }
+      },
+
+      departmentDetail7: {
+        hero: {
+          defaultTitle: "Metal Works & Industrial Support Department",
+          expertiseBadge: "Department Expertise",
+          expertiseTitle: "Metal fabrication, structures and industrial support",
+          expertiseSubtitle: "This department specializes in metal works, structural fabrication, heavy lifting equipment and industrial support services.",
+          worksBadge: "Executed Works",
+          worksTitle: "Executed Works",
+          worksSubtitle: "Overview of metal works projects and timeline",
+          heroAlt: "Metal works and industrial support"
+        },
+        buttons: {
+          "1": "Department Expertise",
+          "2": "Executed Works",
+          clickForDetails: "Click to view details",
+          backToMenu: "Back to main menu"
+        },
+        projectsTimeline: {
+          defaultProjects: [
+            {
+              year: "1999-2009",
+              items: [
+                "Metal structures for steel rolling factories: Al-Wahib, Al-Arabiya, Al-International."
+              ]
+            },
+            {
+              year: "2015",
+              items: [
+                "Metal works for the United Cement Factory construction project."
+              ]
+            },
+            {
+              year: "2021",
+              items: [
+                "Manufacture and installation of metal structures, bridge gantries and industrial water tanks."
+              ]
+            },
+            {
+              year: "2022",
+              items: [
+                "Construction of heavy-duty metal and concrete hangars."
+              ]
+            }
+          ]
+        },
+        expertiseItems: [
+          "Design, manufacture and erection of metal structures.",
+          "Execution of metal works for factories and industrial facilities.",
+          "Manufacture and installation of moving and fixed overhead cranes.",
+          "Production of industrial water tanks and fiberglass tanks.",
+          "Integrated industrial support solutions for large projects."
+        ],
+        ui: { servicesProfessional: "Comprehensive professional services", clickToView: "Click to view details" }
+      },
+
+      departmentDetail8: {
+        hero: {
+          defaultTitle: "Services & Logistic Support Department",
+          expertiseBadge: "Department Expertise",
+          expertiseTitle: "Logistics, supply and project operational support",
+          expertiseSubtitle: "This department provides comprehensive logistics and supply services: transport, accommodation, warehousing and operational support for multi-site projects.",
+          worksBadge: "Executed Works",
+          worksTitle: "Executed Works",
+          worksSubtitle: "Showcase of our logistical projects and delivered services",
+          heroAlt: "Logistics and support services"
+        },
+        buttons: {
+          "1": "Department Expertise",
+          "2": "Executed Works",
+          clickForDetails: "Click to view details",
+          backToMenu: "Back to main menu"
+        },
+        projectsTimeline: {
+          defaultProjects: [
+            {
+              year: "2009-2024",
+              items: [
+                "Provision and supplying of materials and equipment for industrial projects."
+              ]
+            },
+            {
+              year: "2024",
+              items: [
+                "Furnishing warehouses and administrative buildings with furniture, equipment and systems."
+              ]
+            },
+            {
+              year: "2024",
+              items: [
+                "Logistics management for multi-site projects."
+              ]
+            },
+            {
+              year: "2023",
+              items: [
+                "Engineering studies and execution of 1,000 pre-fabricated shelter housing units for earthquake victims."
+              ]
+            }
+          ]
+        },
+        expertiseItems: [
+          "Logistics services including transport fleets, mobile and fixed accommodation for staff and experts.",
+          "Supply chain management.",
+          "Provision of equipment and raw materials.",
+          "Coordination with suppliers and manufacturers.",
+          "Warehouse and inventory management.",
+          "Operational support for industrial, oil and engineering projects."
+        ],
+        ui: {
+          servicesProfessional: "Comprehensive professional services",
+          clickToView: "Click to view details"
+        },
+        backToMenu: "Back to main menu"
+      },
+
+      departmentDetail9: {
+        hero: {
+          defaultTitle: "Automation & Control Department",
+          expertiseBadge: "Department Expertise",
+          expertiseTitle: "Automation, control systems & digital transformation",
+          expertiseSubtitle: "This department delivers industrial automation, SCADA/PLC systems, FMS deployments and process digitalization for industrial and oil facilities.",
+          worksBadge: "Executed Works",
+          worksTitle: "Executed Works",
+          worksSubtitle: "Examples of automation, SCADA and control projects we've delivered.",
+          heroAlt: "Automation and control systems"
+        },
+        buttons: {
+          "1": "Department Expertise",
+          "2": "Executed Works",
+          clickForDetails: "Click to view details",
+          backToMenu: "Back to main menu"
+        },
+        projectsTimeline: {
+          defaultProjects: [
+            {
+              year: "1999-2015",
+              items: [
+                "Automation of control & operation systems for steel smelting and rolling plants (1999-2015)."
+              ]
+            },
+            {
+              year: "2023",
+              items: [
+                "Automation of industrial equipment monitoring, calibration and tablet-based operation interfaces."
+              ]
+            },
+            {
+              year: "2023-2024",
+              items: [
+                "Design and deployment of FMS for strategic fuel depots (currently operational)."
+              ]
+            },
+            {
+              year: "2024",
+              items: [
+                "Automation of production lines (examples: AlAnam organic bacteria production, Sarout veterinary medicines).",
+                "ERP implementations for companies (PEA - REXOS)."
+              ]
+            }
+          ]
+        },
+        expertiseItems: [
+          "Design and implementation of industrial control systems.",
+          "Automation of production lines and operational monitoring with supply of equipment.",
+          "SCADA and PLC system deployments.",
+          "Development and deployment of Fuel Management Systems (FMS).",
+          "Integration of operational systems with software platforms.",
+          "Fault analysis, predictive maintenance and operational efficiency improvements."
+        ],
+        ui: {
+          servicesProfessional: "Comprehensive professional services",
+          clickToView: "Click to view details"
+        },
+        backToMenu: "Back to main menu"
+      }
+    }
+  },
+
+  ar: {
+    translation: {
+      dir: "rtl",
+      nav: {
+        home: "الرئيسية",
+        services: "الخدمات",
+        about: "من نحن",
+        contact: "تواصل معنا"
+      },
+      hero: {
+        main_title: "عندما تطلب الرؤية مستشارًا, ويحتاج المخطط منفذًا استراتيجيًا…نكون القرار بالقيادة من الرؤية حتى التسليم",
+        subtitle: "حلول متكاملة تشمل التصميم، التنفيذ، التشغيل، والصيانة\nللمشاريع الصناعية والمدنية، وفق أحدث المعايير والتقنيات",
+        action: "تعرف على أقسامنا"
+      },
+      home: {
+        phrases: [
+          "إنشاء محطات ومستودعات الوقود الاسترتيجية",
+          "تطوير محطات الوقود",
+          "تصنيع خزانات الوقود والخدمات المرافقة لها",
+          "الأعمال الكهربائية",
+          "اختبارات فنية متخصصة",
+          "الدراسات الهندسية والإنشاءات المعدنية والبيتونية",
+          "تنظيف خزانات الوقود"
+        ],
+        subtitle1: "شريكك الهندسي الذكي في قطاع الوقود والطاقة",
+        subtitle2: "حلول متكاملة لبناء وتطوير وصيانة محطات الوقود",
+        contactUs: "تواصل معنا"
+      },
+      about: {
+        mainTitle: "من نحن",
+        subtitle: "رحلة التميز الهندسي والتقني، هنا حيث تلتقي الخبرة بالابتكار",
+        cards: {
+          aboutUs: {
+            title: "من نحن",
+            description: `تتمثل غايتنا في تقديم حلول هندسية وتقنية متكاملة تشمل تصميم و تنفيذ وإشراف وإدارة المشاريع الصناعية والخدمية ابتداءً من الدراسات والتخطيط مروراً بالتنفيذ والتركيب وصولاً إلى التشغيل والصيانة، توريد و تركيب المعدات و الآلات و خطوط الإنتاج و قطع الصيانة، تمثيل الشركات و الوكالات و المشاركة في المناقصات و المزايدات مع القطاعين العام و الخاص و ذلك وفق القوانين و الأنظمة المعمول بها`,
+            features: [
+              "تنفيذ الأعمال المدنية والمعمارية و المعدنية و الميكانيكية و الكهربائية ",
+              "التحكم و تصميم و تطوير و تنفيذ الأنظمة و التطبيقات البرمجية و قواعد البيانات حسب متطلبات كل مشروع بما في ذلك أنظمة الأتمتة و التحكم",
+              "تطوير و تنفيذ أنظمة متخصصة لإدارة و تشغيل المنشآت الصناعية و محطات الوقود ",
+              "التفتيش الفني بكل أنواعه"
+            ]
+          },
+          vision: {
+            title: "رؤيتنا",
+            description: `أن نكون الشريك الهندسي التقني الموثوق في تنفيذ و إدارة المشاريع الصناعية والسكنية و النفطية والمساهمة في تطوير البنية التحتية والقطاعات الإنتاجية عبر حلول حديثة ومستدامة.`,
+            features: [
+              "الشريك الهندسي الموثوق",
+              "تنمية البنية التحتية",
+              "حلول مستدامة وحديثة",
+              "الريادة في القطاع الهندسي"
+            ]
+          },
+          mission: {
+            title: "رسالتنا",
+            description: `تقديم خدمات هندسية ودراسات تنفيذية وإشراف متكامل بأعلى معايير الجودة والسلامة، من خلال كوادر مؤهلة وخبرات متخصصة، مع الالتزام بالوقت والتكلفة وتحقيق أعلى قيمة مضافة لعملائنا.`,
+            features: [
+              "أعلى معايير الجودة والسلامة",
+              "الالتزام بالوقت والتكلفة",
+              "فرق عمل متخصصة ومؤهلة",
+              "تحقيق القيمة المضافة للعملاء"
+            ]
+          },
+          values: {
+            title: "قيمنا",
+            description: `نؤمن بقيم ثابتة توجه أعمالنا وعلاقاتنا مع العملاء والشركاء: الجودة والتميز في كل ما نقدمه، النزاهة المهنية في التعامل، الالتزام بالاستدامة والمسؤولية البيئية والاجتماعية.`,
+            features: [
+              "الجودة الاحترافية",
+              "السلامة المهنية",
+              "الاستدامة والمسؤولية",
+              "التطوير المستمر",
+              "الشفافية و بناء الثقت"
+            ]
+          }
+        },
+        buttons: {
+          viewDetails: "إضغط لعرض التفاصيل",
+          next: "التالي",
+          prev: "السابق",
+          close: "إغلاق"
+        }
+      },
+      contact: {
+        title: "تواصل معنا",
+        subtitle: "مستعدون لخدمتك على مدار الساعة",
+        address: "العنوان",
+        addressText: `المقر الرئيسي: سوريا - دمشق - البرامكة
+>>>>>>> d3f4bb9349101680ca4ebeae297bd79a58006631
 المكاتب المرنة: حمص - فيروزة، حلب - المنطقة الصناعية، طرطوس - شارع دبي
 مناطق العمل: جاهزين لتنفيذ الأعمال في جميع المحافظات السورية`,
                 phone: "أرقام الاتصال",
@@ -1226,10 +1967,578 @@ Work Areas: Ready to implement works in all Syrian governorates`,
                 backToMenu: "العودة للقائمة الرئيسية"
             }
         }
+<<<<<<< HEAD
+=======
+      },
+      services: {
+        pageTitle: "خدماتنا",
+        summary: "خلاصة أعمالنا",
+        mainHeading: "خبرات تراكمية واسعة في تنفيذ المشاريع الصناعية والإنشائية",
+        description: "تنفيذ مشاريع متكاملة مع الشركاء بأعلى معايير الجودة والسلامة",
+        features: {
+          industrial: {
+            title: "تصميم وتنفيذ خطوط إنتاج صناعية متكاملة",
+            description: "تشمل قطاعات الحديد، الإسمنت، الغذائيات، الأدوية، والبلاستيك بأعلى معايير الجودة والسلامة"
+          },
+          residential: {
+            title: "تنفيذ مشاريع سكنية وخدمية متكاملة",
+            description: "وحدات سكنية مسبقة الصنع، مباني خدمية وإدارية، مع الالتزام بأعلى المعايير الهندسية"
+          },
+          infrastructure: {
+            title: "إنشاء وصيانة مرافق البنية التحتية",
+            description: "محطات الوقود، المنشآت النفطية، المحطات المائية، وأنظمة ضخ ومعالجة المياه"
+          },
+          maintenance: {
+            title: "تشغيل وصيانة متكاملة للمنشآت",
+            description: "أنظمة أتمتة متقدمة، إدارة محطات، صيانة على مدار الساعة، وتطوير مستمر للمرافق"
+          }
+        }
+      },
+      departments: {
+        heading: "أقسامنا",
+        list: [
+          "قسم إنشاء وصيانة المنشآت الصناعية وخطوط الإنتاج",
+          "قسم تنفيذ المرافق السكنية والخدمية",
+          "قسم اعادة تأهيل وصيانة المباني",
+          "قسم محطات الوقود وصيانة المنشآت النفطية",
+          "قسم التفتيش والفحص الفني والهندسي",
+          "قسم المشاريع الاستراتيجية",
+          "قسم الاعمال المعدنية والدعم الصناعي",
+          "قسم الخدمات والدعم اللوجستي",
+          "قسم الاتمتة والتحكم"
+        ]
+      },
+      footer: {
+        copyright: "© {{year}} REXNT - جميع الحقوق محفوظة"
+      },
+
+      // main Arabic department block
+      department: {
+        hero: {
+          expertiseBadge: "اختصاص القسم",
+          expertiseTitle: "اختصاصات وحلول للمرافق الصناعية",
+          expertiseSubtitle: "يُغطي هذا القسم الدراسات، التصميم، التنفيذ والإشراف على خطوط الإنتاج والمنشآت الصناعية.",
+          servicesBadge: "الخدمات",
+          servicesTitle: "خدماتنا",
+          servicesSubtitle: "الصيانة، التأهيل والدعم الفني للمنشآت الصناعية.",
+          worksBadge: "الأعمال المنفذة",
+          worksTitle: "الأعمال المنفذة",
+          worksSubtitle: "عرض للمشروعات المنجزة وخط الزمن الخاص بها.",
+          heroAlt: "المنشآت الصناعية"
+        },
+        sectionTitle: "قسم إنشاء وصيانة المنشآت الصناعية وخطوط الإنتاج",
+        dir: "rtl",
+        buttons: {
+          expertise: "اختصاص القسم",
+          services: "الخدمات",
+          works: "الأعمال المنفذة"
+        },
+        clickForDetails: "انقر للاطّلاع على التفاصيل",
+        backToMenu: "العودة للقائمة الرئيسية",
+        expertiseItems: [
+          "دراسات الجدوى وتحليل الربحية والمخاطر للمشاريع الصناعية والهندسية",
+          "الدراسات الهندسية الأولية والنهائية والتفصيلية",
+          "تصميم المخططات التنفيذية ورسومات الورشة",
+          "تنفيذ الأعمال المدنية والمعمارية والمعدنية للمنشآت الصناعية",
+          "تصنيع وتركيب خطوط الإنتاج محليًا أو تركيب خطوط مستوردة",
+          "تنفيذ الأعمال الميكانيكية والكهربائية وأنظمة التحكم",
+          "الإشراف على التشغيل التجريبي وتدريب الكوادر الفنية"
+        ],
+        servicesItems: [
+          "الصيانة الدورية والوقائية",
+          "الصيانة الطارئة ومعالجة الأعطال",
+          "إعادة التأهيل والتحديث الفني للمنشآت",
+          "فحص وتقييم الحالة الفنية للتجهيزات والآلات",
+          "أعمال التفتيش الفني والهندسي وفق المعايير الدولية",
+          "رفع كفاءة التشغيل وتقليل تكاليف التوقف"
+        ],
+        defaultProjects: [
+          {
+            year: "1999-2015",
+            items: [
+              "دراسة وتصميم وتنفيذ المنشآت والهياكل لخطوط الدرفلة واللف (مشاريع الوهيب)",
+              "أعمال معدنية لخطوط درفلة العربية والدرفلة الدولية"
+            ]
+          },
+          { year: "2001", items: ["أعمال تشغيل وصيانة لدورة الوهيب"] },
+          { year: "2002", items: ["أعمال تشغيل وصيانة لدورة العربية للدرفلة"] },
+          { year: "2004", items: ["أعمال متنوعة في مجال الدرفلة والتصنيع"] },
+          {
+            year: "2016",
+            items: ["تصميم وتنفيذ خطوط درفلة (الأنام)", "مشروعات تسليم مفتاح صناعية"]
+          },
+          { year: "2016-2017", items: ["تدريب عالمي 600 طن/يوم", "تدريب للصناعات الغذائية"] },
+          { year: "2017", items: ["دراسة تأهيلية لمعطف الشـمس (العسافي - حمص)"] },
+          {
+            year: "2019",
+            items: ["إعادة تأهيل وصيانة أنظمة التحميل والتخزين في مرفأ طرطوس", "دراسة تأهيلية لأنظمة قياس الشمس"]
+          },
+          { year: "2020", items: ["استكمال الدراسة التأهيلية لأنظمة قياس الشمس"] },
+          { year: "2021", items: ["أعمال تصميم لمعمل المتحدة - أبو الشامات"] },
+          { year: "2022", items: ["استكمال أعمال التيسير لمعمل المتحدة", "معمل المثنى للتصنيع السريع - طرطوس"] },
+          { year: "2023", items: ["مشروعات متنوعة في مجال التصنيع والدرفلة"] }
+        ]
+      },
+
+      departmentDetail2: {
+        hero: {
+          defaultTitle: "قسم تنفيذ المرافق السكنيه والخدمية",
+          expertiseBadge: "اختصاص القسم",
+          expertiseTitle: "حلول متكاملة للمشاريع السكنية والخدمية",
+          expertiseSubtitle: "يتضمن هذا القسم تنفيذ المشاريع السكنية والخدمية بمختلف أنواعها، ويشمل:",
+          worksBadge: "الاعمال المنفذة",
+          worksTitle: "الاعمال المنفذة",
+          worksSubtitle: "عرض مشروعاتنا وخط الزمن الخاص بالأعمال المنفذة",
+          heroAlt: "مرافق سكنية وخدمية"
+        },
+        buttons: {
+          "1": "اختصاص القسم",
+          "3": "الاعمال المنفذة",
+          clickForDetails: "انقر للاطّلاع على التفاصيل",
+          backToMenu: "العودة للقائمة الرئيسية"
+        },
+        scroll: {
+          ariaLabel: "خط زمني قابل للتمرير",
+          prev: "السابق",
+          next: "التالي"
+        },
+        projectsTimeline: {
+          defaultProjects: [
+            { year: "2016", items: ["تنفيذ أبنية خدمية وإدارية ومشاريع إعادة تأهيل."] },
+            { year: "2017", items: ["إنشاء مدينة معارض ومكاتب سيارات (200) مكتب - المدينة الصناعية اللاذقية"] },
+            { year: "2023", items: ["تصميم وتنفيذ مشروع 1000 شقة سكنية (مساكن الإيواء) بإشراف الهلال الأحمر الإماراتي"] }
+          ]
+        },
+        expertiseItems: [
+          "تنفيذ المجمعات السكنية والمناطق الخدمية.",
+          "الأبنية الإدارية والتجارية.",
+          "الأبنية مسبقة الصنع والساندويچ بانل والهنغارات والكرفانات المتنقلة وغرف التبريد",
+          "الأعمال المدنية والمعمارية المتكاملة.",
+          "الإكساء الداخلي والخارجي.",
+          "الالتزام بمعايير الجودة والسلامة المهنية في التنفيذ."
+        ],
+        ui: { servicesProfessional: "خدمات احترافية متكاملة", clickToView: "انقر للاطّلاع على التفاصيل" }
+      },
+
+      departmentDetail3: {
+        hero: {
+          defaultTitle: "قسم إعادة التأهيل وصيانة المباني",
+          expertiseBadge: "اختصاص القسم",
+          expertiseTitle: "حلول متكاملة لإعادة التأهيل والصيانة",
+          expertiseSubtitle: "يقدم هذا القسم خدمات صيانة وإعادة تأهيل شاملة للمباني السكنية والخدمية والإدارية والصناعية، وتشمل:",
+          worksBadge: "الأعمال المنفذة",
+          worksTitle: "الأعمال المنفذة",
+          worksSubtitle: "عرض مشروعاتنا وخط الزمن الخاص بالأعمال المنفذة",
+          heroAlt: "إعادة تأهيل وصيانة المباني"
+        },
+        buttons: {
+          "1": "اختصاص القسم",
+          "3": "الأعمال المنفذة",
+          clickForDetails: "انقر للاطّلاع على التفاصيل",
+          backToMenu: "العودة للقائمة الرئيسية"
+        },
+        projectsTimeline: {
+          defaultProjects: [
+            { year: "2019–2022", items: ["صيانة وإعادة تأهيل مراكز خدمة، مباني إقليمية، وغرف الصرافات الآلية لمشغّلي الاتصالات"] },
+            { year: "2023", items: ["صيانة منشآت ومبانٍ إدارية لعملاء تجاريين"] }
+          ]
+        },
+        expertiseItems: [
+          "الصيانة الدورية والطارئة.",
+          "إعادة التأهيل والترميم (أعمال مدنية ومعمارية).",
+          "أعمال الكهرباء والميكانيك وأنظمة التحكم.",
+          "أعمال العزل الحراري والمائي.",
+          "إدارة وصيانة المباني بعقود صيانة طويلة الأمد.",
+          "الالتزام بمعايير الجودة والسلامة المهنية في التنفيذ."
+        ],
+        ui: { servicesProfessional: "خدمات احترافية متكاملة", clickToView: "انقر للاطّلاع على التفاصيل" }
+      },
+
+      departmentDetail4: {
+        hero: {
+          defaultTitle: "قسم محطات الوقود وصيانة المنشآت النفطية",
+          expertiseBadge: "اختصاص القسم",
+          expertiseTitle: "حلول متكاملة لمحطات الوقود والمنشآت النفطية",
+          expertiseSubtitle:
+            "يختص هذا القسم بتقديم خدمات التصميم، الإنشاء، الصيانة والخدمات الفنية لمحطات الوقود والمرافق الاستراتيجية، ويشمل:",
+          worksBadge: "الأعمال المنفذة",
+          worksTitle: "الأعمال المنفذة",
+          worksSubtitle: "عرض مشروعاتنا وخط الزمن الخاص بالأعمال المنفذة",
+          heroAlt: "محطات الوقود والمنشآت النفطية"
+        },
+        buttons: {
+          "1": "اختصاص القسم",
+          "3": "الأعمال المنفذة",
+          clickForDetails: "انقر للاطّلاع على التفاصيل",
+          backToMenu: "العودة للقائمة الرئيسية"
+        },
+        projectsTimeline: {
+          defaultProjects: [
+            {
+              year: "2009",
+              items: [
+                "دراسة وإشراف محطة معالجة الغاز الطبيعي في معمل الصهر عدرا 2009",
+                "دراسة وإشراف محطات فصل الغازات في معمل الصهر عدرا 2009"
+              ]
+            },
+            {
+              year: "2022",
+              items: [
+                "الصيانة الدورية والطارئة لمستودعات وقود شركتي Syriatel-MTN في كل سورية منذ عام 2022"
+              ]
+            },
+            { year: "2023", items: ["إنشاء محطة الكيروسين في مطار اللاذقية المدني 2023"] },
+            {
+              year: "2024",
+              items: [
+                "إنشاء مستودع الوقود الاستراتيجي بسعة 1 مليون لتر – ريف دمشق 2024",
+                "الصيانة الدورية والطارئة لمستودع وقود مرفأ طرطوس منذ 2024"
+              ]
+            }
+          ]
+        },
+        expertiseItems: [
+          "دراسات إنشاء وتطوير محطات الوقود.",
+          "تنفيذ الأعمال المدنية والميكانيكية والكهربائية وأنظمة التحكم في المحطات.",
+          "الصيانة الدورية والطارئة للمحطات والمنشآت النفطية.",
+          "صيانة المضخات والعدادات ومعايرتها.",
+          "تنظيف وتفتيش الخزانات وتقييم عمرها الفني.",
+          "توريد وتركيب التجهيزات المقاومة للانفجار.",
+          "الالتزام الصارم بإجراءات السلامة والصحة والالبيئة.",
+          "الجاهزية للعمل على مدار 24/7 في جميع المحافظات.",
+          "تركيب أنظمة المراقبة والإنذار المبكر والإطفاء الآلي."
+        ],
+        ui: { servicesProfessional: "خدمات احترافية متكاملة", clickToView: "انقر للاطّلاع على التفاصيل" }
+      },
+
+      departmentDetail5: {
+        hero: {
+          defaultTitle: "قسم التفتيش والفحص الفني و الهندسي",
+          expertiseBadge: "اختصاص القسم",
+          expertiseTitle: "خدمات الفحص غير الإتلافي والتفتيش الفني",
+          expertiseSubtitle:
+            "يقدم هذا القسم خدمات الفحص غير الإتلافي (NDT)، فحص اللحامات والتحقق الفني وفق المعايير الدولية، ويشمل:",
+          worksBadge: "الأعمال المنفذة",
+          worksTitle: "الأعمال المنفذة",
+          worksSubtitle: "عرض مشروعاتنا في التفتيش والفحوصات وخط الزمن الخاص بها",
+          heroAlt: "خدمات التفتيش والفحص"
+        },
+        buttons: {
+          "1": "اختصاص القسم",
+          "3": "الأعمال المنفذة",
+          clickForDetails: "انقر للاطّلاع على التفاصيل",
+          backToMenu: "العودة للقائمة الرئيسية"
+        },
+        projectsTimeline: {
+          defaultProjects: [
+            {
+              year: "2009-2010",
+              items: [
+                "تدقيق ومطابقة المخططات الهندسية والتكنولوجية لخطوط الدرفلة وصهر الحد - الشركة المصنعة: دانييلي (إيطاليا) 2009-2010"
+              ]
+            },
+            {
+              year: "2007-2008",
+              items: [
+                "تدقيق ومطابقة المخططات الهندسية والتكنولوجية - الشركة المصنعة: SMS (إيطاليا) 2007-2008"
+              ]
+            },
+            {
+              year: "2015",
+              items: ["التفتيش والاختبارات لخطوط والخزانات لدى الشركة السورية لنقل النفط (2015)"]
+            },
+            {
+              year: "2018",
+              items: ["التفتيش الفني والاختبارات لخزانات غاز الراموسة في حلب (2018)"]
+            },
+            {
+              year: "2022",
+              items: ["التفتيش الفني والاختبارات لقواعد وهيكل الفرن في معمل المتحدة للأسمنت - أبو الشامات (2022)"]
+            },
+            {
+              year: "2017-2019",
+              items: ["التفتيش الفني والاختبارات لخزانات شركة محروقات (سادكوب/شنشار - بوقا - عدرا) (2017-2019)"]
+            },
+            {
+              year: "2023-2024",
+              items: ["إجراء الفحص الفني لخزانات مستودعات وقود MTN-SYRIATEL الاستراتيجية والثانوية (2023-2024)"]
+            }
+          ]
+        },
+        expertiseItems: [
+          "إجراء الفحوصات غير الإتلافية (NDT) للمكونات المعدنية.",
+          "فحص اللحامات ويشمل:",
+          "الفحص بالموجات فوق الصوتية (UT).",
+          "الفحص بالجسيمات المغناطيسية (MT).",
+          "الفحص بالسوائل المتغلغلة (PT).",
+          "الفحص البصري (VT) وتقييم جودة اللحام.",
+          "تدقيق ومطابقة المخططات التكنولوجية والهندسية لأعمال التصنيع المعدني والميكانيكي والكهربائي وأنظمة التحكم.",
+          "تدقيق جاهزية المعدات وملاءمتها للالمعايير الدولية.",
+          "الالتزام الصارم بمعايير السلامة والجودة أثناء التفتيش."
+        ],
+        ui: { servicesProfessional: "خدمات احترافية متكاملة", clickToView: "انقر للاطّلاع على التفاصيل" }
+      },
+
+      departmentDetail6: {
+        hero: {
+          defaultTitle: "قسم المشاريع الاستراتيجية",
+          expertiseBadge: "اختصاص القسم",
+          expertiseTitle: "المشاريع الاستراتيجية وأنظمة المياه والطاقة",
+          expertiseSubtitle: "يختص هذا القسم بالمشاريع ذات النطاق الكبير: محطات معالجة المياه، محطات الضخ، محطات الطاقة الشمسية ومشروعات إعادة التأهيل الصناعية الخاصة.",
+          worksBadge: "الأعمال المنفذة",
+          worksTitle: "الأعمال المنفذة",
+          worksSubtitle: "عرض مشاريعنا الاستراتيجية وخط الزمن الخاص بها",
+          heroAlt: "مشاريع استراتيجية وأنظمة مياه وطاقة"
+        },
+        buttons: {
+          "1": "اختصاص القسم",
+          "3": "الأعمال المنفذة",
+          clickForDetails: "انقر للاطّلاع على التفاصيل",
+          backToMenu: "العودة للقائمة الرئيسية"
+        },
+        backToMenu: "العودة للقائمة الرئيسية",
+        scroll: {
+          ariaLabel: "خط زمني قابل للتمرير",
+          prev: "السابق",
+          next: "التالي"
+        },
+        projectsTimeline: {
+          defaultProjects: [
+            {
+              year: "1999-2015",
+              items: [
+                "تنفيذ محطات معالجة المياه الصناعية لمعامل صهر ودرفلة الحديد (1999-2015)."
+              ]
+            },
+            {
+              year: "2009",
+              items: [
+                "محطة تحويل 66/20 ك.ف لأعمال درفلة الحديد (2009)."
+              ]
+            },
+            {
+              year: "2015",
+              items: [
+                "الإشراف على محطات التحويل 230/66 و66/20 ك.ف لمعامل الصهر (2015)."
+              ]
+            },
+            {
+              year: "2018",
+              items: [
+                "تنفيذ شبكات مياه الشرب ل22 قرية ريف اللاذقية الشمالي - 73 كم (2018)."
+              ]
+            },
+            {
+              year: "2019",
+              items: [
+                "أعمال صيانة لمنشآت الفوسفات في مرفأ طرطوس (2019)."
+              ]
+            },
+            {
+              year: "2021",
+              items: [
+                "دراسة وإعادة تأهيل منجم الملح الصخري في دير ez-Zor (2021)."
+              ]
+            },
+            {
+              year: "2022",
+              items: [
+                "دراسة وتنفيذ محطة الضخ والتصفية لسد 16 تشرين (اللاذقية) (2022)."
+              ]
+            },
+            {
+              year: "2023",
+              items: [
+                "تصميم وتنفيذ مجموعة طاقة شمسية بقدرة 3.6 ميغا لمطحنة جرين كوست (2023)."
+              ]
+            }
+          ]
+        },
+        expertiseItems: [
+          "تصميم وتنفيذ محطات معالجة المياه الصناعية والصالحة للشرب.",
+          "تنفيذ محطات التحويل والأنظمة الكهربائية ذات الجهد العالي.",
+          "دراسات ونشر محطات الطاقة الشمسية.",
+          "إشراف تجريبي وتشغيل لمشاريع واسعة النطاق.",
+          "الالتزام البيئي وتحسين كفاءة التشغيل."
+        ],
+        ui: { servicesProfessional: "خدمات احترافية متكاملة", clickToView: "انقر للاطّلاع على التفاصيل" }
+      },
+
+      departmentDetail7: {
+        hero: {
+          defaultTitle: "قسم الاعمال المعدنية والدعم الصناعي",
+          expertiseBadge: "اختصاص القسم",
+          expertiseTitle: "التصنيع المعدني والهياكل والدعم الصناعي",
+          expertiseSubtitle: "يختص هذا القسم بالأعمال المعدنية، تصنيع الهياكل، معدات الرفع الثقيلة وخدمات الدعم الصناعي.",
+          worksBadge: "الأعمال المنفذة",
+          worksTitle: "الأعمال المنفذة",
+          worksSubtitle: "عرض لمشروعات الأعمال المعدنية وخط الزمن الخاص بها",
+          heroAlt: "أعمال معدنية ودعم صناعي"
+        },
+        buttons: {
+          "1": "اختصاص القسم",
+          "2": "الأعمال المنفذة",
+          clickForDetails: "انقر للاطّلاع على التفاصيل",
+          backToMenu: "العودة للقائمة الرئيسية"
+        },
+        projectsTimeline: {
+          defaultProjects: [
+            {
+              year: "1999-2009",
+              items: [
+                "المنشآت المعدنية لمعامل درفلة الحديد: الوهيب - العربية - الدولية."
+              ]
+            },
+            {
+              year: "2015",
+              items: [
+                "تنفيذ الأعمال المعدنية لمشروع إنشاء مصنع الأسمنت المتحدة."
+              ]
+            },
+            {
+              year: "2021",
+              items: [
+                "تصنيع وتركيب هياكل معدنية وروافع جسرية وخزانات مياه صناعية."
+              ]
+            },
+            {
+              year: "2022",
+              items: [
+                "تنفيذ هنغارات معدنية وإسمنتية عالية التحصين."
+              ]
+            }
+          ]
+        },
+        expertiseItems: [
+          "تصميم وتصنيع وتنفيذ الهياكل المعدنية.",
+          "تنفيذ الأعمال المعدنية للمصانع والمنشآت الصناعية.",
+          "تصنيع وتركيب الروافع الجسرية المتحركة والثابتة.",
+          "تصنيع خزانات المياه الصناعية وخزانات الفايبر.",
+          "حلول دعم صناعي متكاملة للمشاريع الكبرى."
+        ],
+        ui: { servicesProfessional: "خدمات احترافية متكاملة", clickToView: "انقر للاطّلاع على التفاصيل" }
+      },
+
+      departmentDetail8: {
+        hero: {
+          defaultTitle: "قسم الخدمات والدعم اللوجستي",
+          expertiseBadge: "اختصاص القسم",
+          expertiseTitle: "الخدمات اللوجستية والتوريد ودعم العمليات",
+          expertiseSubtitle: "يوفر هذا القسم خدمات لوجستية وتوريد متكاملة: نقل، إقامة، مخازن، ودعم تشغيلي لمشاريع متعددة المواقع.",
+          worksBadge: "الأعمال المنفذة",
+          worksTitle: "الأعمال المنفذة",
+          worksSubtitle: "عرض مشاريعنا اللوجستية والخدمات المقدمة",
+          heroAlt: "الخدمات والدعم اللوجستي"
+        },
+        buttons: {
+          "1": "اختصاص القسم",
+          "2": "الاعمال المنفذة",
+          clickForDetails: "انقر للاطّلاع على التفاصيل",
+          backToMenu: "العودة للقائمة الرئيسية"
+        },
+        projectsTimeline: {
+          defaultProjects: [
+            {
+              year: "2009-2024",
+              items: [
+                "تأمين وتجهيز مواد ومعدات لمشاريع صناعية"
+              ]
+            },
+            {
+              year: "2024",
+              items: [
+                "تجهيز المستودعات والمباني الإدارية بالمفروشات والتجهيزات والأنظمة اللازمة"
+              ]
+            },
+            {
+              year: "2024",
+              items: [
+                "إدارة لوجستية لمشاريع متعددة المواقع"
+              ]
+            },
+            {
+              year: "2023",
+              items: [
+                "الدراسات الهندسية والفنية وتنفيذ سكن الإيواء لمتضرري الزلزال: 1000 شقة سكنية مسبق الصنع"
+              ]
+            }
+          ]
+        },
+        expertiseItems: [
+          "تأمين الخدمات اللوجستية من مركبات النقل والإقامة المتنقلة والثابتة للموظفين والخبراء وفق المتطلبات.",
+          "إدارة سلاسل التوريد.",
+          "توريد المعدات والمواد الأولية.",
+          "التنسيق مع الموردين والمصنعين.",
+          "إدارة المخازن والمستودعات.",
+          "دعم العمليات التشغيلية للمشاريع الصناعية والنفطية والهندسية."
+        ],
+        ui: { servicesProfessional: "خدمات احترافية متكاملة", clickToView: "انقر للاطّلاع على التفاصيل" },
+        backToMenu: "العودة للقائمة الرئيسية"
+      },
+
+      departmentDetail9: {
+        hero: {
+          defaultTitle: "قسم الأتمتة والتحكم",
+          expertiseBadge: "اختصاص القسم",
+          expertiseTitle: "الأتمتة، أنظمة التحكم والتحول الرقمي",
+          expertiseSubtitle: "يقدم هذا القسم حلول الأتمتة الصناعية، أنظمة SCADA/PLC، نشر أنظمة FMS والتحول الرقمي للمنشآت الصناعية والنفطية.",
+          worksBadge: "الأعمال المنفذة",
+          worksTitle: "الأعمال المنفذة",
+          worksSubtitle: "أمثلة لأنظمة الأتمتة وSCADA و التحكم التي نفذناها.",
+          heroAlt: "أتمتة وأنظمة تحكم"
+        },
+        buttons: {
+          "1": "اختصاص القسم",
+          "2": "الأعمال المنفذة",
+          clickForDetails: "انقر للاطّلاع على التفاصيل",
+          backToMenu: "العودة للقائمة الرئيسية"
+        },
+        projectsTimeline: {
+          defaultProjects: [
+            {
+              year: "1999-2015",
+              items: [
+                "أتمتة منظومات التحكم والتشغيل لمعاهد صهر ودرفلة الحديد (1999-2015)."
+              ]
+            },
+            {
+              year: "2023",
+              items: [
+                "أتمتة تجهيزات المراقبة والمعايرة وواجهات التشغيل عبر التابلت."
+              ]
+            },
+            {
+              year: "2023-2024",
+              items: [
+                "تصميم ونشر نظام FMS لمستودعات وقود استراتيجية (قيد التشغيل)."
+              ]
+            },
+            {
+              year: "2024",
+              items: [
+                "أتمتة خطوط الإنتاج (أمثلة: ألانام لإنتاج البكتيريا العضوية، الساروت للأدوية البيطرية).",
+                "تنفيذ أنظمة ERP لشركات (PEA - REXOS)."
+              ]
+            }
+          ]
+        },
+        expertiseItems: [
+          "تصميم وتنفيذ أنظمة التحكم الصناعية.",
+          "أتمتة خطوط الإنتاج وأنظمة المراقبة مع توريد التجهيزات.",
+          "نشر أنظمة SCADA و PLC.",
+          "تطوير وتنفيذ أنظمة إدارة محطات الوقود (FMS).",
+          "ربط الأنظمة التشغيلية بالحلول البرمجية.",
+          "تحليل الأعطال، الصيانة التنبؤية، وتحسين كفاءة التشغيل."
+        ],
+        ui: { servicesProfessional: "خدمات احترافية متكاملة", clickToView: "انقر للاطّلاع على التفاصيل" },
+        backToMenu: "العودة للقائمة الرئيسية"
+      }
+>>>>>>> d3f4bb9349101680ca4ebeae297bd79a58006631
     }
 };
 
 i18n
+<<<<<<< HEAD
     .use(LanguageDetector)
     .use(initReactI18next)
     .init({
@@ -1244,5 +2553,29 @@ i18n
             caches: ["localStorage"]
         }
     });
+=======
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    resources,
+    fallbackLng: "ar",
+    supportedLngs: ["en", "ar"],
+    nonExplicitSupportedLngs: false,
+    debug: false,
+    ns: ["translation"],
+    defaultNS: "translation",
+    returnObjects: true,
+    interpolation: {
+      escapeValue: false
+    },
+    detection: {
+      order: ["localStorage", "cookie", "navigator"],
+      caches: ["localStorage", "cookie"]
+    },
+    react: {
+      useSuspense: false
+    }
+  });
+>>>>>>> d3f4bb9349101680ca4ebeae297bd79a58006631
 
 export default i18n;
\ No newline at end of file