diff --git a/package-lock.json b/package-lock.json
index 57b4ae0..edc6609 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@emailjs/browser": "^4.4.1",
-        "@tailwindcss/vite": "^4.1.18",
+        "@heroicons/react": "^2.2.0",
         "aos": "^2.3.4",
         "flowbite": "^4.0.1",
         "flowbite-react": "^0.12.16",
@@ -27,7 +27,6 @@
       },
       "devDependencies": {
         "@eslint/js": "^9.39.1",
-        "@tailwindcss/postcss": "^4.1.18",
         "@types/react": "^19.2.5",
         "@types/react-dom": "^19.2.3",
         "@vitejs/plugin-react": "^5.1.1",
@@ -37,7 +36,7 @@
         "eslint-plugin-react-refresh": "^0.4.24",
         "globals": "^16.5.0",
         "postcss": "^8.5.6",
-        "tailwindcss": "^3.3.6",
+        "tailwindcss": "^3.4.0",
         "vite": "^7.2.4"
       }
     },
@@ -383,6 +382,7 @@
       "cpu": [
         "ppc64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -399,6 +399,7 @@
       "cpu": [
         "arm"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -415,6 +416,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -431,6 +433,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -447,6 +450,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -463,6 +467,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -479,6 +484,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -495,6 +501,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -511,6 +518,7 @@
       "cpu": [
         "arm"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -527,6 +535,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -543,6 +552,7 @@
       "cpu": [
         "ia32"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -559,6 +569,7 @@
       "cpu": [
         "loong64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -575,6 +586,7 @@
       "cpu": [
         "mips64el"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -591,6 +603,7 @@
       "cpu": [
         "ppc64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -607,6 +620,7 @@
       "cpu": [
         "riscv64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -623,6 +637,7 @@
       "cpu": [
         "s390x"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -639,6 +654,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -655,6 +671,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -671,6 +688,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -687,6 +705,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -703,6 +722,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -719,6 +739,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -735,6 +756,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -751,6 +773,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -767,6 +790,7 @@
       "cpu": [
         "ia32"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -783,6 +807,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1002,6 +1027,15 @@
       "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
       "license": "MIT"
     },
+    "node_modules/@heroicons/react": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.2.0.tgz",
+      "integrity": "sha512-LMcepvRaS9LYHJGsF0zzmgKCUim/X3N/DQKc4jepAXJ7l8QxJ1PmxJzqplF2Z3FE4PqBAIGyJAQ/w4B5dsqbtQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">= 16 || ^19.0.0-rc"
+      }
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -1210,6 +1244,7 @@
       "cpu": [
         "arm"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1223,6 +1258,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1236,6 +1272,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1249,6 +1286,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1262,6 +1300,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1275,6 +1314,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1288,6 +1328,7 @@
       "cpu": [
         "arm"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1301,6 +1342,7 @@
       "cpu": [
         "arm"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1314,6 +1356,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1327,6 +1370,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1340,6 +1384,7 @@
       "cpu": [
         "loong64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1353,6 +1398,7 @@
       "cpu": [
         "ppc64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1366,6 +1412,7 @@
       "cpu": [
         "riscv64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1379,6 +1426,7 @@
       "cpu": [
         "riscv64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1392,6 +1440,7 @@
       "cpu": [
         "s390x"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1405,6 +1454,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1418,6 +1468,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1431,6 +1482,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1444,6 +1496,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1457,6 +1510,7 @@
       "cpu": [
         "ia32"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1470,6 +1524,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1483,6 +1538,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1757,26 +1813,6 @@
       "integrity": "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==",
       "license": "MIT"
     },
-    "node_modules/@tailwindcss/vite": {
-      "version": "4.1.18",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.1.18.tgz",
-      "integrity": "sha512-jVA+/UpKL1vRLg6Hkao5jldawNmRo7mQYrZtNHMIVpLfLhDml5nMRUo/8MwoX2vNXvnaXNNMedrMfMugAVX1nA==",
-      "license": "MIT",
-      "dependencies": {
-        "@tailwindcss/node": "4.1.18",
-        "@tailwindcss/oxide": "4.1.18",
-        "tailwindcss": "4.1.18"
-      },
-      "peerDependencies": {
-        "vite": "^5.2.0 || ^6 || ^7"
-      }
-    },
-    "node_modules/@tailwindcss/vite/node_modules/tailwindcss": {
-      "version": "4.1.18",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.18.tgz",
-      "integrity": "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==",
-      "license": "MIT"
-    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -2616,6 +2652,7 @@
       "version": "0.27.2",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.2.tgz",
       "integrity": "sha512-HyNQImnsOC7X9PMNaCIeAm4ISCQXs5a5YasTXVliKv4uuBo1dKrG0A+uQS8M5eXjVMnLg3WgXaKvprHlFJQffw==",
+      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "bin": {
@@ -4563,6 +4600,7 @@
       "version": "4.54.0",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.54.0.tgz",
       "integrity": "sha512-3nk8Y3a9Ea8szgKhinMlGMhGMw89mqule3KWczxhIzqudyHdCIOHw8WJlj/r329fACjKLEh13ZSk7oE22kyeIw==",
+      "devOptional": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -4856,9 +4894,9 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.6.tgz",
-      "integrity": "sha512-AKjF7qbbLvLaPieoKeTjG1+FyNZT6KaJMJPFeQyLfIp7l82ggH1fbHJSsYIvnbTFQOlkh+gBYpyby5GT1LIdLw==",
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.0.tgz",
+      "integrity": "sha512-VigzymniH77knD1dryXbyxR+ePHihHociZbXnLZHUyzf2MMs2ZVqlUrZ3FvpXP8pno9JzmILt1sZPD19M3IxtA==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -5081,6 +5119,7 @@
       "version": "7.3.0",
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.0.tgz",
       "integrity": "sha512-dZwN5L1VlUBewiP6H9s2+B3e3Jg96D0vzN+Ry73sOefebhYr9f94wwkMNN/9ouoU8pV1BqA1d1zGk8928cx0rg==",
+      "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
diff --git a/package.json b/package.json
index 845ae7c..b8858fd 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@emailjs/browser": "^4.4.1",
-    "@tailwindcss/vite": "^4.1.18",
+    "@heroicons/react": "^2.2.0",
     "aos": "^2.3.4",
     "flowbite": "^4.0.1",
     "flowbite-react": "^0.12.16",
@@ -29,7 +29,6 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
-    "@tailwindcss/postcss": "^4.1.18",
     "@types/react": "^19.2.5",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.1",
@@ -39,7 +38,7 @@
     "eslint-plugin-react-refresh": "^0.4.24",
     "globals": "^16.5.0",
     "postcss": "^8.5.6",
-    "tailwindcss": "^3.3.6",
+    "tailwindcss": "^3.4.0",
     "vite": "^7.2.4"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
index 5aa5df0..ea52a08 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -2,5 +2,5 @@ export default {
     plugins: {
         tailwindcss: {},
         autoprefixer: {},
-    },
+    }
 }
\ No newline at end of file
diff --git a/src/App.css b/src/App.css
index d3c26f5..7217d1e 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,26 +1,56 @@
-.App {
-    min-height: 100vh;
-    background-color: white;
-    color: #1e293b;
-    transition: background-color 0.3s ease, color 0.3s ease;
+.min-h-screen.bg-white.dark\:bg-gray-900 {}
+
+.bg-white,
+.bg-gray-50,
+.dark\:bg-gray-800,
+.dark\:bg-gray-900 {
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
 }
 
-.dark .App {
-    background-color: #0f172a;
-    color: #f1f5f9;
+.dark .bg-white,
+.dark .bg-gray-50,
+.dark .dark\:bg-gray-800,
+.dark .dark\:bg-gray-900 {}
+
+.border,
+.border-gray-200,
+.dark\:border-gray-700 {
+    border-color: rgba(var(--border-color), 0.3) !important;
 }
 
-:root {
-    --app-bg: white;
-    --app-text: #1e293b;
+.text-gray-900,
+.dark\:text-white {
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 }
 
-.dark {
-    --app-bg: #0f172a;
-    --app-text: #f1f5f9;
+.dark .text-gray-900,
+.dark .dark\:text-white {
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
 }
 
-.App {
-    background-color: var(--app-bg);
-    color: var(--app-text);
+.bg-opacity-95 {
+    backdrop-filter: blur(10px);
+}
+
+.shadow-lg,
+.shadow-xl {
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
+}
+
+.dark .shadow-lg,
+.dark .shadow-xl {
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
+}
+
+.bg-gradient-to-r,
+.bg-gradient-to-l,
+.bg-gradient-to-t,
+.bg-gradient-to-b {
+    background-blend-mode: overlay;
+}
+
+.fixed.top-0 {
+    backdrop-filter: blur(15px);
+    -webkit-backdrop-filter: blur(15px);
 }
\ No newline at end of file
diff --git a/src/App.jsx b/src/App.jsx
index a003073..83af1cf 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,4 +1,4 @@
-// App.jsx
+// src/App.jsx
 import React from "react";
 import { BrowserRouter, Routes, Route, useLocation } from "react-router-dom";
 import { AnimatePresence, LayoutGroup } from "framer-motion";
@@ -11,42 +11,40 @@ import Home from "./Components/Sections/Home/Home";
 import Services from "./Components/Sections/Services/Services";
 import About from "./Components/Sections/About/About";
 import Departments from "./Components/Sections/Departments/Departments";
-import DepartmentDetail from "./Components/Sections/DepartmentDetail/DepartmentDetail"; // صفحة التفاصيل (مقدّمة سابقاً)
+import DepartmentDetail from "./Components/Sections/DepartmentDetail/DepartmentDetail";
 import Contact from "./Components/Sections/Contact/Contact";
-// import ImagePreloader from "./Components/ImagePreloader";
 import Footer from "./Components/Nav/Footer";
+import DepartmentDetail2 from "./Components/Sections/DepartmentDetail2/DepartmentDetail2";
 
-
-
+/* MainPage — الصفحة التي تحتوي على الأقسام المجمعة (لا تتضمن Navbar هنا) */
 const MainPage = () => {
   return (
-      <div className="min-h-screen bg-white dark:bg-gray-900 text-gray-900 dark:text-white transition-colors duration-300">
-        <div className="flex flex-col min-h-screen">
-          <Navbar />
-          <main className="flex-grow">
-            <Home />
-
-            <Services />
-            <About />
-            <Departments />
-            <Contact />
-          </main>
-          <Footer />
-        </div>
+    <div className="min-h-screen bg-white dark:bg-gray-900 text-gray-900 dark:text-white transition-colors duration-300">
+      <div className="flex flex-col min-h-screen">
+        <main className="flex-grow">
+          <Home />
+          <Services />
+          <About />
+          <Departments />
+          <Contact />
+        </main>
+        <Footer />
       </div>
+    </div>
   );
 };
 
-// Router view (نستخدم useLocation مع AnimatePresence لعمل انتقالات سلسة بين المسارات)
+/* Router view يستخدم useLocation مع AnimatePresence */
 function RouterView() {
   const location = useLocation();
 
   return (
     <LayoutGroup>
-      <AnimatePresence mode="wait">
+      <AnimatePresence mode="wait" initial={false}>
         <Routes location={location} key={location.pathname}>
           <Route path="/" element={<MainPage />} />
-          <Route path="/departments/1" element={<DepartmentDetail />} />
+          <Route path="/departments/:id" element={<DepartmentDetail />} />
+          <Route path="/department-detail2" element={<DepartmentDetail2 />} />
           {/* أضف مسارات إضافية هنا إذا احتجت */}
         </Routes>
       </AnimatePresence>
@@ -54,10 +52,44 @@ function RouterView() {
   );
 }
 
+/* Layout: يقرر متى يُعرض الـ Navbar بناءً على الـ pathname */
+function Layout() {
+  const location = useLocation();
+
+  // هنا ضع المسارات أو الأنماط التي تريد إخفاء الـ Navbar فيها
+  const excludedExactPaths = [
+    "/department-detail2",
+    // أضف مسارات أخرى تريد إخفاء navbar فيها بنفس الشكل
+  ];
+
+  // أمثلة على أنماط: إخفاء لكل ما يبدأ بـ /departments/
+  const excludedPrefixes = ["/departments/"];
+
+  const isExcludedExact = excludedExactPaths.includes(location.pathname);
+  const isExcludedPrefix = excludedPrefixes.some((p) => location.pathname.startsWith(p));
+
+  const hideNavbar = isExcludedExact || isExcludedPrefix;
+
+  // ارتفاع الـ Navbar المستخدم كـ padding-top عندما يكون ظاهرًا (يتوافق مع height في Navbar.jsx)
+  const navbarHeight = hideNavbar ? 0 : 56;
+
+  return (
+    <>
+      {/* Navbar يظهر فقط عندما hideNavbar === false */}
+      {!hideNavbar && <Navbar />}
+
+      {/* نضع الـ RouterView داخل حاوية لها padding-top مساوٍ لارتفاع الـ navbar عند ظهوره */}
+      <div style={{ paddingTop: navbarHeight }}>
+        <RouterView />
+      </div>
+    </>
+  );
+}
+
 const App = () => {
   return (
     <BrowserRouter>
-      <RouterView />
+      <Layout />
     </BrowserRouter>
   );
 };
diff --git a/src/Components/BackgroundCanvas/BackgroundCanvas.css b/src/Components/BackgroundCanvas/BackgroundCanvas.css
new file mode 100644
index 0000000..b96339d
--- /dev/null
+++ b/src/Components/BackgroundCanvas/BackgroundCanvas.css
@@ -0,0 +1,121 @@
+html {
+    overflow-x: hidden !important;
+    height: 100% !important;
+}
+
+body {
+    margin: 0 !important;
+    padding: 0 !important;
+    width: 100% !important;
+    min-height: 100% !important;
+    position: relative !important;
+    overflow-x: hidden !important;
+    overflow-y: auto !important;
+}
+
+.background-canvas {
+    position: fixed !important;
+    top: 0 !important;
+    left: 0 !important;
+    width: 100vw !important;
+    height: 100vh !important;
+    z-index: -1 !important;
+    pointer-events: none !important;
+    overflow: hidden !important;
+}
+
+::-webkit-scrollbar {
+    width: 0px !important;
+    height: 0px !important;
+    background: transparent !important;
+}
+
+::-webkit-scrollbar-track {
+    background: transparent !important;
+}
+
+::-webkit-scrollbar-thumb {
+    background: transparent !important;
+    border-radius: 0px !important;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: transparent !important;
+}
+
+* {
+    scrollbar-width: none !important;
+    scrollbar-color: transparent transparent !important;
+}
+
+* {
+    -ms-overflow-style: -ms-autohiding-scrollbar !important;
+}
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+main {
+    position: relative !important;
+    z-index: 10 !important;
+    min-height: 100vh !important;
+    width: 100% !important;
+    padding: 20px !important;
+}
+
+nav.fixed {
+    z-index: 50 !important;
+    background: transparent !important;
+}
+
+@media (max-width: 768px) {
+    .background-canvas {
+        opacity: 0.8 !important;
+    }
+    body {
+        -webkit-overflow-scrolling: touch !important;
+        overscroll-behavior-y: contain !important;
+    }
+    * {
+        -webkit-tap-highlight-color: transparent !important;
+    }
+}
+
+.content-container {
+    position: relative !important;
+    z-index: 10 !important;
+    height: 100% !important;
+    overflow-y: auto !important;
+    overflow-x: hidden !important;
+    -webkit-overflow-scrolling: touch !important;
+}
+
+.scroll-container::-webkit-scrollbar {
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.scroll-container:hover::-webkit-scrollbar {
+    opacity: 1;
+}
+
+@supports (-webkit-touch-callout: none) {
+    body {
+        height: -webkit-fill-available !important;
+    }
+    .background-canvas {
+        height: -webkit-fill-available !important;
+    }
+}
+
+.fade-on-scroll {
+    opacity: 1;
+    transition: opacity 0.3s ease;
+}
+
+.fade-on-scroll.hidden {
+    opacity: 0;
+}
\ No newline at end of file
diff --git a/src/Components/BackgroundCanvas/BackgroundCanvas.jsx b/src/Components/BackgroundCanvas/BackgroundCanvas.jsx
new file mode 100644
index 0000000..3cda436
--- /dev/null
+++ b/src/Components/BackgroundCanvas/BackgroundCanvas.jsx
@@ -0,0 +1,237 @@
+import React, { useRef, useEffect, useState } from 'react';
+import './BackgroundCanvas.css';
+
+const BackgroundCanvas = ({ theme = 'light' }) => {
+  const canvasRef = useRef(null);
+  const animationRef = useRef(null);
+  const jointsRef = useRef([]);
+  const cameraRef = useRef(null);
+  const keysRef = useRef(new Array(127).fill(0));
+  const worldRef = useRef({ width: 0, height: 0 });
+  const themeRef = useRef(theme); 
+
+  class Camera {
+    constructor(position, zoom) {
+      this.position = position;
+      this.speed = 3;
+      this.acceleration = { x: 0, y: 0, z: 0 };
+      this.zoom = zoom;
+    }
+  }
+
+  class Joint {
+    constructor(position, vector) {
+      this.position = position;
+      this.vector = vector;
+      this.speed = 0.5;
+      this.w = 2;
+      this.h = 2;
+      this.bone_length = 150;
+    }
+  }
+
+  const generateJoints = (numb, worldWidth, worldHeight) => {
+    const arr = new Array(numb).fill(0);
+    arr.forEach((v, i) => {
+      arr[i] = new Joint(
+        {
+          x: Math.random() * worldWidth,
+          y: Math.random() * worldHeight,
+        },
+        {
+          x: Math.random() * 2 - 1,
+          y: Math.random() * 2 - 1,
+        }
+      );
+    });
+    return arr;
+  };
+
+  const moveJoints = (joints, world) => {
+    joints.forEach((joint) => {
+      joint.position.x += joint.vector.x * joint.speed;
+      joint.position.y += joint.vector.y * joint.speed;
+
+      if (joint.position.x < 0) joint.position.x = world.width;
+      if (joint.position.x > world.width) joint.position.x = 0;
+      if (joint.position.y < 0) joint.position.y = world.height;
+      if (joint.position.y > world.height) joint.position.y = 0;
+    });
+  };
+
+  const drawJoints = (ctx, joints, camera, view, theme) => {
+    const len = joints.length;
+    
+    let lineColor, pointColor, backgroundColor;
+    if (theme === 'dark') {
+      backgroundColor = '#000000'; 
+      lineColor = '#FFFFFF'; 
+      pointColor = '#F5EEE6'; 
+    } else {
+      backgroundColor = '#FFFFFF'; 
+      lineColor = '#131313'; 
+      pointColor = '#041c40'; 
+    }
+    
+    ctx.fillStyle = backgroundColor;
+    ctx.fillRect(0, 0, view.width, view.height);
+    
+    for (let i = 0; i < len; i++) {
+      for (let j = i + 1; j < len; j += 3) {
+        const length = Math.hypot(
+          joints[j].position.x - joints[i].position.x,
+          joints[j].position.y - joints[i].position.y
+        );
+        
+        if (length <= joints[i].bone_length) {
+          ctx.beginPath();
+          ctx.strokeStyle = lineColor;
+          ctx.lineWidth = camera.zoom * (30 / length);
+          ctx.moveTo(
+            view.width / 2 + (joints[i].position.x - camera.position.x) * camera.zoom,
+            view.height / 2 + (joints[i].position.y - camera.position.y) * camera.zoom
+          );
+          ctx.lineTo(
+            view.width / 2 + (joints[j].position.x - camera.position.x) * camera.zoom,
+            view.height / 2 + (joints[j].position.y - camera.position.y) * camera.zoom
+          );
+          ctx.stroke();
+          ctx.closePath();
+        }
+      }
+      
+      ctx.fillStyle = pointColor;
+      ctx.fillRect(
+        view.width / 2 + ((joints[i].position.x - camera.position.x) - joints[i].w / 2) * camera.zoom,
+        view.height / 2 + ((joints[i].position.y - camera.position.y) - joints[i].w / 2) * camera.zoom,
+        joints[i].w * camera.zoom,
+        joints[i].h * camera.zoom
+      );
+    }
+  };
+
+  const moveCamera = (camera, keys) => {
+    if (keys[37]) camera.acceleration.x -= camera.speed; 
+    if (keys[38]) camera.acceleration.y -= camera.speed; 
+    if (keys[39]) camera.acceleration.x += camera.speed; 
+    if (keys[40]) camera.acceleration.y += camera.speed; 
+    if (keys[188]) camera.acceleration.z += 0.003;
+    if (keys[190]) camera.acceleration.z -= 0.003; 
+
+    camera.position.x += camera.acceleration.x;
+    camera.position.y += camera.acceleration.y;
+    camera.zoom += camera.acceleration.z;
+
+    camera.acceleration.x *= 0.96;
+    camera.acceleration.y *= 0.96;
+    camera.acceleration.z *= 0.9;
+  };
+
+  const initCanvas = () => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const ctx = canvas.getContext('2d');
+    const view = {
+      width: window.innerWidth,
+      height: window.innerHeight,
+    };
+
+    canvas.width = view.width;
+    canvas.height = view.height;
+
+    worldRef.current = {
+      width: view.width * 2,
+      height: view.height * 2,
+    };
+
+    cameraRef.current = new Camera(
+      {
+        x: worldRef.current.width / 2,
+        y: worldRef.current.height / 2,
+      },
+      1
+    );
+
+    jointsRef.current = generateJoints(300, worldRef.current.width, worldRef.current.height);
+  };
+
+  const animate = () => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const ctx = canvas.getContext('2d');
+    const view = {
+      width: canvas.width,
+      height: canvas.height,
+    };
+
+    moveCamera(cameraRef.current, keysRef.current);
+    moveJoints(jointsRef.current, worldRef.current);
+    
+    drawJoints(ctx, jointsRef.current, cameraRef.current, view, themeRef.current);
+
+    animationRef.current = requestAnimationFrame(animate);
+  };
+
+  useEffect(() => {
+    themeRef.current = theme;
+  }, [theme]);
+
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      keysRef.current[e.keyCode] = 1;
+    };
+
+    const handleKeyUp = (e) => {
+      keysRef.current[e.keyCode] = 0;
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    window.addEventListener('keyup', handleKeyUp);
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+      window.removeEventListener('keyup', handleKeyUp);
+    };
+  }, []);
+
+  useEffect(() => {
+    const handleResize = () => {
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+
+      worldRef.current = {
+        width: canvas.width * 2,
+        height: canvas.height * 2,
+      };
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  useEffect(() => {
+    initCanvas();
+    animate();
+
+    return () => {
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current);
+      }
+    };
+  }, []); 
+
+  return (
+    <canvas
+      ref={canvasRef}
+      className="background-canvas"
+      aria-hidden="true"
+    />
+  );
+};
+
+export default BackgroundCanvas;
\ No newline at end of file
diff --git a/src/Components/ImagePreloader.jsx b/src/Components/ImagePreloader.jsx
index 038ef8a..7b6e0e8 100644
--- a/src/Components/ImagePreloader.jsx
+++ b/src/Components/ImagePreloader.jsx
@@ -18,31 +18,31 @@
 // // import home9 from "../assets/home9.jpg";
 // // import home10 from "../assets/home10.jpg";
 
-// // Services images
-// // import gasStation from "../assets/Images/gasstation.jpg";
+// Services images
+// import gasStation from "../assets/Images/gasstation.jpg";
 
 
-// // List all critical images that need to be preloaded
-// const imagesToPreload = [
-//   // Home images
-//   // home1,
-//   // home1Mobile,
-//   // home2,
-//   // home2Mobile,
-//   // home3,
-//   // home4,
-//   // home4Mobile,
-//   // home5,
-//   // home6,
-//   // home6Mobile,
-//   // home7,
-//   // home7Mobile,
-//   // home8,
-//   // home8Mobile,
-//   // home9,
-//   // home10,
-//   // Services images
-//   gasStation,
+// List all critical images that need to be preloaded
+const imagesToPreload = [
+  // Home images
+  // home1,
+  // home1Mobile,
+  // home2,
+  // home2Mobile,
+  // home3,
+  // home4,
+  // home4Mobile,
+  // home5,
+  // home6,
+  // home6Mobile,
+  // home7,
+  // home7Mobile,
+  // home8,
+  // home8Mobile,
+  // home9,
+  // home10,
+  // Services images
+  // gasStation,
 
 // ];
 
diff --git a/src/Components/Nav/Navbar.jsx b/src/Components/Nav/Navbar.jsx
index ba2e547..9fdf8d5 100644
--- a/src/Components/Nav/Navbar.jsx
+++ b/src/Components/Nav/Navbar.jsx
@@ -1,65 +1,433 @@
 import React, { useState, useEffect } from "react";
+import styled from "styled-components";
 import { useTranslation } from "react-i18next";
-import { Link } from "react-scroll";
-import "../../index.css";
+import { Link, animateScroll as scroll } from "react-scroll";
+
+const SunIcon = ({ className }) => (
+  <svg viewBox="0 0 24 24" className={className} fill="none" aria-hidden>
+    <path d="M12 4v2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M12 18v2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M4.22 4.22l1.42 1.42" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M18.36 18.36l1.42 1.42" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M1 12h2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M21 12h2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+    <circle cx="12" cy="12" r="3" stroke="currentColor" strokeWidth="1.6" />
+  </svg>
+);
+const MoonIcon = ({ className }) => (
+  <svg viewBox="0 0 24 24" className={className} fill="none" aria-hidden>
+    <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+const GlobeIcon = ({ className }) => (
+  <svg viewBox="0 0 24 24" className={className} fill="none" aria-hidden>
+    <path d="M21 12c0 4.97-4.03 9-9 9s-9-4.03-9-9 4.03-9 9-9 9 4.03 9 9z" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M2.05 12h19.9" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M12 2.05v19.9" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+const StyledWrapper = styled.div`
+  /* Base Styles */
+  .switch {
+    display: inline-block;
+    /* reduced a bit */
+    width: 5.2em;
+    height: 2.6em;
+    position: relative;
+    font-size: 16px;
+    user-select: none;
+    margin: 0;
+    transform-origin: center;
+  }
+
+  /* Hide default HTML checkbox */
+  .switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+    position: absolute;
+  }
+
+  /* Slider */
+  .slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(to right, #87ceeb, #e0f6ff);
+    border-radius: 50px;
+    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+    box-shadow:
+      0 4px 8px rgba(0, 0, 0, 0.1),
+      inset 0 -5px 10px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+  }
+
+  /* Inner slider for additional styling */
+  .slider-inner {
+    position: absolute;
+    top: 0.28em;
+    left: 0.28em;
+    height: 2.1em;
+    width: 2.1em;
+    border-radius: 50%;
+    background-color: #ffd700;
+    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+    box-shadow:
+      0 2px 4px rgba(0, 0, 0, 0.2),
+      inset 0 -2px 5px rgba(0, 0, 0, 0.2);
+  }
+
+  /* Checked state */
+  .switch input:checked + .slider {
+    background: linear-gradient(to right, #1a237e, #3949ab);
+  }
+
+  .switch input:checked + .slider .slider-inner {
+    transform: translateX(2.6em);
+    background-color: #ffffff;
+  }
+
+  /* Focus state */
+  .switch input:focus + .slider {
+    outline: none;
+    box-shadow: 0 0 0.4em rgba(25, 118, 210, 0.5);
+  }
+
+  /* Hover and active states */
+  .switch:hover .slider {
+    background: linear-gradient(to right, #64b5f6, #e3f2fd);
+  }
+
+  .switch input:checked:hover + .slider {
+    background: linear-gradient(to right, #283593, #5c6bc0);
+  }
+
+  /* Animation for slider inner */
+  @keyframes sunPulse {
+    0%,
+    100% {
+      box-shadow:
+        0 0 0 0 rgba(255, 215, 0, 0.7),
+        0 0 0 0 rgba(255, 215, 0, 0.4);
+    }
+    50% {
+      box-shadow:
+        0 0 20px 10px rgba(255, 215, 0, 0.7),
+        0 0 40px 20px rgba(255, 215, 0, 0.4);
+    }
+  }
+
+  @keyframes moonPhase {
+    0%,
+    100% {
+      box-shadow:
+        inset -10px -5px 0 0 #ddd,
+        0 0 20px rgba(255, 255, 255, 0.5);
+    }
+    50% {
+      box-shadow:
+        inset 0 0 0 0 #ddd,
+        0 0 20px rgba(255, 255, 255, 0.5);
+    }
+  }
+
+  .switch input:not(:checked) + .slider .slider-inner {
+    animation: sunPulse 3s infinite;
+  }
+
+  .switch input:checked + .slider .slider-inner {
+    animation: moonPhase 5s infinite;
+  }
+
+  /* Stars effect */
+  @keyframes twinkle {
+    0%,
+    100% {
+      opacity: 0.2;
+    }
+    50% {
+      opacity: 1;
+    }
+  }
+
+  .slider::before,
+  .slider::after {
+    content: "";
+    position: absolute;
+    width: 4px;
+    height: 4px;
+    background-color: #ffffff;
+    border-radius: 50%;
+    transition: all 0.6s ease;
+    opacity: 0;
+  }
+
+  .slider::before {
+    top: 20%;
+    left: 30%;
+  }
+
+  .slider::after {
+    bottom: 25%;
+    right: 25%;
+  }
+
+  .switch input:checked + .slider::before,
+  .switch input:checked + .slider::after {
+    opacity: 1;
+    animation: twinkle 2s infinite;
+  }
+
+  .switch input:checked + .slider::before {
+    animation-delay: 0.5s;
+  }
+
+  /* 3D effect */
+  .slider {
+    transform-style: preserve-3d;
+    perspective: 500px;
+  }
+
+  .slider-inner {
+    transform: translateZ(5px);
+  }
+
+  .switch input:checked + .slider .slider-inner {
+    transform: translateX(2.6em) translateZ(5px) rotateY(180deg);
+  }
+
+  /* Cloud effect for day mode */
+  .slider-inner::before,
+  .slider-inner::after {
+    content: "";
+    position: absolute;
+    background-color: rgba(255, 255, 255, 0.8);
+    border-radius: 50%;
+    transition: all 0.6s ease;
+  }
+
+  .slider-inner::before {
+    width: 1em;
+    height: 1em;
+    top: -0.5em;
+    left: -0.2em;
+  }
+
+  .slider-inner::after {
+    width: 1.2em;
+    height: 1.2em;
+    bottom: -0.6em;
+    right: -0.3em;
+  }
+
+  .switch input:checked + .slider .slider-inner::before,
+  .switch input:checked + .slider .slider-inner::after {
+    opacity: 0;
+  }
+
+  /* Crater effect for night mode */
+  .switch input:checked + .slider .slider-inner::before {
+    width: 0.6em;
+    height: 0.6em;
+    background-color: rgba(0, 0, 0, 0.2);
+    top: 0.3em;
+    left: 0.3em;
+    opacity: 1;
+  }
+
+  .switch input:checked + .slider .slider-inner::after {
+    width: 0.4em;
+    height: 0.4em;
+    background-color: rgba(0, 0, 0, 0.15);
+    bottom: 0.5em;
+    right: 0.5em;
+    opacity: 1;
+  }
+
+  /* Accessibility improvements */
+  .switch input:focus + .slider {
+    outline: 2px solid #4a90e2;
+    outline-offset: 2px;
+  }
+
+  /* Responsive adjustments */
+  @media (max-width: 768px) {
+    .switch {
+      width: 4.6em;
+      height: 2.3em;
+    }
+
+    .slider-inner {
+      height: 1.85em;
+      width: 1.85em;
+      top: 0.23em;
+      left: 0.23em;
+    }
+
+    .switch input:checked + .slider .slider-inner {
+      transform: translateX(2.2em) translateZ(5px) rotateY(180deg);
+    }
+  }
+
+  @media (max-width: 480px) {
+    .switch {
+      width: 3.8em;
+      height: 1.9em;
+    }
+
+    .slider-inner {
+      height: 1.5em;
+      width: 1.5em;
+      top: 0.2em;
+      left: 0.2em;
+    }
+
+    .switch input:checked + .slider .slider-inner {
+      transform: translateX(1.8em) translateZ(5px) rotateY(180deg);
+    }
+  }
+
+  /* High contrast mode */
+  @media (forced-colors: active) {
+    .slider {
+      background: Canvas;
+      border: 2px solid ButtonText;
+    }
+
+    .switch input:checked + .slider {
+      background: Highlight;
+    }
+
+    .slider-inner {
+      background-color: ButtonFace;
+    }
+
+    .switch::before,
+    .switch::after {
+      color: ButtonText;
+    }
+  }
+
+  /* Reduced motion preference */
+  @media (prefers-reduced-motion: reduce) {
+    .switch,
+    .slider,
+    .slider-inner {
+      transition: none;
+    }
+
+    .switch input:checked + .slider .slider-inner,
+    .switch input:not(:checked) + .slider .slider-inner,
+    .switch input:checked + .slider::before,
+    .switch input:checked + .slider::after {
+      animation: none;
+    }
+  }
+`;
+
+const ThemeToggle = ({ theme, setTheme }) => {
+  const isDark = theme === "dark";
+
+  const toggle = () => {
+    const next = isDark ? "light" : "dark";
+    setTheme(next);
+    if (next === "dark") document.documentElement.classList.add("dark");
+    else document.documentElement.classList.remove("dark");
+    try {
+      localStorage.setItem("theme", next);
+    } catch (e) {}
+  };
+
+  return (
+    <StyledWrapper>
+      <label
+        role="switch"
+        aria-checked={isDark}
+        tabIndex={0}
+        className="switch"
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            toggle();
+          }
+        }}
+      >
+        <input
+          type="checkbox"
+          checked={isDark}
+          onChange={toggle}
+          aria-hidden="false"
+        />
+        <span className="slider" aria-hidden="true">
+          <span className="slider-inner" />
+        </span>
+      </label>
+    </StyledWrapper>
+  );
+};
+
+const LanguageToggle = ({ i18n }) => {
+  const isAr = i18n.language === "ar";
+  const toggle = () => {
+    const next = isAr ? "en" : "ar";
+    i18n.changeLanguage(next);
+    if (next === "ar") {
+      document.documentElement.dir = "rtl";
+      document.documentElement.lang = "ar";
+    } else {
+      document.documentElement.dir = "ltr";
+      document.documentElement.lang = next;
+    }
+  };
+
+  return (
+    <button
+      onClick={toggle}
+      className="flex items-center gap-2 px-3 py-1 rounded-md font-semibold text-sm border border-transparent hover:border-amber-500/30 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-400/40 hover:shadow-md active:scale-95"
+      aria-label="Toggle language"
+      title={isAr ? "Switch to English" : "التبديل للعربية"}
+    >
+      <GlobeIcon className="w-4 h-4" />
+      <span className="hidden sm:inline">{isAr ? "عربي" : "EN"}</span>
+      <span className="text-amber-400/95 text-xs sm:text-sm">{isAr ? "AR" : "EN"}</span>
+    </button>
+  );
+};
 
 const Navbar = () => {
   const { t, i18n } = useTranslation();
   const [menuOpen, setMenuOpen] = useState(false);
   const [activeSection, setActiveSection] = useState("home");
-  const [isDarkMode, setIsDarkMode] = useState(false);
-  const [scrolled, setScrolled] = useState(false);
+  const [theme, setTheme] = useState("light");
 
   useEffect(() => {
-    const savedTheme = localStorage.getItem("theme");
-    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-    const shouldEnableDarkMode = savedTheme === "dark" || (!savedTheme && prefersDark);
-
-    setIsDarkMode(shouldEnableDarkMode);
-    if (shouldEnableDarkMode) {
-      document.documentElement.classList.add("dark");
+    try {
+      const saved = localStorage.getItem("theme");
+      if (saved) setTheme(saved);
+      else if (typeof window !== "undefined" && document.documentElement.classList.contains("dark")) setTheme("dark");
+    } catch (e) {
+      if (typeof window !== "undefined" && document.documentElement.classList.contains("dark")) setTheme("dark");
     }
   }, []);
 
-  // small scroll listener to add background/shadow after scrolling a bit
   useEffect(() => {
-    const onScroll = () => {
-      setScrolled(window.scrollY > 10);
-    };
-    onScroll();
-    window.addEventListener("scroll", onScroll, { passive: true });
-    return () => window.removeEventListener("scroll", onScroll);
-  }, []);
-
-  const toggleMenu = () => {
-    setMenuOpen(!menuOpen);
-  };
-
-  const toggleDarkMode = () => {
-    const newDarkMode = !isDarkMode;
-    setIsDarkMode(newDarkMode);
-
-    if (newDarkMode) {
-      document.documentElement.classList.add("dark");
-      localStorage.setItem("theme", "dark");
-    } else {
-      document.documentElement.classList.remove("dark");
-      localStorage.setItem("theme", "light");
-    }
-  };
+    if (theme === "dark") document.documentElement.classList.add("dark");
+    else document.documentElement.classList.remove("dark");
+  }, [theme]);
 
   useEffect(() => {
     const handleScroll = () => {
-      const sections = ["home", "services", "about", "contact", "sections"];
-      const scrollPosition = window.scrollY + 120; // offset to detect current section
-
+      const sections = ["home", "services", "about", "contact"];
+      const scrollPosition = window.scrollY + 140;
       for (const section of sections) {
-        const element =
-          document.getElementById(section) || document.querySelector(`[name="${section}"]`);
+        const element = document.getElementById(section) || document.querySelector(`[name="${section}"]`);
         if (element) {
           const offsetTop = element.offsetTop;
           const offsetHeight = element.offsetHeight;
-
           if (scrollPosition >= offsetTop && scrollPosition < offsetTop + offsetHeight) {
             setActiveSection(section);
             break;
@@ -67,235 +435,252 @@ const Navbar = () => {
         }
       }
     };
-
-    window.addEventListener("scroll", handleScroll);
+    handleScroll();
+    window.addEventListener("scroll", handleScroll, { passive: true });
     return () => window.removeEventListener("scroll", handleScroll);
   }, []);
 
-  useEffect(() => {
-    if (i18n.language === "ar") {
-      document.documentElement.dir = "rtl";
-      document.documentElement.lang = "ar";
-    } else {
-      document.documentElement.dir = "ltr";
-      document.documentElement.lang = i18n.language;
-    }
-  }, [i18n.language]);
-
   const navItems = [
-    { key: "home", label: t("nav.home", "الرئيسية") },
-    { key: "services", label: t("nav.services", "الخدمات") },
-    { key: "about", label: t("nav.about", "من نحن") },
-    { key: "sections", label: t("nav.sections", "الأقسام") },
-    { key: "contact", label: t("nav.contact", "تواصل معنا") },
+    { key: "home", label: t("nav.home") || "Home" },
+    { key: "services", label: t("nav.services") || "Services" },
+    { key: "about", label: t("nav.about") || "About" },
+    { key: "contact", label: t("nav.contact") || "Contact" },
   ];
 
-  const toggleLang = () => {
-    const newLang = i18n.language === "ar" ? "en" : "ar";
-    i18n.changeLanguage(newLang);
-  };
-
   return (
-    <nav
-      className={`fixed top-0 left-0 right-0 w-full z-50 pointer-events-auto transition-all duration-300 ${
-        scrolled ? "backdrop-blur-sm bg-white/70 dark:bg-gray-900/70 shadow-md" : "bg-transparent"
-      }`}
-      aria-label="Primary"
-    >
-      {/* container with comfortable vertical padding to avoid overlapping page content */}
-      <div className="max-w-screen-xl mx-auto px-4 py-3">
-        {/* grid: left spacer | center nav | right controls */}
-        <div className="grid grid-cols-3 items-center">
-          {/* left spacer */}
-          <div className="flex items-center">
-            <div style={{ width: 44 }} />
-          </div>
+    <>
+      <style>{`
+        /* background and glass */
+        .glass-nav {
+          background: linear-gradient(180deg, rgba(75,85,99,0.96), rgba(55,65,81,0.9));
+          color: #e6e6e6;
+          border-bottom: 1px solid rgba(255,255,255,0.05);
+          backdrop-filter: blur(8px);
+          -webkit-backdrop-filter: blur(8px);
+        }
 
-          {/* center: stretch nav */}
-          <div className="flex justify-center">
-            <div className="w-full">
-              <div className="hidden md:flex items-center w-full">
-                <ul className="flex items-center justify-between w-full px-3">
-                  {navItems.map((item) => (
-                    <li key={item.key} className="flex-1">
+        /* nav links */
+        .nav-link {
+          position: relative;
+          padding-bottom: 6px;
+          transition: transform .22s cubic-bezier(.2,.9,.2,1), color .18s ease, text-shadow .18s ease, box-shadow .18s ease;
+          color: rgba(229,231,235,0.95);
+          display: inline-block;
+        }
+        .nav-link::after {
+          content: '';
+          position: absolute;
+          left: 50%;
+          transform: translateX(-50%) scaleX(0);
+          bottom: -8px;
+          height: 3px;
+          width: 64%;
+          border-radius: 999px;
+          transition: transform .22s cubic-bezier(.2,.9,.2,1), opacity .22s;
+          opacity: 0;
+        }
+        .nav-link:hover {
+          transform: translateY(-6px) scale(1.03);
+          color: #fff;
+          text-shadow: 0 10px 30px rgba(2,6,23,0.5);
+          box-shadow: 0 8px 24px rgba(2,6,23,0.25);
+        }
+        .nav-link:hover::after {
+          background: linear-gradient(90deg, #9CA3AF, #F59E0B);
+          transform: translateX(-50%) scaleX(1);
+          opacity: 1;
+        }
+        .nav-link.active {
+          color: #fff;
+          font-weight: 700;
+        }
+        .nav-link.active::after {
+          background: linear-gradient(90deg, #9CA3AF, #F59E0B);
+          transform: translateX(-50%) scaleX(1);
+          opacity: 1;
+        }
+
+        /* NEW: pill / circular orange background for the active/pressed link */
+        .nav-pill {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          padding: 0.32rem 0.6rem; /* vertical horizontal */
+          border-radius: 999px;
+          transition: transform .15s ease, background .18s ease, box-shadow .18s ease, color .12s ease;
+          background: transparent;
+          color: inherit;
+          line-height: 1;
+          font-weight: 600;
+        }
+
+        /* active (current) */
+        .nav-link.active .nav-pill,
+        .nav-link:active .nav-pill,
+        .nav-link:focus-visible .nav-pill {
+          background: radial-gradient(circle at 30% 30%, #ffb347, #ff7a18); /* warm orange */
+          color: #0b0b0b; /* dark text for contrast on orange */
+          box-shadow: 0 6px 18px rgba(255, 122, 24, 0.18), 0 2px 6px rgba(0,0,0,0.12);
+          transform: translateY(-4px) scale(1.03);
+        }
+
+        /* Make press feedback snappier */
+        .nav-link:active .nav-pill {
+          transform: translateY(-2px) scale(0.995);
+        }
+
+        /* mobile drawer */
+        .mobile-drawer {
+          background: linear-gradient(180deg, rgba(17,24,39,0.98), rgba(15,23,42,0.95));
+          backdrop-filter: blur(6px);
+        }
+
+        /* ensure mobile pill doesn't stretch full width — make it inline inside block */
+        .mobile-drawer .nav-pill {
+          display: inline-flex;
+          padding: 0.4rem 0.8rem;
+        }
+
+        /* adjust mobile active color */
+        .mobile-drawer .nav-pill.active,
+        .mobile-drawer a[aria-current="page"] .nav-pill {
+          background: radial-gradient(circle at 30% 30%, #ffb347, #ff7a18);
+          color: #0b0b0b;
+        }
+
+        /* Enhanced button hover (more professional) */
+        .glass-nav button, .mobile-drawer button {
+          transition: transform .18s cubic-bezier(.2,.9,.2,1), box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
+          will-change: transform, box-shadow;
+        }
+
+        .glass-nav button:hover, .mobile-drawer button:hover {
+          transform: translateY(-3px);
+          box-shadow: 0 10px 24px rgba(2,6,23,0.25), 0 2px 6px rgba(0,0,0,0.12);
+        }
+
+        .glass-nav button:active, .mobile-drawer button:active {
+          transform: translateY(-1px) scale(0.995);
+          box-shadow: 0 6px 18px rgba(2,6,23,0.2);
+        }
+
+        .glass-nav button:focus {
+          outline: none;
+          box-shadow: 0 0 0 4px rgba(245,158,11,0.12);
+        }
+
+      `}</style>
+
+      <nav
+        className="fixed top-0 left-0 right-0 z-50 w-full glass-nav px-4 md:px-8 lg:px-16 py-3"
+        aria-label="Main navigation"
+        role="navigation"
+      >
+        <div className="mx-auto max-w-screen-xl">
+          <div className="flex items-center justify-between h-14 px-2 md:px-4">
+            <div className="hidden md:flex items-center space-x-6 rtl:space-x-reverse">
+              <ul className="flex items-center gap-6">
+                {navItems.map((item) => {
+                  const isActive = activeSection === item.key;
+                  return (
+                    <li key={item.key}>
                       <Link
                         to={item.key}
                         smooth
-                        duration={500}
+                        duration={600}
                         spy={true}
-                        offset={-80}
+                        offset={-110}
                         onSetActive={() => setActiveSection(item.key)}
                         onClick={() => {
-                          setActiveSection(item.key);
-                          setMenuOpen(false);
+                          if (item.key === "home") scroll.scrollToTop({ duration: 600 });
+                          if (menuOpen) setMenuOpen(false);
                         }}
-                        className={`nav-item relative inline-flex w-full justify-center text-base md:text-lg font-semibold py-3 rounded-full transition-all duration-300 focus:outline-none select-none
-                          ${
-                            activeSection === item.key
-                              ? "text-yellow-500"
-                              : "text-gray-800 dark:text-white"
-                          }
-                        `}
-                        role="link"
-                        aria-current={activeSection === item.key ? "page" : undefined}
+                        className={`nav-link cursor-pointer text-sm md:text-lg ${isActive ? "active" : "text-slate-200 dark:text-slate-200/90"}`}
+                        aria-current={isActive ? "page" : undefined}
                       >
-                        <span className="nav-item-glow" aria-hidden="true" />
-                        <span className="relative z-10">{item.label}</span>
+                        <span className={`nav-pill ${isActive ? "active" : ""}`}>{item.label}</span>
                       </Link>
                     </li>
-                  ))}
-                </ul>
+                  );
+                })}
+              </ul>
+            </div>
+
+            {/* controls */}
+            <div className="flex items-center gap-3 md:gap-5">
+              <div className="hidden md:flex items-center gap-3">
+                <LanguageToggle i18n={i18n} />
+                <ThemeToggle theme={theme} setTheme={setTheme} />
               </div>
 
-              {/* mobile compact center (if needed) */}
-              <div className="md:hidden flex justify-center">
-                <div className="flex items-center gap-3 rtl:gap-x-reverse">
-                  {navItems.slice(0, 3).map((item) => (
-                    <Link
-                      key={item.key}
-                      to={item.key}
-                      smooth
-                      duration={500}
-                      spy={true}
-                      offset={-70}
-                      onSetActive={() => setActiveSection(item.key)}
-                      onClick={() => {
-                        setActiveSection(item.key);
-                        setMenuOpen(false);
-                      }}
-                      className={`nav-item relative inline-flex items-center text-sm font-semibold px-4 py-2 rounded-full transition-all duration-300
-                          ${
-                            activeSection === item.key
-                              ? "text-yellow-500"
-                              : "text-gray-800 dark:text-white"
-                          }
-                        `}
-                    >
-                      <span className="nav-item-glow" aria-hidden="true" />
-                      <span className="relative z-10">{item.label}</span>
-                    </Link>
-                  ))}
-                </div>
+              <div className="md:hidden flex items-center gap-2">
+                <ThemeToggle theme={theme} setTheme={setTheme} />
+                <button
+                  onClick={() => setMenuOpen((s) => !s)}
+                  aria-controls="mobile-menu"
+                  aria-expanded={menuOpen}
+                  className="p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-400/50 transition-transform hover:scale-105"
+                >
+                  <span className="sr-only">Open main menu</span>
+                  <svg className="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+                    {menuOpen ? <path d="M6 18L18 6M6 6l12 12" /> : <><path d="M3 6h18" /><path d="M3 12h18" /><path d="M3 18h18" /></>}
+                  </svg>
+                </button>
               </div>
             </div>
           </div>
 
-          {/* right: controls */}
-          <div className="flex justify-end items-center space-x-2 rtl:space-x-reverse">
-            {/* Dark mode - refined icon with subtle motion */}
-            <button
-              onClick={toggleDarkMode}
-              type="button"
-              className="group inline-flex items-center p-2 w-12 h-12 justify-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
-              aria-pressed={isDarkMode}
-              aria-label={isDarkMode ? "Light Mode" : "Dark Mode"}
-              title={isDarkMode ? "Light Mode" : "Dark Mode"}
-            >
-              <svg
-                className="w-6 h-6 transform transition-transform duration-350"
-                viewBox="0 0 24 24"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-                aria-hidden="true"
-              >
-                {/* Moon shape (when light) */}
-                <path
-                  d="M21 12.79A9 9 0 1111.21 3a7 7 0 109.79 9.79z"
-                  fill="currentColor"
-                  style={{ opacity: isDarkMode ? 0 : 1, transition: "opacity 220ms" }}
-                />
-                {/* Sun: center circle + rays (when dark) */}
-                <g style={{ opacity: isDarkMode ? 1 : 0, transition: "opacity 220ms" }} fill="currentColor">
-                  <circle cx="12" cy="12" r="3" />
-                  <path d="M12 2v1M12 21v1M4.2 4.2l.7.7M19.1 19.1l.7.7M1 12h1M22 12h1M4.2 19.8l.7-.7M19.1 4.9l.7-.7" stroke="currentColor" strokeWidth="1.1" strokeLinecap="round" strokeLinejoin="round" />
-                </g>
-              </svg>
-            </button>
+          {/* mobile drawer */}
+          <div
+            id="mobile-menu"
+            className={`md:hidden overflow-hidden transition-[max-height,opacity] duration-300 ease-in-out ${menuOpen ? "max-h-[420px] opacity-100" : "max-h-0 opacity-0"}`}
+          >
+            <div className="mobile-drawer px-4 pb-6 pt-3 rounded-b-2xl">
+              <div className="flex items-center justify-between mb-3">
+                <div className="flex items-center gap-3"></div>
+                <div className="flex items-center gap-2">
+                  <LanguageToggle i18n={i18n} />
+                </div>
+              </div>
 
-            {/* Language toggle - professional globe + pill */}
-            <button
-              onClick={toggleLang}
-              type="button"
-              className="inline-flex items-center px-3 py-2 rounded-lg border border-transparent hover:border-gray-200 dark:hover:border-gray-700 transition-all duration-300 text-sm font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
-              aria-label="Toggle language"
-              title={i18n.language === "ar" ? "العربية" : "English"}
-            >
-              <svg className="w-5 h-5 mr-2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-                <circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.5" />
-                <path d="M2 12h20M12 2v20" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
-              </svg>
+              <ul className="flex flex-col gap-2">
+                {navItems.map((item) => {
+                  const isActive = activeSection === item.key;
+                  return (
+                    <li key={item.key}>
+                      <Link
+                        to={item.key}
+                        smooth
+                        duration={600}
+                        spy={true}
+                        offset={-110}
+                        onSetActive={() => setActiveSection(item.key)}
+                        onClick={() => {
+                          if (item.key === "home") scroll.scrollToTop({ duration: 600 });
+                          setMenuOpen(false);
+                        }}
+                        className={`block w-full text-right px-3 py-2 rounded-md font-semibold text-base ${isActive ? "text-amber-400" : "text-slate-200 hover:text-amber-400"}`}
+                        aria-current={isActive ? "page" : undefined}
+                      >
+                        {/* add inline pill for mobile too — stays inline so it looks like a circle around the label */}
+                        <span className={`nav-pill ${isActive ? "active" : ""}`}>{item.label}</span>
+                      </Link>
+                    </li>
+                  );
+                })}
+              </ul>
 
-              <span className="inline-flex items-center justify-center w-9 h-6 text-xs font-semibold rounded-full bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-white">
-                {i18n.language === "ar" ? "ع" : "EN"}
-              </span>
-            </button>
-
-            {/* mobile menu toggle */}
-            <button
-              onClick={toggleMenu}
-              type="button"
-              className="inline-flex items-center p-2 w-11 h-11 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
-              aria-controls="navbar-menu"
-              aria-expanded={menuOpen}
-            >
-              <span className="sr-only">Open main menu</span>
-              <svg className="w-6 h-6" viewBox="0 0 17 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M1 1h15M1 7h15M1 13h15" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-              </svg>
-            </button>
+              <div className="mt-4 flex items-center gap-3">
+                <ThemeToggle theme={theme} setTheme={setTheme} />
+                <button className="flex-1 px-4 py-2 rounded-md bg-amber-500/95 text-black font-semibold shadow-inner hover:shadow-lg transition-shadow active:scale-95">
+                  {t("nav.getQuote") || "Get Quote"}
+                </button>
+              </div>
+            </div>
           </div>
         </div>
-
-        {/* Mobile menu */}
-        <div className={`${menuOpen ? "block" : "hidden"} md:hidden mt-3 bg-white/95 dark:bg-gray-900/85 backdrop-blur-sm rounded-lg p-3`}> 
-          <ul className="flex flex-col items-center space-y-3">
-            {navItems.map((item) => (
-              <li key={item.key} className="w-full">
-                <Link
-                  to={item.key}
-                  smooth
-                  duration={500}
-                  spy={true}
-                  offset={-80}
-                  onSetActive={() => setActiveSection(item.key)}
-                  onClick={() => {
-                    setActiveSection(item.key);
-                    setMenuOpen(false);
-                  }}
-                  className={`block w-full text-center px-6 py-3 rounded-lg font-semibold transition-all duration-250
-                    ${
-                      activeSection === item.key
-                        ? "text-yellow-500 ring-4 ring-yellow-300/30 shadow-lg"
-                        : "text-gray-800 dark:text-white hover:text-yellow-500"
-                    }
-                  `}
-                >
-                  {item.label}
-                </Link>
-              </li>
-            ))}
-          </ul>
-        </div>
-      </div>
-
-      {/* inline CSS for polish */}
-      <style>{`
-        /* core nav item polish */
-        .nav-item { transform-style: preserve-3d; transition: transform 0.28s, box-shadow 0.28s, color 0.2s; position: relative; display: inline-flex; }
-        .nav-item:hover { transform: translateY(-6px) scale(1.03); box-shadow: 0 18px 30px rgba(2,6,23,0.10); }
-        .nav-item:active { transform: translateY(-3px) scale(1.02); }
-        .nav-item-glow { position: absolute; inset: -6px; border-radius: 9999px; filter: blur(12px); opacity:0; transition: opacity 0.28s, transform 0.28s; pointer-events:none; z-index:0; background: radial-gradient(circle at 50% 40%, rgba(250,204,21,0.12), transparent 30%); transform: scale(0.98); }
-        .nav-item:hover .nav-item-glow { opacity:0.9; transform: scale(1.02); }
-        .nav-item[aria-current="page"]::after { content: ""; position: absolute; height: 3px; left: 18%; right: 18%; bottom: -6px; border-radius: 9999px; background: linear-gradient(90deg, rgba(250,204,21,0.95), rgba(250,200,40,0.9)); opacity: 1; }
-        .nav-item span { white-space: nowrap; }
-
-        /* focus for accessibility */
-        .nav-item:focus-visible { outline: 3px solid rgba(99,102,241,0.12); outline-offset: 4px; }
-
-        /* reduce nav height overlap: ensure page content doesn't hide under nav (optional note) */
-        /* If you want, add: body { padding-top: 68px; } in global css so page content starts below navbar. */
-      `}</style>
-    </nav>
+      </nav>
+    </>
   );
 };
 
diff --git a/src/Components/Sections/About/About.jsx b/src/Components/Sections/About/About.jsx
index e63b0dd..b05b274 100644
--- a/src/Components/Sections/About/About.jsx
+++ b/src/Components/Sections/About/About.jsx
@@ -1,72 +1,690 @@
-import React, { useEffect } from "react";
-import { Element } from "react-scroll";
-import { useTranslation } from "react-i18next";
-import AOS from "aos";
-import "aos/dist/aos.css";
-
-const About = () => {
-  const { t } = useTranslation();
-const home10 = "https://i.imgur.com/MW2Sk0y.jpg"; 
+import React, { useState, useRef, useEffect } from "react";
+import { motion } from "framer-motion";
+import {
+  Building,
+  Eye,
+  MessageSquare,
+  Heart,
+  X,
+  Sparkles,
+  Zap,
+  Target,
+  Globe,
+  Shield,
+  ChevronLeft,
+  ArrowDown,
+  ChevronRight
+} from "lucide-react";
+import styled, { keyframes } from "styled-components";
 
 
+const companyInfo = [
+  {
+    id: 1,
+    title: "من نحن",
+    icon: Building,
+    description: `تتمثل غايتنا في تقديم حلول هندسية وتقنية متكاملة تشمل تصميم و تنفيذ وإشراف وإدارة المشاريع الصناعية والخدمية ابتداءً من الدراسات والتخطيط مروراً بالتنفيذ والتركيب وصولاً إلى التشغيل والصيانة، توريد و تركيب المعدات و الآلات و خطوط الإنتاج و قطع الصيانة، تمثيل الشركات و الوكالات و المشاركة في المناقصات و المزايدات مع القطاعين العام و الخاص و ذلك وفق القوانين و الأنظمة المعمول بها`,
+    features: [
+      "تنفيذ الأعمال المدنية والمعمارية و المعدنية و الميكانيكية و الكهربائية ",
+      "التحكم و تصميم و تطوير و تنفيذ الأنظمة و التطبيقات البرمجية و قواعد البيانات حسب متطلبات كل مشروع بما في ذلك أنظمة الأتمتة و التحكم",
+      "تطوير و تنفيذ أنظمة متخصصة لإدارة و تشغيل المنشآت الصناعية و محطات الوقود ",
+      "التفتيش الفني بكل أنواعه",
+    ]
+  },
+  {
+    id: 2,
+    title: "رؤيتنا",
+    icon: Eye,
+    description: `أن نكون الشريك الهندسي التقني الموثوق في تنفيذ و إدارة المشاريع الصناعية والسكنية و النفطية والمساهمة في تطوير البنية التحتية والقطاعات الإنتاجية عبر حلول حديثة ومستدامة.`,
+    features: [
+      "الشريك الهندسي الموثوق",
+      "تنمية البنية التحتية",
+      "حلول مستدامة وحديثة",
+      "الريادة في القطاع الهندسي"
+    ]
+  },
+  {
+    id: 3,
+    title: "رسالتنا",
+    icon: MessageSquare,
+    description: `تقديم خدمات هندسية ودراسات تنفيذية وإشراف متكامل بأعلى معايير الجودة والسلامة، من خلال كوادر مؤهلة وخبرات متخصصة، مع الالتزام بالوقت والتكلفة وتحقيق أعلى قيمة مضافة لعملائنا.`,
+    features: [
+      "أعلى معايير الجودة والسلامة",
+      "الالتزام بالوقت والتكلفة",
+      "فرق عمل متخصصة ومؤهلة",
+      "تحقيق القيمة المضافة للعملاء"
+    ]
+  },
+  {
+    id: 4,
+    title: "قيمنا",
+    icon: Heart,
+    description: `نؤمن بقيم ثابتة توجه أعمالنا وعلاقاتنا مع العملاء والشركاء: الجودة والتميز في كل ما نقدمه، النزاهة المهنية في التعامل، الالتزام بالاستدامة والمسؤولية البيئية والاجتماعية.`,
+    features: [
+      "الجودة الاحترافية",
+      "السلامة المهنية",
+      "الاستدامة والمسؤولية",
+      "التطوير المستمر",
+      "الشفافية و بناء الثقة"
+    ]
+  }
+];
 
-  
-  useEffect(() => {
-    AOS.init({ duration: 1000, once: false });
+// Animations
+const rotating = keyframes`
+  from {
+    transform: perspective(var(--perspective)) rotateX(var(--rotateX))
+      rotateY(0);
+  }
+  to {
+    transform: perspective(var(--perspective)) rotateX(var(--rotateX))
+      rotateY(1turn);
+  }
+`;
 
-    const handleScroll = () => {
-      AOS.refresh();
+const floatAnimation = keyframes`
+  0%, 100% {
+    transform: rotateY(calc((360deg / var(--quantity)) * var(--index)))
+      translateZ(var(--translateZ)) translateY(0px);
+  }
+  50% {
+    transform: rotateY(calc((360deg / var(--quantity)) * var(--index)))
+      translateZ(var(--translateZ)) translateY(-10px);
+  }
+`;
+
+const StyledWrapper = styled.div`
+  width: 100%;
+  height: 100vh;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.3s ease;
+`;
+
+const Wrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  position: relative;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  z-index: 2;
+`;
+
+const Inner = styled(motion.div)`
+  --quantity: ${props => props.quantity || 4};
+  --w: 250px;
+  --h: 350px;
+  --translateZ: 320px;
+  --rotateX: -8deg;
+  --perspective: 2000px;
+  position: absolute;
+  width: var(--w);
+  height: var(--h);
+  top: 26%;
+  left: calc(50% - (var(--w) / 2));
+  transform: perspective(var(--perspective)) rotateX(var(--rotateX)) rotateY(${props => props.rotation || 0}deg);
+  transform-style: preserve-3d;
+  transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  z-index: 10;
+`;
+
+const Card = styled.div.attrs(props => ({
+  style: {
+    '--index': props['data-index'] || 0,
+  }
+}))`
+  position: absolute;
+  border: 2px solid ${props => props.$theme === 'dark' ? '#4a4a4a' : '#d1c9be'};
+  border-radius: 20px;
+  overflow: visible;
+  inset: 0;
+  transform: rotateY(calc((360deg / var(--quantity)) * var(--index)))
+    translateZ(var(--translateZ));
+  cursor: pointer;
+  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+  background: ${props => props.$theme === 'dark' ? '#f5e7c673' : '#f5e7c673'};
+  backdrop-filter: blur(15px);
+  -webkit-backdrop-filter: blur(15px);
+
+  &:hover {
+    transform: rotateY(calc((360deg / var(--quantity)) * var(--index)))
+      translateZ(calc(var(--translateZ) + 80px)) scale(1.05);
+    border-color: #e06923;
+    background: ${props => props.$theme === 'dark' ? '#F7B980' : '#F7B980'};
+    box-shadow:
+      0 0 30px rgba(4, 28, 64, 0.3),
+      0 0 60px rgba(4, 28, 64, 0.2);
+  }
+
+  ${props => props.$isFront && `
+    transform: rotateY(calc((360deg / var(--quantity)) * var(--index)))
+      translateZ(calc(var(--translateZ) + 50px)) scale(1.03);
+    border-color:#e06923;
+    box-shadow:
+      0 15px 35px rgba(4, 28, 64, 0.2),
+      0 5px 15px rgba(4, 28, 64, 0.1);
+  `}
+`;
+
+const CardContent = styled.div`
+  width: 100%;
+  height: 100%;
+  padding: 25px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  position: relative;
+  overflow: hidden;
+  border-radius: 18px;
+  transition: all 0.3s ease;
+`;
+
+const CardHeader = styled.div`
+  position: relative;
+  z-index: 2;
+`;
+
+const IconWrapper = styled.div`
+  width: 30px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 20px;
+  transition: all 0.3s ease;
+`;
+
+const CardTitle = styled.h3`
+  font-size: 30px;
+  font-weight: 700;
+  color: #041c40;
+  margin-bottom: 6px;
+  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  letter-spacing: -0.5px;
+  text-align: center !important;
+`;
+
+const CardDescription = styled.p`
+  font-size: 14px;
+  line-height: 1.6;
+  color: ${props => props.$theme === 'dark' ? '#131313' : '#131313'};
+  margin-bottom: 6px;
+  display: -webkit-box;
+  -webkit-line-clamp: 8;
+  -webkit-box-orventical: vertical;
+  overflow: hidden;
+  text-align: right;
+  position: relative;
+  flex-grow: 1;
+  opacity: 0.9;
+`;
+
+const ArrowHint = styled(motion.div)`
+  position: absolute;
+  bottom: 15px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 5px;
+  color: #041c40;
+  z-index: 2;
+  opacity: 0.7;
+  transition: all 0.3s ease;
+
+  span {
+    font-size: 11px;
+    color: #041c40;
+    font-weight: 500;
+    opacity: 0;
+    white-space: nowrap;
+    transition: opacity 0.3s ease;
+  }
+
+  svg {
+    animation: bounce 2s infinite;
+    transition: all 0.3s ease;
+    color: #041c40;
+  }
+
+  @keyframes bounce {
+    0%, 100% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(5px);
+    }
+  }
+
+  &:hover {
+    opacity: 1;
+    span {
+      opacity: 1;
+    }
+    svg {
+      animation: bounce 1s infinite;
+    }
+  }
+`;
+
+const HeaderSection = styled.div`
+  text-align: center;
+  position: absolute;
+  top: 60px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10;
+  width: 100%;
+`;
+
+const Title = styled.div`
+  font-size: 42px;
+  text-align: center;
+  font-weight: 800;
+  color: #041c40;
+  margin-bottom: 15px;
+  text-shadow: 0 2px 10px rgba(4, 28, 64, 0.2);
+  letter-spacing: -0.5px;
+`;
+
+const Subtitle = styled.div`
+  font-size: 16px;
+  color: ${props => props.$theme === 'dark' ? '#F5EEE6' : '#131313'};
+  opacity: 0.8;
+  max-width: 600px;
+  margin: 0 auto;
+  font-weight: 300;
+  line-height: 1.5;
+`;
+
+const DetailModal = styled(motion.div)`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: ${props => props.$theme === 'dark' ? 'rgb(49 49 49 / 75%)' : 'rgb(245 238 230 / 65%)'};
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  z-index: 2000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 15px;
+`;
+
+const ModalContent = styled(motion.div)`
+  max-width: 650px;
+  width: 100%;
+  height: 86%;
+  background: ${props => props.$theme === 'dark' ? 'rgba(49, 49, 49, 0.9)' : 'rgba(245, 238, 230, 0.9)'};
+  backdrop-filter: blur(40px);
+  -webkit-backdrop-filter: blur(40px);
+  border-radius: 25px;
+  border: 2px solid ${props => props.$theme === 'dark' ? '#4a4a4a' : '#d1c9be'};
+  padding: 12px 20px;
+  position: relative;
+  color: ${props => props.$theme === 'dark' ? '#F5EEE6' : '#131313'};
+`;
+
+const CloseButton = styled(motion.button)`
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: 1px solid rgba(4, 28, 64, 0.3);
+  background: ${props => props.$theme === 'dark' ? 'rgba(49, 49, 49, 0.8)' : 'rgba(245, 238, 230, 0.8)'};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: #041c40;
+  z-index: 1001;
+  transition: all 0.3s ease;
+
+  &:hover {
+    background: rgba(4, 28, 64, 0.1);
+    transform: rotate(90deg);
+    border-color: #041c40;
+  }
+`;
+
+const NavButton = styled(motion.button)`
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  background: ${props => props.$theme === 'dark' ? 'rgba(49, 49, 49, 0.8)' : 'rgba(245, 238, 230, 0.8)'};
+  backdrop-filter: blur(10px);
+  border: 1px solid ${props => props.$theme === 'dark' ? '#4a4a4a' : '#d1c9be'};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: ${props => props.$theme === 'dark' ? '#F5EEE6' : '#131313'};
+  z-index: 100;
+  transition: all 0.3s ease;
+
+  &:hover {
+    background: rgba(4, 28, 64, 0.1);
+    border-color: #041c40;
+    transform: translateY(-50%) scale(1.1);
+    color: #041c40;
+  }
+
+  &:disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+    &:hover {
+      background: ${props => props.$theme === 'dark' ? 'rgba(49, 49, 49, 0.8)' : 'rgba(245, 238, 230, 0.8)'};
+      transform: translateY(-50%) scale(1);
+      border-color: ${props => props.$theme === 'dark' ? '#4a4a4a' : '#d1c9be'};
+      color: ${props => props.$theme === 'dark' ? '#F5EEE6' : '#131313'};
+    }
+  }
+`;
+
+const LeftNavButton = styled(NavButton)`
+  left: 30px;
+`;
+
+const RightNavButton = styled(NavButton)`
+  right: 30px;
+`;
+
+const DotsContainer = styled.div`
+  position: absolute;
+  bottom: 40px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 12px;
+  z-index: 100;
+`;
+
+const Dot = styled.div.attrs(props => ({
+  'data-active': props['data-active'] || 'false'
+}))`
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: ${props => 
+    props['data-active'] === 'true' 
+      ? '#041c40' 
+      : props.$theme === 'dark' 
+        ? 'rgba(224, 105, 35, 0.3)' 
+        : 'rgba(4, 28, 64, 0.3)'
+  };
+  cursor: pointer;
+  transition: all 0.3s ease;
+
+  &:hover {
+    background: ${props => 
+      props['data-active'] === 'true' 
+        ? '#041c40' 
+        : props.$theme === 'dark' 
+          ? 'rgba(224, 105, 35, 0.5)' 
+          : 'rgba(4, 28, 64, 0.5)'
     };
+    transform: scale(1.2);
+  }
+`;
 
-    window.addEventListener("scroll", handleScroll);
-    return () => window.removeEventListener("scroll", handleScroll);
-  }, []);
+const About = ({ theme = 'light' }) => {
+  const [selectedCard, setSelectedCard] = useState(null);
+  const [rotation, setRotation] = useState(0);
+  const [activeCardIndex, setActiveCardIndex] = useState(0);
+  const innerRef = useRef(null);
+
+  const handleCardClick = (card) => {
+    setSelectedCard(card);
+  };
+
+  const handleCloseModal = () => {
+    setSelectedCard(null);
+  };
+
+  const handleNextCard = () => {
+    const angleStep = 360 / companyInfo.length;
+    setRotation(prev => prev - angleStep);
+    setActiveCardIndex(prev => (prev + 1) % companyInfo.length);
+  };
+
+  const handlePrevCard = () => {
+    const angleStep = 360 / companyInfo.length;
+    setRotation(prev => prev + angleStep);
+    setActiveCardIndex(prev => (prev - 1 + companyInfo.length) % companyInfo.length);
+  };
+
+  const handleDotClick = (index) => {
+    const angleStep = 360 / companyInfo.length;
+    const targetRotation = -index * angleStep;
+    setRotation(targetRotation);
+    setActiveCardIndex(index);
+  };
+
+  const isCardInFront = (index) => {
+    const cardAngle = (index * (360 / companyInfo.length) + rotation) % 360;
+    const normalizedAngle = (cardAngle + 360) % 360;
+    return Math.abs(normalizedAngle) < 30 || Math.abs(normalizedAngle - 360) < 30;
+  };
 
   return (
-    <Element name="about">
-      <section
-        className="w-full h-screen px-4 sm:px-6 lg:px-16 py-12 sm:py-16 text-black font-sans relative overflow-hidden"
-        style={{ direction: "rtl", backgroundColor: "#111827" }}
-      >
-        {/* صورة الخلفية */}
-        <div
-          className="relative w-full sm:w-3/4 mx-auto z-0"
-          data-aos="fade-right"
-          style={{
-            borderRadius: "12px",
-            border: "1px solid #EB8323",
-            boxShadow:
-              "0 0 15px 5px rgba(235, 131, 35, 0.4), 0 0 8px 2px rgba(235, 131, 35, 0.3)",
-          }}
+    <StyledWrapper $theme={theme}>
+      <HeaderSection>
+        <Title>
+<div 
+    className="pt-0 mb-2 text-4xl font-extrabold md:text-5xl lg:text-6xl"
+    style={{
+        background: 'linear-gradient(90deg, #e06923 0%, #ffffff 33%, #313131 66%, #e06923 100%)',
+        backgroundSize: '300% 100%',
+        WebkitBackgroundClip: 'text',
+        WebkitTextFillColor: 'transparent',
+        backgroundClip: 'text',
+        color: 'transparent',
+        animation: 'gradientFlow 3s ease infinite',
+        fontWeight: 900,
+        letterSpacing: '-0.5px'
+    }}
+>
+    من نحن
+</div>
+        </Title>
+        <Subtitle $theme={theme}>
+          <div className="text-lg font-medium lg:text-xl mb-6 max-w-3xl mx-auto">
+            رحلة التميز الهندسي والتقني، هنا حيث تلتقي الخبرة بالابتكار
+          </div>
+        </Subtitle>
+      </HeaderSection>
+      
+      <Wrapper>
+        <LeftNavButton
+          $theme={theme}
+          onClick={handlePrevCard}
+          whileHover={{ scale: 1.1 }}
+          whileTap={{ scale: 0.9 }}
         >
-          <img
-            src={home10}
-            alt="شخص"
-            className="w-full h-[450px] sm:h-[500px] md:h-[600px] object-cover rounded-lg transition-all duration-300"
-            loading="eager"
-            fetchPriority="high"
-          />
-        </div>
+          <ChevronLeft size={28} />
+        </LeftNavButton>
+        
+        <Inner
+          ref={innerRef}
+          quantity={companyInfo.length}
+          rotation={rotation}
+        >
+          {companyInfo.map((card, index) => {
+            const Icon = card.icon;
+            const isFront = isCardInFront(index);
 
-        {/* مربع النص المتراكب */}
-        <div
-          className="z-10 max-w-full px-4 sm:px-0 -mt-20 sm:mt-0 sm:absolute sm:bottom-10 sm:right-10
-                     bg-white/20 backdrop-blur-md text-black p-6 sm:p-12 rounded-xl shadow-2xl
-                     flex flex-col sm:max-w-md"
-          data-aos="fade-left"
+            return (
+              <Card
+                key={card.id}
+                data-index={index}
+                $theme={theme}
+                $isFront={isFront}
+                onClick={() => isFront && handleCardClick(card)}
+              >
+                <CardContent $theme={theme}>
+                  <CardHeader>
+                    <IconWrapper>
+                      <Icon size={32} style={{ color: '#e06923' }} />
+                    </IconWrapper>
+                    <CardTitle>{card.title}</CardTitle>
+                    <CardDescription $theme={theme}>
+                      {card.description}
+                    </CardDescription>
+                  </CardHeader>
+
+                  <div>
+                    {isFront && (
+                      <ArrowHint style={{ color: '#e06923' }}>
+                        <ArrowDown size={24} style={{ color: '#e06923' }} />
+                        <span style={{ color: '#e06923' }}>إضغط لعرض التفاصيل</span>
+                      </ArrowHint>
+                    )}
+                  </div>
+                </CardContent>
+              </Card>
+            );
+          })}
+        </Inner>
+        
+        <RightNavButton
+          $theme={theme}
+          onClick={handleNextCard}
+          whileHover={{ scale: 1.1 }}
+          whileTap={{ scale: 0.9 }}
         >
-          <h1 className="mb-4 sm:mb-6 text-3xl sm:text-5xl font-extrabold md:text-6xl lg:text-7xl text-center self-center mt-0">
-            <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#10375C] to-[#F3C623]">
-              {t('about.title')}
-            </span>
-          </h1>
-          <p className="text-lg sm:text-2xl leading-relaxed flex-grow text-center">
-            {t('about.description')}
-          </p>
-        </div>
-      </section>
-    </Element>
+          <ChevronRight size={28} />
+        </RightNavButton>
+        
+        <DotsContainer>
+          {companyInfo.map((_, index) => (
+            <Dot
+              key={index}
+              $theme={theme}
+              data-active={index === activeCardIndex ? 'true' : 'false'}
+              onClick={() => handleDotClick(index)}
+            />
+          ))}
+        </DotsContainer>
+      </Wrapper>
+      
+      {selectedCard && (
+        <DetailModal
+          $theme={theme}
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          onClick={handleCloseModal}
+        >
+          <ModalContent
+            $theme={theme}
+            initial={{ scale: 0.8, opacity: 0 }}
+            animate={{ scale: 1, opacity: 1 }}
+            exit={{ scale: 0.8, opacity: 0 }}
+            transition={{ type: "spring", damping: 25, stiffness: 200 }}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <CloseButton
+              $theme={theme}
+              onClick={handleCloseModal}
+              whileHover={{ rotate: 90 }}
+              whileTap={{ scale: 0.9 }}
+            >
+              <X size={20} />
+            </CloseButton>
+            
+            <div style={{ gap: '20px', marginBottom: '30px', textAlign:'center' }}>
+              <div>
+                <h2 style={{
+                  fontSize: '36px',
+                  fontWeight: '800',
+                  color: theme === 'dark' ? '#F5EEE6' : '#041c40',
+                  marginBottom: '10px',
+                }}>
+                  {selectedCard.title}
+                </h2>
+              </div>
+            </div>
+            
+            <div style={{ marginBottom: '30px' }}>
+              <p style={{
+                color: theme === 'dark' ? '#F5EEE6' : '#131313',
+                lineHeight: '1.7',
+                fontSize: '16px',
+                textAlign: 'right',
+                padding: '20px',
+                background: 'rgba(4, 28, 64, 0.05)',
+                backdropFilter: 'blur(10px)',
+                borderRadius: '16px',
+                border: '1px solid rgba(4, 28, 64, 0.2)'
+              }}>
+                {selectedCard.description}
+              </p>
+            </div>
+
+            <div style={{ marginBottom: '30px' }}>
+              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '15px' }}>
+                {selectedCard.features.map((feature, idx) => (
+                  <div key={idx} style={{
+                    padding: '18px',
+                    background: 'rgba(4, 28, 64, 0.05)',
+                    backdropFilter: 'blur(15px)',
+                    borderRadius: '15px',
+                    border: '1px solid rgba(4, 28, 64, 0.2)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '15px',
+                    cursor: 'pointer',
+                    transition: 'all 0.3s ease',
+                  }}>
+                    <div style={{
+                      width: '40px',
+                      height: '40px',
+                      borderRadius: '12px',
+                      background: 'rgba(4, 28, 64, 0.1)',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      flexShrink: 0
+                    }}>
+                      {idx === 1 && <Shield size={20} style={{ color: '#e06923' }} />}
+                      {idx === 0 && <Target size={20} style={{ color: '#e06923' }} />}
+                      {idx === 2 && <Globe size={20} style={{ color: '#e06923' }} />}
+                      {idx === 3 && <Zap size={20} style={{ color: '#e06923' }} />}
+                      {idx === 4 && <Sparkles size={20} style={{ color: '#e06923' }} />}
+                    </div>
+                    <span style={{
+                      color: theme === 'dark' ? '#F5EEE6' : '#131313',
+                      fontSize: '15px',
+                      fontWeight: '500',
+                      flex: 1
+                    }}>
+                      {feature}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </ModalContent>
+        </DetailModal>
+      )}
+    </StyledWrapper>
   );
 };
 
 export default About;
+
+
diff --git a/src/Components/Sections/DepartmentDetail/DepartmentDetail.jsx b/src/Components/Sections/DepartmentDetail/DepartmentDetail.jsx
index 694f1ff..9822afa 100644
--- a/src/Components/Sections/DepartmentDetail/DepartmentDetail.jsx
+++ b/src/Components/Sections/DepartmentDetail/DepartmentDetail.jsx
@@ -1,4 +1,3 @@
-// DepartmentDetail.jsx
 import React, { useState, useEffect, useRef, useCallback } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import d1 from "../../../../src/assets/Images/d1.jpeg";
@@ -49,15 +48,15 @@ function ProjectsTimeline({
 
     const stop1 = document.createElementNS(svgNS, "stop");
     stop1.setAttribute("offset", "0%");
-    stop1.setAttribute("style", "stop-color:#ea580c;stop-opacity:1");
+    stop1.setAttribute("style", "stop-color:#0f172a;stop-opacity:1");
 
     const stop2 = document.createElementNS(svgNS, "stop");
     stop2.setAttribute("offset", "50%");
-    stop2.setAttribute("style", "stop-color:#dc2626;stop-opacity:1");
+    stop2.setAttribute("style", "stop-color:#f97316;stop-opacity:1");
 
     const stop3 = document.createElementNS(svgNS, "stop");
     stop3.setAttribute("offset", "100%");
-    stop3.setAttribute("style", "stop-color:#b91c1c;stop-opacity:1");
+    stop3.setAttribute("style", "stop-color:#9ca3af;stop-opacity:1");
 
     gradient.appendChild(stop1);
     gradient.appendChild(stop2);
@@ -96,7 +95,7 @@ function ProjectsTimeline({
       path.setAttribute("stroke-width", "4");
       path.setAttribute("fill", "none");
       path.setAttribute("stroke-linecap", "round");
-      path.style.filter = "drop-shadow(0 2px 8px rgba(251, 191, 36, 0.3))";
+      path.style.filter = "drop-shadow(0 2px 8px rgba(15,23,42,0.22))";
       svgEl.appendChild(path);
     }
   }, [itemsRefs]);
@@ -193,31 +192,30 @@ function ProjectsTimeline({
   }, [itemsRefs, drawCurvedLines, projects.length]);
 
   const css = `
-    :root{--bg-start:#0f172a;--bg-mid:#1e293b;--bg-end:#334155}
+    :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: thin; scrollbar-color: rgba(0,0,0,.2) transparent; }
-    .timeline-scroll::-webkit-scrollbar{ height:10px;}
-    .timeline-scroll::-webkit-scrollbar-track{ background: transparent; border-radius:10px; margin:0 8px;}
-    .timeline-scroll::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.12); border-radius:10px; border:2px solid transparent; background-clip:padding-box;}
+    .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,#dc2626 0%,#b91c1c 50%,#991b1b 100%); color:white; box-shadow:0 8px 25px rgba(220,38,38,.4); transition:all .6s cubic-bezier(.34,1.56,.64,1); cursor:pointer; border:5px solid rgba(255,255,255,.25); position:relative; z-index:2; backdrop-filter: blur(10px); }
-    .year-circle::after { content: ''; position:absolute; inset:-8px; border-radius:50%; border:2px solid rgba(220,38,38,.3); 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 15px 50px rgba(220,38,38,.5); border-color: rgba(255,255,255,.5); transform: translateY(-15px) scale(1.05); animation: glow 2s ease-in-out infinite; }
+    .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 glow { 0%,100%{ filter: brightness(1);} 50%{ filter: brightness(1.15);} }
-    @keyframes ripple { 0%{ transform: scale(1); opacity:.6;} 100%{ transform: scale(1.3); opacity:0;} }
-    .project-card { margin-top:40px; background: #ffffff; border-radius:20px; padding:28px; min-width:320px; max-width:380px; box-shadow:0 8px 30px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.04); opacity:.6; transform: scale(.92) translateY(10px); transition:all .6s cubic-bezier(.34,1.56,.64,1); border:1px solid rgba(251,191,36,.1); position:relative; overflow:hidden;}
-    .project-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background: linear-gradient(to left,#dc2626,#b91c1c,#991b1b); opacity:0; transition:opacity .6s ease;}
-    .timeline-item.active .project-card { opacity:1; transform: scale(1) translateY(0); box-shadow:0 20px 60px rgba(0,0,0,.12),0 5px 15px rgba(0,0,0,.06),0 0 0 1px rgba(220,38,38,.15); border-color: rgba(220,38,38,.25); }
+    @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:#1f2937; font-weight:500; }
+    .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(220,38,38,.08); transform: translateX(-4px); }
+    .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,.95) 0%, rgba(255,255,255,.85) 100%); border:none; border-radius:50%; width:56px; height:56px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:22px; color:#dc2626; box-shadow:0 6px 20px rgba(0,0,0,.15); transition:all .4s cubic-bezier(.34,1.56,.64,1); backdrop-filter: blur(10px); }
-    .scroll-btn:hover:not(:disabled){ background: linear-gradient(135deg,#fff 0%,#fee2e2 100%); transform: scale(1.15); box-shadow:0 10px 35px rgba(220,38,38,.25); }
+    .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){
@@ -234,7 +232,7 @@ function ProjectsTimeline({
     .projects-timeline-root.plain-bleed .project-card { max-width:420px; }
   `;
 
-  const mainStyle = plain ? { background: "#ffffff", paddingBottom: 0 } : { background: "linear-gradient(135deg, var(--bg-start) 0%, var(--bg-mid) 30%, var(--bg-end) 60%, #475569 100%)" };
+  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" : ""}`}>
@@ -638,4 +636,4 @@ export default function DepartmentDetail() {
       </section>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/Components/Sections/DepartmentDetail2/DepartmentDetail2.jsx b/src/Components/Sections/DepartmentDetail2/DepartmentDetail2.jsx
new file mode 100644
index 0000000..7cdef6e
--- /dev/null
+++ b/src/Components/Sections/DepartmentDetail2/DepartmentDetail2.jsx
@@ -0,0 +1,542 @@
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import d1 from "../../../../src/assets/Images/d1.jpeg";
+import d12 from "../../../../src/assets/Images/d12.jpeg";
+import d13 from "../../../../src/assets/Images/d13.jpeg";
+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);
+
+  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: "2016", items: ["تنفيذ أبنية خدمية وإدارية ومشاريع إعادة تأهيل."] },
+  { year: "2017", items: ["إنشاء مدينة معارض ومكاتب سيارات (200) مكتب - المدينة الصناعية اللاذقية"] },
+  { year: "2023", items: ["تصميم وتنفيذ مشروع 1000 شقة سكنية (مساكن الإيواء) بإشراف الهلال الأحمر الإماراتي"] },
+];
+
+export default function DepartmentDetail2() {
+  const [active, setActive] = useState(null);
+
+  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 displayItems = expertiseItems;
+  const heroImage = active === "expertise" ? d12 : active === "works" ? d13 : d7;
+
+  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 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 c9767d7..e9a137f 100644
--- a/src/Components/Sections/Departments/Departments.jsx
+++ b/src/Components/Sections/Departments/Departments.jsx
@@ -11,34 +11,35 @@ import { useNavigate } from "react-router-dom";
 
 // images
 import d1 from "../../../../src/assets/Images/d1.jpeg";
-import d2 from "../../../../src/assets/Images/d2.jpeg";
-import d3 from "../../../../src/assets/Images/d3.jpeg";
-import d4 from "../../../../src/assets/Images/d4.jpeg";
-import d5 from "../../../../src/assets/Images/d5.jpeg";
-import d6 from "../../../../src/assets/Images/d6.jpeg";
-import d7 from "../../../../src/assets/Images/d7.png";
-import d8 from "../../../../src/assets/Images/d8.png";
-import d9 from "../../../../src/assets/Images/d9.png";
+import d7 from "../../../../src/assets/Images/d7.jpeg";
+import d14 from "../../../../src/assets/Images/d14.jpg";
+import d17 from "../../../../src/assets/Images/d17.png";
+import d18 from "../../../../src/assets/Images/d18.jpg";
+import d19 from "../../../../src/assets/Images/d19.jpeg";
+import d20 from "../../../../src/assets/Images/d20.jpeg";
+import d21 from "../../../../src/assets/Images/d21.jpeg";
+import d22 from "../../../../src/assets/Images/d22.jpg";
+
+
+
 
-// بيانات الأقسام
 const departments = [
   { id: 1, title: "قسم إنشاء وصيانة المنشآت الصناعية وخطوط الإنتاج", image: d1 },
-  { id: 2, title: "قسم تنفيذ المرافق السكنية والخدمية", image: d2 },
-  { id: 3, title: "قسم اعادة تأهيل وصيانة المباني", image: d3 },
-  { id: 4, title: "قسم محطات الوقود وصيانة المنشآت النفطية", image: d4 },
-  { id: 5, title: "قسم التفتيش والفحص الفني والهندسي", image: d5 },
-  { id: 6, title: "قسم المشاريع الاستراتيجية", image: d6 },
-  { id: 7, title: "قسم الاعمال المعدنية والدعم الصناعي", image: d7 },
-  { id: 8, title: "قسم الخدمات والدعم اللوجستي", image: d8 },
-  { id: 9, title: "قسم الاتمتة والتحكم", image: d9 },
+  { id: 2, title: "قسم تنفيذ المرافق السكنية والخدمية", image: d7 },
+  { id: 3, title: "قسم اعادة تأهيل وصيانة المباني", image: d14 },
+  { id: 4, title: "قسم محطات الوقود وصيانة المنشآت النفطية", image: d17 },
+  { id: 5, title: "قسم التفتيش والفحص الفني والهندسي", image: d18 },
+  { id: 6, title: "قسم المشاريع الاستراتيجية", image: d19 },
+  { id: 7, title: "قسم الاعمال المعدنية والدعم الصناعي", image: d20 },
+  { id: 8, title: "قسم الخدمات والدعم اللوجستي", image: d21 },
+  { id: 9, title: "قسم الاتمتة والتحكم", image: d22 },
+
 ];
 
-// بطاقة القسم
 function DepartmentCard({ dept, offset }) {
   const navigate = useNavigate();
   const wrapperRef = useRef(null);
 
-  // mouse tilt
   const rotateX = useMotionValue(0);
   const rotateY = useMotionValue(0);
   const scale = useMotionValue(1);
@@ -66,7 +67,6 @@ function DepartmentCard({ dept, offset }) {
     scale.set(1);
   };
 
-  // scroll parallax
   const { scrollY, scrollYProgress } = useScroll({ target: wrapperRef });
   const velocity = useVelocity(scrollY);
   const smoothVelocity = useSpring(velocity, {
@@ -91,6 +91,14 @@ function DepartmentCard({ dept, offset }) {
     ([v, p]) => v + p
   );
 
+  const handleClick = () => {
+    if (dept.id === 2) {
+      navigate("/department-detail2");
+    } else {
+      navigate(`/departments/${dept.id}`);
+    }
+  };
+
   return (
     <div
       ref={wrapperRef}
@@ -99,7 +107,6 @@ function DepartmentCard({ dept, offset }) {
       style={{ perspective: 1400 }}
       className={`relative w-full ${offset}`}
     >
-      {/* العنوان */}
       <div className="absolute bottom-6 right-[-32px] z-40 pointer-events-none max-w-xs">
         <motion.span
           style={{ translateZ: titleZ }}
@@ -112,12 +119,11 @@ function DepartmentCard({ dept, offset }) {
         </motion.span>
       </div>
 
-      {/* الصورة */}
       <motion.img
         src={dept.image}
         alt={dept.title}
         draggable={false}
-        onClick={() => navigate(`/departments/${dept.id}`)}
+        onClick={handleClick}
         style={{
           rotateX: rx,
           rotateY: ry,
diff --git a/src/Components/Sections/Home/Home.jsx b/src/Components/Sections/Home/Home.jsx
index 09cd481..c0b9863 100644
--- a/src/Components/Sections/Home/Home.jsx
+++ b/src/Components/Sections/Home/Home.jsx
@@ -1,10 +1,13 @@
 import React, { useEffect, useState, useRef } from "react";
-import { Button, Dropdown } from "flowbite-react";
+import styled from 'styled-components';
+import { Element } from "react-scroll";
+import Departments from "../Departments/Departments";
 
 export default function EngineeringHeroFlowbite() {
   const defaultConfig = {
-    main_title: "حلول هندسية متكاملة",
-    subtitle: "نصمم ونبني المستقبل بخبرة ودقة واحترافية",
+    main_title: "شريكك الهندسي لتنفيذ وإدارة المشاريع باحتراف",
+    subtitle:
+      "حلول متكاملة تشمل التصميم، التنفيذ، التشغيل، والصيانة\nللمشاريع الصناعية والمدنية، وفق أحدث المعايير والتقنيات",
     primary_color: "#e67e22",
     background_color: "#000000",
     text_color: "#ffffff",
@@ -15,9 +18,11 @@ export default function EngineeringHeroFlowbite() {
   };
 
   const [config, setConfig] = useState(defaultConfig);
-  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [isMounted, setIsMounted] = useState(false);
+
   const mainTitleRef = useRef(null);
   const subtitleRef = useRef(null);
+  const departmentsRef = useRef(null);
 
   useEffect(() => {
     const id = "cairo-font-link";
@@ -30,6 +35,12 @@ export default function EngineeringHeroFlowbite() {
     }
   }, []);
 
+  useEffect(() => {
+    // slight delay to ensure mount then trigger animations
+    const t = setTimeout(() => setIsMounted(true), 60);
+    return () => clearTimeout(t);
+  }, []);
+
   useEffect(() => {
     const main = mainTitleRef.current;
     const sub = subtitleRef.current;
@@ -38,17 +49,35 @@ export default function EngineeringHeroFlowbite() {
     const baseSize = config.font_size || defaultConfig.font_size;
 
     if (main) {
-      main.textContent = config.main_title || defaultConfig.main_title;
+      const headingText = (config.main_title || defaultConfig.main_title)
+        .split("\n")
+        .map((s) => s.trim())
+        .filter(Boolean);
+      if (headingText.length === 1) {
+        main.textContent = headingText[0];
+      } else {
+        main.innerHTML = `<span style="display:block;line-height:1.02">${headingText[0]}</span><span style="display:block;font-weight:700;opacity:0.95;margin-top:6px">${headingText
+          .slice(1)
+          .join("<br/>")}</span>`;
+      }
+
       main.style.fontFamily = font;
-      main.style.fontSize = `${baseSize * 4}px`;
+      main.style.fontSize = `${baseSize * 3.8}px`;
       main.style.color = config.text_color || defaultConfig.text_color;
+      main.style.fontWeight = 800;
+      main.style.textAlign = "right";
     }
 
     if (sub) {
-      sub.textContent = config.subtitle || defaultConfig.subtitle;
+      sub.innerHTML = (config.subtitle || defaultConfig.subtitle)
+        .split("\n")
+        .map((s) => `<div>${s.trim()}</div>`)
+        .join("");
       sub.style.fontFamily = font;
-      sub.style.fontSize = `${baseSize * 1.75}px`;
+      sub.style.fontSize = `${baseSize * 1.1}px`;
       sub.style.color = config.text_color || defaultConfig.text_color;
+      sub.style.textAlign = "right";
+      sub.style.maxWidth = "800px";
     }
 
     const root = document.documentElement;
@@ -139,127 +168,302 @@ export default function EngineeringHeroFlowbite() {
     }
   }, []);
 
+  const goToDepartments = (e) => {
+    e && e.preventDefault && e.preventDefault();
+    const el = document.getElementById("departments");
+    if (el) {
+      el.scrollIntoView({ behavior: "smooth", block: "start" });
+    } else {
+      window.scrollTo({ top: 0, behavior: "smooth" });
+    }
+  };
+
+  const OrangeActionButton = ({ onClick, children }) => {
+    return (
+      <StyledWrapper>
+        <button className="button" onClick={onClick} aria-label="تعرف على أقسامنا">
+          {children}
+          <svg className="icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
+            <path fillRule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm4.28 10.28a.75.75 0 000-1.06l-3-3a.75.75 0 10-1.06 1.06l1.72 1.72H8.25a.75.75 0 000 1.5h5.69l-1.72 1.72a.75.75 0 101.06 1.06l3-3z" clipRule="evenodd" />
+          </svg>
+        </button>
+      </StyledWrapper>
+    );
+  };
+
   return (
-    <div dir="rtl" className="h-screen w-full overflow-hidden" style={{ background: 'var(--ehb-background, #000000)' }}>
-      <style>{`
+    <div dir="rtl" className="h-screen w-full overflow-hidden" style={{ background: "var(--ehb-background, #000000)" }}>
+      <style>{` 
         :root { --ehb-primary: #e67e22; --ehb-background: #000000; --ehb-surface: #95a5a6; --ehb-action: #34495e }
-        .logo-container{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,var(--ehb-background) 0%, #34495e 100%);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeOutContainer 0.5s ease-out 4s forwards}
-        .logo{width:80px;height:80px;border-radius:12px;position:absolute;opacity:0;transform:translateY(100%);display:flex;align-items:center;justify-content:center;background:transparent}
-        .logo img{max-width:70%;max-height:70%;object-fit:contain;display:block}
-        .logo-1{animation:jumpIn 0.6s ease-out 0.2s forwards, moveToMerge 0.8s ease-in-out 2s forwards}
-        .logo-2{animation:jumpIn 0.6s ease-out 0.4s forwards, moveToMerge 0.8s ease-in-out 2s forwards}
-        .logo-3{animation:jumpIn 0.6s ease-out 0.6s forwards, moveToMerge 0.8s ease-in-out 2s forwards}
-        .final-logo{width:120px;height:120px;background:transparent;border-radius:16px;position:absolute;opacity:0;transform:scale(0);animation:finalLogoAppear 0.6s ease-out 2.8s forwards;display:flex;align-items:center;justify-content:center}
-        .final-logo img{max-width:80%;max-height:80%;object-fit:contain;display:block}
-        @keyframes jumpIn{0%{opacity:0;transform:translateY(100%)}60%{transform:translateY(-20px)}100%{opacity:1;transform:translateY(0)}}
-        @keyframes moveToMerge{0%{transform:scale(1);opacity:1}100%{transform:scale(0);opacity:0}}
-        @keyframes finalLogoAppear{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}}
-        @keyframes fadeOutContainer{to{opacity:0;visibility:hidden}}
-        .hero-section{position:relative;width:100%;height:100%;overflow:hidden;opacity:0;animation:fadeInHero 1s ease-out 4.5s forwards}
-        @keyframes fadeInHero{to{opacity:1}}
+
+        .hero-section{position:relative;width:100%;height:100%;overflow:hidden}
         .hero-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom, rgba(0,0,0,0.65), rgba(0,0,0,0.35));z-index:3}
         .hero-layout{position:relative;z-index:10;height:100%;display:flex;align-items:center;justify-content:space-between;padding:40px;gap:2rem;direction:ltr;flex-direction:row}
-        .hero-left{flex:1;display:flex;align-items:center;justify-content:flex-start;padding:20px}
-        .hero-left img{max-width:100%;height:auto;display:block}
-        .hero-content{flex:1;z-index:15;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;padding:40px}
-        .hero-title{opacity:0;transform:translateY(30px);animation:slideUpFade 1s ease-out 6s forwards}
-        .hero-subtitle{opacity:0;transform:translateY(30px);animation:slideUpFade 1s ease-out 6.3s forwards}
-        @keyframes slideUpFade{to{opacity:1;transform:translateY(0)}}
+        .hero-left{flex:1;display:flex;align-items:center;justify-content:flex-start;padding:20px;position:relative;flex-direction:column}
 
-        /* Brighter, more luminous navy glows: stronger cores, additional layered highlights, subtle lens flare and increased saturation */
-        .navy-glow{position:absolute;pointer-events:none;z-index:4;opacity:1;transform:translateZ(0);mix-blend-mode:screen;filter:blur(160px) saturate(160%);transition:opacity .45s ease, transform .45s ease, filter .45s ease;will-change:opacity,transform,filter}
+        /* BIG IMAGE: slide-in slower, with delay */
+        .hero-left img{ max-width:100%; height:auto; display:block; transform: translateX(-20px) scale(0.995); opacity:1; will-change: transform, opacity; }
+        .hero-section.is-mounted .hero-left img{
+          transform: translateX(-120px) scale(0.96);
+          opacity: 0;
+          animation: slideInLeft 1200ms cubic-bezier(.2,.9,.2,1) 200ms both;
+        }
+        @keyframes slideInLeft {
+          0% { transform: translateX(-140px) scale(0.96); opacity: 0; filter: blur(2px); }
+          65% { transform: translateX(18px) scale(1.02); opacity: 1; filter: blur(0); }
+          100% { transform: translateX(0) scale(1); opacity: 1; }
+        }
 
-        /* bottom-left glow: very bright core + warm accent rim for contrast */
-        .navy-glow.bottom-left{left:0;bottom:0;width:90vh;height:90vh;border-radius:50%;
-          background: radial-gradient(circle at 15% 88%, rgba(10,34,78,0.98) 0%, rgba(22,54,110,0.76) 18%, rgba(40,78,140,0.48) 36%, rgba(6,23,58,0) 62%);
-          box-shadow: 0 0 120px 32px rgba(10,34,78,0.12), inset 0 0 140px 10px rgba(230,126,34,0.035);
-          animation: glowFloat 9s ease-in-out infinite alternate, glowPulse 5.8s ease-in-out infinite;}
+        /* partner bubbles - pop slower and float slower */
+        .partner-logos{display:flex;gap:18px;margin-top:20px;align-items:flex-end;justify-content:flex-start}
+        .partner-bubble{
+          width:110px;height:110px;border-radius:9999px;background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 12px 36px rgba(0,0,0,0.45);backdrop-filter: blur(4px);transition:transform 420ms cubic-bezier(.2,.9,.2,1),box-shadow 420ms;
+          transform-origin:center;
+          transform: translateY(10px) scale(0.9);
+          opacity: 0;
+          will-change: transform, opacity;
+        }
+        .hero-section.is-mounted .partner-bubble{
+          animation:
+            popIn 900ms cubic-bezier(.2,.9,.2,1) both,
+            floatBubble 5s ease-in-out 1100ms infinite;
+        }
+        .partner-bubble img{max-width:72%;max-height:72%;object-fit:contain;filter:grayscale(0.06) saturate(0.95)}
+        .partner-bubble:hover{transform:translateY(-10px) scale(1.08);box-shadow:0 34px 72px rgba(0,0,0,0.55)}
 
-        /* layered depth */
-        .navy-glow.bottom-left::before, .navy-glow.bottom-left::after{content:"";position:absolute;border-radius:50%;left:0;top:0;right:0;bottom:0;pointer-events:none}
-        .navy-glow.bottom-left::before{background: radial-gradient(circle at 22% 78%, rgba(120,170,220,0.22), rgba(120,170,220,0) 46%);transform:scale(0.95);filter:blur(42px);opacity:0.96}
-        .navy-glow.bottom-left::after{background: radial-gradient(circle at 42% 92%, rgba(230,126,34,0.12), rgba(230,126,34,0) 52%);transform:scale(0.7);filter:blur(30px);opacity:0.7}
-        /* tiny bright flare center */
-        .navy-glow.bottom-left .flare{position:absolute;left:18%;bottom:20%;width:18vh;height:18vh;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 50% 50%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.35) 8%, rgba(10,34,78,0.0) 45%);filter:blur(28px);opacity:0.95}
+        @keyframes popIn {
+          0% { transform: translateY(30px) scale(0.6); opacity: 0; filter: blur(2px); }
+          65% { transform: translateY(-10px) scale(1.06); opacity: 1; filter: blur(0); }
+          100% { transform: translateY(0) scale(1); opacity: 1; }
+        }
 
-        /* top-right glow: tighter and brighter to balance composition */
-        .navy-glow.top-right{right:0;top:0;width:78vh;height:78vh;border-radius:50%;
-          background: radial-gradient(circle at 88% 12%, rgba(12,36,82,0.98) 0%, rgba(20,44,88,0.72) 16%, rgba(44,78,140,0.38) 36%, rgba(6,23,58,0) 62%);
-          box-shadow: 0 0 110px 24px rgba(44,78,140,0.08), inset 0 0 120px 6px rgba(255,255,255,0.02);
-          animation: glowFloat 11.5s ease-in-out infinite alternate, glowPulse 6.6s ease-in-out infinite}
+        @keyframes floatBubble{0%{transform:translateY(0) scale(1)}25%{transform:translateY(-10px) scale(1.03)}50%{transform:translateY(-24px) scale(1.07)}75%{transform:translateY(-10px) scale(1.03)}100%{transform:translateY(0) scale(1)}}
 
-        .navy-glow.top-right::before, .navy-glow.top-right::after{content:"";position:absolute;border-radius:50%;left:0;top:0;right:0;bottom:0;pointer-events:none}
-        .navy-glow.top-right::before{background: radial-gradient(circle at 70% 30%, rgba(160,200,255,0.18), rgba(160,200,255,0) 48%);transform:scale(0.94);filter:blur(40px);opacity:0.98}
-        .navy-glow.top-right::after{background: radial-gradient(circle at 85% 20%, rgba(255,255,255,0.06), rgba(255,255,255,0) 45%);transform:scale(0.62);filter:blur(24px);opacity:0.6}
-        .navy-glow.top-right .flare{position:absolute;right:14%;top:12%;width:10vh;height:10vh;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 50% 50%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.28) 10%, rgba(12,36,82,0) 48%);filter:blur(20px);opacity:0.9}
+        /* partner strip */
+        .partner-strip-wrap{position:fixed;left:0;bottom:14px;z-index:30;pointer-events:auto;width:100%;display:flex;justify-content:flex-start;padding-left:40px;padding-right:40px}
+        .partner-strip{backface-visibility:hidden;transform-style:preserve-3d;perspective:1000px;display:flex;align-items:center;gap:18px;padding:12px 20px;border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,0.55);
+          background:linear-gradient(90deg, rgba(6,23,58,0.98) 0%, rgba(30,50,90,0.9) 35%, rgba(230,126,34,0.98) 100%);
+          transform: translateX(-120%) translateZ(0) rotateX(6deg) skewY(-2deg);
+          animation: slideInStrip 1600ms cubic-bezier(.2,.9,.2,1) 600ms forwards;
+          will-change:transform,opacity;
+        }
+        @keyframes slideInStrip{
+          0%{opacity:0;transform:translateX(-120%) translateZ(0) rotateX(8deg) skewY(-4deg) scale(0.98)}
+          70%{transform:translateX(12px) translateZ(6px) rotateX(2deg) skewY(-1deg) scale(1.01);opacity:1}
+          100%{transform:translateX(0) translateZ(10px) rotateX(0deg) skewY(0deg) scale(1);opacity:1}
+        }
 
-        /* slightly stronger pulse and float so glow reads as illuminated but stays subtle */
-        @keyframes glowFloat{0%{transform:translateY(0) scale(1)}100%{transform:translateY(-22px) scale(1.045)}}
-        @keyframes glowPulse{0%{opacity:1}50%{opacity:0.66}100%{opacity:1}}
+        .partner-item{display:flex;align-items:center;justify-content:center;padding:6px;border-radius:10px;min-width:84px;min-height:48px;background:rgba(255,255,255,0.04);backdrop-filter:blur(4px);box-shadow:0 6px 18px rgba(0,0,0,0.45);transition:transform 400ms cubic-bezier(.2,.9,.2,1),box-shadow 400ms}
+        .partner-item img{max-height:36px;max-width:140px;object-fit:contain;display:block;filter:grayscale(0.06) saturate(0.95)}
+        .partner-item:hover{transform:translateY(-6px) translateZ(18px) rotateX(6deg);box-shadow:0 30px 50px rgba(0,0,0,0.55)}
 
-        /* small responsive tweak so glows don't overwhelm on narrow screens */
+        @media (max-width: 1024px){
+          .partner-strip{padding:10px 14px;border-radius:12px}
+          .partner-item{min-width:72px;min-height:44px}
+          .partner-item img{max-height:30px}
+          .partner-strip-wrap{padding-left:20px;padding-right:20px;bottom:10px}
+        }
         @media (max-width: 640px){
-          .navy-glow.bottom-left{width:56vh;height:56vh;filter:blur(110px)}
-          .navy-glow.top-right{width:50vh;height:50vh;filter:blur(106px)}
-          .navy-glow.bottom-left .flare, .navy-glow.top-right .flare{display:none}
+          .partner-strip{gap:10px;padding:8px;border-radius:10px}
+          .partner-item img{max-height:24px}
+          .partner-logos{gap:12px}
+          .partner-bubble{width:84px;height:84px}
+        }
+
+        /* HERO TEXT: slide from right (slower) */
+        .hero-content{flex:1;z-index:15;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;padding:40px}
+        .hero-title{ opacity:1; transform: translateX(0) translateY(0) scale(1); will-change: transform, opacity; }
+        .hero-subtitle{ opacity:1; transform: translateX(0) translateY(0) scale(1); will-change: transform, opacity; }
+
+        .hero-section.is-mounted .hero-title{
+          opacity:0;
+          transform: translateX(120px) translateY(10px) scale(0.995);
+          animation: slideFromRight 1000ms cubic-bezier(.2,.9,.2,1) 260ms both;
+        }
+        .hero-section.is-mounted .hero-subtitle{
+          opacity:0;
+          transform: translateX(96px) translateY(6px) scale(0.995);
+          animation: slideFromRight 1000ms cubic-bezier(.2,.9,.2,1) 520ms both;
+        }
+        @keyframes slideFromRight {
+          0% { opacity:0; transform: translateX(120px) translateY(18px) scale(0.98); filter: blur(2px); }
+          65% { transform: translateX(-8px) translateY(-8px) scale(1.02); opacity:1; filter: blur(0); }
+          100% { opacity:1; transform: translateX(0) translateY(0) scale(1); }
+        }
+
+        .navy-glow{position:absolute;pointer-events:none;filter:blur(120px);z-index:4;opacity:1}
+        .navy-glow.bottom-left{left:0;bottom:0;width:80vh;height:80vh;background:radial-gradient(circle at 10% 90%, rgba(6,23,58,0.98), rgba(6,23,58,0.7), rgba(6,23,58,0.35) 40%, rgba(6,23,58,0) 70%)}
+        .navy-glow.top-right{right:0;top:0;width:70vh;height:70vh;background:radial-gradient(circle at 90% 10%, rgba(6,23,58,0.95), rgba(6,23,58,0.6), rgba(6,23,58,0.3) 40%, rgba(6,23,58,0) 70%)}
+        @media (max-width: 768px){
+          .hero-layout{flex-direction:column;align-items:center;text-align:center}
+          .hero-content{align-items:center}
+          .hero-title{font-size:calc(var(--base,16px) * 2.2) !important}
+        }
+
+        /* BUTTON: slower pop-in */
+        .button {
+          position: relative;
+          transition: all 0.3s ease-in-out;
+          box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
+          padding-block: 0.5rem;
+          padding-inline: 1.25rem;
+          background-color: var(--ehb-primary, #e67e22);
+          border-radius: 9999px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: #ffff;
+          gap: 10px;
+          font-weight: bold;
+          border: 3px solid #ffffff4d;
+          outline: none;
+          overflow: hidden;
+          font-size: 15px;
+          cursor: pointer;
+          transform: translateY(0) scale(1);
+          opacity: 1;
+        }
+
+        .hero-section.is-mounted .button{
+          transform: scale(0.6);
+          opacity: 0;
+          animation: popIn 900ms cubic-bezier(.2,.9,.2,1) 760ms both;
+          will-change: transform, opacity;
+        }
+
+        .icon { width: 24px; height: 24px; transition: all 0.3s ease-in-out; }
+        .button:hover { transform: scale(1.05); border-color: #fff9; }
+        .button:hover .icon { transform: translate(4px); }
+        .button:hover::before { animation: shine 1.5s ease-out infinite; }
+
+        .button::before {
+          content: "";
+          position: absolute;
+          width: 100px;
+          height: 100%;
+          background-image: linear-gradient(
+            120deg,
+            rgba(255, 255, 255, 0) 30%,
+            rgba(255, 255, 255, 0.8),
+            rgba(255, 255, 255, 0) 70%
+          );
+          top: 0;
+          left: -100px;
+          opacity: 0.6;
+        }
+
+        @keyframes popIn {
+          0% { transform: translateY(30px) scale(0.6); opacity: 0; filter: blur(2px); }
+          65% { transform: translateY(-10px) scale(1.06); opacity: 1; filter: blur(0); }
+          100% { transform: translateY(0) scale(1); opacity: 1; }
+        }
+
+        @keyframes shine {
+          0% { left: -100px; }
+          60% { left: 100%; }
+          to { left: 100%; }
         }
       `}</style>
 
-      <div className="logo-container">
-        <div className="logo logo-1" style={{ left: 'calc(50% - 200px)' }}>
-          <img src="src/assets/TPS-logo.png" alt="TPS logo" />
-        </div>
-        <div className="logo logo-2" style={{ left: 'calc(50% - 40px)' }}>
-          <img src="src/assets/NSC.png" alt="NSC logo" />
-        </div>
-        <div className="logo logo-3" style={{ left: 'calc(50% + 120px)' }}>
-          <img src="src/assets/LOGO.png" alt="LOGO" />
-        </div>
-        <div className="final-logo">
-          <img src="src/assets/REXNT.png" alt="REXNT" />
-        </div>
-      </div>
-
-      <div className="hero-section">
-        {/* removed the previous hero-image background as requested */}
-
-        <div className="navy-glow bottom-left"><div className="flare" /></div>
-        <div className="navy-glow top-right"><div className="flare" /></div>
-
+      <div className={`hero-section ${isMounted ? "is-mounted" : ""}`}>
+        <div className="navy-glow bottom-left" />
+        <div className="navy-glow top-right" />
         <div className="hero-overlay" />
-
         <div className="hero-layout">
           <div className="hero-left">
             <img src="src/assets/REXNT.png" alt="REXNT" />
+
+            <div className="partner-logos" aria-hidden>
+              <div className="partner-bubble" style={{ animationDelay: "0ms" }} aria-label="شريك TPS">
+                <img src="src/assets/TPS-logo.png" alt="TPS" />
+              </div>
+              <div className="partner-bubble" style={{ animationDelay: "180ms" }} aria-label="شريك NSC">
+                <img src="src/assets/NSC.png" alt="NSC" />
+              </div>
+              <div className="partner-bubble" style={{ animationDelay: "360ms" }} aria-label="شريك LOGO">
+                <img src="src/assets/LOGO.png" alt="LOGO" />
+              </div>
+            </div>
           </div>
 
           <div className="hero-content">
-            <h1 ref={mainTitleRef} className="hero-title text-white text-right" style={{ fontWeight: 800, marginBottom: 24, textShadow: '2px 2px 8px rgba(0,0,0,0.5)' }} />
-
-            <p ref={subtitleRef} className="hero-subtitle text-white text-right" style={{ maxWidth: 800, textShadow: '1px 1px 4px rgba(0,0,0,0.5)' }} />
-
-            <div className="mt-8 flex items-center gap-6 justify-end">
-              <Button color="light" onClick={() => window?.scrollTo?.({ top: 0, behavior: 'smooth' })}>ابدأ</Button>
-
-              <div className="relative">
-                <Button onClick={() => setDropdownOpen((s) => !s)} className="bg-[var(--ehb-primary)] text-black font-semibold">
-                  تواصل معنا
-                </Button>
-
-                {dropdownOpen && (
-                  <div className="absolute mt-3 right-0 bg-[#06173a] border border-white/10 rounded p-3 text-white shadow-2xl">
-                    <a className="flex items-center gap-3 py-2 px-3 hover:underline" href="https://wa.me/963965656631" target="_blank" rel="noreferrer">📱 <span>+963965656631</span></a>
-                    <a className="flex items-center gap-3 py-2 px-3 hover:underline" href="mailto:info@TPS-STATIONS.COM">✉️ <span>info@TPS-STATIONS.COM</span></a>
-                  </div>
-                )}
-
-              </div>
+            <h1 ref={mainTitleRef} className="hero-title text-white text-right" style={{ fontWeight: 800, marginBottom: 16, textShadow: "2px 2px 10px rgba(0,0,0,0.6)" }} />
+            <p ref={subtitleRef} className="hero-subtitle text-white text-right" style={{ maxWidth: 800, textShadow: "1px 1px 6px rgba(0,0,0,0.45)", lineHeight: 1.6 }} />
+            <div style={{ marginTop: 18 }}>
+              <OrangeActionButton onClick={goToDepartments}>تعرف على أقسامنا</OrangeActionButton>
             </div>
           </div>
         </div>
       </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>
   );
 }
+
+const StyledWrapper = styled.div`
+  .button {
+    position: relative;
+    transition: all 0.3s ease-in-out;
+    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
+    padding-block: 0.5rem;
+    padding-inline: 1.25rem;
+    background-color: var(--ehb-primary, #e67e22);
+    border-radius: 9999px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #ffff;
+    gap: 10px;
+    font-weight: bold;
+    border: 3px solid #ffffff4d;
+    outline: none;
+    overflow: hidden;
+    font-size: 15px;
+    cursor: pointer;
+  }
+
+  .icon { width: 24px; height: 24px; transition: all 0.3s ease-in-out; }
+
+  .button:hover { transform: scale(1.05); border-color: #fff9; }
+  .button:hover .icon { transform: translate(4px); }
+  .button:hover::before { animation: shine 1.5s ease-out infinite; }
+
+  .button::before {
+    content: "";
+    position: absolute;
+    width: 100px;
+    height: 100%;
+    background-image: linear-gradient(
+      120deg,
+      rgba(255, 255, 255, 0) 30%,
+      rgba(255, 255, 255, 0.8),
+      rgba(255, 255, 255, 0) 70%
+    );
+    top: 0;
+    left: -100px;
+    opacity: 0.6;
+  }
+
+  @keyframes shine {
+    0% { left: -100px; }
+    60% { left: 100%; }
+    to { left: 100%; }
+  }
+`;
diff --git a/src/assets/Images/d12.jpeg b/src/assets/Images/d12.jpeg
new file mode 100644
index 0000000..7665b12
Binary files /dev/null and b/src/assets/Images/d12.jpeg differ
diff --git a/src/assets/Images/d13.jpeg b/src/assets/Images/d13.jpeg
new file mode 100644
index 0000000..02adc9c
Binary files /dev/null and b/src/assets/Images/d13.jpeg differ
diff --git a/src/assets/Images/d14.jpg b/src/assets/Images/d14.jpg
new file mode 100644
index 0000000..b0e58d9
Binary files /dev/null and b/src/assets/Images/d14.jpg differ
diff --git a/src/assets/Images/d15.jpg b/src/assets/Images/d15.jpg
new file mode 100644
index 0000000..6734ae6
Binary files /dev/null and b/src/assets/Images/d15.jpg differ
diff --git a/src/assets/Images/d16.jpg b/src/assets/Images/d16.jpg
new file mode 100644
index 0000000..849af36
Binary files /dev/null and b/src/assets/Images/d16.jpg differ
diff --git a/src/assets/Images/d17.png b/src/assets/Images/d17.png
new file mode 100644
index 0000000..bcbc289
Binary files /dev/null and b/src/assets/Images/d17.png differ
diff --git a/src/assets/Images/d18.jpg b/src/assets/Images/d18.jpg
new file mode 100644
index 0000000..118d749
Binary files /dev/null and b/src/assets/Images/d18.jpg differ
diff --git a/src/assets/Images/d19.jpeg b/src/assets/Images/d19.jpeg
new file mode 100644
index 0000000..734e887
Binary files /dev/null and b/src/assets/Images/d19.jpeg differ
diff --git a/src/assets/Images/d20.jpeg b/src/assets/Images/d20.jpeg
new file mode 100644
index 0000000..adb81fc
Binary files /dev/null and b/src/assets/Images/d20.jpeg differ
diff --git a/src/assets/Images/d21.jpeg b/src/assets/Images/d21.jpeg
new file mode 100644
index 0000000..81205b9
Binary files /dev/null and b/src/assets/Images/d21.jpeg differ
diff --git a/src/assets/Images/d22.jpg b/src/assets/Images/d22.jpg
new file mode 100644
index 0000000..274e75d
Binary files /dev/null and b/src/assets/Images/d22.jpg differ
diff --git a/src/assets/Images/d7.jpeg b/src/assets/Images/d7.jpeg
new file mode 100644
index 0000000..f11b08d
Binary files /dev/null and b/src/assets/Images/d7.jpeg differ
diff --git a/src/assets/Images/d7.png b/src/assets/Images/d7.png
deleted file mode 100644
index d1c8dad..0000000
Binary files a/src/assets/Images/d7.png and /dev/null differ
diff --git a/src/assets/LOGO.png b/src/assets/LOGO.png
index d6ad400..42ea728 100644
Binary files a/src/assets/LOGO.png and b/src/assets/LOGO.png differ
diff --git a/src/assets/TPS-logo.png b/src/assets/TPS-logo.png
index 27b03c1..cf7badf 100644
Binary files a/src/assets/TPS-logo.png and b/src/assets/TPS-logo.png differ
diff --git a/src/index.css b/src/index.css
index 21353ba..a042806 100644
--- a/src/index.css
+++ b/src/index.css
@@ -3,68 +3,33 @@
 @tailwind utilities;
 @layer base {
      :root {
-        --bg-color: #f8fafc;
-        --surface-color: #ffffff;
-        --text-color: #1e293b;
-        --border-color: #e2e8f0;
-        --primary-color: #275094;
-        --secondary-color: #3c3c3c;
+        --primary: #041c40;
+        --secondary: #e06923;
+        --tertiary: #313131;
+        --bg-color: #F5EEE6;
+        --text-color: #313131;
+        --border-color: #d1c9be;
     }
     .dark {
-        --bg-color: #0f172a;
-        --surface-color: #1e293b;
-        --text-color: #f1f5f9;
-        --border-color: #334155;
-        --primary-color: #1c3a6b;
-        --secondary-color: #2a2a2a;
+        --primary: #041c40;
+        --secondary: #e06923;
+        --tertiary: #313131;
+        --bg-color: #313131;
+        --text-color: #F5EEE6;
+        --border-color: #4a4a4a;
     }
     body {
-        @apply bg-theme text-theme transition-colors duration-300;
+        margin: 0;
+        padding: 0;
+        min-height: 100vh;
+        width: 100vw;
+        overflow-x: hidden;
         font-family: system-ui, -apple-system, sans-serif;
+        color: var(--text-color);
+        transition: background-color 0.3s ease, color 0.3s ease;
     }
-}
-
-@layer components {
-    .theme-container {
-        @apply bg-theme text-theme transition-colors duration-300;
-    }
-    .theme-surface {
-        @apply bg-surface border border-theme rounded-lg p-4 transition-colors duration-300;
-    }
-    .theme-card {
-        @apply bg-white dark: bg-gray-800 rounded-xl shadow-lg p-6 border border-gray-200 dark: border-gray-700 transition-all duration-300 hover: shadow-xl;
-    }
-    .theme-btn-primary {
-        @apply bg-primary hover: bg-primary-light dark: bg-primary-dark dark: hover: bg-primary text-white font-medium py-3 px-6 rounded-lg transition-all duration-200 hover: scale-105 active: scale-95;
-    }
-    .theme-btn-secondary {
-        @apply bg-secondary hover: bg-secondary-light dark: bg-secondary-dark dark: hover: bg-secondary text-white font-medium py-3 px-6 rounded-lg transition-all duration-200 hover: scale-105 active: scale-95;
-    }
-    .theme-input {
-        @apply w-full px-4 py-3 bg-white dark: bg-gray-800 border border-gray-300 dark: border-gray-600 rounded-lg focus: ring-2 focus: ring-primary focus: border-transparent text-gray-900 dark: text-white placeholder-gray-500 dark: placeholder-gray-400 transition-colors duration-200;
-    }
-    .theme-nav {
-        @apply bg-white dark: bg-gray-800 shadow-md border-b border-gray-200 dark: border-gray-700 transition-colors duration-300;
-    }
-    .theme-nav-link {
-        @apply text-gray-700 dark: text-gray-300 hover: text-primary dark: hover: text-primary-light font-medium transition-colors duration-200 px-4 py-2;
-    }
-    .theme-section {
-        @apply py-12 md: py-16 lg: py-20 px-4 md: px-8 bg-white dark: bg-gray-900 transition-colors duration-300;
-    }
-    .theme-section-alt {
-        @apply py-12 md: py-16 lg: py-20 px-4 md: px-8 bg-gray-50 dark: bg-gray-800 transition-colors duration-300;
-    }
-    .theme-heading {
-        @apply text-3xl md: text-4xl lg: text-5xl font-bold text-gray-900 dark: text-white mb-6;
-    }
-    .theme-subheading {
-        @apply text-xl md: text-2xl text-gray-600 dark: text-gray-300 mb-8;
-    }
-    .theme-text {
-        @apply text-gray-700 dark: text-gray-300 leading-relaxed;
-    }
-    .theme-footer {
-        @apply bg-gray-800 dark: bg-gray-900 text-white py-8 border-t border-gray-700 dark: border-gray-800 transition-colors duration-300;
+    html {
+        scroll-behavior: smooth;
+        overflow-x: hidden;
     }
 }
\ No newline at end of file
diff --git a/src/main.jsx b/src/main.jsx
index b9a1a6d..90b57c3 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,10 +1,15 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.jsx'
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './index.css';
+import './App.css';
 
-createRoot(document.getElementById('root')).render(
-  <StrictMode>
+document.documentElement.style.setProperty('--bg-color', '#F5EEE6');
+document.documentElement.style.setProperty('--text-color', '#131313');
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
     <App />
-  </StrictMode>,
-)
+  </React.StrictMode>
+);
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index cbac0e8..ec3770f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,45 +1,23 @@
-/** @type {import('tailwindcss').Config} */
-export default {
+module.exports = {
+    darkMode: 'class',
     content: [
         "./index.html",
         "./src/**/*.{js,ts,jsx,tsx}",
     ],
-    darkMode: 'class',
     theme: {
         extend: {
             colors: {
-                primary: '#275094',
-                'primary-light': '#3c6bc9',
-                'primary-dark': '#1c3a6b',
-
-                secondary: '#3c3c3c',
-                'secondary-light': '#5a5a5a',
-                'secondary-dark': '#2a2a2a',
-
-                light: {
-                    bg: '#f8fafc',
-                    surface: '#ffffff',
-                    text: '#1e293b',
-                    border: '#e2e8f0',
-                    accent: '#3b82f6',
-                },
-                dark: {
-                    bg: '#0f172a',
-                    surface: '#1e293b',
-                    text: '#f1f5f9',
-                    border: '#334155',
-                    accent: '#60a5fa',
-                },
+                primary: '#041c40',
+                secondary: '#e06923',
+                'dark-bg': '#313131',
+                'light-bg': '#F5EEE6',
             },
-            backgroundColor: {
-                'theme': 'var(--bg-color)',
-                'surface': 'var(--surface-color)',
-            },
-            textColor: {
-                'theme': 'var(--text-color)',
-            },
-            borderColor: {
-                'theme': 'var(--border-color)',
+            backdropBlur: {
+                'xs': '2px',
+                'sm': '4px',
+                'md': '8px',
+                'lg': '12px',
+                'xl': '20px',
             },
         },
     },
diff --git a/vite.config.js b/vite.config.js
index 8b0f57b..03972ff 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,7 +1,19 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 
-// https://vite.dev/config/
 export default defineConfig({
-  plugins: [react()],
-})
+    plugins: [react()],
+    css: {
+        postcss: './postcss.config.js',
+    },
+    build: {
+        rollupOptions: {
+            output: {
+                manualChunks: {
+                    'react-vendor': ['react', 'react-dom'],
+                    'animation-vendor': ['three', 'styled-components', 'framer-motion'],
+                }
+            }
+        }
+    }
+})
\ No newline at end of file