diff --git a/src/App.jsx b/src/App.jsx
index 13faf51..4651c9e 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -106,8 +106,9 @@ import Footer from "./Components/Nav/Footer";
 import DepartmentDetail2 from "./Components/Sections/DepartmentDetail2/DepartmentDetail2";
 import ImagePreloader from "./Components/ImagePreloader";
 import BackgroundCanvas from "./Components/BackgroundCanvas/BackgroundCanvas";
-
-// المكون الرئيسي الذي يظهر في الصفحة الرئيسية
+import DepartmentDetail3 from "./Components/Sections/DepartmentDetail3/DepartmentDetail3";
+import DepartmentDetail4 from "./Components/Sections/DepartmentDetail4/DepartmentDetail4";
+import DepartmentDetail5 from "./Components/Sections/DepartmentDetail5/DepartmentDetail5";
 const MainPage = ({ theme }) => {
   return (
     <div className="min-h-screen bg-transparent">
@@ -145,6 +146,11 @@ function RouterView({ theme, toggleTheme }) {
           />
           <Route path="/departments/:id" element={<DepartmentDetail />} />
           <Route path="/department-detail2" element={<DepartmentDetail2 />} />
+                    <Route path="/department-detail3" element={<DepartmentDetail3 />} />
+                                        <Route path="/department-detail4" element={<DepartmentDetail4 />} />
+          <Route path="/department-detail5" element={<DepartmentDetail5/>} />
+
+
         </Routes>
       </AnimatePresence>
     </LayoutGroup>
@@ -157,6 +163,10 @@ function Layout({ theme, toggleTheme }) {
 
   const excludedExactPaths = [
     "/department-detail2",
+    "/department-detail3" ,
+        "/department-detail4" ,
+        "/department-detail5" ,
+
   ];
 
   const excludedPrefixes = ["/departments/"];
diff --git a/src/Components/Nav/Navbar.jsx b/src/Components/Nav/Navbar.jsx
index 2731245..8e79054 100644
--- a/src/Components/Nav/Navbar.jsx
+++ b/src/Components/Nav/Navbar.jsx
@@ -1219,11 +1219,7 @@ const Navbar = ({ toggleTheme, currentTheme }) => {
         <div className="mx-auto max-w-screen-xl">
           <div className="flex items-center justify-between h-14 px-2 md:px-4">
             {/* Logo - from second code */}
-            <img
-              src="/src/assets/TPS-logo.png"
-              className="h-8 sm:h-10 md:h-12 transition-all duration-300"
-              alt="TPS Logo"
-            />
+          
 
             <div className="hidden md:flex items-center space-x-6 rtl:space-x-reverse">
               <ul className="flex items-center gap-6">
diff --git a/src/Components/Sections/DepartmentDetail3/DepartmentDetail3.jsx b/src/Components/Sections/DepartmentDetail3/DepartmentDetail3.jsx
index 6d9c5ac..e56172d 100644
--- a/src/Components/Sections/DepartmentDetail3/DepartmentDetail3.jsx
+++ b/src/Components/Sections/DepartmentDetail3/DepartmentDetail3.jsx
@@ -1,551 +1,551 @@
-// import React, { useState, useEffect, useRef, useCallback } from "react";
-// import { motion, AnimatePresence } from "framer-motion";
-// import d14 from "../../../../src/assets/Images/d14.jpeg";
-// import d15 from "../../../../src/assets/Images/d15.jpeg";
-// import d16 from "../../../../src/assets/Images/d16.jpeg";
-// import d7 from "../../../../src/assets/Images/d7.jpeg";
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import d14 from "../../../../src/assets/Images/d14.jpg"
+import d15 from "../../../../src/assets/Images/d15.jpg"
+import d16 from "../../../../src/assets/Images/d16.jpg";
+import d7 from "../../../../src/assets/Images/d7.jpeg";
 
-// function ProjectsTimeline({
-//   projects,
-//   mainTitle = "المشاريع المنفذة",
-//   subtitle = "خط زمني شامل للأعمال والإنجازات",
-//   plain = false,
-// }) {
-//   const wrapperRef = useRef(null);
-//   const scrollRef = useRef(null);
-//   const svgRef = useRef(null);
-//   const [itemsRefs, setItemsRefs] = useState([]);
-//   const [currentIndex, setCurrentIndex] = useState(0);
+function ProjectsTimeline({
+  projects,
+  mainTitle = "المشاريع المنفذة",
+  subtitle = "خط زمني شامل للأعمال والإنجازات",
+  plain = false,
+}) {
+  const wrapperRef = useRef(null);
+  const scrollRef = useRef(null);
+  const svgRef = useRef(null);
+  const [itemsRefs, setItemsRefs] = useState([]);
+  const [currentIndex, setCurrentIndex] = useState(0);
 
-//   useEffect(() => {
-//     setItemsRefs((r) => {
-//       const arr = Array(projects.length)
-//         .fill()
-//         .map((_, i) => r[i] || React.createRef());
-//       return arr;
-//     });
-//   }, [projects.length]);
+  useEffect(() => {
+    setItemsRefs((r) => {
+      const arr = Array(projects.length)
+        .fill()
+        .map((_, i) => r[i] || React.createRef());
+      return arr;
+    });
+  }, [projects.length]);
 
-//   const drawCurvedLines = useCallback(() => {
-//     const svgEl = svgRef.current;
-//     const wrapper = wrapperRef.current;
-//     if (!svgEl || !wrapper) return;
+  const drawCurvedLines = useCallback(() => {
+    const svgEl = svgRef.current;
+    const wrapper = wrapperRef.current;
+    if (!svgEl || !wrapper) return;
 
-//     while (svgEl.firstChild) svgEl.removeChild(svgEl.firstChild);
-//     svgEl.setAttribute("width", wrapper.scrollWidth);
-//     svgEl.setAttribute("height", wrapper.offsetHeight);
+    while (svgEl.firstChild) svgEl.removeChild(svgEl.firstChild);
+    svgEl.setAttribute("width", wrapper.scrollWidth);
+    svgEl.setAttribute("height", wrapper.offsetHeight);
 
-//     if (!itemsRefs || itemsRefs.length < 2) return;
+    if (!itemsRefs || itemsRefs.length < 2) return;
 
-//     const svgNS = "http://www.w3.org/2000/svg";
-//     const defs = document.createElementNS(svgNS, "defs");
-//     const gradient = document.createElementNS(svgNS, "linearGradient");
-//     gradient.setAttribute("id", "timeline-gradient");
-//     gradient.setAttribute("x1", "0%");
-//     gradient.setAttribute("y1", "0%");
-//     gradient.setAttribute("x2", "100%");
-//     gradient.setAttribute("y2", "0%");
+    const svgNS = "http://www.w3.org/2000/svg";
+    const defs = document.createElementNS(svgNS, "defs");
+    const gradient = document.createElementNS(svgNS, "linearGradient");
+    gradient.setAttribute("id", "timeline-gradient");
+    gradient.setAttribute("x1", "0%");
+    gradient.setAttribute("y1", "0%");
+    gradient.setAttribute("x2", "100%");
+    gradient.setAttribute("y2", "0%");
 
-//     const stop1 = document.createElementNS(svgNS, "stop");
-//     stop1.setAttribute("offset", "0%");
-//     stop1.setAttribute("style", "stop-color:#0f172a;stop-opacity:1");
+    const stop1 = document.createElementNS(svgNS, "stop");
+    stop1.setAttribute("offset", "0%");
+    stop1.setAttribute("style", "stop-color:#0f172a;stop-opacity:1");
 
-//     const stop2 = document.createElementNS(svgNS, "stop");
-//     stop2.setAttribute("offset", "50%");
-//     stop2.setAttribute("style", "stop-color:#f97316;stop-opacity:1");
+    const stop2 = document.createElementNS(svgNS, "stop");
+    stop2.setAttribute("offset", "50%");
+    stop2.setAttribute("style", "stop-color:#f97316;stop-opacity:1");
 
-//     const stop3 = document.createElementNS(svgNS, "stop");
-//     stop3.setAttribute("offset", "100%");
-//     stop3.setAttribute("style", "stop-color:#9ca3af;stop-opacity:1");
+    const stop3 = document.createElementNS(svgNS, "stop");
+    stop3.setAttribute("offset", "100%");
+    stop3.setAttribute("style", "stop-color:#9ca3af;stop-opacity:1");
 
-//     gradient.appendChild(stop1);
-//     gradient.appendChild(stop2);
-//     gradient.appendChild(stop3);
-//     defs.appendChild(gradient);
-//     svgEl.appendChild(defs);
+    gradient.appendChild(stop1);
+    gradient.appendChild(stop2);
+    gradient.appendChild(stop3);
+    defs.appendChild(gradient);
+    svgEl.appendChild(defs);
 
-//     for (let i = 0; i < itemsRefs.length - 1; i++) {
-//       const item1 = itemsRefs[i].current;
-//       const item2 = itemsRefs[i + 1].current;
-//       if (!item1 || !item2) continue;
+    for (let i = 0; i < itemsRefs.length - 1; i++) {
+      const item1 = itemsRefs[i].current;
+      const item2 = itemsRefs[i + 1].current;
+      if (!item1 || !item2) continue;
 
-//       const circle1 = item1.querySelector(".year-circle");
-//       const circle2 = item2.querySelector(".year-circle");
-//       if (!circle1 || !circle2) continue;
+      const circle1 = item1.querySelector(".year-circle");
+      const circle2 = item2.querySelector(".year-circle");
+      if (!circle1 || !circle2) continue;
 
-//       const rect1 = circle1.getBoundingClientRect();
-//       const rect2 = circle2.getBoundingClientRect();
-//       const wrapperRect = wrapper.getBoundingClientRect();
+      const rect1 = circle1.getBoundingClientRect();
+      const rect2 = circle2.getBoundingClientRect();
+      const wrapperRect = wrapper.getBoundingClientRect();
 
-//       const x1 = rect1.left - wrapperRect.left + rect1.width / 2;
-//       const y1 = rect1.top - wrapperRect.top + rect1.height / 2;
-//       const x2 = rect2.left - wrapperRect.left + rect2.width / 2;
-//       const y2 = rect2.top - wrapperRect.top + rect2.height / 2;
+      const x1 = rect1.left - wrapperRect.left + rect1.width / 2;
+      const y1 = rect1.top - wrapperRect.top + rect1.height / 2;
+      const x2 = rect2.left - wrapperRect.left + rect2.width / 2;
+      const y2 = rect2.top - wrapperRect.top + rect2.height / 2;
 
-//       const controlPointOffset = Math.abs(x2 - x1) * 0.4;
-//       const cx1 = x1 - controlPointOffset;
-//       const cy1 = y1 - 40;
-//       const cx2 = x2 + controlPointOffset;
-//       const cy2 = y2 - 40;
+      const controlPointOffset = Math.abs(x2 - x1) * 0.4;
+      const cx1 = x1 - controlPointOffset;
+      const cy1 = y1 - 40;
+      const cx2 = x2 + controlPointOffset;
+      const cy2 = y2 - 40;
 
-//       const path = document.createElementNS(svgNS, "path");
-//       const d = `M ${x1} ${y1} C ${cx1} ${cy1}, ${cx2} ${cy2}, ${x2} ${y2}`;
-//       path.setAttribute("d", d);
-//       path.setAttribute("stroke", "url(#timeline-gradient)");
-//       path.setAttribute("stroke-width", "4");
-//       path.setAttribute("fill", "none");
-//       path.setAttribute("stroke-linecap", "round");
-//       path.style.filter = "drop-shadow(0 2px 8px rgba(15,23,42,0.22))";
-//       svgEl.appendChild(path);
-//     }
-//   }, [itemsRefs]);
+      const path = document.createElementNS(svgNS, "path");
+      const d = `M ${x1} ${y1} C ${cx1} ${cy1}, ${cx2} ${cy2}, ${x2} ${y2}`;
+      path.setAttribute("d", d);
+      path.setAttribute("stroke", "url(#timeline-gradient)");
+      path.setAttribute("stroke-width", "4");
+      path.setAttribute("fill", "none");
+      path.setAttribute("stroke-linecap", "round");
+      path.style.filter = "drop-shadow(0 2px 8px rgba(15,23,42,0.22))";
+      svgEl.appendChild(path);
+    }
+  }, [itemsRefs]);
 
-//   const setActiveItem = useCallback(
-//     (index) => {
-//       setCurrentIndex(index);
-//       itemsRefs.forEach((ref, i) => {
-//         const el = ref.current;
-//         if (!el) return;
-//         if (i === index) el.classList.add("active");
-//         else el.classList.remove("active");
-//       });
-//     },
-//     [itemsRefs]
-//   );
+  const setActiveItem = useCallback(
+    (index) => {
+      setCurrentIndex(index);
+      itemsRefs.forEach((ref, i) => {
+        const el = ref.current;
+        if (!el) return;
+        if (i === index) el.classList.add("active");
+        else el.classList.remove("active");
+      });
+    },
+    [itemsRefs]
+  );
 
-//   const scrollToItem = useCallback(
-//     (index) => {
-//       if (index < 0 || index >= itemsRefs.length) return;
-//       const scrollContainer = scrollRef.current;
-//       const item = itemsRefs[index].current;
-//       if (!scrollContainer || !item) return;
+  const scrollToItem = useCallback(
+    (index) => {
+      if (index < 0 || index >= itemsRefs.length) return;
+      const scrollContainer = scrollRef.current;
+      const item = itemsRefs[index].current;
+      if (!scrollContainer || !item) return;
 
-//       const itemRect = item.getBoundingClientRect();
-//       const containerRect = scrollContainer.getBoundingClientRect();
-//       const scrollLeft = scrollContainer.scrollLeft;
+      const itemRect = item.getBoundingClientRect();
+      const containerRect = scrollContainer.getBoundingClientRect();
+      const scrollLeft = scrollContainer.scrollLeft;
 
-//       const targetScroll =
-//         scrollLeft + itemRect.left - containerRect.left - containerRect.width / 2 + itemRect.width / 2;
+      const targetScroll =
+        scrollLeft + itemRect.left - containerRect.left - containerRect.width / 2 + itemRect.width / 2;
 
-//       scrollContainer.scrollTo({ left: targetScroll, behavior: "smooth" });
-//       setActiveItem(index);
-//     },
-//     [itemsRefs, setActiveItem]
-//   );
+      scrollContainer.scrollTo({ left: targetScroll, behavior: "smooth" });
+      setActiveItem(index);
+    },
+    [itemsRefs, setActiveItem]
+  );
 
-//   const onPrev = () => {
-//     if (currentIndex > 0) scrollToItem(currentIndex - 1);
-//   };
-//   const onNext = () => {
-//     if (currentIndex < itemsRefs.length - 1) scrollToItem(currentIndex + 1);
-//   };
+  const onPrev = () => {
+    if (currentIndex > 0) scrollToItem(currentIndex - 1);
+  };
+  const onNext = () => {
+    if (currentIndex < itemsRefs.length - 1) scrollToItem(currentIndex + 1);
+  };
 
-//   useEffect(() => {
-//     const t = setTimeout(() => {
-//       drawCurvedLines();
-//       setActiveItem(0);
-//     }, 100);
+  useEffect(() => {
+    const t = setTimeout(() => {
+      drawCurvedLines();
+      setActiveItem(0);
+    }, 100);
 
-//     const scrollContainer = scrollRef.current;
-//     let scrollTimeout = null;
+    const scrollContainer = scrollRef.current;
+    let scrollTimeout = null;
 
-//     const onScroll = () => {
-//       clearTimeout(scrollTimeout);
-//       scrollTimeout = setTimeout(() => {
-//         const containerRect = scrollContainer.getBoundingClientRect();
-//         const containerCenter = containerRect.left + containerRect.width / 2;
+    const onScroll = () => {
+      clearTimeout(scrollTimeout);
+      scrollTimeout = setTimeout(() => {
+        const containerRect = scrollContainer.getBoundingClientRect();
+        const containerCenter = containerRect.left + containerRect.width / 2;
 
-//         let closestIndex = 0;
-//         let closestDistance = Infinity;
+        let closestIndex = 0;
+        let closestDistance = Infinity;
 
-//         itemsRefs.forEach((ref, index) => {
-//           const el = ref.current;
-//           if (!el) return;
-//           const itemRect = el.getBoundingClientRect();
-//           const itemCenter = itemRect.left + itemRect.width / 2;
-//           const distance = Math.abs(containerCenter - itemCenter);
-//           if (distance < closestDistance) {
-//             closestDistance = distance;
-//             closestIndex = index;
-//           }
-//         });
+        itemsRefs.forEach((ref, index) => {
+          const el = ref.current;
+          if (!el) return;
+          const itemRect = el.getBoundingClientRect();
+          const itemCenter = itemRect.left + itemRect.width / 2;
+          const distance = Math.abs(containerCenter - itemCenter);
+          if (distance < closestDistance) {
+            closestDistance = distance;
+            closestIndex = index;
+          }
+        });
 
-//         if (closestIndex !== currentIndex) {
-//           setActiveItem(closestIndex);
-//         }
-//       }, 150);
-//     };
+        if (closestIndex !== currentIndex) {
+          setActiveItem(closestIndex);
+        }
+      }, 150);
+    };
 
-//     if (scrollContainer) scrollContainer.addEventListener("scroll", onScroll);
-//     const onResize = () => setTimeout(drawCurvedLines, 120);
-//     window.addEventListener("resize", onResize);
+    if (scrollContainer) scrollContainer.addEventListener("scroll", onScroll);
+    const onResize = () => setTimeout(drawCurvedLines, 120);
+    window.addEventListener("resize", onResize);
 
-//     return () => {
-//       clearTimeout(t);
-//       if (scrollContainer) scrollContainer.removeEventListener("scroll", onScroll);
-//       window.removeEventListener("resize", onResize);
-//     };
-//   }, [itemsRefs, drawCurvedLines, setActiveItem]);
+    return () => {
+      clearTimeout(t);
+      if (scrollContainer) scrollContainer.removeEventListener("scroll", onScroll);
+      window.removeEventListener("resize", onResize);
+    };
+  }, [itemsRefs, drawCurvedLines, setActiveItem]);
 
-//   useEffect(() => {
-//     setTimeout(() => drawCurvedLines(), 120);
-//   }, [itemsRefs, drawCurvedLines, projects.length]);
+  useEffect(() => {
+    setTimeout(() => drawCurvedLines(), 120);
+  }, [itemsRefs, drawCurvedLines, projects.length]);
 
-//   const css = `
-//     :root{--bg-start:#0b1220;--bg-mid:#102033;--bg-end:#2b3a4a;--accent:#f97316;--muted:#9ca3af}
-//     .projects-timeline-root { direction: rtl; min-height: 100%; }
-//     .timeline-scroll { overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
-//     .timeline-scroll::-webkit-scrollbar{ display:none; height:0; }
-//     .timeline-wrapper { display:flex; align-items:center; position:relative; padding:clamp(48px,6vw,120px) clamp(12px,4vw,120px); min-width:max-content; }
-//     .svg-container { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:0; }
-//     .timeline-item { position:relative; display:flex; flex-direction:column; align-items:center; margin:0 clamp(20px,4vw,60px); transition:all .6s cubic-bezier(.34,1.56,.64,1); z-index:1; }
-//     .year-circle { width:clamp(72px,9vw,150px); height:clamp(72px,9vw,150px); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:clamp(14px,1.6vw,24px); font-weight:700; background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); color:var(--bg-start); box-shadow: 0 6px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.04); transition:all .6s cubic-bezier(.34,1.56,.64,1); cursor:pointer; border:1px solid rgba(255,255,255,0.08); position:relative; z-index:2; backdrop-filter: blur(8px) saturate(120%);
-//       background-clip: padding-box;
-//     }
-//     .year-circle::after { content: ''; position:absolute; inset:-8px; border-radius:50%; border:2px solid rgba(249,115,22,0.08); opacity:0; transition:all .6s ease; }
-//     .timeline-item.active .year-circle { width:clamp(110px,14vw,200px); height:clamp(110px,14vw,200px); font-size:clamp(18px,2.2vw,28px); box-shadow:0 18px 60px rgba(15,23,42,.5), inset 0 2px 6px rgba(255,255,255,0.04); border-color: rgba(249,115,22,0.18); transform: translateY(-15px) scale(1.03); }
-//     .timeline-item.active .year-circle::after { opacity:1; inset:-12px; animation: ripple 2s ease-out infinite; }
-//     @keyframes ripple { 0%{ transform: scale(1); opacity:.6;} 100%{ transform: scale(1.25); opacity:0;} }
-//     .project-card { margin-top:40px; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)); border-radius:18px; padding:26px; min-width:320px; max-width:420px; box-shadow:0 12px 40px rgba(2,6,23,.45); opacity:.9; transform: scale(.98) translateY(8px); transition:all .6s cubic-bezier(.34,1.56,.64,1); border:1px solid rgba(255,255,255,.06); position:relative; overflow:hidden; backdrop-filter: blur(8px) saturate(120%); }
-//     .project-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background: linear-gradient(to left, var(--accent), #b91c1c, var(--muted)); opacity:0; transition:opacity .6s ease; }
-//     .timeline-item.active .project-card { opacity:1; transform: scale(1) translateY(0); box-shadow:0 28px 80px rgba(2,6,23,.5),0 6px 18px rgba(0,0,0,.08); border-color: rgba(249,115,22,.14); }
-//     .timeline-item.active .project-card::before { opacity:1; }
-//     .project-text { font-size:15px; line-height:2; color:#0b1220; font-weight:600; }
-//     .project-text li { margin-bottom:12px; padding-right:12px; transition:all .3s ease; border-radius:8px; padding:8px 12px; }
-//     .timeline-item.active .project-text li:hover { background: rgba(249,115,22,.06); transform: translateX(-4px); }
-//     .scroll-indicator { position:absolute; bottom:30px; left:50%; transform: translateX(-50%); display:flex; gap:20px; z-index:10; }
-//     .scroll-btn { background: linear-gradient(135deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.82) 100%); border:none; border-radius:50%; width:56px; height:56px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:22px; color:var(--accent); box-shadow:0 6px 20px rgba(2,6,23,.35); transition:all .4s cubic-bezier(.34,1.56,.64,1); backdrop-filter: blur(6px); }
-//     .scroll-btn:hover:not(:disabled){ background: linear-gradient(135deg,#fff 0%,#fff8f2 100%); transform: scale(1.12); box-shadow:0 10px 35px rgba(15,23,42,.22); }
-//     .scroll-btn:active:not(:disabled){ transform: scale(1.05); }
-//     .scroll-btn:disabled { opacity:.4; cursor:not-allowed; }
-//     @media (max-width:768px){
-//       .timeline-wrapper { padding:clamp(36px,6vw,80px) 24px; }
-//       .timeline-item { margin:0 18px; }
-//       .year-circle { width:90px; height:90px; font-size:15px; }
-//       .timeline-item.active .year-circle { width:120px; height:120px; font-size:19px; }
-//       .project-card { min-width:260px; max-width:300px; padding:20px; }
-//       .project-text { font-size:13px; }
-//       .scroll-btn { width:48px; height:48px; font-size:20px; }
-//     }
+  const css = `
+    :root{--bg-start:#0b1220;--bg-mid:#102033;--bg-end:#2b3a4a;--accent:#f97316;--muted:#9ca3af}
+    .projects-timeline-root { direction: rtl; min-height: 100%; }
+    .timeline-scroll { overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
+    .timeline-scroll::-webkit-scrollbar{ display:none; height:0; }
+    .timeline-wrapper { display:flex; align-items:center; position:relative; padding:clamp(48px,6vw,120px) clamp(12px,4vw,120px); min-width:max-content; }
+    .svg-container { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:0; }
+    .timeline-item { position:relative; display:flex; flex-direction:column; align-items:center; margin:0 clamp(20px,4vw,60px); transition:all .6s cubic-bezier(.34,1.56,.64,1); z-index:1; }
+    .year-circle { width:clamp(72px,9vw,150px); height:clamp(72px,9vw,150px); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:clamp(14px,1.6vw,24px); font-weight:700; background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); color:var(--bg-start); box-shadow: 0 6px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.04); transition:all .6s cubic-bezier(.34,1.56,.64,1); cursor:pointer; border:1px solid rgba(255,255,255,0.08); position:relative; z-index:2; backdrop-filter: blur(8px) saturate(120%);
+      background-clip: padding-box;
+    }
+    .year-circle::after { content: ''; position:absolute; inset:-8px; border-radius:50%; border:2px solid rgba(249,115,22,0.08); opacity:0; transition:all .6s ease; }
+    .timeline-item.active .year-circle { width:clamp(110px,14vw,200px); height:clamp(110px,14vw,200px); font-size:clamp(18px,2.2vw,28px); box-shadow:0 18px 60px rgba(15,23,42,.5), inset 0 2px 6px rgba(255,255,255,0.04); border-color: rgba(249,115,22,0.18); transform: translateY(-15px) scale(1.03); }
+    .timeline-item.active .year-circle::after { opacity:1; inset:-12px; animation: ripple 2s ease-out infinite; }
+    @keyframes ripple { 0%{ transform: scale(1); opacity:.6;} 100%{ transform: scale(1.25); opacity:0;} }
+    .project-card { margin-top:40px; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)); border-radius:18px; padding:26px; min-width:320px; max-width:420px; box-shadow:0 12px 40px rgba(2,6,23,.45); opacity:.9; transform: scale(.98) translateY(8px); transition:all .6s cubic-bezier(.34,1.56,.64,1); border:1px solid rgba(255,255,255,.06); position:relative; overflow:hidden; backdrop-filter: blur(8px) saturate(120%); }
+    .project-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background: linear-gradient(to left, var(--accent), #b91c1c, var(--muted)); opacity:0; transition:opacity .6s ease; }
+    .timeline-item.active .project-card { opacity:1; transform: scale(1) translateY(0); box-shadow:0 28px 80px rgba(2,6,23,.5),0 6px 18px rgba(0,0,0,.08); border-color: rgba(249,115,22,.14); }
+    .timeline-item.active .project-card::before { opacity:1; }
+    .project-text { font-size:15px; line-height:2; color:#0b1220; font-weight:600; }
+    .project-text li { margin-bottom:12px; padding-right:12px; transition:all .3s ease; border-radius:8px; padding:8px 12px; }
+    .timeline-item.active .project-text li:hover { background: rgba(249,115,22,.06); transform: translateX(-4px); }
+    .scroll-indicator { position:absolute; bottom:30px; left:50%; transform: translateX(-50%); display:flex; gap:20px; z-index:10; }
+    .scroll-btn { background: linear-gradient(135deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.82) 100%); border:none; border-radius:50%; width:56px; height:56px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:22px; color:var(--accent); box-shadow:0 6px 20px rgba(2,6,23,.35); transition:all .4s cubic-bezier(.34,1.56,.64,1); backdrop-filter: blur(6px); }
+    .scroll-btn:hover:not(:disabled){ background: linear-gradient(135deg,#fff 0%,#fff8f2 100%); transform: scale(1.12); box-shadow:0 10px 35px rgba(15,23,42,.22); }
+    .scroll-btn:active:not(:disabled){ transform: scale(1.05); }
+    .scroll-btn:disabled { opacity:.4; cursor:not-allowed; }
+    @media (max-width:768px){
+      .timeline-wrapper { padding:clamp(36px,6vw,80px) 24px; }
+      .timeline-item { margin:0 18px; }
+      .year-circle { width:90px; height:90px; font-size:15px; }
+      .timeline-item.active .year-circle { width:120px; height:120px; font-size:19px; }
+      .project-card { min-width:260px; max-width:300px; padding:20px; }
+      .project-text { font-size:13px; }
+      .scroll-btn { width:48px; height:48px; font-size:20px; }
+    }
 
-//     .projects-timeline-root.plain-bleed .timeline-wrapper { padding:clamp(48px,6vw,120px) 24px; }
-//     .projects-timeline-root.plain-bleed .project-card { max-width:420px; }
-//   `;
+    .projects-timeline-root.plain-bleed .timeline-wrapper { padding:clamp(48px,6vw,120px) 24px; }
+    .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" : ""}`}>
-//       <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)" }}>
-//                 {mainTitle}
-//               </h1>
-//               <p id="subtitle" className={`${plain ? "text-base text-gray-700" : "text-xl text-white opacity-90"}`}>{subtitle}</p>
-//             </header>
-//           )}
+  return (
+    <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)" }}>
+                {mainTitle}
+              </h1>
+              <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}>
-//                 <svg className="svg-container" id="timeline-svg" ref={svgRef} />
-//                 {projects.map((project, idx) => (
-//                   <div
-//                     className="timeline-item"
-//                     key={idx}
-//                     ref={itemsRefs[idx]}
-//                     data-index={idx}
-//                     onClick={() => scrollToItem(idx)}
-//                     role="button"
-//                     tabIndex={0}
-//                     onKeyDown={(e) => {
-//                       if (e.key === "Enter" || e.key === " ") scrollToItem(idx);
-//                     }}
-//                   >
-//                     <div className="year-circle">{project.year}</div>
-//                     <div className="project-card">
-//                       <ul className="project-text" aria-live="polite">
-//                         {project.items.map((it, i) => (
-//                           <li key={i}>• {it}</li>
-//                         ))}
-//                       </ul>
-//                     </div>
-//                   </div>
-//                 ))}
-//               </div>
-//             </div>
+          <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}>
+                <svg className="svg-container" id="timeline-svg" ref={svgRef} />
+                {projects.map((project, idx) => (
+                  <div
+                    className="timeline-item"
+                    key={idx}
+                    ref={itemsRefs[idx]}
+                    data-index={idx}
+                    onClick={() => scrollToItem(idx)}
+                    role="button"
+                    tabIndex={0}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter" || e.key === " ") scrollToItem(idx);
+                    }}
+                  >
+                    <div className="year-circle">{project.year}</div>
+                    <div className="project-card">
+                      <ul className="project-text" aria-live="polite">
+                        {project.items.map((it, i) => (
+                          <li key={i}>• {it}</li>
+                        ))}
+                      </ul>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </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>
-//             </div>
-//           </div>
-//         </div>
-//       </main>
-//     </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>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}
 
-// const defaultProjects = [
-//   {
-//     year: "2019–2022",
-//     items: [
-//       "صيانة وإعادة تأهيل مراكز خدمة، مباني إقليمية، وغرف الصرافات الآلية لشركتي Syriatel وMTN"
-//     ]
-//   },
-//   {
-//     year: "2023",
-//     items: [
-//       "صيانة منشآت ومبانٍ إدارية لشركات REXOS وSTC"
-//     ]
-//   }
-// ];
+const defaultProjects = [
+  {
+    year: "2019–2022",
+    items: [
+      "صيانة وإعادة تأهيل مراكز خدمة، مباني إقليمية، وغرف الصرافات الآلية لشركتي Syriatel وMTN"
+    ]
+  },
+  {
+    year: "2023",
+    items: [
+      "صيانة منشآت ومبانٍ إدارية لشركات REXOS وSTC"
+    ]
+  }
+];
 
-// export default function DepartmentDetail2() {
-//   const [active, setActive] = useState(null);
+export default function DepartmentDetail3() {
+  const [active, setActive] = useState(null);
 
-//   const buttons = [
-//     { id: 1, title: "قسم اعادة التاهيل وصيانه المباني", key: "expertise" },
-//     { id: 3, title: "الاعمال المنفذة", key: "works" },
-//   ];
+  const buttons = [
+    { id: 1, title: "قسم اعادة التاهيل وصيانه المباني", key: "expertise" },
+    { id: 3, title: "الاعمال المنفذة", key: "works" },
+  ];
 
-//   const expertiseItems = [
-//     {
-//       icon: (
-//         <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-//           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
-//         </svg>
-//       ),
-//       text: "الصيانة الدورية والطارئة."
-//     },
-//     {
-//       icon: (
-//         <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-//           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
-//         </svg>
-//       ),
-//       text: "إعادة التأهيل والترميم (أعمال مدنية ومعمارية)."
-//     },
-//     {
-//       icon: (
-//         <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-//           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"/>
-//         </svg>
-//       ),
-//       text: "أعمال الكهرباء والميكانيك والتحكم."
-//     },
-//     {
-//       icon: (
-//         <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-//           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
-//         </svg>
-//       ),
-//       text: "أعمال العزل والحماية."
-//     },
-//     {
-//       icon: (
-//         <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-//           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
-//         </svg>
-//       ),
-//       text: "الإدارة وصيانة المباني والمنشآت على المدى الطويل."
-//     },
-//     {
-//       icon: (
-//         <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-//           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M13 10V3L4 14h7v7l9-11h-7z"/>
-//         </svg>
-//       ),
-//       text: "الالتزام بمعايير الجودة والسلامة المهنية في التنفيذ."
-//     }
-//   ];
+  const expertiseItems = [
+    {
+      icon: (
+        <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
+        </svg>
+      ),
+      text: "الصيانة الدورية والطارئة."
+    },
+    {
+      icon: (
+        <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
+        </svg>
+      ),
+      text: "إعادة التأهيل والترميم (أعمال مدنية ومعمارية)."
+    },
+    {
+      icon: (
+        <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"/>
+        </svg>
+      ),
+      text: "أعمال الكهرباء والميكانيك والتحكم."
+    },
+    {
+      icon: (
+        <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
+        </svg>
+      ),
+      text: "أعمال العزل والحماية."
+    },
+    {
+      icon: (
+        <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
+        </svg>
+      ),
+      text: "الإدارة وصيانة المباني والمنشآت على المدى الطويل."
+    },
+    {
+      icon: (
+        <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M13 10V3L4 14h7v7l9-11h-7z"/>
+        </svg>
+      ),
+      text: "الالتزام بمعايير الجودة والسلامة المهنية في التنفيذ."
+    }
+  ];
 
-//   const displayItems = expertiseItems;
-//   const heroImage = active === null ? d14 : active === "expertise" ? d15 : active === "works" ? d16 : d7;
+  const displayItems = expertiseItems;
+  const heroImage = active === null ? d14 : active === "expertise" ? d15 : active === "works" ? d16 : d7;
 
-//   const handleButtonClick = (key) => {
-//     setActive((prev) => (prev === key ? null : key));
-//   };
+  const handleButtonClick = (key) => {
+    setActive((prev) => (prev === key ? null : key));
+  };
 
-//   return (
-//     <div dir="rtl" className="w-full min-h-screen bg-white pb-12">
-//       <section className="relative">
-//         <div className="w-full">
-//           <AnimatePresence mode="wait">
-//             <motion.div
-//               key={active}
-//               initial={{ opacity: 0, scale: 1.05 }}
-//               animate={{ opacity: 1, scale: 1 }}
-//               exit={{ opacity: 0, scale: 0.98 }}
-//               transition={{ duration: 0.6 }}
-//               className="relative h-72 sm:h-80 md:h-[480px] lg:h-[580px] overflow-visible"
-//             >
-//               <img
-//                 src={heroImage}
-//                 alt="مرافق سكنية وخدمية"
-//                 className="absolute inset-0 w-full h-full object-cover object-center z-0 brightness-90"
-//               />
+  return (
+    <div dir="rtl" className="w-full min-h-screen bg-white pb-12">
+      <section className="relative">
+        <div className="w-full">
+          <AnimatePresence mode="wait">
+            <motion.div
+              key={active}
+              initial={{ opacity: 0, scale: 1.05 }}
+              animate={{ opacity: 1, scale: 1 }}
+              exit={{ opacity: 0, scale: 0.98 }}
+              transition={{ duration: 0.6 }}
+              className="relative h-72 sm:h-80 md:h-[480px] lg:h-[580px] overflow-visible"
+            >
+              <img
+                src={heroImage}
+                alt="مرافق سكنية وخدمية"
+                className="absolute inset-0 w-full h-full object-cover object-center z-0 brightness-90"
+              />
 
-//               <motion.div
-//                 initial={{ opacity: 0 }}
-//                 animate={{ opacity: 1 }}
-//                 transition={{ delay: 0.25, duration: 0.45 }}
-//                 className="absolute inset-0 bg-gradient-to-r from-slate-900/90 via-slate-800/75 to-slate-900/60 z-5"
-//               />
+              <motion.div
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ delay: 0.25, duration: 0.45 }}
+                className="absolute inset-0 bg-gradient-to-r from-slate-900/90 via-slate-800/75 to-slate-900/60 z-5"
+              />
 
-//               <div className="absolute inset-0 z-10 flex items-center pointer-events-none">
-//                 <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">
-//                         <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">قسم اعادة التاهيل وصيانه المباني</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">قسم اعادة التاهيل وصيانه المباني</h2>
-//                         <p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">يقدم هذا القسم خدمات صيانة متكاملة للمباني السكنية والخدمية والإدارية والصناعية، وتشمل:</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">
-//                         <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">الاعمال المنفذة</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">الاعمال المنفذة</h2>
-//                         <p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">عرض مشروعاتنا وخط الزمن الخاص بالأعمال المنفذة.</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">
-//                         <h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight">قسم اعادة التاهيل وصيانه المباني</h2>
-//                       </motion.div>
-//                     )}
-//                   </AnimatePresence>
-//                 </div>
-//               </div>
+              <div className="absolute inset-0 z-10 flex items-center pointer-events-none">
+                <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">
+                        <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">قسم اعادة التاهيل وصيانه المباني</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">قسم اعادة التاهيل وصيانه المباني</h2>
+                        <p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">يقدم هذا القسم خدمات صيانة متكاملة للمباني السكنية والخدمية والإدارية والصناعية، وتشمل:</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">
+                        <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">الاعمال المنفذة</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">الاعمال المنفذة</h2>
+                        <p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">عرض مشروعاتنا وخط الزمن الخاص بالأعمال المنفذة.</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">
+                        <h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight">قسم اعادة التاهيل وصيانه المباني</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" style={{ zIndex: 99999 }}>
-//                 <AnimatePresence>
-//                   {!active && (
-//                     <motion.div
-//                       key="floating-buttons"
-//                       initial={{ opacity: 0, y: 10 }}
-//                       animate={{ opacity: 1, y: 0 }}
-//                       exit={{ opacity: 0, y: 10 }}
-//                       transition={{ duration: 0.45 }}
-//                       className="w-full max-w-7xl mx-auto"
-//                     >
-//                       <div className="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6">
-//                         {buttons.map((b, index) => (
-//                           <motion.button
-//                             key={b.id}
-//                             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 } }}
-//                             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"
-//                           >
-//                             <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" />
-//                             <div className="relative z-10">
-//                               <div className="flex items-center gap-3 mb-3">
-//                                 <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>
-//                               </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>انقر للاطّلاع على التفاصيل</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>
-//                               </p>
-//                             </div>
-//                           </motion.button>
-//                         ))}
-//                       </div>
-//                     </motion.div>
-//                   )}
-//                 </AnimatePresence>
-//               </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" style={{ zIndex: 99999 }}>
+                <AnimatePresence>
+                  {!active && (
+                    <motion.div
+                      key="floating-buttons"
+                      initial={{ opacity: 0, y: 10 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      exit={{ opacity: 0, y: 10 }}
+                      transition={{ duration: 0.45 }}
+                      className="w-full max-w-7xl mx-auto"
+                    >
+                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6">
+                        {buttons.map((b, index) => (
+                          <motion.button
+                            key={b.id}
+                            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 } }}
+                            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"
+                          >
+                            <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" />
+                            <div className="relative z-10">
+                              <div className="flex items-center gap-3 mb-3">
+                                <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>
+                              </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>انقر للاطّلاع على التفاصيل</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>
+                              </p>
+                            </div>
+                          </motion.button>
+                        ))}
+                      </div>
+                    </motion.div>
+                  )}
+                </AnimatePresence>
+              </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>
-//               </div>
-//             </motion.div>
-//           </AnimatePresence>
-//         </div>
-//       </section>
+              <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>
+              </div>
+            </motion.div>
+          </AnimatePresence>
+        </div>
+      </section>
 
-//       <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" />
-//           ) : 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"/>
-//                 </svg>
-//                 <span>العودة للقائمة الرئيسية</span>
-//               </motion.button>
+      <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" />
+          ) : 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"/>
+                </svg>
+                <span>العودة للقائمة الرئيسية</span>
+              </motion.button>
 
-//               <div style={{ position: 'relative', left: '50%', right: '50%', marginLeft: '-50vw', marginRight: '-50vw', width: '100vw' }}>
-//                 <ProjectsTimeline projects={defaultProjects} 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"/>
-//                 </svg>
-//                 <span>العودة للقائمة الرئيسية</span>
-//               </motion.button>
+              <div style={{ position: 'relative', left: '50%', right: '50%', marginLeft: '-50vw', marginRight: '-50vw', width: '100vw' }}>
+                <ProjectsTimeline projects={defaultProjects} 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"/>
+                </svg>
+                <span>العودة للقائمة الرئيسية</span>
+              </motion.button>
 
-//               <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
-//                 {displayItems.map((item, index) => (
-//                   <motion.div
-//                     key={index}
-//                     initial={{ opacity: 0, y: 30 }}
-//                     whileInView={{ opacity: 1, y: 0 }}
-//                     viewport={{ once: true, amount: 0.25 }}
-//                     transition={{ delay: index * 0.08, duration: 0.5 }}
-//                     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.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 text-base sm:text-2xl font-extrabold 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="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
+                {displayItems.map((item, index) => (
+                  <motion.div
+                    key={index}
+                    initial={{ opacity: 0, y: 30 }}
+                    whileInView={{ opacity: 1, y: 0 }}
+                    viewport={{ once: true, amount: 0.25 }}
+                    transition={{ delay: index * 0.08, duration: 0.5 }}
+                    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.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 text-base sm:text-2xl font-extrabold 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-xs sm: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>
+                      <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">{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.5" d="M15 19l-7-7 7-7"/>
-//                         </svg>
-//                       </motion.div>
-//                     </div>
-//                   </motion.div>
-//                 ))}
-//               </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"/>
+                        </svg>
+                      </motion.div>
+                    </div>
+                  </motion.div>
+                ))}
+              </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">
-//                 <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">خدمات احترافية متكاملة</span>
-//                   <div className="w-2 h-2 bg-orange-500 rounded-full animate-pulse" style={{ animationDelay: "0.5s" }} />
-//                 </div>
-//               </motion.div>
-//             </motion.div>
-//           )}
-//         </AnimatePresence>
-//       </section>
-//     </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">
+                <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">خدمات احترافية متكاملة</span>
+                  <div className="w-2 h-2 bg-orange-500 rounded-full animate-pulse" style={{ animationDelay: "0.5s" }} />
+                </div>
+              </motion.div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </section>
+    </div>
+  );
+}
diff --git a/src/Components/Sections/DepartmentDetail4/DepartmentDetail4.jsx b/src/Components/Sections/DepartmentDetail4/DepartmentDetail4.jsx
new file mode 100644
index 0000000..f36c638
--- /dev/null
+++ b/src/Components/Sections/DepartmentDetail4/DepartmentDetail4.jsx
@@ -0,0 +1,587 @@
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import d17 from "../../../../src/assets/Images/d17.png";
+import d23 from "../../../../src/assets/Images/d23.jpg";
+import d24 from "../../../../src/assets/Images/d24.png";
+
+function ProjectsTimeline({
+  projects,
+  mainTitle = "المشاريع المنفذة",
+  subtitle = "خط زمني شامل للأعمال والإنجازات",
+  plain = false,
+}) {
+  const wrapperRef = useRef(null);
+  const scrollRef = useRef(null);
+  const svgRef = useRef(null);
+  const [itemsRefs, setItemsRefs] = useState([]);
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  useEffect(() => {
+    setItemsRefs((r) => {
+      const arr = Array(projects.length)
+        .fill()
+        .map((_, i) => r[i] || React.createRef());
+      return arr;
+    });
+  }, [projects.length]);
+
+  const drawCurvedLines = useCallback(() => {
+    const svgEl = svgRef.current;
+    const wrapper = wrapperRef.current;
+    if (!svgEl || !wrapper) return;
+
+    while (svgEl.firstChild) svgEl.removeChild(svgEl.firstChild);
+    svgEl.setAttribute("width", wrapper.scrollWidth);
+    svgEl.setAttribute("height", wrapper.offsetHeight);
+
+    if (!itemsRefs || itemsRefs.length < 2) return;
+
+    const svgNS = "http://www.w3.org/2000/svg";
+    const defs = document.createElementNS(svgNS, "defs");
+    const gradient = document.createElementNS(svgNS, "linearGradient");
+    gradient.setAttribute("id", "timeline-gradient");
+    gradient.setAttribute("x1", "0%");
+    gradient.setAttribute("y1", "0%");
+    gradient.setAttribute("x2", "100%");
+    gradient.setAttribute("y2", "0%");
+
+    const stop1 = document.createElementNS(svgNS, "stop");
+    stop1.setAttribute("offset", "0%");
+    stop1.setAttribute("style", "stop-color:#0f172a;stop-opacity:1");
+
+    const stop2 = document.createElementNS(svgNS, "stop");
+    stop2.setAttribute("offset", "50%");
+    stop2.setAttribute("style", "stop-color:#f97316;stop-opacity:1");
+
+    const stop3 = document.createElementNS(svgNS, "stop");
+    stop3.setAttribute("offset", "100%");
+    stop3.setAttribute("style", "stop-color:#9ca3af;stop-opacity:1");
+
+    gradient.appendChild(stop1);
+    gradient.appendChild(stop2);
+    gradient.appendChild(stop3);
+    defs.appendChild(gradient);
+    svgEl.appendChild(defs);
+
+    for (let i = 0; i < itemsRefs.length - 1; i++) {
+      const item1 = itemsRefs[i].current;
+      const item2 = itemsRefs[i + 1].current;
+      if (!item1 || !item2) continue;
+
+      const circle1 = item1.querySelector(".year-circle");
+      const circle2 = item2.querySelector(".year-circle");
+      if (!circle1 || !circle2) continue;
+
+      const rect1 = circle1.getBoundingClientRect();
+      const rect2 = circle2.getBoundingClientRect();
+      const wrapperRect = wrapper.getBoundingClientRect();
+
+      const x1 = rect1.left - wrapperRect.left + rect1.width / 2;
+      const y1 = rect1.top - wrapperRect.top + rect1.height / 2;
+      const x2 = rect2.left - wrapperRect.left + rect2.width / 2;
+      const y2 = rect2.top - wrapperRect.top + rect2.height / 2;
+
+      const controlPointOffset = Math.abs(x2 - x1) * 0.4;
+      const cx1 = x1 - controlPointOffset;
+      const cy1 = y1 - 40;
+      const cx2 = x2 + controlPointOffset;
+      const cy2 = y2 - 40;
+
+      const path = document.createElementNS(svgNS, "path");
+      const d = `M ${x1} ${y1} C ${cx1} ${cy1}, ${cx2} ${cy2}, ${x2} ${y2}`;
+      path.setAttribute("d", d);
+      path.setAttribute("stroke", "url(#timeline-gradient)");
+      path.setAttribute("stroke-width", "4");
+      path.setAttribute("fill", "none");
+      path.setAttribute("stroke-linecap", "round");
+      path.style.filter = "drop-shadow(0 2px 8px rgba(15,23,42,0.22))";
+      svgEl.appendChild(path);
+    }
+  }, [itemsRefs]);
+
+  const setActiveItem = useCallback(
+    (index) => {
+      setCurrentIndex(index);
+      itemsRefs.forEach((ref, i) => {
+        const el = ref.current;
+        if (!el) return;
+        if (i === index) el.classList.add("active");
+        else el.classList.remove("active");
+      });
+    },
+    [itemsRefs]
+  );
+
+  const scrollToItem = useCallback(
+    (index) => {
+      if (index < 0 || index >= itemsRefs.length) return;
+      const scrollContainer = scrollRef.current;
+      const item = itemsRefs[index].current;
+      if (!scrollContainer || !item) return;
+
+      const itemRect = item.getBoundingClientRect();
+      const containerRect = scrollContainer.getBoundingClientRect();
+      const scrollLeft = scrollContainer.scrollLeft;
+
+      const targetScroll =
+        scrollLeft + itemRect.left - containerRect.left - containerRect.width / 2 + itemRect.width / 2;
+
+      scrollContainer.scrollTo({ left: targetScroll, behavior: "smooth" });
+      setActiveItem(index);
+    },
+    [itemsRefs, setActiveItem]
+  );
+
+  const onPrev = () => {
+    if (currentIndex > 0) scrollToItem(currentIndex - 1);
+  };
+  const onNext = () => {
+    if (currentIndex < itemsRefs.length - 1) scrollToItem(currentIndex + 1);
+  };
+
+  useEffect(() => {
+    const t = setTimeout(() => {
+      drawCurvedLines();
+      setActiveItem(0);
+    }, 100);
+
+    const scrollContainer = scrollRef.current;
+    let scrollTimeout = null;
+
+    const onScroll = () => {
+      clearTimeout(scrollTimeout);
+      scrollTimeout = setTimeout(() => {
+        const containerRect = scrollContainer.getBoundingClientRect();
+        const containerCenter = containerRect.left + containerRect.width / 2;
+
+        let closestIndex = 0;
+        let closestDistance = Infinity;
+
+        itemsRefs.forEach((ref, index) => {
+          const el = ref.current;
+          if (!el) return;
+          const itemRect = el.getBoundingClientRect();
+          const itemCenter = itemRect.left + itemRect.width / 2;
+          const distance = Math.abs(containerCenter - itemCenter);
+          if (distance < closestDistance) {
+            closestDistance = distance;
+            closestIndex = index;
+          }
+        });
+
+        if (closestIndex !== currentIndex) {
+          setActiveItem(closestIndex);
+        }
+      }, 150);
+    };
+
+    if (scrollContainer) scrollContainer.addEventListener("scroll", onScroll);
+    const onResize = () => setTimeout(drawCurvedLines, 120);
+    window.addEventListener("resize", onResize);
+
+    return () => {
+      clearTimeout(t);
+      if (scrollContainer) scrollContainer.removeEventListener("scroll", onScroll);
+      window.removeEventListener("resize", onResize);
+    };
+  }, [itemsRefs, drawCurvedLines, setActiveItem]);
+
+  useEffect(() => {
+    setTimeout(() => drawCurvedLines(), 120);
+  }, [itemsRefs, drawCurvedLines, projects.length]);
+
+  const css = `
+    :root{--bg-start:#0b1220;--bg-mid:#102033;--bg-end:#2b3a4a;--accent:#f97316;--muted:#9ca3af}
+    .projects-timeline-root { direction: rtl; min-height: 100%; }
+    .timeline-scroll { overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
+    .timeline-scroll::-webkit-scrollbar{ display:none; height:0; }
+    .timeline-wrapper { display:flex; align-items:center; position:relative; padding:clamp(48px,6vw,120px) clamp(12px,4vw,120px); min-width:max-content; }
+    .svg-container { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:0; }
+    .timeline-item { position:relative; display:flex; flex-direction:column; align-items:center; margin:0 clamp(20px,4vw,60px); transition:all .6s cubic-bezier(.34,1.56,.64,1); z-index:1; }
+    .year-circle { width:clamp(72px,9vw,150px); height:clamp(72px,9vw,150px); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:clamp(14px,1.6vw,24px); font-weight:700; background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); color:var(--bg-start); box-shadow: 0 6px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.04); transition:all .6s cubic-bezier(.34,1.56,.64,1); cursor:pointer; border:1px solid rgba(255,255,255,0.08); position:relative; z-index:2; backdrop-filter: blur(8px) saturate(120%);
+      background-clip: padding-box;
+    }
+    .year-circle::after { content: ''; position:absolute; inset:-8px; border-radius:50%; border:2px solid rgba(249,115,22,0.08); opacity:0; transition:all .6s ease; }
+    .timeline-item.active .year-circle { width:clamp(110px,14vw,200px); height:clamp(110px,14vw,200px); font-size:clamp(18px,2.2vw,28px); box-shadow:0 18px 60px rgba(15,23,42,.5), inset 0 2px 6px rgba(255,255,255,0.04); border-color: rgba(249,115,22,0.18); transform: translateY(-15px) scale(1.03); }
+    .timeline-item.active .year-circle::after { opacity:1; inset:-12px; animation: ripple 2s ease-out infinite; }
+    @keyframes ripple { 0%{ transform: scale(1); opacity:.6;} 100%{ transform: scale(1.25); opacity:0;} }
+    .project-card { margin-top:40px; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)); border-radius:18px; padding:26px; min-width:320px; max-width:420px; box-shadow:0 12px 40px rgba(2,6,23,.45); opacity:.9; transform: scale(.98) translateY(8px); transition:all .6s cubic-bezier(.34,1.56,.64,1); border:1px solid rgba(255,255,255,.06); position:relative; overflow:hidden; backdrop-filter: blur(8px) saturate(120%); }
+    .project-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background: linear-gradient(to left, var(--accent), #b91c1c, var(--muted)); opacity:0; transition:opacity .6s ease; }
+    .timeline-item.active .project-card { opacity:1; transform: scale(1) translateY(0); box-shadow:0 28px 80px rgba(2,6,23,.5),0 6px 18px rgba(0,0,0,.08); border-color: rgba(249,115,22,.14); }
+    .timeline-item.active .project-card::before { opacity:1; }
+    .project-text { font-size:15px; line-height:2; color:#0b1220; font-weight:600; }
+    .project-text li { margin-bottom:12px; padding-right:12px; transition:all .3s ease; border-radius:8px; padding:8px 12px; }
+    .timeline-item.active .project-text li:hover { background: rgba(249,115,22,.06); transform: translateX(-4px); }
+    .scroll-indicator { position:absolute; bottom:30px; left:50%; transform: translateX(-50%); display:flex; gap:20px; z-index:10; }
+    .scroll-btn { background: linear-gradient(135deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.82) 100%); border:none; border-radius:50%; width:56px; height:56px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:22px; color:var(--accent); box-shadow:0 6px 20px rgba(2,6,23,.35); transition:all .4s cubic-bezier(.34,1.56,.64,1); backdrop-filter: blur(6px); }
+    .scroll-btn:hover:not(:disabled){ background: linear-gradient(135deg,#fff 0%,#fff8f2 100%); transform: scale(1.12); box-shadow:0 10px 35px rgba(15,23,42,.22); }
+    .scroll-btn:active:not(:disabled){ transform: scale(1.05); }
+    .scroll-btn:disabled { opacity:.4; cursor:not-allowed; }
+    @media (max-width:768px){
+      .timeline-wrapper { padding:clamp(36px,6vw,80px) 24px; }
+      .timeline-item { margin:0 18px; }
+      .year-circle { width:90px; height:90px; font-size:15px; }
+      .timeline-item.active .year-circle { width:120px; height:120px; font-size:19px; }
+      .project-card { min-width:260px; max-width:300px; padding:20px; }
+      .project-text { font-size:13px; }
+      .scroll-btn { width:48px; height:48px; font-size:20px; }
+    }
+
+    .projects-timeline-root.plain-bleed .timeline-wrapper { padding:clamp(48px,6vw,120px) 24px; }
+    .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%)" };
+
+  return (
+    <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)" }}>
+                {mainTitle}
+              </h1>
+              <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}>
+                <svg className="svg-container" id="timeline-svg" ref={svgRef} />
+                {projects.map((project, idx) => (
+                  <div
+                    className="timeline-item"
+                    key={idx}
+                    ref={itemsRefs[idx]}
+                    data-index={idx}
+                    onClick={() => scrollToItem(idx)}
+                    role="button"
+                    tabIndex={0}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter" || e.key === " ") scrollToItem(idx);
+                    }}
+                  >
+                    <div className="year-circle">{project.year}</div>
+                    <div className="project-card">
+                      <ul className="project-text" aria-live="polite">
+                        {project.items.map((it, i) => (
+                          <li key={i}>• {it}</li>
+                        ))}
+                      </ul>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </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>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}
+
+const defaultProjects = [
+  {
+    year: "2009",
+    items: [
+      "دراسة وإشراف محطة معالجة الغاز الطبيعي في معمل الصهر عدرا 2009",
+      "دراسة وإشراف محطات فصل الغازات في معمل الصهر عدرا 2009",
+    ],
+  },
+  {
+    year: "2022",
+    items: [
+      "الصيانة الدورية والطارئة لمستودعات وقود شركتي Syriatel-MTN في كل سورية من عام 2022 ومستمر الى الآن",
+    ],
+  },
+  {
+    year: "2023",
+    items: ["إنشاء محطة الكيروسين في مطار اللاذقية المدني 2023"],
+  },
+  {
+    year: "2024",
+    items: [
+      "إنشاء مستودع الوقود الاستراتيجي بسعة 1 مليون لتر – ريف دمشق 2024",
+      "الصيانة الدورية والطارئة لمستودع وقود مرفأ طرطوس من عام 2024 ومستمر الى الآن",
+    ],
+  },
+];
+
+export default function DepartmentDetail4() {
+  const [active, setActive] = useState(null);
+
+  const buttons = [
+    { id: 1, title: "اختصاص القسم", key: "expertise" },
+    { id: 3, title: "الاعمال المنفذة", key: "works" },
+  ];
+
+  // New expertise items as per user's provided bullets
+  const expertiseItems = [
+    {
+      icon: (
+        <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
+        </svg>
+      ),
+      text: "دراسات إنشاء وتطوير محطات الوقود."
+    },
+    {
+      icon: (
+        <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
+        </svg>
+      ),
+      text: "تنفيذ الأعمال المدنية والميكانيكية والكهربائية وأنظمة التحكم في محطات الوقود."
+    },
+    {
+      icon: (
+        <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"/>
+        </svg>
+      ),
+      text: "صيانة محطات الوقود والمنشآت النفطية دورية وطارئة."
+    },
+    {
+      icon: (
+        <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
+        </svg>
+      ),
+      text: "صيانة المضخات والعدادات ومعايرتها."
+    },
+    {
+      icon: (
+        <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
+        </svg>
+      ),
+      text: "تنظيف والتفتيش الفني وصيانة خزانات الوقود وتقييم عمرها الفني."
+    },
+    {
+      icon: (
+        <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M13 10V3L4 14h7v7l9-11h-7z"/>
+        </svg>
+      ),
+      text: "توريد وتركيب التجهيزات المقاومة للانفجار (Explosion Proof)."
+    },
+    {
+      icon: (
+        <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M13 10V3L4 14h7v7l9-11h-7z"/>
+        </svg>
+      ),
+      text: "الالتزام الصارم بإجراءات السلامة المهنية والصحة والبيئة."
+    },
+    {
+      icon: (
+        <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M13 10V3L4 14h7v7l9-11h-7z"/>
+        </svg>
+      ),
+      text: "الجاهزية للعمل على مدار 24/7 في جميع المحافظات."
+    },
+    {
+      icon: (
+        <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M13 10V3L4 14h7v7l9-11h-7z"/>
+        </svg>
+      ),
+      text: "تقديم وتركيب أنظمة المراقبة والإنذار المبكر والإطفاء الآلي والتأريض."
+    },
+  ];
+
+  const displayItems = expertiseItems;
+  const heroImage = active === "expertise" ? d23 : active === "works" ? d24 : d17;
+
+  const handleButtonClick = (key) => {
+    setActive((prev) => (prev === key ? null : key));
+  };
+
+  return (
+    <div dir="rtl" className="w-full min-h-screen bg-white pb-12">
+      <section className="relative">
+        <div className="w-full">
+          <AnimatePresence mode="wait">
+            <motion.div
+              key={active}
+              initial={{ opacity: 0, scale: 1.05 }}
+              animate={{ opacity: 1, scale: 1 }}
+              exit={{ opacity: 0, scale: 0.98 }}
+              transition={{ duration: 0.6 }}
+              className="relative h-72 sm:h-80 md:h-[480px] lg:h-[580px] overflow-visible"
+            >
+              <img
+                src={heroImage}
+                alt="مرافق وخدمات محطات الوقود"
+                className="absolute inset-0 w-full h-full object-cover object-center z-0 brightness-90"
+              />
+
+              <motion.div
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ delay: 0.25, duration: 0.45 }}
+                className="absolute inset-0 bg-gradient-to-r from-slate-900/90 via-slate-800/75 to-slate-900/60 z-5"
+              />
+
+              <div className="absolute inset-0 z-10 flex items-center pointer-events-none">
+                <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">
+                        <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">اختصاص القسم</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">يعد من الأقسام الأساسية في الشركة، ويقدم خدمات متخصصة تشمل:</h2>
+                        <p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">الاطّلاع على البطاقات أدناه للحصول على تفاصيل كل خدمة.</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">
+                        <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">الاعمال المنفذة</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">الاعمال المنفذة</h2>
+                        <p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">عرض مشروعاتنا وخط الزمن الخاص بالأعمال المنفذة.</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">
+                        <h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight">قسم محطات الوقود وصيانة المنشات النفطية</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" style={{ zIndex: 99999 }}>
+                <AnimatePresence>
+                  {!active && (
+                    <motion.div
+                      key="floating-buttons"
+                      initial={{ opacity: 0, y: 10 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      exit={{ opacity: 0, y: 10 }}
+                      transition={{ duration: 0.45 }}
+                      className="w-full max-w-7xl mx-auto"
+                    >
+                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6">
+                        {buttons.map((b, index) => (
+                          <motion.button
+                            key={b.id}
+                            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 } }}
+                            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"
+                          >
+                            <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" />
+                            <div className="relative z-10">
+                              <div className="flex items-center gap-3 mb-3">
+                                <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>
+                              </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>انقر للاطّلاع على التفاصيل</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>
+                              </p>
+                            </div>
+                          </motion.button>
+                        ))}
+                      </div>
+                    </motion.div>
+                  )}
+                </AnimatePresence>
+              </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>
+              </div>
+            </motion.div>
+          </AnimatePresence>
+        </div>
+      </section>
+
+      <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" />
+          ) : 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"/>
+                </svg>
+                <span>العودة للقائمة الرئيسية</span>
+              </motion.button>
+
+              <div style={{ position: 'relative', left: '50%', right: '50%', marginLeft: '-50vw', marginRight: '-50vw', width: '100vw' }}>
+                <ProjectsTimeline projects={defaultProjects} 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"/>
+                </svg>
+                <span>العودة للقائمة الرئيسية</span>
+              </motion.button>
+
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
+                {displayItems.map((item, index) => (
+                  <motion.div
+                    key={index}
+                    initial={{ opacity: 0, y: 30 }}
+                    whileInView={{ opacity: 1, y: 0 }}
+                    viewport={{ once: true, amount: 0.25 }}
+                    transition={{ delay: index * 0.08, duration: 0.5 }}
+                    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.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 text-base sm:text-2xl font-extrabold 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-xs sm: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.5" d="M15 19l-7-7 7-7"/>
+                        </svg>
+                      </motion.div>
+                    </div>
+                  </motion.div>
+                ))}
+              </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">
+                <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">خدمات احترافية متكاملة</span>
+                  <div className="w-2 h-2 bg-orange-500 rounded-full animate-pulse" style={{ animationDelay: "0.5s" }} />
+                </div>
+              </motion.div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </section>
+    </div>
+  );
+}
diff --git a/src/Components/Sections/DepartmentDetail5/DepartmentDetail5.jsx b/src/Components/Sections/DepartmentDetail5/DepartmentDetail5.jsx
new file mode 100644
index 0000000..66ca61e
--- /dev/null
+++ b/src/Components/Sections/DepartmentDetail5/DepartmentDetail5.jsx
@@ -0,0 +1,608 @@
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import d18 from "../../../../src/assets/Images/d18.jpg";
+import d25 from "../../../../src/assets/Images/d25.jpeg";
+import d26 from "../../../../src/assets/Images/d26.jpeg";
+
+function ProjectsTimeline({
+  projects,
+  mainTitle = "المشاريع المنفذة",
+  subtitle = "خط زمني شامل للأعمال والإنجازات",
+  plain = false,
+}) {
+  const wrapperRef = useRef(null);
+  const scrollRef = useRef(null);
+  const svgRef = useRef(null);
+  const [itemsRefs, setItemsRefs] = useState([]);
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  useEffect(() => {
+    setItemsRefs((r) => {
+      const arr = Array(projects.length)
+        .fill()
+        .map((_, i) => r[i] || React.createRef());
+      return arr;
+    });
+  }, [projects.length]);
+
+  const drawCurvedLines = useCallback(() => {
+    const svgEl = svgRef.current;
+    const wrapper = wrapperRef.current;
+    if (!svgEl || !wrapper) return;
+
+    while (svgEl.firstChild) svgEl.removeChild(svgEl.firstChild);
+    svgEl.setAttribute("width", wrapper.scrollWidth);
+    svgEl.setAttribute("height", wrapper.offsetHeight);
+
+    if (!itemsRefs || itemsRefs.length < 2) return;
+
+    const svgNS = "http://www.w3.org/2000/svg";
+    const defs = document.createElementNS(svgNS, "defs");
+    const gradient = document.createElementNS(svgNS, "linearGradient");
+    gradient.setAttribute("id", "timeline-gradient");
+    gradient.setAttribute("x1", "0%");
+    gradient.setAttribute("y1", "0%");
+    gradient.setAttribute("x2", "100%");
+    gradient.setAttribute("y2", "0%");
+
+    const stop1 = document.createElementNS(svgNS, "stop");
+    stop1.setAttribute("offset", "0%");
+    stop1.setAttribute("style", "stop-color:#0f172a;stop-opacity:1");
+
+    const stop2 = document.createElementNS(svgNS, "stop");
+    stop2.setAttribute("offset", "50%");
+    stop2.setAttribute("style", "stop-color:#f97316;stop-opacity:1");
+
+    const stop3 = document.createElementNS(svgNS, "stop");
+    stop3.setAttribute("offset", "100%");
+    stop3.setAttribute("style", "stop-color:#9ca3af;stop-opacity:1");
+
+    gradient.appendChild(stop1);
+    gradient.appendChild(stop2);
+    gradient.appendChild(stop3);
+    defs.appendChild(gradient);
+    svgEl.appendChild(defs);
+
+    for (let i = 0; i < itemsRefs.length - 1; i++) {
+      const item1 = itemsRefs[i].current;
+      const item2 = itemsRefs[i + 1].current;
+      if (!item1 || !item2) continue;
+
+      const circle1 = item1.querySelector(".year-circle");
+      const circle2 = item2.querySelector(".year-circle");
+      if (!circle1 || !circle2) continue;
+
+      const rect1 = circle1.getBoundingClientRect();
+      const rect2 = circle2.getBoundingClientRect();
+      const wrapperRect = wrapper.getBoundingClientRect();
+
+      const x1 = rect1.left - wrapperRect.left + rect1.width / 2;
+      const y1 = rect1.top - wrapperRect.top + rect1.height / 2;
+      const x2 = rect2.left - wrapperRect.left + rect2.width / 2;
+      const y2 = rect2.top - wrapperRect.top + rect2.height / 2;
+
+      const controlPointOffset = Math.abs(x2 - x1) * 0.4;
+      const cx1 = x1 - controlPointOffset;
+      const cy1 = y1 - 40;
+      const cx2 = x2 + controlPointOffset;
+      const cy2 = y2 - 40;
+
+      const path = document.createElementNS(svgNS, "path");
+      const d = `M ${x1} ${y1} C ${cx1} ${cy1}, ${cx2} ${cy2}, ${x2} ${y2}`;
+      path.setAttribute("d", d);
+      path.setAttribute("stroke", "url(#timeline-gradient)");
+      path.setAttribute("stroke-width", "4");
+      path.setAttribute("fill", "none");
+      path.setAttribute("stroke-linecap", "round");
+      path.style.filter = "drop-shadow(0 2px 8px rgba(15,23,42,0.22))";
+      svgEl.appendChild(path);
+    }
+  }, [itemsRefs]);
+
+  const setActiveItem = useCallback(
+    (index) => {
+      setCurrentIndex(index);
+      itemsRefs.forEach((ref, i) => {
+        const el = ref.current;
+        if (!el) return;
+        if (i === index) el.classList.add("active");
+        else el.classList.remove("active");
+      });
+    },
+    [itemsRefs]
+  );
+
+  const scrollToItem = useCallback(
+    (index) => {
+      if (index < 0 || index >= itemsRefs.length) return;
+      const scrollContainer = scrollRef.current;
+      const item = itemsRefs[index].current;
+      if (!scrollContainer || !item) return;
+
+      const itemRect = item.getBoundingClientRect();
+      const containerRect = scrollContainer.getBoundingClientRect();
+      const scrollLeft = scrollContainer.scrollLeft;
+
+      const targetScroll =
+        scrollLeft + itemRect.left - containerRect.left - containerRect.width / 2 + itemRect.width / 2;
+
+      scrollContainer.scrollTo({ left: targetScroll, behavior: "smooth" });
+      setActiveItem(index);
+    },
+    [itemsRefs, setActiveItem]
+  );
+
+  const onPrev = () => {
+    if (currentIndex > 0) scrollToItem(currentIndex - 1);
+  };
+  const onNext = () => {
+    if (currentIndex < itemsRefs.length - 1) scrollToItem(currentIndex + 1);
+  };
+
+  useEffect(() => {
+    const t = setTimeout(() => {
+      drawCurvedLines();
+      setActiveItem(0);
+    }, 100);
+
+    const scrollContainer = scrollRef.current;
+    let scrollTimeout = null;
+
+    const onScroll = () => {
+      clearTimeout(scrollTimeout);
+      scrollTimeout = setTimeout(() => {
+        const containerRect = scrollContainer.getBoundingClientRect();
+        const containerCenter = containerRect.left + containerRect.width / 2;
+
+        let closestIndex = 0;
+        let closestDistance = Infinity;
+
+        itemsRefs.forEach((ref, index) => {
+          const el = ref.current;
+          if (!el) return;
+          const itemRect = el.getBoundingClientRect();
+          const itemCenter = itemRect.left + itemRect.width / 2;
+          const distance = Math.abs(containerCenter - itemCenter);
+          if (distance < closestDistance) {
+            closestDistance = distance;
+            closestIndex = index;
+          }
+        });
+
+        if (closestIndex !== currentIndex) {
+          setActiveItem(closestIndex);
+        }
+      }, 150);
+    };
+
+    if (scrollContainer) scrollContainer.addEventListener("scroll", onScroll);
+    const onResize = () => setTimeout(drawCurvedLines, 120);
+    window.addEventListener("resize", onResize);
+
+    return () => {
+      clearTimeout(t);
+      if (scrollContainer) scrollContainer.removeEventListener("scroll", onScroll);
+      window.removeEventListener("resize", onResize);
+    };
+  }, [itemsRefs, drawCurvedLines, setActiveItem]);
+
+  useEffect(() => {
+    setTimeout(() => drawCurvedLines(), 120);
+  }, [itemsRefs, drawCurvedLines, projects.length]);
+
+  const css = `
+    :root{--bg-start:#0b1220;--bg-mid:#102033;--bg-end:#2b3a4a;--accent:#f97316;--muted:#9ca3af}
+    .projects-timeline-root { direction: rtl; min-height: 100%; }
+    .timeline-scroll { overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
+    .timeline-scroll::-webkit-scrollbar{ display:none; height:0; }
+    .timeline-wrapper { display:flex; align-items:center; position:relative; padding:clamp(48px,6vw,120px) clamp(12px,4vw,120px); min-width:max-content; }
+    .svg-container { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:0; }
+    .timeline-item { position:relative; display:flex; flex-direction:column; align-items:center; margin:0 clamp(20px,4vw,60px); transition:all .6s cubic-bezier(.34,1.56,.64,1); z-index:1; }
+    .year-circle { width:clamp(72px,9vw,150px); height:clamp(72px,9vw,150px); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:clamp(14px,1.6vw,24px); font-weight:700; background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); color:var(--bg-start); box-shadow: 0 6px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.04); transition:all .6s cubic-bezier(.34,1.56,.64,1); cursor:pointer; border:1px solid rgba(255,255,255,0.08); position:relative; z-index:2; backdrop-filter: blur(8px) saturate(120%);
+      background-clip: padding-box;
+    }
+    .year-circle::after { content: ''; position:absolute; inset:-8px; border-radius:50%; border:2px solid rgba(249,115,22,0.08); opacity:0; transition:all .6s ease; }
+    .timeline-item.active .year-circle { width:clamp(110px,14vw,200px); height:clamp(110px,14vw,200px); font-size:clamp(18px,2.2vw,28px); box-shadow:0 18px 60px rgba(15,23,42,.5), inset 0 2px 6px rgba(255,255,255,0.04); border-color: rgba(249,115,22,0.18); transform: translateY(-15px) scale(1.03); }
+    .timeline-item.active .year-circle::after { opacity:1; inset:-12px; animation: ripple 2s ease-out infinite; }
+    @keyframes ripple { 0%{ transform: scale(1); opacity:.6;} 100%{ transform: scale(1.25); opacity:0;} }
+    .project-card { margin-top:40px; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)); border-radius:18px; padding:26px; min-width:320px; max-width:420px; box-shadow:0 12px 40px rgba(2,6,23,.45); opacity:.9; transform: scale(.98) translateY(8px); transition:all .6s cubic-bezier(.34,1.56,.64,1); border:1px solid rgba(255,255,255,.06); position:relative; overflow:hidden; backdrop-filter: blur(8px) saturate(120%); }
+    .project-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background: linear-gradient(to left, var(--accent), #b91c1c, var(--muted)); opacity:0; transition:opacity .6s ease; }
+    .timeline-item.active .project-card { opacity:1; transform: scale(1) translateY(0); box-shadow:0 28px 80px rgba(2,6,23,.5),0 6px 18px rgba(0,0,0,.08); border-color: rgba(249,115,22,.14); }
+    .timeline-item.active .project-card::before { opacity:1; }
+    .project-text { font-size:15px; line-height:2; color:#0b1220; font-weight:600; }
+    .project-text li { margin-bottom:12px; padding-right:12px; transition:all .3s ease; border-radius:8px; padding:8px 12px; }
+    .timeline-item.active .project-text li:hover { background: rgba(249,115,22,.06); transform: translateX(-4px); }
+    .scroll-indicator { position:absolute; bottom:30px; left:50%; transform: translateX(-50%); display:flex; gap:20px; z-index:10; }
+    .scroll-btn { background: linear-gradient(135deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.82) 100%); border:none; border-radius:50%; width:56px; height:56px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:22px; color:var(--accent); box-shadow:0 6px 20px rgba(2,6,23,.35); transition:all .4s cubic-bezier(.34,1.56,.64,1); backdrop-filter: blur(6px); }
+    .scroll-btn:hover:not(:disabled){ background: linear-gradient(135deg,#fff 0%,#fff8f2 100%); transform: scale(1.12); box-shadow:0 10px 35px rgba(15,23,42,.22); }
+    .scroll-btn:active:not(:disabled){ transform: scale(1.05); }
+    .scroll-btn:disabled { opacity:.4; cursor:not-allowed; }
+    @media (max-width:768px){
+      .timeline-wrapper { padding:clamp(36px,6vw,80px) 24px; }
+      .timeline-item { margin:0 18px; }
+      .year-circle { width:90px; height:90px; font-size:15px; }
+      .timeline-item.active .year-circle { width:120px; height:120px; font-size:19px; }
+      .project-card { min-width:260px; max-width:300px; padding:20px; }
+      .project-text { font-size:13px; }
+      .scroll-btn { width:48px; height:48px; font-size:20px; }
+    }
+
+    .projects-timeline-root.plain-bleed .timeline-wrapper { padding:clamp(48px,6vw,120px) 24px; }
+    .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%)" };
+
+  return (
+    <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)" }}>
+                {mainTitle}
+              </h1>
+              <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}>
+                <svg className="svg-container" id="timeline-svg" ref={svgRef} />
+                {projects.map((project, idx) => (
+                  <div
+                    className="timeline-item"
+                    key={idx}
+                    ref={itemsRefs[idx]}
+                    data-index={idx}
+                    onClick={() => scrollToItem(idx)}
+                    role="button"
+                    tabIndex={0}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter" || e.key === " ") scrollToItem(idx);
+                    }}
+                  >
+                    <div className="year-circle">{project.year}</div>
+                    <div className="project-card">
+                      <ul className="project-text" aria-live="polite">
+                        {project.items.map((it, i) => (
+                          <li key={i}>• {it}</li>
+                        ))}
+                      </ul>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </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>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}
+
+const 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)",
+    ],
+  },
+];
+
+export default function DepartmentDetail5() {
+  const [active, setActive] = useState(null);
+
+  const buttons = [
+    { id: 1, title: "اختصاص القسم", key: "expertise", img: d25 },
+    { id: 3, title: "الاعمال المنفذة", key: "works", img: d26 },
+  ];
+
+  // New expertise items based on user's content
+  const expertiseItems = [
+    {
+      icon: (
+        <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M12 8v4l3 3" />
+        </svg>
+      ),
+      text: "إجراء الفحوصات غير الإتلافية (NDT) للكشف عن العيوب الخفية في المكونات المعدنية.",
+    },
+    {
+      icon: (
+        <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M3 7h18M3 12h18M3 17h18" />
+        </svg>
+      ),
+      text: "فحص اللحامات باستخدام:",
+    },
+    {
+      icon: (
+        <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M12 2l3 7h7l-5.5 4 2 7L12 17l-6.5 3 2-7L2 9h7z" />
+        </svg>
+      ),
+      text: "Ultrasonic Testing (UT) - الفحص بالموجات فوق الصوتية.",
+    },
+    {
+      icon: (
+        <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M12 2l3 7h7l-5.5 4 2 7L12 17l-6.5 3 2-7L2 9h7z" />
+        </svg>
+      ),
+      text: "Magnetic Particle Testing (MT) - الفحص بالجسيمات المغناطيسية.",
+    },
+    {
+      icon: (
+        <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M4 7h16M4 12h16M4 17h8" />
+        </svg>
+      ),
+      text: "Penetrant Testing (PT) - الفحص بالسوائل المتغلغلة.",
+    },
+    {
+      icon: (
+        <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M5 12h14M12 5v14" />
+        </svg>
+      ),
+      text: "Visual Testing (VT) - الفحص البصري وتقييم جودة اللحام ومطابقته للمواصفات.",
+    },
+    {
+      icon: (
+        <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M3 7h18M3 12h18M3 17h18" />
+        </svg>
+      ),
+      text: "تدقيق ومطابقة المخططات التكنولوجية والهندسية لأعمال التصنيع المعدني، الميكانيكي، الكهربائي ومنظومات التحكم.",
+    },
+    {
+      icon: (
+        <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M12 8v4l3 3" />
+        </svg>
+      ),
+      text: "تدقيق ومطابقة جاهزية المعدات الهندسية وملائمتها للمعايير العالمية.",
+    },
+    {
+      icon: (
+        <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M12 2l3 7h7l-5.5 4 2 7L12 17l-6.5 3 2-7L2 9h7z" />
+        </svg>
+      ),
+      text: "الالتزام بتطبيق معايير السلامة المهنية والجودة أثناء تنفيذ أعمال التفتيش.",
+    },
+  ];
+
+  const displayItems = expertiseItems;
+  const heroImage = active === "expertise" ? d25 : active === "works" ? d26 : d18;
+
+  const handleButtonClick = (key) => {
+    setActive((prev) => (prev === key ? null : key));
+  };
+
+  return (
+    <div dir="rtl" className="w-full min-h-screen bg-white pb-12">
+      <section className="relative">
+        <div className="w-full">
+          <AnimatePresence mode="wait">
+            <motion.div
+              key={active}
+              initial={{ opacity: 0, scale: 1.05 }}
+              animate={{ opacity: 1, scale: 1 }}
+              exit={{ opacity: 0, scale: 0.98 }}
+              transition={{ duration: 0.6 }}
+              className="relative h-72 sm:h-80 md:h-[480px] lg:h-[580px] overflow-visible"
+            >
+              <img
+                src={heroImage}
+                alt="مرافق وخدمات التفتيش والفحص"
+                className="absolute inset-0 w-full h-full object-cover object-center z-0 brightness-90"
+              />
+
+              <motion.div
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ delay: 0.25, duration: 0.45 }}
+                className="absolute inset-0 bg-gradient-to-r from-slate-900/90 via-slate-800/75 to-slate-900/60 z-5"
+              />
+
+              <div className="absolute inset-0 z-10 flex items-center pointer-events-none">
+                <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">
+                        <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">اختصاص القسم</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">يقدم خدمات الفحص والتفتيش الهندسي وفق المعايير الدولية المعتمدة، ويشمل:</h2>
+                        <p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">الاطّلاع على البطاقات أدناه للحصول على تفاصيل كل خدمة.</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">
+                        <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">الاعمال المنفذة</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">الاعمال المنفذة</h2>
+                        <p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">عرض مشروعاتنا وخط الزمن الخاص بالأعمال المنفذة.</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">
+                        <h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight">قسم التفتيش والفحص الفني و الهندسي</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" style={{ zIndex: 99999 }}>
+                <AnimatePresence>
+                  {!active && (
+                    <motion.div
+                      key="floating-buttons"
+                      initial={{ opacity: 0, y: 10 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      exit={{ opacity: 0, y: 10 }}
+                      transition={{ duration: 0.45 }}
+                      className="w-full max-w-7xl mx-auto"
+                    >
+                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6">
+                        {buttons.map((b, index) => (
+                          <motion.button
+                            key={b.id}
+                            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 } }}
+                            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"
+                          >
+                            {/* image badge (uses provided image for each button) */}
+                            {/* decorative badge (matching previous interface) */}
+                            <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" />
+
+                            <div className="relative z-10">
+                              <div className="flex items-center gap-3 mb-3">
+                                <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>
+                              </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>انقر للاطّلاع على التفاصيل</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>
+                              </p>
+                            </div>
+                          </motion.button>
+                        ))}
+                      </div>
+                    </motion.div>
+                  )}
+                </AnimatePresence>
+              </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>
+              </div>
+            </motion.div>
+          </AnimatePresence>
+        </div>
+      </section>
+
+      <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" />
+          ) : 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"/>
+                </svg>
+                <span>العودة للقائمة الرئيسية</span>
+              </motion.button>
+
+              <div style={{ position: 'relative', left: '50%', right: '50%', marginLeft: '-50vw', marginRight: '-50vw', width: '100vw' }}>
+                <ProjectsTimeline projects={defaultProjects} 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"/>
+                </svg>
+                <span>العودة للقائمة الرئيسية</span>
+              </motion.button>
+
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
+                {displayItems.map((item, index) => (
+                  <motion.div
+                    key={index}
+                    initial={{ opacity: 0, y: 30 }}
+                    whileInView={{ opacity: 1, y: 0 }}
+                    viewport={{ once: true, amount: 0.25 }}
+                    transition={{ delay: index * 0.08, duration: 0.5 }}
+                    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.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 text-base sm:text-2xl font-extrabold 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-xs sm: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.5" d="M15 19l-7-7 7-7"/>
+                        </svg>
+                      </motion.div>
+                    </div>
+                  </motion.div>
+                ))}
+              </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">
+                <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">خدمات احترافية متكاملة</span>
+                  <div className="w-2 h-2 bg-orange-500 rounded-full animate-pulse" style={{ animationDelay: "0.5s" }} />
+                </div>
+              </motion.div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </section>
+    </div>
+  );
+}
diff --git a/src/Components/Sections/Departments/Departments.jsx b/src/Components/Sections/Departments/Departments.jsx
index a0ff311..44b97e4 100644
--- a/src/Components/Sections/Departments/Departments.jsx
+++ b/src/Components/Sections/Departments/Departments.jsx
@@ -75,25 +75,22 @@ function DepartmentCard({ dept, offset }) {
     [-45, 0, 45]
   );
 
-  const progressParallax = useTransform(
-    scrollYProgress,
-    [0, 1],
-    [15, -15]
-  );
+  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 === 5) {
+      navigate("/department-detail5");
+    }
+     if (dept.id === 4) {
+      navigate("/department-detail4");
+    }
     if (dept.id === 3) {
       navigate("/department-detail3");
     } else if (dept.id === 2) {
       navigate("/department-detail2");
-    } else {
-      navigate(`/departments/${dept.id}`);
-    }
+    } 
   };
 
   return (
@@ -127,10 +124,11 @@ function DepartmentCard({ dept, offset }) {
           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-96 object-cover rounded-2xl"
+        // مهم: لا تضع خلفية صلبة هنا — اجعلها نصف شفافة حتى يظهر الكانفس وراءها
+        className="cursor-pointer w-full h-96 object-cover rounded-2xl
+                   bg-white/20 backdrop-blur-md border border-white/10"
       />
     </div>
   );
@@ -138,12 +136,17 @@ function DepartmentCard({ dept, offset }) {
 
 export default function Departments() {
   return (
-    <section className="min-h-screen bg-white text-black" dir="rtl">
-      <header className="max-w-6xl mx-auto px-6 pt-12">
-        <h1 className="text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-orange-400 via-orange-500 to-orange-600">أقسامنا</h1>
+    // لا تضف أي خلفية هنا — دع الكانفس العالمي يظهر
+    <section className="min-h-screen text-black bg-transparent" dir="rtl">
+      <header className="max-w-6xl mx-auto px-6 pt-12 relative z-20">
+        <h1 className="text-5xl font-extrabold text-transparent bg-clip-text
+                       bg-gradient-to-r from-[#041c40] via-[#57acd9] to-[#041c40]
+                       drop-shadow-lg">
+          أقسامنا
+        </h1>
       </header>
 
-      <main className="max-w-6xl mx-auto px-6 py-20">
+      <main className="max-w-6xl mx-auto px-6 py-20 relative z-20">
         <div className="grid grid-cols-1 md:grid-cols-2 gap-x-16 gap-y-48">
           {departments.map((dept, index) => (
             <motion.div
diff --git a/src/Components/Sections/Home/Home.jsx b/src/Components/Sections/Home/Home.jsx
index c0b9863..c8e4d1b 100644
--- a/src/Components/Sections/Home/Home.jsx
+++ b/src/Components/Sections/Home/Home.jsx
@@ -1,7 +1,5 @@
 import React, { useEffect, useState, useRef } from "react";
 import styled from 'styled-components';
-import { Element } from "react-scroll";
-import Departments from "../Departments/Departments";
 
 export default function EngineeringHeroFlowbite() {
   const defaultConfig = {
@@ -22,7 +20,6 @@ export default function EngineeringHeroFlowbite() {
 
   const mainTitleRef = useRef(null);
   const subtitleRef = useRef(null);
-  const departmentsRef = useRef(null);
 
   useEffect(() => {
     const id = "cairo-font-link";
@@ -192,7 +189,8 @@ export default function EngineeringHeroFlowbite() {
   };
 
   return (
-    <div dir="rtl" className="h-screen w-full overflow-hidden" style={{ background: "var(--ehb-background, #000000)" }}>
+    // خلفية الحاوية شفافة حتى يظهر الـ BackgroundCanvas في مستوى التطبيق
+    <div dir="rtl" 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 }
 
@@ -396,23 +394,7 @@ export default function EngineeringHeroFlowbite() {
         </div>
       </div>
 
-      <div className="partner-strip-wrap" aria-hidden>
-        <div className="partner-strip" role="presentation" aria-hidden>
-          <div className="partner-item" aria-label="شريك TPS">
-            <img src="src/assets/TPS-logo.png" alt="TPS" />
-          </div>
-          <div className="partner-item" aria-label="شريك NSC">
-            <img src="src/assets/NSC.png" alt="NSC" />
-          </div>
-          <div className="partner-item" aria-label="شريك LOGO">
-            <img src="src/assets/LOGO.png" alt="LOGO" />
-          </div>
-        </div>
-      </div>
-
-      <Element name="departments" id="departments">
-        <Departments />
-      </Element>
+     
     </div>
   );
 }
diff --git a/src/assets/Images/d23.jpg b/src/assets/Images/d23.jpg
new file mode 100644
index 0000000..0cdcfdb
Binary files /dev/null and b/src/assets/Images/d23.jpg differ
diff --git a/src/assets/Images/d24.png b/src/assets/Images/d24.png
new file mode 100644
index 0000000..9d40259
Binary files /dev/null and b/src/assets/Images/d24.png differ
diff --git a/src/assets/Images/d25.jpeg b/src/assets/Images/d25.jpeg
new file mode 100644
index 0000000..1c09777
Binary files /dev/null and b/src/assets/Images/d25.jpeg differ
diff --git a/src/assets/Images/d26.jpeg b/src/assets/Images/d26.jpeg
new file mode 100644
index 0000000..86a8131
Binary files /dev/null and b/src/assets/Images/d26.jpeg differ