From 4ee30601b5a3e3128dade12c3717d4e4827a7ab1 Mon Sep 17 00:00:00 2001
From: Beilin <bbashoury@gmail.com>
Date: Mon, 12 Jan 2026 11:27:13 +0300
Subject: [PATCH] fixing depts

---
 .../DepartmentDetail4/DepartmentDetail4.jsx   | 74 +++++++++++++---
 .../DepartmentDetail5/DepartmentDetail5.jsx   | 67 +++++++++++++--
 .../DepartmentDetail6/DepartmentDetail6.jsx   | 68 +++++++++++++--
 .../DepartmentDetail7/DepartmentDetail7.jsx   | 78 ++++++++++++++---
 .../DepartmentDetail8/DepartmentDetail8.jsx   | 84 +++++++++++++++----
 .../DepartmentDetail9/DepartmentDetail9.jsx   | 54 ++++++++++--
 6 files changed, 362 insertions(+), 63 deletions(-)

diff --git a/src/Components/Sections/DepartmentDetail4/DepartmentDetail4.jsx b/src/Components/Sections/DepartmentDetail4/DepartmentDetail4.jsx
index f36c638..563f0f6 100644
--- a/src/Components/Sections/DepartmentDetail4/DepartmentDetail4.jsx
+++ b/src/Components/Sections/DepartmentDetail4/DepartmentDetail4.jsx
@@ -197,7 +197,7 @@ function ProjectsTimeline({
     .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; }
+    .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; flex:0 0 auto; }
     .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;
     }
@@ -205,7 +205,7 @@ function ProjectsTimeline({
     .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 { 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%); box-sizing: border-box; }
     .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; }
@@ -218,13 +218,27 @@ function ProjectsTimeline({
     .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; }
+      .timeline-wrapper { padding:clamp(18px,4vw,36px) 16px; align-items:flex-start; }
+      .timeline-item { margin:0 12px; }
+      .year-circle { width:64px !important; height:64px !important; font-size:13px !important; }
+      .timeline-item.active .year-circle { width:96px !important; height:96px !important; font-size:16px !important; transform: translateY(-10px) scale(1.02); }
+      .project-card { width: clamp(160px, 72vw, 300px); padding:16px; margin-top:18px; }
+      .project-text { font-size:13px; line-height:1.6; }
+      .scroll-btn { width:44px; height:44px; font-size:18px; }
+      .scroll-indicator { position:relative; bottom:auto; left:auto; transform:none; margin:12px auto 0; justify-content:center; }
+      .projects-timeline-root { overflow-y: hidden; }
+    }
+
+    @media (max-width:420px){
+      .timeline-wrapper { padding:18px 12px; }
+      .timeline-item { margin:0 8px; }
+      .project-card { width: calc(100vw - 56px); max-width:320px; min-width:140px; padding:12px; margin-top:12px; border-radius:14px; }
+      .project-text { font-size:12px; line-height:1.4; }
+      .project-text li { margin-bottom:8px; padding-right:10px; padding:6px 10px; }
+      .year-circle { width:56px !important; height:56px !important; font-size:12px !important; }
+      .timeline-item.active .year-circle { width:88px !important; height:88px !important; font-size:15px !important; transform: translateY(-8px) scale(1.02); }
+      .svg-container { display:block; }
+      .scroll-indicator { bottom:12px; }
     }
 
     .projects-timeline-root.plain-bleed .timeline-wrapper { padding:clamp(48px,6vw,120px) 24px; }
@@ -323,7 +337,6 @@ export default function DepartmentDetail4() {
     { id: 3, title: "الاعمال المنفذة", key: "works" },
   ];
 
-  // New expertise items as per user's provided bullets
   const expertiseItems = [
     {
       icon: (
@@ -456,7 +469,7 @@ export default function DepartmentDetail4() {
                 </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 }}>
+              <div className="absolute left-1/2 bottom-0 transform -translate-x-1/2 translate-y-1/2 w-full px-4 pointer-events-auto hidden md:block" style={{ zIndex: 99999 }}>
                 <AnimatePresence>
                   {!active && (
                     <motion.div
@@ -513,6 +526,45 @@ export default function DepartmentDetail4() {
         </div>
       </section>
 
+      <div className="block md:hidden w-full max-w-7xl mx-auto px-4 sm:px-6 py-6">
+        <AnimatePresence mode="wait">
+          {!active && (
+            <motion.div
+              key="floating-buttons-mobile"
+              initial={{ opacity: 0, y: 6 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: 6 }}
+              transition={{ duration: 0.4 }}
+            >
+              <div className="grid grid-cols-1 gap-3">
+                {buttons.map((b, index) => (
+                  <motion.button
+                    key={b.id}
+                    initial={{ opacity: 0, y: 10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ delay: index * 0.05, duration: 0.35 }}
+                    whileHover={{ scale: 1.02 }}
+                    onClick={() => handleButtonClick(b.key)}
+                    className="group relative rounded-2xl p-3 shadow-md border border-transparent flex items-center gap-3 text-right focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-200 overflow-hidden bg-white/90"
+                  >
+                    <div className="w-10 h-10 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white text-base font-extrabold shadow">
+                      {b.id}
+                    </div>
+                    <div className="flex-1">
+                      <h3 className="text-sm font-bold text-gray-800">{b.title}</h3>
+                      <p className="text-xs text-gray-600 mt-1">انقر للاطّلاع على التفاصيل</p>
+                    </div>
+                    <svg className="w-5 h-5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
+                    </svg>
+                  </motion.button>
+                ))}
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+
       <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 ? (
diff --git a/src/Components/Sections/DepartmentDetail5/DepartmentDetail5.jsx b/src/Components/Sections/DepartmentDetail5/DepartmentDetail5.jsx
index c5527b9..51584a8 100644
--- a/src/Components/Sections/DepartmentDetail5/DepartmentDetail5.jsx
+++ b/src/Components/Sections/DepartmentDetail5/DepartmentDetail5.jsx
@@ -197,7 +197,7 @@ function ProjectsTimeline({
     .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; }
+    .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; flex:0 0 auto; }
     .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;
     }
@@ -205,26 +205,38 @@ function ProjectsTimeline({
     .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 { 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%); box-sizing: border-box; }
     .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-indicator { position:absolute; bottom:8px; 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-wrapper { padding:clamp(36px,6vw,80px) 24px; align-items:flex-start; }
       .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; }
+      .project-card { min-width:260px; max-width:320px; padding:18px; margin-top:18px; }
+      .project-text { font-size:13px; line-height:1.6; }
       .scroll-btn { width:48px; height:48px; font-size:20px; }
+      .scroll-indicator { bottom:10px; }
+    }
+
+    @media (max-width:420px){
+      .timeline-wrapper { padding:16px 12px; align-items:flex-start; }
+      .timeline-item { margin:0 10px; }
+      .project-card { width: calc(100vw - 56px); max-width:340px; min-width:140px; padding:12px; margin-top:12px; border-radius:14px; }
+      .project-text { font-size:13px; line-height:1.4; }
+      .project-text li { margin-bottom:8px; padding-right:10px; padding:6px 10px; }
+      .year-circle { width:56px !important; height:56px !important; font-size:12px !important; }
+      .timeline-item.active .year-circle { width:88px !important; height:88px !important; font-size:15px !important; transform: translateY(-8px) scale(1.02); }
+      .scroll-indicator { bottom:6px; }
     }
 
     .projects-timeline-root.plain-bleed .timeline-wrapper { padding:clamp(48px,6vw,120px) 24px; }
@@ -473,7 +485,7 @@ export default function DepartmentDetail5() {
                 </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 }}>
+              <div className="absolute left-1/2 bottom-0 transform -translate-x-1/2 translate-y-1/2 w-full px-4 pointer-events-auto hidden md:block" style={{ zIndex: 99999 }}>
                 <AnimatePresence>
                   {!active && (
                     <motion.div
@@ -496,8 +508,6 @@ export default function DepartmentDetail5() {
                             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" />
 
@@ -533,6 +543,45 @@ export default function DepartmentDetail5() {
         </div>
       </section>
 
+      <div className="block md:hidden w-full max-w-7xl mx-auto px-4 sm:px-6 py-6">
+        <AnimatePresence mode="wait">
+          {!active && (
+            <motion.div
+              key="floating-buttons-mobile"
+              initial={{ opacity: 0, y: 6 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: 6 }}
+              transition={{ duration: 0.4 }}
+            >
+              <div className="grid grid-cols-1 gap-3">
+                {buttons.map((b, index) => (
+                  <motion.button
+                    key={b.id}
+                    initial={{ opacity: 0, y: 10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ delay: index * 0.05, duration: 0.35 }}
+                    whileHover={{ scale: 1.02 }}
+                    onClick={() => handleButtonClick(b.key)}
+                    className="group relative rounded-2xl p-3 shadow-md border border-transparent flex items-center gap-3 text-right focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-200 overflow-hidden bg-white/90"
+                  >
+                    <div className="w-10 h-10 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white text-base font-extrabold shadow">
+                      {b.id}
+                    </div>
+                    <div className="flex-1">
+                      <h3 className="text-sm font-bold text-gray-800">{b.title}</h3>
+                      <p className="text-xs text-gray-600 mt-1">انقر للاطّلاع على التفاصيل</p>
+                    </div>
+                    <svg className="w-5 h-5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
+                    </svg>
+                  </motion.button>
+                ))}
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+
       <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 ? (
diff --git a/src/Components/Sections/DepartmentDetail6/DepartmentDetail6.jsx b/src/Components/Sections/DepartmentDetail6/DepartmentDetail6.jsx
index 59f3666..3f804d5 100644
--- a/src/Components/Sections/DepartmentDetail6/DepartmentDetail6.jsx
+++ b/src/Components/Sections/DepartmentDetail6/DepartmentDetail6.jsx
@@ -219,14 +219,29 @@ function ProjectsTimeline({
     .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:1024px){
+      .timeline-wrapper { padding:clamp(36px,5vw,80px) 24px; }
+    }
     @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; }
+      .timeline-wrapper { padding:clamp(28px,5vw,60px) 20px; align-items:flex-start; }
+      .timeline-item { margin:0 14px; }
+      .year-circle { width:84px; height:84px; font-size:14px; }
+      .timeline-item.active .year-circle { width:116px; height:116px; font-size:18px; }
+      .project-card { min-width:240px; max-width:320px; padding:18px; margin-top:18px; }
+      .project-text { font-size:13px; line-height:1.6; }
       .scroll-btn { width:48px; height:48px; font-size:20px; }
+      .scroll-indicator { bottom:18px; }
+      .svg-container { display:block; }
+    }
+    @media (max-width:420px){
+      .timeline-wrapper { padding:14px 12px; align-items:flex-start; }
+      .timeline-item { margin:0 8px; }
+      .project-card { width: calc(100vw - 64px); max-width:340px; min-width:140px; padding:12px; margin-top:12px; border-radius:14px; }
+      .project-text { font-size:13px; line-height:1.4; }
+      .project-text li { margin-bottom:8px; padding-right:10px; padding:6px 10px; }
+      .year-circle { width:54px !important; height:54px !important; font-size:12px !important; }
+      .timeline-item.active .year-circle { width:86px !important; height:86px !important; font-size:15px !important; transform: translateY(-8px) scale(1.02); }
+      .scroll-indicator { bottom:24px; }
     }
 
     .projects-timeline-root.plain-bleed .timeline-wrapper { padding:clamp(48px,6vw,120px) 24px; }
@@ -443,7 +458,7 @@ export default function DepartmentDetail6() {
                 </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 }}>
+              <div className="absolute left-1/2 bottom-0 transform -translate-x-1/2 translate-y-1/2 w-full px-4 pointer-events-auto hidden md:block" style={{ zIndex: 99999 }}>
                 <AnimatePresence>
                   {!active && (
                     <motion.div
@@ -501,6 +516,45 @@ export default function DepartmentDetail6() {
         </div>
       </section>
 
+      <div className="block md:hidden w-full max-w-7xl mx-auto px-4 sm:px-6 py-6">
+        <AnimatePresence mode="wait">
+          {!active && (
+            <motion.div
+              key="floating-buttons-mobile"
+              initial={{ opacity: 0, y: 6 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: 6 }}
+              transition={{ duration: 0.4 }}
+            >
+              <div className="grid grid-cols-1 gap-3">
+                {buttons.map((b, index) => (
+                  <motion.button
+                    key={b.id}
+                    initial={{ opacity: 0, y: 10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ delay: index * 0.05, duration: 0.35 }}
+                    whileHover={{ scale: 1.02 }}
+                    onClick={() => handleButtonClick(b.key)}
+                    className="group relative rounded-2xl p-3 shadow-md border border-transparent flex items-center gap-3 text-right focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-200 overflow-hidden bg-white/90"
+                  >
+                    <div className="w-10 h-10 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white text-base font-extrabold shadow">
+                      {b.id}
+                    </div>
+                    <div className="flex-1">
+                      <h3 className="text-sm font-bold text-gray-800">{b.title}</h3>
+                      <p className="text-xs text-gray-600 mt-1">انقر للاطّلاع على التفاصيل</p>
+                    </div>
+                    <svg className="w-5 h-5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
+                    </svg>
+                  </motion.button>
+                ))}
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+
       <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 ? (
diff --git a/src/Components/Sections/DepartmentDetail7/DepartmentDetail7.jsx b/src/Components/Sections/DepartmentDetail7/DepartmentDetail7.jsx
index 43fbad3..7ad1fbe 100644
--- a/src/Components/Sections/DepartmentDetail7/DepartmentDetail7.jsx
+++ b/src/Components/Sections/DepartmentDetail7/DepartmentDetail7.jsx
@@ -195,15 +195,13 @@ function ProjectsTimeline({
     .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;
-    }
+    .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; flex:0 0 auto; }
+    .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 { 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%); box-sizing:border-box; }
     .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; }
@@ -215,14 +213,30 @@ function ProjectsTimeline({
     .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:1024px){
+      .timeline-wrapper { padding:clamp(36px,5vw,80px) 24px; }
+    }
     @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; }
+      .timeline-wrapper { padding:clamp(28px,5vw,60px) 20px; align-items:flex-start; }
+      .timeline-item { margin:0 14px; }
+      .year-circle { width:84px; height:84px; font-size:14px; }
+      .timeline-item.active .year-circle { width:116px; height:116px; font-size:18px; }
+      .project-card { min-width:240px; max-width:320px; padding:18px; margin-top:18px; }
+      .project-text { font-size:13px; line-height:1.6; }
       .scroll-btn { width:48px; height:48px; font-size:20px; }
+      .scroll-indicator { bottom:18px; }
+      .svg-container { display:block; }
+    }
+    @media (max-width:420px){
+      .timeline-wrapper { padding:14px 12px; align-items:flex-start; }
+      .timeline-item { margin:0 8px; }
+      .project-card { width: calc(100vw - 64px); max-width:340px; min-width:140px; padding:12px; margin-top:12px; border-radius:14px; }
+      .project-text { font-size:13px; line-height:1.4; }
+      .project-text li { margin-bottom:8px; padding-right:10px; padding:6px 10px; }
+      .year-circle { width:54px !important; height:54px !important; font-size:12px !important; }
+      .timeline-item.active .year-circle { width:86px !important; height:86px !important; font-size:15px !important; transform: translateY(-8px) scale(1.02); }
+      .scroll-indicator { bottom:8px; }
     }
 
     .projects-timeline-root.plain-bleed .timeline-wrapper { padding:clamp(48px,6vw,120px) 24px; }
@@ -322,7 +336,6 @@ export default function DepartmentDetail7() {
     { id: 2, title: "الاعمال المنفذة", key: "works" },
   ];
 
-  // أيقونات متناسبة مع كل بطاقة — مأخوذة من الكود السابق
   const expertiseItems = [
     {
       icon: (
@@ -424,7 +437,7 @@ export default function DepartmentDetail7() {
                 </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 }}>
+              <div className="absolute left-1/2 bottom-0 transform -translate-x-1/2 translate-y-1/2 w-full px-4 pointer-events-auto hidden md:block" style={{ zIndex: 99999 }}>
                 <AnimatePresence>
                   {!active && (
                     <motion.div
@@ -481,6 +494,45 @@ export default function DepartmentDetail7() {
         </div>
       </section>
 
+      <div className="block md:hidden w-full max-w-7xl mx-auto px-4 sm:px-6 py-6">
+        <AnimatePresence mode="wait">
+          {!active && (
+            <motion.div
+              key="floating-buttons-mobile"
+              initial={{ opacity: 0, y: 6 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: 6 }}
+              transition={{ duration: 0.4 }}
+            >
+              <div className="grid grid-cols-1 gap-3">
+                {buttons.map((b, index) => (
+                  <motion.button
+                    key={b.id}
+                    initial={{ opacity: 0, y: 10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ delay: index * 0.05, duration: 0.35 }}
+                    whileHover={{ scale: 1.02 }}
+                    onClick={() => handleButtonClick(b.key)}
+                    className="group relative rounded-2xl p-3 shadow-md border border-transparent flex items-center gap-3 text-right focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-200 overflow-hidden bg-white/90"
+                  >
+                    <div className="w-10 h-10 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white text-base font-extrabold shadow">
+                      {b.id}
+                    </div>
+                    <div className="flex-1">
+                      <h3 className="text-sm font-bold text-gray-800">{b.title}</h3>
+                      <p className="text-xs text-gray-600 mt-1">انقر للاطّلاع على التفاصيل</p>
+                    </div>
+                    <svg className="w-5 h-5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
+                    </svg>
+                  </motion.button>
+                ))}
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+
       <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 ? (
diff --git a/src/Components/Sections/DepartmentDetail8/DepartmentDetail8.jsx b/src/Components/Sections/DepartmentDetail8/DepartmentDetail8.jsx
index ae33193..185634c 100644
--- a/src/Components/Sections/DepartmentDetail8/DepartmentDetail8.jsx
+++ b/src/Components/Sections/DepartmentDetail8/DepartmentDetail8.jsx
@@ -195,34 +195,51 @@ function ProjectsTimeline({
     .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;
-    }
+    .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:6; flex:0 0 auto; }
+    .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:8; 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 { 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%); box-sizing:border-box; z-index:12; }
     .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-indicator { position:absolute; bottom:18px; left:50%; transform: translateX(-50%); display:flex; gap:20px; z-index:3; pointer-events:auto; }
     .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:1024px){
+      .timeline-wrapper { padding:clamp(36px,5vw,80px) 24px; }
+    }
     @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; }
+      .timeline-wrapper { padding:clamp(28px,5vw,60px) 20px; align-items:flex-start; }
+      .timeline-item { margin:0 14px; }
+      .year-circle { width:84px; height:84px; font-size:14px; }
+      .timeline-item.active .year-circle { width:116px; height:116px; font-size:18px; }
+      .project-card { min-width:220px; max-width:88vw; padding:18px; margin-top:18px; }
+      .project-card { width: calc(86vw); min-width:unset; }
+      .project-text { font-size:13px; line-height:1.6; }
       .scroll-btn { width:48px; height:48px; font-size:20px; }
+      .scroll-indicator { bottom:8px; }
+      .svg-container { display:block; }
+      .timeline-item { align-items:center; }
+    }
+    @media (max-width:420px){
+      .timeline-wrapper { padding:14px 12px; align-items:flex-start; }
+      .timeline-item { margin:0 8px; }
+      .project-card { width: calc(100vw - 48px); max-width:100%; min-width:120px; padding:12px; margin-top:12px; border-radius:14px; }
+      .project-text { font-size:13px; line-height:1.4; }
+      .project-text li { margin-bottom:8px; padding-right:10px; padding:6px 10px; }
+      .year-circle { width:54px !important; height:54px !important; font-size:12px !important; }
+      .timeline-item.active .year-circle { width:86px !important; height:86px !important; font-size:15px !important; transform: translateY(-8px) scale(1.02); }
+      .scroll-indicator { bottom:6px; }
+      .timeline-item { align-items:center; }
     }
 
     .projects-timeline-root.plain-bleed .timeline-wrapper { padding:clamp(48px,6vw,120px) 24px; }
@@ -356,7 +373,6 @@ export default function DepartmentDetail8() {
     },
     {
       icon: (
-        // warehouse
         <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.2" d="M3 9l9-5 9 5v8a2 2 0 01-2 2H5a2 2 0 01-2-2V9zM9 22V12" />
         </svg>
@@ -365,7 +381,6 @@ export default function DepartmentDetail8() {
     },
     {
       icon: (
-        // gears / operations support
         <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.2" d="M12 8v4l2 2M6.16 4.94l1.42 1.42M17.42 4.94l-1.42 1.42M4 13h2M18 13h2M6.16 19.06l1.42-1.42M17.42 19.06l-1.42-1.42" />
         </svg>
@@ -432,7 +447,7 @@ export default function DepartmentDetail8() {
                 </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 }}>
+              <div className="absolute left-1/2 bottom-0 transform -translate-x-1/2 translate-y-1/2 w-full px-4 pointer-events-auto hidden sm:block" style={{ zIndex: 99999 }}>
                 <AnimatePresence>
                   {!active && (
                     <motion.div
@@ -489,6 +504,45 @@ export default function DepartmentDetail8() {
         </div>
       </section>
 
+      <div className="block md:hidden w-full max-w-7xl mx-auto px-4 sm:px-6 py-6">
+        <AnimatePresence mode="wait">
+          {!active && (
+            <motion.div
+              key="floating-buttons-mobile"
+              initial={{ opacity: 0, y: 6 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: 6 }}
+              transition={{ duration: 0.4 }}
+            >
+              <div className="grid grid-cols-1 gap-3">
+                {buttons.map((b, index) => (
+                  <motion.button
+                    key={b.id}
+                    initial={{ opacity: 0, y: 10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ delay: index * 0.05, duration: 0.35 }}
+                    whileHover={{ scale: 1.02 }}
+                    onClick={() => handleButtonClick(b.key)}
+                    className="group relative rounded-2xl p-3 shadow-md border border-transparent flex items-center gap-3 text-right focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-200 overflow-hidden bg-white/90"
+                  >
+                    <div className="w-10 h-10 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white text-base font-extrabold shadow">
+                      {b.id}
+                    </div>
+                    <div className="flex-1">
+                      <h3 className="text-sm font-bold text-gray-800">{b.title}</h3>
+                      <p className="text-xs text-gray-600 mt-1">انقر للاطّلاع على التفاصيل</p>
+                    </div>
+                    <svg className="w-5 h-5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
+                    </svg>
+                  </motion.button>
+                ))}
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+
       <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 ? (
diff --git a/src/Components/Sections/DepartmentDetail9/DepartmentDetail9.jsx b/src/Components/Sections/DepartmentDetail9/DepartmentDetail9.jsx
index 048cde7..1884837 100644
--- a/src/Components/Sections/DepartmentDetail9/DepartmentDetail9.jsx
+++ b/src/Components/Sections/DepartmentDetail9/DepartmentDetail9.jsx
@@ -220,9 +220,14 @@ function ProjectsTimeline({
       .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-card { min-width:unset; max-width:88vw; padding:18px; margin-top:18px; width:calc(86vw); }
       .project-text { font-size:13px; }
       .scroll-btn { width:48px; height:48px; font-size:20px; }
+      .scroll-indicator { bottom:8px; }
+    }
+    @media (max-width:420px){
+      .project-card { width: calc(100vw - 48px); max-width:100%; min-width:120px; padding:12px; margin-top:12px; border-radius:14px; }
+      .scroll-indicator { bottom:6px; }
     }
 
     .projects-timeline-root.plain-bleed .timeline-wrapper { padding:clamp(48px,6vw,120px) 24px; }
@@ -325,7 +330,6 @@ export default function DepartmentDetail9() {
   const expertiseItems = [
     {
       icon: (
-        // control panel / PLC-like
         <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <rect x="3" y="4" width="18" height="16" rx="2" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
           <path d="M7 8h.01M11 8h.01M15 8h.01M7 12h10" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
@@ -335,7 +339,6 @@ export default function DepartmentDetail9() {
     },
     {
       icon: (
-        // automation line
         <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" d="M3 7h4l2 6h6l2-6h4M5 21h14" />
         </svg>
@@ -344,7 +347,6 @@ export default function DepartmentDetail9() {
     },
     {
       icon: (
-        // SCADA/monitor
         <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <rect x="2" y="3" width="20" height="14" rx="1.5" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
           <path d="M8 21h8M12 17v4" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
@@ -354,7 +356,6 @@ export default function DepartmentDetail9() {
     },
     {
       icon: (
-        // fuel management / station icon
         <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" d="M3 7v10a2 2 0 002 2h10l4-4V7a2 2 0 00-2-2H5a2 2 0 00-2 2zM16 3v4" />
         </svg>
@@ -363,7 +364,6 @@ export default function DepartmentDetail9() {
     },
     {
       icon: (
-        // integration / link
         <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" d="M10 14a3 3 0 104 0M4 10a4 4 0 018 0M20 14a4 4 0 00-8 0" />
         </svg>
@@ -372,7 +372,6 @@ export default function DepartmentDetail9() {
     },
     {
       icon: (
-        // analytics / predict
         <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" d="M3 3v18h18" />
           <path strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" d="M7 14l3-3 4 4 5-7" />
@@ -440,7 +439,7 @@ export default function DepartmentDetail9() {
                 </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 }}>
+              <div className="absolute left-1/2 bottom-0 transform -translate-x-1/2 translate-y-1/2 w-full px-4 pointer-events-auto hidden sm:block" style={{ zIndex: 99999 }}>
                 <AnimatePresence>
                   {!active && (
                     <motion.div key="buttons" initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.45 }} className="w-full max-w-7xl mx-auto">
@@ -488,6 +487,45 @@ export default function DepartmentDetail9() {
         </div>
       </section>
 
+      <div className="block md:hidden w-full max-w-7xl mx-auto px-4 sm:px-6 py-6">
+        <AnimatePresence mode="wait">
+          {!active && (
+            <motion.div
+              key="floating-buttons-mobile"
+              initial={{ opacity: 0, y: 6 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: 6 }}
+              transition={{ duration: 0.4 }}
+            >
+              <div className="grid grid-cols-1 gap-3">
+                {buttons.map((b, index) => (
+                  <motion.button
+                    key={b.id}
+                    initial={{ opacity: 0, y: 10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ delay: index * 0.05, duration: 0.35 }}
+                    whileHover={{ scale: 1.02 }}
+                    onClick={() => handleButtonClick(b.key)}
+                    className="group relative rounded-2xl p-3 shadow-md border border-transparent flex items-center gap-3 text-right focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-200 overflow-hidden bg-white/90"
+                  >
+                    <div className="w-10 h-10 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white text-base font-extrabold shadow">
+                      {b.id}
+                    </div>
+                    <div className="flex-1">
+                      <h3 className="text-sm font-bold text-gray-800">{b.title}</h3>
+                      <p className="text-xs text-gray-600 mt-1">انقر للاطّلاع على التفاصيل</p>
+                    </div>
+                    <svg className="w-5 h-5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.2" d="M15 19l-7-7 7-7"/>
+                    </svg>
+                  </motion.button>
+                ))}
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+
       <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 ? (