diff --git a/src/Components/Sections/DepartmentDetail/DepartmentDetail.jsx b/src/Components/Sections/DepartmentDetail/DepartmentDetail.jsx
index 93756cd..b9364da 100644
--- a/src/Components/Sections/DepartmentDetail/DepartmentDetail.jsx
+++ b/src/Components/Sections/DepartmentDetail/DepartmentDetail.jsx
@@ -1,7 +1,7 @@
 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";
@@ -128,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);
@@ -185,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]);
@@ -236,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
@@ -283,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>
@@ -293,7 +353,6 @@ function ProjectsTimeline({
   );
 }
 
-
 const defaultProjects = [
   {
     year: "1999-2015",
@@ -305,7 +364,10 @@ const defaultProjects = [
     ],
   },
   { year: "2001", items: ["أعمال تشغيل وصيانة الدورة لمعمل الوهيب ستوك إير"] },
-  { year: "2002", items: ["أعمال تشغيل وصيانة الدورة لمعمل العربية لدرفلة إير"] },
+  {
+    year: "2002",
+    items: ["أعمال تشغيل وصيانة الدورة لمعمل العربية لدرفلة إير"],
+  },
   { year: "2004", items: ["أعمال متنوعة في مجال الدرفلة والتصنيع"] },
   {
     year: "2016",
@@ -314,7 +376,10 @@ const defaultProjects = [
       "أي أم، التايتيك - التروت، تصميم وتنفيذ",
     ],
   },
-  { year: "2016-2017", items: ["التدريب العالمي 600 طن/يوم", "التدريب للصناعات الغذائية"] },
+  {
+    year: "2016-2017",
+    items: ["التدريب العالمي 600 طن/يوم", "التدريب للصناعات الغذائية"],
+  },
   { year: "2017", items: ["دراسة تأهيلية معمل الشمس (العسافي - حمص)"] },
   {
     year: "2019",
@@ -324,8 +389,17 @@ const defaultProjects = [
     ],
   },
   { year: "2020", items: ["استكمال دراسة تأهيلية للصم وقياس الشمس"] },
-  { year: "2021", items: ["منشأ تيسير لمعمل المتحدة، تصميم الاسور - أبو الشامات"] },
-  { year: "2022", items: ["استكمال منشأ تيسير لمعمل المتحدة", "معمل المثنى للتصنيع السريع - طرطوس"] },
+  {
+    year: "2021",
+    items: ["منشأ تيسير لمعمل المتحدة، تصميم الاسور - أبو الشامات"],
+  },
+  {
+    year: "2022",
+    items: [
+      "استكمال منشأ تيسير لمعمل المتحدة",
+      "معمل المثنى للتصنيع السريع - طرطوس",
+    ],
+  },
   { year: "2023", items: ["مشاريع متنوعة في مجال التصنيع والدرفلة"] },
 ];
 
@@ -339,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));
@@ -397,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") ||
@@ -410,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>
@@ -430,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>
                     )}
@@ -444,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
@@ -462,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"
@@ -474,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>
@@ -492,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>
@@ -526,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>
                 ))}
@@ -543,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>
@@ -578,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>
@@ -598,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 890cf7e..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,7 +380,10 @@ 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);
   }, []);
 
@@ -330,11 +394,39 @@ export default function DepartmentDetail6() {
   ];
 
   // 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));
@@ -347,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">
@@ -357,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}
@@ -376,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
@@ -414,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" />
@@ -427,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>
@@ -445,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>
@@ -473,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>
                 ))}
@@ -496,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")}
@@ -520,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>
@@ -560,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 8c4d3cf..7c03e0f 100644
--- a/src/Components/Sections/DepartmentDetail7/DepartmentDetail7.jsx
+++ b/src/Components/Sections/DepartmentDetail7/DepartmentDetail7.jsx
@@ -325,7 +325,8 @@ export default function DepartmentDetail7() {
     { 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 e3999bd..74f4860 100644
--- a/src/Components/Sections/DepartmentDetail8/DepartmentDetail8.jsx
+++ b/src/Components/Sections/DepartmentDetail8/DepartmentDetail8.jsx
@@ -387,9 +387,12 @@ export default function DepartmentDetail8() {
     "departmentDetail8.projectsTimeline.defaultProjects",
     { returnObjects: true }
   );
-  const expertiseTexts = t("departmentDetail8.expertiseItems", {
+  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 });