Edit background of logo in home

Edit title About us
Edit text in services
2026-01-14 14:28:28 +03:00 · 2026-01-14 14:21:32 +03:00 · 2026-01-14 13:58:28 +03:00 · 2026-01-14 13:26:50 +03:00 · 2026-01-14 13:08:05 +03:00 · 2026-01-14 12:59:32 +03:00
47 changed files with 8300 additions and 3592 deletions
--- a/.gitea/workflows/websiteDeployer.yaml
+++ b/.gitea/workflows/websiteDeployer.yaml
@ -0,0 +1,32 @@
+name: Build frontend
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Clone repository
+        uses: actions/checkout@v2
+        with:
+          repository: Rahaf/REXNT
+          github-server-url: http://45.93.137.91:3000
+
+
+      - name: Use Node.js 22.13.1
+        uses: actions/setup-node@v1
+        with:
+          node-version: 24.x
+      - name: Install dependencies
+        run: npm install    
+      
+      - name: Generate build
+        run: npm run build
+      - name: Copy to Nginx root
+        run: |
+          sudo rm -rf /var/www/html/*
+                                        sudo cp -r dist/* /var/www/html/
+                                                  sudo chown -R www-data:www-data /var/www/html/
+                                                            sudo systemctl reload nginx
--- a/index.html
+++ b/index.html
@ -1,13 +1,19 @@
 <!doctype html>
 <html lang="en">
-  <head>
+
+<head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>rexnt</title>
-  </head>
-  <body>
-    <div id="root"></div>
+    <link rel="icon" type="image/png" sizes="32x32" href="/src/assets/REXNT.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.5" />
+    <title>Rexnt</title>
+</head>
+
+<body>
+    <div id="root" style="overflow-y: scroll !important;"></div>
    <script type="module" src="/src/main.jsx"></script>
-  </body>
+</body>
+
 </html>
+
+
+
--- a/package-lock.json
+++ b/package-lock.json
@ -11,9 +11,9 @@
        "@emailjs/browser": "^4.4.1",
        "@heroicons/react": "^2.2.0",
        "aos": "^2.3.4",
+        "clsx": "^2.1.1",
        "flowbite": "^4.0.1",
        "flowbite-react": "^0.12.16",
-        "clsx": "^2.1.1",
        "framer-motion": "^12.23.26",
        "i18next": "^25.7.3",
        "i18next-browser-languagedetector": "^8.2.0",
@ -22,7 +22,7 @@
        "react-dom": "^19.2.0",
        "react-i18next": "^16.5.0",
        "react-icons": "^5.5.0",
-        "react-router-dom": "^7.11.0",
+        "react-router-dom": "^7.12.0",
        "react-scroll": "^1.9.3",
        "styled-components": "^6.1.19",
        "tailwind-merge": "^3.4.0",
@ -88,7 +88,6 @@
      "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@babel/code-frame": "^7.27.1",
        "@babel/generator": "^7.28.5",
@ -358,9 +357,6 @@
        "node": ">=14.0.0"
      }
    },
-   
-   
-   
    "node_modules/@emotion/is-prop-valid": {
      "version": "1.2.2",
      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz",
@ -475,7 +471,6 @@
        "x64"
      ],
      "dev": true,
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -493,7 +488,6 @@
        "arm64"
      ],
      "dev": true,
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -511,7 +505,6 @@
        "x64"
      ],
      "dev": true,
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -529,7 +522,6 @@
        "arm"
      ],
      "dev": true,
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -547,7 +539,6 @@
        "arm64"
      ],
      "dev": true,
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -565,7 +556,6 @@
        "ia32"
      ],
      "dev": true,
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -583,7 +573,6 @@
        "loong64"
      ],
      "dev": true,
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -601,7 +590,6 @@
        "mips64el"
      ],
      "dev": true,
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -619,7 +607,6 @@
        "ppc64"
      ],
      "dev": true,
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -637,7 +624,6 @@
        "riscv64"
      ],
      "dev": true,
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -655,7 +641,6 @@
        "s390x"
      ],
      "dev": true,
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -673,7 +658,6 @@
        "x64"
      ],
      "dev": true,
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -691,7 +675,6 @@
        "arm64"
      ],
      "dev": true,
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -709,7 +692,6 @@
        "x64"
      ],
      "dev": true,
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -727,7 +709,6 @@
        "arm64"
      ],
      "dev": true,
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -745,7 +726,6 @@
        "x64"
      ],
      "dev": true,
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -763,7 +743,6 @@
        "arm64"
      ],
      "dev": true,
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -781,7 +760,6 @@
        "x64"
      ],
      "dev": true,
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -799,7 +777,6 @@
        "arm64"
      ],
      "dev": true,
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -817,7 +794,6 @@
        "ia32"
      ],
      "dev": true,
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -835,7 +811,6 @@
        "x64"
      ],
      "dev": true,
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -1064,15 +1039,6 @@
        "react": ">= 16 || ^19.0.0-rc"
      }
    },
-    "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",
@ -1135,7 +1101,6 @@
      "version": "0.3.13",
      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "@jridgewell/sourcemap-codec": "^1.5.0",
@ -1146,7 +1111,6 @@
      "version": "2.3.5",
      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "@jridgewell/gen-mapping": "^0.3.5",
@ -1157,7 +1121,6 @@
      "version": "3.1.2",
      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=6.0.0"
@ -1167,14 +1130,12 @@
      "version": "1.5.5",
      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
-      "dev": true,
      "license": "MIT"
    },
    "node_modules/@jridgewell/trace-mapping": {
      "version": "0.3.31",
      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "@jridgewell/resolve-uri": "^3.1.0",
@ -1287,7 +1248,6 @@
        "arm"
      ],
      "dev": true,
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -1302,7 +1262,6 @@
        "arm64"
      ],
      "dev": true,
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -1317,7 +1276,6 @@
        "arm64"
      ],
      "dev": true,
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -1332,7 +1290,6 @@
        "x64"
      ],
      "dev": true,
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -1347,7 +1304,6 @@
        "arm64"
      ],
      "dev": true,
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -1362,7 +1318,6 @@
        "x64"
      ],
      "dev": true,
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -1377,7 +1332,6 @@
        "arm"
      ],
      "dev": true,
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -1392,7 +1346,6 @@
        "arm"
      ],
      "dev": true,
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -1407,7 +1360,6 @@
        "arm64"
      ],
      "dev": true,
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -1422,7 +1374,6 @@
        "arm64"
      ],
      "dev": true,
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -1437,7 +1388,6 @@
        "loong64"
      ],
      "dev": true,
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -1452,7 +1402,6 @@
        "ppc64"
      ],
      "dev": true,
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -1467,7 +1416,6 @@
        "riscv64"
      ],
      "dev": true,
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -1482,7 +1430,6 @@
        "riscv64"
      ],
      "dev": true,
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -1497,7 +1444,6 @@
        "s390x"
      ],
      "dev": true,
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -1512,7 +1458,6 @@
        "x64"
      ],
      "dev": true,
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -1527,7 +1472,6 @@
        "x64"
      ],
      "dev": true,
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -1542,7 +1486,6 @@
        "arm64"
      ],
      "dev": true,
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -1557,7 +1500,6 @@
        "arm64"
      ],
      "dev": true,
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -1572,7 +1514,6 @@
        "ia32"
      ],
      "dev": true,
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -1587,7 +1528,6 @@
        "x64"
      ],
      "dev": true,
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -1602,7 +1542,6 @@
        "x64"
      ],
      "dev": true,
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -1926,7 +1865,6 @@
      "version": "1.0.8",
      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
-      "dev": true,
      "license": "MIT"
    },
    "node_modules/@types/json-schema": {
@ -1942,7 +1880,6 @@
      "integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "csstype": "^3.2.2"
      }
@ -2100,12 +2037,6 @@
        "url": "https://opencollective.com/typescript-eslint"
      }
    },
-    "node_modules/@types/stylis": {
-      "version": "4.2.5",
-      "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz",
-      "integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==",
-      "license": "MIT"
-    },
    "node_modules/@vitejs/plugin-react": {
      "version": "5.1.2",
      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-5.1.2.tgz",
@ -2133,7 +2064,6 @@
      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "bin": {
        "acorn": "bin/acorn"
      },
@ -2365,7 +2295,6 @@
        }
      ],
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "baseline-browser-mapping": "^2.9.0",
        "caniuse-lite": "^1.0.30001759",
@ -2408,15 +2337,6 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
-    "node_modules/camelize": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
-      "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==",
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
    "node_modules/caniuse-lite": {
      "version": "1.0.30001761",
      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001761.tgz",
@ -2623,26 +2543,6 @@
        "postcss-value-parser": "^4.0.2"
      }
    },
-    "node_modules/css-color-keywords": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
-      "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==",
-      "license": "ISC",
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/css-to-react-native": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
-      "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
-      "license": "MIT",
-      "dependencies": {
-        "camelize": "^1.0.0",
-        "css-color-keywords": "^1.0.0",
-        "postcss-value-parser": "^4.0.2"
-      }
-    },
    "node_modules/cssesc": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@ -2720,10 +2620,7 @@
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
-      "dev": true,
      "license": "Apache-2.0",
-      "optional": true,
-      "peer": true,
      "engines": {
        "node": ">=8"
      }
@ -2747,12 +2644,24 @@
      "dev": true,
      "license": "ISC"
    },
+    "node_modules/enhanced-resolve": {
+      "version": "5.18.4",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.4.tgz",
+      "integrity": "sha512-LgQMM4WXU3QI+SYgEc2liRgznaD5ojbmY3sb8LxyguVkIg5FxdpTkvk72te2R38/TGKxH634oLxXRGY6d7AP+Q==",
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
    "node_modules/esbuild": {
      "version": "0.27.2",
      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.2.tgz",
      "integrity": "sha512-HyNQImnsOC7X9PMNaCIeAm4ISCQXs5a5YasTXVliKv4uuBo1dKrG0A+uQS8M5eXjVMnLg3WgXaKvprHlFJQffw==",
      "dev": true,
-      "dev": true,
      "hasInstallScript": true,
      "license": "MIT",
      "bin": {
@ -2819,7 +2728,6 @@
      "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@eslint-community/eslint-utils": "^4.8.0",
        "@eslint-community/regexpp": "^4.12.1",
@ -3078,7 +2986,6 @@
      "version": "6.5.0",
      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=12.0.0"
@ -3287,7 +3194,6 @@
      "version": "2.3.3",
      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
      "hasInstallScript": true,
      "license": "MIT",
      "optional": true,
@ -3342,6 +3248,12 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "license": "ISC"
+    },
    "node_modules/has-flag": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@ -3409,7 +3321,6 @@
        }
      ],
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@babel/runtime": "^7.28.4"
      },
@ -3542,10 +3453,7 @@
      "version": "2.6.1",
      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
      "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
-      "dev": true,
      "license": "MIT",
-      "optional": true,
-      "peer": true,
      "bin": {
        "jiti": "lib/jiti-cli.mjs"
      }
@ -3653,10 +3561,7 @@
      "version": "1.30.2",
      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.2.tgz",
      "integrity": "sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==",
-      "dev": true,
      "license": "MPL-2.0",
-      "optional": true,
-      "peer": true,
      "dependencies": {
        "detect-libc": "^2.0.3"
      },
@ -3688,13 +3593,11 @@
      "cpu": [
        "arm64"
      ],
-      "dev": true,
      "license": "MPL-2.0",
      "optional": true,
      "os": [
        "android"
      ],
-      "peer": true,
      "engines": {
        "node": ">= 12.0.0"
      },
@ -3710,13 +3613,11 @@
      "cpu": [
        "arm64"
      ],
-      "dev": true,
      "license": "MPL-2.0",
      "optional": true,
      "os": [
        "darwin"
      ],
-      "peer": true,
      "engines": {
        "node": ">= 12.0.0"
      },
@ -3732,13 +3633,11 @@
      "cpu": [
        "x64"
      ],
-      "dev": true,
      "license": "MPL-2.0",
      "optional": true,
      "os": [
        "darwin"
      ],
-      "peer": true,
      "engines": {
        "node": ">= 12.0.0"
      },
@ -3754,13 +3653,11 @@
      "cpu": [
        "x64"
      ],
-      "dev": true,
      "license": "MPL-2.0",
      "optional": true,
      "os": [
        "freebsd"
      ],
-      "peer": true,
      "engines": {
        "node": ">= 12.0.0"
      },
@ -3776,13 +3673,11 @@
      "cpu": [
        "arm"
      ],
-      "dev": true,
      "license": "MPL-2.0",
      "optional": true,
      "os": [
        "linux"
      ],
-      "peer": true,
      "engines": {
        "node": ">= 12.0.0"
      },
@ -3798,13 +3693,11 @@
      "cpu": [
        "arm64"
      ],
-      "dev": true,
      "license": "MPL-2.0",
      "optional": true,
      "os": [
        "linux"
      ],
-      "peer": true,
      "engines": {
        "node": ">= 12.0.0"
      },
@ -3820,13 +3713,11 @@
      "cpu": [
        "arm64"
      ],
-      "dev": true,
      "license": "MPL-2.0",
      "optional": true,
      "os": [
        "linux"
      ],
-      "peer": true,
      "engines": {
        "node": ">= 12.0.0"
      },
@ -3842,13 +3733,11 @@
      "cpu": [
        "x64"
      ],
-      "dev": true,
      "license": "MPL-2.0",
      "optional": true,
      "os": [
        "linux"
      ],
-      "peer": true,
      "engines": {
        "node": ">= 12.0.0"
      },
@ -3864,13 +3753,11 @@
      "cpu": [
        "x64"
      ],
-      "dev": true,
      "license": "MPL-2.0",
      "optional": true,
      "os": [
        "linux"
      ],
-      "peer": true,
      "engines": {
        "node": ">= 12.0.0"
      },
@ -3886,13 +3773,11 @@
      "cpu": [
        "arm64"
      ],
-      "dev": true,
      "license": "MPL-2.0",
      "optional": true,
      "os": [
        "win32"
      ],
-      "peer": true,
      "engines": {
        "node": ">= 12.0.0"
      },
@ -3908,13 +3793,11 @@
      "cpu": [
        "x64"
      ],
-      "dev": true,
      "license": "MPL-2.0",
      "optional": true,
      "os": [
        "win32"
      ],
-      "peer": true,
      "engines": {
        "node": ">= 12.0.0"
      },
@ -4004,6 +3887,15 @@
        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
      }
    },
+    "node_modules/magic-string": {
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
    "node_modules/merge2": {
      "version": "1.4.1",
      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@ -4256,7 +4148,6 @@
      "version": "4.0.3",
      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=12"
@ -4287,7 +4178,6 @@
      "version": "8.5.6",
      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
-      "dev": true,
      "funding": [
        {
          "type": "opencollective",
@ -4303,7 +4193,6 @@
        }
      ],
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "nanoid": "^3.3.11",
        "picocolors": "^1.1.1",
@ -4502,7 +4391,6 @@
      "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz",
      "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==",
      "license": "MIT",
-      "peer": true,
      "engines": {
        "node": ">=0.10.0"
      }
@ -4512,7 +4400,6 @@
      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz",
      "integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "scheduler": "^0.27.0"
      },
@ -4573,9 +4460,9 @@
      }
    },
    "node_modules/react-router": {
-      "version": "7.11.0",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.11.0.tgz",
-      "integrity": "sha512-uI4JkMmjbWCZc01WVP2cH7ZfSzH91JAZUDd7/nIprDgWxBV1TkkmLToFh7EbMTcMak8URFRa2YoBL/W8GWnCTQ==",
+      "version": "7.12.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.12.0.tgz",
+      "integrity": "sha512-kTPDYPFzDVGIIGNLS5VJykK0HfHLY5MF3b+xj0/tTyNYL1gF1qs7u67Z9jEhQk2sQ98SUaHxlG31g1JtF7IfVw==",
      "license": "MIT",
      "dependencies": {
        "cookie": "^1.0.1",
@ -4595,12 +4482,12 @@
      }
    },
    "node_modules/react-router-dom": {
-      "version": "7.11.0",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.11.0.tgz",
-      "integrity": "sha512-e49Ir/kMGRzFOOrYQBdoitq3ULigw4lKbAyKusnvtDu2t4dBX4AGYPrzNvorXmVuOyeakai6FUPW5MmibvVG8g==",
+      "version": "7.12.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.12.0.tgz",
+      "integrity": "sha512-pfO9fiBcpEfX4Tx+iTYKDtPbrSLLCbwJ5EqP+SPYQu1VYCXdy79GSj0wttR0U4cikVdlImZuEZ/9ZNCgoaxwBA==",
      "license": "MIT",
      "dependencies": {
-        "react-router": "7.11.0"
+        "react-router": "7.12.0"
      },
      "engines": {
        "node": ">=20.0.0"
@ -4718,9 +4605,7 @@
      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.54.0.tgz",
      "integrity": "sha512-3nk8Y3a9Ea8szgKhinMlGMhGMw89mqule3KWczxhIzqudyHdCIOHw8WJlj/r329fACjKLEh13ZSk7oE22kyeIw==",
      "devOptional": true,
-      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@types/estree": "1.0.8"
      },
@ -4808,12 +4693,6 @@
      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==",
      "license": "MIT"
    },
-    "node_modules/shallowequal": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
-      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==",
-      "license": "MIT"
-    },
    "node_modules/shebang-command": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@ -4942,80 +4821,6 @@
      "integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==",
      "license": "MIT"
    },
-    "node_modules/styled-components": {
-      "version": "6.1.19",
-      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.19.tgz",
-      "integrity": "sha512-1v/e3Dl1BknC37cXMhwGomhO8AkYmN41CqyX9xhUDxry1ns3BFQy2lLDRQXJRdVVWB9OHemv/53xaStimvWyuA==",
-      "license": "MIT",
-      "dependencies": {
-        "@emotion/is-prop-valid": "1.2.2",
-        "@emotion/unitless": "0.8.1",
-        "@types/stylis": "4.2.5",
-        "css-to-react-native": "3.2.0",
-        "csstype": "3.1.3",
-        "postcss": "8.4.49",
-        "shallowequal": "1.1.0",
-        "stylis": "4.3.2",
-        "tslib": "2.6.2"
-      },
-      "engines": {
-        "node": ">= 16"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/styled-components"
-      },
-      "peerDependencies": {
-        "react": ">= 16.8.0",
-        "react-dom": ">= 16.8.0"
-      }
-    },
-    "node_modules/styled-components/node_modules/csstype": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "license": "MIT"
-    },
-    "node_modules/styled-components/node_modules/postcss": {
-      "version": "8.4.49",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz",
-      "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==",
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/postcss"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "nanoid": "^3.3.7",
-        "picocolors": "^1.1.1",
-        "source-map-js": "^1.2.1"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14"
-      }
-    },
-    "node_modules/styled-components/node_modules/tslib": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
-      "license": "0BSD"
-    },
-    "node_modules/stylis": {
-      "version": "4.3.2",
-      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz",
-      "integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==",
-      "license": "MIT"
-    },
    "node_modules/sucrase": {
      "version": "3.35.1",
      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz",
@ -5069,6 +4874,16 @@
      "integrity": "sha512-05PUHKSNE8ou2dwIxTngl4EzcnsCDZGJ/iCLtDflR/SHB/ny14rXc+qU5P4mG9JkusiV7EivzY9Mhm55AzAvCg==",
      "license": "MIT"
    },
+    "node_modules/tailwind-merge": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.4.0.tgz",
+      "integrity": "sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
    "node_modules/tailwind-merge-v2": {
      "name": "tailwind-merge",
      "version": "2.6.0",
@ -5091,26 +4906,11 @@
        "url": "https://github.com/sponsors/dcastil"
      }
    },
-    "node_modules/tailwind-merge": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.4.0.tgz",
-      "integrity": "sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/dcastil"
-      }
-    },
    "node_modules/tailwindcss": {
      "version": "3.4.0",
      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.0.tgz",
      "integrity": "sha512-VigzymniH77knD1dryXbyxR+ePHihHociZbXnLZHUyzf2MMs2ZVqlUrZ3FvpXP8pno9JzmILt1sZPD19M3IxtA==",
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.0.tgz",
-      "integrity": "sha512-VigzymniH77knD1dryXbyxR+ePHihHociZbXnLZHUyzf2MMs2ZVqlUrZ3FvpXP8pno9JzmILt1sZPD19M3IxtA==",
-      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@alloc/quick-lru": "^5.2.0",
        "arg": "^5.0.2",
@ -5152,6 +4952,19 @@
        "jiti": "bin/jiti.js"
      }
    },
+    "node_modules/tapable": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz",
+      "integrity": "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
    "node_modules/thenify": {
      "version": "3.3.1",
      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
@ -5173,23 +4986,22 @@
        "node": ">=0.8"
      }
    },
-    "node_modules/tiny-invariant": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
-      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
-      "license": "MIT"
-    },
    "node_modules/three": {
      "version": "0.182.0",
      "resolved": "https://registry.npmjs.org/three/-/three-0.182.0.tgz",
      "integrity": "sha512-GbHabT+Irv+ihI1/f5kIIsZ+Ef9Sl5A1Y7imvS5RQjWgtTPfPnZ43JmlYI7NtCRDK9zir20lQpfg8/9Yd02OvQ==",
      "license": "MIT"
    },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
+      "license": "MIT"
+    },
    "node_modules/tinyglobby": {
      "version": "0.2.15",
      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "fdir": "^6.5.0",
@ -5341,9 +5153,7 @@
      "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.0.tgz",
      "integrity": "sha512-dZwN5L1VlUBewiP6H9s2+B3e3Jg96D0vzN+Ry73sOefebhYr9f94wwkMNN/9ouoU8pV1BqA1d1zGk8928cx0rg==",
      "dev": true,
-      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "esbuild": "^0.27.0",
        "fdir": "^6.5.0",
@ -5459,7 +5269,6 @@
      "version": "2.8.2",
      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.2.tgz",
      "integrity": "sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==",
-      "dev": true,
      "license": "ISC",
      "bin": {
        "yaml": "bin.mjs"
@ -5490,7 +5299,6 @@
      "integrity": "sha512-0wZ1IRqGGhMP76gLqz8EyfBXKk0J2qo2+H3fi4mcUP/KtTocoX08nmIAHl1Z2kJIZbZee8KOpBCSNPRgauucjw==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "funding": {
        "url": "https://github.com/sponsors/colinhacks"
      }
--- a/package.json
+++ b/package.json
@ -13,9 +13,9 @@
    "@emailjs/browser": "^4.4.1",
    "@heroicons/react": "^2.2.0",
    "aos": "^2.3.4",
+    "clsx": "^2.1.1",
    "flowbite": "^4.0.1",
    "flowbite-react": "^0.12.16",
-    "clsx": "^2.1.1",
    "framer-motion": "^12.23.26",
    "i18next": "^25.7.3",
    "i18next-browser-languagedetector": "^8.2.0",
@ -24,7 +24,7 @@
    "react-dom": "^19.2.0",
    "react-i18next": "^16.5.0",
    "react-icons": "^5.5.0",
-    "react-router-dom": "^7.11.0",
+    "react-router-dom": "^7.12.0",
    "react-scroll": "^1.9.3",
    "styled-components": "^6.1.19",
    "tailwind-merge": "^3.4.0",
--- a/public/trader-safe.pdf
+++ b/public/trader-safe.pdf
--- a/src/App.jsx
+++ b/src/App.jsx
@ -1,4 +1,5 @@
-import React from "react";
+
+import React, { useState, useEffect } from "react";
 import { BrowserRouter, Routes, Route, useLocation } from "react-router-dom";
 import { AnimatePresence, LayoutGroup } from "framer-motion";

@ -14,45 +15,80 @@ import DepartmentDetail from "./Components/Sections/DepartmentDetail/DepartmentD
 import Contact from "./Components/Sections/Contact/Contact";
 import Footer from "./Components/Nav/Footer";
 import DepartmentDetail2 from "./Components/Sections/DepartmentDetail2/DepartmentDetail2";
+import ImagePreloader from "./Components/ImagePreloader";
+import BackgroundCanvas from "./Components/BackgroundCanvas/BackgroundCanvas";
+import DepartmentDetail3 from "./Components/Sections/DepartmentDetail3/DepartmentDetail3";
+import DepartmentDetail4 from "./Components/Sections/DepartmentDetail4/DepartmentDetail4";
+import DepartmentDetail5 from "./Components/Sections/DepartmentDetail5/DepartmentDetail5";
+import DepartmentDetail6 from "./Components/Sections/DepartmentDetail6/DepartmentDetail6";
+import DepartmentDetail7 from "./Components/Sections/DepartmentDetail7/DepartmentDetail7";
+import DepartmentDetail8 from "./Components/Sections/DepartmentDetail8/DepartmentDetail8";
+import DepartmentDetail9 from "./Components/Sections/DepartmentDetail9/DepartmentDetail9";

-const MainPage = () => {
+
+const MainPage = ({ theme }) => {
  return (
-    <div className="min-h-screen bg-white dark:bg-gray-900 text-gray-900 dark:text-white transition-colors duration-300">
+    <div className="min-h-screen bg-transparent">
      <div className="flex flex-col min-h-screen">
        <main className="flex-grow">
          <Home />
          <Services />
-          <About />
+          <About theme={theme} />
          <Departments />
          <Contact />
        </main>
-        <Footer />
      </div>
    </div>
  );
 };

-function RouterView() {
+function RouterView({ theme, toggleTheme }) {
  const location = useLocation();

  return (
    <LayoutGroup>
      <AnimatePresence mode="wait" initial={false}>
        <Routes location={location} key={location.pathname}>
-          <Route path="/" element={<MainPage />} />
+          <Route 
+            path="/" 
+            element={
+              <div className="relative min-h-screen bg-transparent">
+                <BackgroundCanvas theme={theme} />
+                <div className="relative z-10">
+                  <MainPage theme={theme} />
+                </div>
+              </div>
+            } 
+          />
          <Route path="/departments/:id" element={<DepartmentDetail />} />
          <Route path="/department-detail2" element={<DepartmentDetail2 />} />
+                    <Route path="/department-detail3" element={<DepartmentDetail3 />} />
+                                        <Route path="/department-detail4" element={<DepartmentDetail4 />} />
+          <Route path="/department-detail5" element={<DepartmentDetail5/>} />
+          <Route path="/department-detail6" element={<DepartmentDetail6/>} />
+          <Route path="/department-detail7" element={<DepartmentDetail7/>} />
+
+          <Route path="/department-detail8" element={<DepartmentDetail8/>} />
+          <Route path="/department-detail9" element={<DepartmentDetail9/>} />
+
        </Routes>
      </AnimatePresence>
    </LayoutGroup>
  );
 }

-function Layout() {
+function Layout({ theme, toggleTheme }) {
  const location = useLocation();

  const excludedExactPaths = [
    "/department-detail2",
+    "/department-detail3" ,
+        "/department-detail4" ,
+        "/department-detail5" ,
+        "/department-detail6" ,
+"/department-detail7",
+"/department-detail8",
+"/department-detail9"
  ];

  const excludedPrefixes = ["/departments/"];
@ -66,21 +102,66 @@ function Layout() {

  return (
    <>
-      {!hideNavbar && <Navbar />}
+      {!hideNavbar && <Navbar toggleTheme={toggleTheme} currentTheme={theme} />}

      <div style={{ paddingTop: navbarHeight }}>
-        <RouterView />
+        <RouterView theme={theme} toggleTheme={toggleTheme} />
+        
+        {location.pathname === "/" && <Footer />}
      </div>
    </>
  );
 }

 const App = () => {
+  const [theme, setTheme] = useState("light");
+
+  useEffect(() => {
+    console.log("Current theme:", theme);
+    console.log("HTML has dark class:", document.documentElement.classList.contains('dark'));
+    
+    const canvas = document.querySelector('.background-canvas');
+    if (canvas) {
+      console.log("Canvas found:", canvas);
+      console.log("Canvas dimensions:", canvas.width, "x", canvas.height);
+    } else {
+      console.log("Canvas NOT found!");
+    }
+  }, [theme]);
+
+  useEffect(() => {
+    const savedTheme = localStorage.getItem("theme");
+    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    
+    if (savedTheme === "dark" || (!savedTheme && prefersDark)) {
+      setTheme("dark");
+      document.documentElement.classList.add("dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+      setTheme("light");
+    }
+  }, []);
+
+  const toggleTheme = () => {
+    const newTheme = theme === "light" ? "dark" : "light";
+    setTheme(newTheme);
+    
+    if (newTheme === "dark") {
+      document.documentElement.classList.add("dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+    }
+    
+    localStorage.setItem("theme", newTheme);
+  };
+
  return (
-    <BrowserRouter>
-      <Layout />
-    </BrowserRouter>
+    <ImagePreloader>
+      <BrowserRouter>
+        <Layout theme={theme} toggleTheme={toggleTheme} />
+      </BrowserRouter>
+    </ImagePreloader>
  );
 };

-export default App;
+export default App;
--- a/src/Components/BackgroundCanvas/BackgroundCanvas.css
+++ b/src/Components/BackgroundCanvas/BackgroundCanvas.css
@ -63,7 +63,7 @@ main {
    z-index: 10 !important;
    min-height: 100vh !important;
    width: 100% !important;
-    padding: 20px !important;
+    /* padding: 20px !important; */
 }

 nav.fixed {
--- a/src/Components/BackgroundCanvas/BackgroundCanvas.jsx
+++ b/src/Components/BackgroundCanvas/BackgroundCanvas.jsx
@ -64,11 +64,11 @@ const BackgroundCanvas = ({ theme = 'light' }) => {
    
    let lineColor, pointColor, backgroundColor;
    if (theme === 'dark') {
-      backgroundColor = '#000000'; 
+      backgroundColor = '#446a85'; 
      lineColor = '#FFFFFF'; 
      pointColor = '#F5EEE6'; 
    } else {
-      backgroundColor = '#FFFFFF'; 
+      backgroundColor = '#d3dde3'; 
      lineColor = '#131313'; 
      pointColor = '#041c40'; 
    }
--- a/src/Components/ImagePreloader.jsx
+++ b/src/Components/ImagePreloader.jsx
@ -1,22 +1,22 @@
-// import { useState, useEffect } from "react";
+import { useState, useEffect } from "react";

-// // Import all images statically
-// // import home1 from "../assets/home1.jpg";
-// // import home1Mobile from "../assets/home1-2.jpg";
-// // import home2 from "../assets/home2.jpg";
-// // import home2Mobile from "../assets/home2-2.jpg";
-// // import home3 from "../assets/home3.png";
-// // import home4 from "../assets/home4.png";
-// // // import home4Mobile from "../assets/home4-2.jpg";
-// // import home5 from "../assets/home5.png";
-// // import home6 from "../assets/home6.jpg";
-// // import home6Mobile from "../assets/home6-2.jpg";
-// // import home7 from "../assets/home7.jpg";
-// // import home7Mobile from "../assets/home7-2.jpg";
-// // import home8 from "../assets/home8.jpg";
-// // import home8Mobile from "../assets/home8-2.jpg";
-// // import home9 from "../assets/home9.jpg";
-// // import home10 from "../assets/home10.jpg";
+// Import all images statically
+// import home1 from "../assets/home1.jpg";
+// import home1Mobile from "../assets/home1-2.jpg";
+// import home2 from "../assets/home2.jpg";
+// import home2Mobile from "../assets/home2-2.jpg";
+// import home3 from "../assets/home3.png";
+// import home4 from "../assets/home4.png";
+// // import home4Mobile from "../assets/home4-2.jpg";
+// import home5 from "../assets/home5.png";
+// import home6 from "../assets/home6.jpg";
+// import home6Mobile from "../assets/home6-2.jpg";
+// import home7 from "../assets/home7.jpg";
+// import home7Mobile from "../assets/home7-2.jpg";
+// import home8 from "../assets/home8.jpg";
+// import home8Mobile from "../assets/home8-2.jpg";
+// import home9 from "../assets/home9.jpg";
+// import home10 from "../assets/home10.jpg";

 // Services images
 // import gasStation from "../assets/Images/gasstation.jpg";
@ -44,293 +44,293 @@ const imagesToPreload = [
  // Services images
  // gasStation,

-// ];
+];

-// const ImagePreloader = ({ children }) => {
-//   const [imagesLoaded, setImagesLoaded] = useState(false);
-//   const [progress, setProgress] = useState(0);
+const ImagePreloader = ({ children }) => {
+  const [imagesLoaded, setImagesLoaded] = useState(false);
+  const [progress, setProgress] = useState(0);

-//   useEffect(() => {
-//     let loadedCount = 0;
-//     const totalImages = imagesToPreload.length;
+  useEffect(() => {
+    let loadedCount = 0;
+    const totalImages = imagesToPreload.length;

-//     const preloadImages = async () => {
-//       try {
-//         const loadImage = (src) => {
-//           return new Promise((resolve, reject) => {
-//             const img = new Image();
-//             img.src = src;
-//             img.onload = () => {
-//               loadedCount++;
-//               setProgress(Math.floor((loadedCount / totalImages) * 100));
-//               resolve();
-//             };
-//             img.onerror = reject;
-//           });
-//         };
+    const preloadImages = async () => {
+      try {
+        const loadImage = (src) => {
+          return new Promise((resolve, reject) => {
+            const img = new Image();
+            img.src = src;
+            img.onload = () => {
+              loadedCount++;
+              setProgress(Math.floor((loadedCount / totalImages) * 100));
+              resolve();
+            };
+            img.onerror = reject;
+          });
+        };

-//         await Promise.all(imagesToPreload.map(loadImage));
-//         setImagesLoaded(true);
-//       } catch (error) {
-//         console.error("Failed to preload images:", error);
-//         // Continue anyway after a timeout
-//         setTimeout(() => setImagesLoaded(true), 3000);
-//       }
-//     };
+        await Promise.all(imagesToPreload.map(loadImage));
+        setImagesLoaded(true);
+      } catch (error) {
+        console.error("Failed to preload images:", error);
+        // Continue anyway after a timeout
+        setTimeout(() => setImagesLoaded(true), 3000);
+      }
+    };

-//     preloadImages();
-//   }, []);
+    preloadImages();
+  }, []);

-//   if (!imagesLoaded) {
-//     return (
-//       <div className="fixed inset-0 bg-gradient-to-b from-[#0A2540] to-[#10375C] flex flex-col items-center justify-center z-50">
-//         {/* Animated background effect */}
-//         <div className="absolute inset-0 overflow-hidden opacity-10">
-//           <div className="absolute top-0 left-0 w-full h-full">
-//             {[...Array(20)].map((_, i) => (
-//               <div
-//                 key={i}
-//                 className="absolute rounded-full bg-white/30"
-//                 style={{
-//                   width: `${Math.random() * 10 + 5}px`,
-//                   height: `${Math.random() * 10 + 5}px`,
-//                   top: `${Math.random() * 100}%`,
-//                   left: `${Math.random() * 100}%`,
-//                   animationDuration: `${Math.random() * 10 + 10}s`,
-//                   animationDelay: `${Math.random() * 5}s`,
-//                 }}
-//               />
-//             ))}
-//           </div>
-//         </div>
+  if (!imagesLoaded) {
+    return (
+      <div className="fixed inset-0 bg-gradient-to-b from-[#0A2540] to-[#10375C] flex flex-col items-center justify-center z-50">
+        {/* Animated background effect */}
+        <div className="absolute inset-0 overflow-hidden opacity-10">
+          <div className="absolute top-0 left-0 w-full h-full">
+            {[...Array(20)].map((_, i) => (
+              <div
+                key={i}
+                className="absolute rounded-full bg-white/30"
+                style={{
+                  width: `${Math.random() * 10 + 5}px`,
+                  height: `${Math.random() * 10 + 5}px`,
+                  top: `${Math.random() * 100}%`,
+                  left: `${Math.random() * 100}%`,
+                  animationDuration: `${Math.random() * 10 + 10}s`,
+                  animationDelay: `${Math.random() * 5}s`,
+                }}
+              />
+            ))}
+          </div>
+        </div>

-//         {/* Company logo or branding could go here */}
-//         <div className="mb-12 text-[#F3C623] text-3xl font-bold tracking-wider">
-//           TPS
-//         </div>
+        {/* Company logo or branding could go here */}
+        <div className="mb-12 text-[#F3C623] text-3xl font-bold tracking-wider">
+          TPS
+        </div>

-//         {/* 3D-style Fuel Tank */}
-//         <div className="relative w-72 h-56 mb-8 perspective-800">
-//           {/* Tank body with 3D effect */}
-//           <div
-//             className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-56 h-40 rounded-lg overflow-hidden shadow-2xl"
-//             style={{
-//               background: "linear-gradient(145deg, #0A2540 0%, #102A45 100%)",
-//               boxShadow:
-//                 "inset 0 0 15px rgba(0,0,0,0.5), 0 10px 20px rgba(0,0,0,0.3)",
-//               border: "1px solid rgba(255,255,255,0.1)",
-//             }}
-//           >
-//             {/* Glass effect overlay */}
-//             <div className="absolute inset-0 bg-gradient-to-br from-white/5 to-transparent pointer-events-none"></div>
+        {/* 3D-style Fuel Tank */}
+        <div className="relative w-72 h-56 mb-8 perspective-800">
+          {/* Tank body with 3D effect */}
+          <div
+            className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-56 h-40 rounded-lg overflow-hidden shadow-2xl"
+            style={{
+              background: "linear-gradient(145deg, #0A2540 0%, #102A45 100%)",
+              boxShadow:
+                "inset 0 0 15px rgba(0,0,0,0.5), 0 10px 20px rgba(0,0,0,0.3)",
+              border: "1px solid rgba(255,255,255,0.1)",
+            }}
+          >
+            {/* Glass effect overlay */}
+            <div className="absolute inset-0 bg-gradient-to-br from-white/5 to-transparent pointer-events-none"></div>

-//             {/* Tank Cap with metallic effect */}
-//             <div
-//               className="absolute -top-3 left-1/2 transform -translate-x-1/2 w-10 h-6 rounded-t-md"
-//               style={{
-//                 background:
-//                   "linear-gradient(to bottom, #F3C623 0%, #EB8317 100%)",
-//                 boxShadow: "0 -2px 5px rgba(0,0,0,0.2)",
-//               }}
-//             >
-//               <div className="absolute top-1 left-1/2 transform -translate-x-1/2 w-6 h-1 bg-[#0A2540]/30 rounded-full"></div>
-//             </div>
+            {/* Tank Cap with metallic effect */}
+            <div
+              className="absolute -top-3 left-1/2 transform -translate-x-1/2 w-10 h-6 rounded-t-md"
+              style={{
+                background:
+                  "linear-gradient(to bottom, #F3C623 0%, #EB8317 100%)",
+                boxShadow: "0 -2px 5px rgba(0,0,0,0.2)",
+              }}
+            >
+              <div className="absolute top-1 left-1/2 transform -translate-x-1/2 w-6 h-1 bg-[#0A2540]/30 rounded-full"></div>
+            </div>

-//             {/* Fuel Level with dynamic wave effect */}
-//             <div
-//               className="absolute bottom-0 left-0 right-0 transition-all duration-500 ease-out"
-//               style={{
-//                 height: `${progress}%`,
-//                 background: "linear-gradient(to top, #EB8317 0%, #F3C623 100%)",
-//                 boxShadow: "0 -5px 15px rgba(235,131,23,0.3)",
-//               }}
-//             >
-//               {/* Animated wave effect at the top of fuel */}
-//               <div className="absolute -top-2 left-0 w-full h-4 animate-wave">
-//                 <div
-//                   className="relative w-[200%] h-full"
-//                   style={{
-//                     backgroundImage:
-//                       "linear-gradient(to right, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%)",
-//                     backgroundSize: "50% 100%",
-//                     animation: "moveWave 3s linear infinite",
-//                   }}
-//                 ></div>
-//               </div>
+            {/* Fuel Level with dynamic wave effect */}
+            <div
+              className="absolute bottom-0 left-0 right-0 transition-all duration-500 ease-out"
+              style={{
+                height: `${progress}%`,
+                background: "linear-gradient(to top, #EB8317 0%, #F3C623 100%)",
+                boxShadow: "0 -5px 15px rgba(235,131,23,0.3)",
+              }}
+            >
+              {/* Animated wave effect at the top of fuel */}
+              <div className="absolute -top-2 left-0 w-full h-4 animate-wave">
+                <div
+                  className="relative w-[200%] h-full"
+                  style={{
+                    backgroundImage:
+                      "linear-gradient(to right, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%)",
+                    backgroundSize: "50% 100%",
+                    animation: "moveWave 3s linear infinite",
+                  }}
+                ></div>
+              </div>

-//               {/* Bubbles with varied animations */}
-//               {[...Array(8)].map((_, i) => (
-//                 <div
-//                   key={i}
-//                   className="absolute rounded-full bg-white/20"
-//                   style={{
-//                     width: `${Math.random() * 6 + 2}px`,
-//                     height: `${Math.random() * 6 + 2}px`,
-//                     bottom: `${Math.random() * 80}%`,
-//                     left: `${Math.random() * 90 + 5}%`,
-//                     animation: `bubble ${
-//                       Math.random() * 3 + 2
-//                     }s ease-in infinite ${Math.random() * 2}s`,
-//                   }}
-//                 />
-//               ))}
-//             </div>
+              {/* Bubbles with varied animations */}
+              {[...Array(8)].map((_, i) => (
+                <div
+                  key={i}
+                  className="absolute rounded-full bg-white/20"
+                  style={{
+                    width: `${Math.random() * 6 + 2}px`,
+                    height: `${Math.random() * 6 + 2}px`,
+                    bottom: `${Math.random() * 80}%`,
+                    left: `${Math.random() * 90 + 5}%`,
+                    animation: `bubble ${
+                      Math.random() * 3 + 2
+                    }s ease-in infinite ${Math.random() * 2}s`,
+                  }}
+                />
+              ))}
+            </div>

-//             {/* Tank level markings with glow effect */}
-//             <div className="absolute top-0 left-0 h-full w-full flex flex-col justify-between pointer-events-none">
-//               {[...Array(4)].map((_, i) => (
-//                 <div
-//                   key={i}
-//                   className="w-full border-b border-[#F3C623]/20 h-1/4"
-//                   style={{
-//                     boxShadow:
-//                       progress > 75 - i * 25
-//                         ? "0 1px 3px rgba(243,198,35,0.3)"
-//                         : "none",
-//                   }}
-//                 >
-//                   <div className="absolute right-0 w-2 h-0.5 bg-[#F3C623]/40"></div>
-//                 </div>
-//               ))}
-//             </div>
-//           </div>
+            {/* Tank level markings with glow effect */}
+            <div className="absolute top-0 left-0 h-full w-full flex flex-col justify-between pointer-events-none">
+              {[...Array(4)].map((_, i) => (
+                <div
+                  key={i}
+                  className="w-full border-b border-[#F3C623]/20 h-1/4"
+                  style={{
+                    boxShadow:
+                      progress > 75 - i * 25
+                        ? "0 1px 3px rgba(243,198,35,0.3)"
+                        : "none",
+                  }}
+                >
+                  <div className="absolute right-0 w-2 h-0.5 bg-[#F3C623]/40"></div>
+                </div>
+              ))}
+            </div>
+          </div>

-//           {/* Fuel Gauge with realistic dial */}
-//           <div
-//             className="absolute top-0 right-0 w-20 h-20 rounded-full flex items-center justify-center"
-//             style={{
-//               background:
-//                 "radial-gradient(circle at center, #102A45 0%, #0A2540 70%)",
-//               boxShadow:
-//                 "inset 0 0 10px rgba(0,0,0,0.5), 0 5px 15px rgba(0,0,0,0.2)",
-//               border: "2px solid rgba(235,131,23,0.7)",
-//             }}
-//           >
-//             {/* Gauge markings */}
-//             {[...Array(9)].map((_, i) => {
-//               const rotation = -135 + i * 30;
-//               const isLarge = i % 2 === 0;
-//               return (
-//                 <div
-//                   key={i}
-//                   className={`absolute w-${isLarge ? "1.5" : "1"} h-${
-//                     isLarge ? "3" : "2"
-//                   } bg-[#F3C623]/${isLarge ? "70" : "40"}`}
-//                   style={{
-//                     transform: `rotate(${rotation}deg) translateY(-7px)`,
-//                     transformOrigin: "bottom center",
-//                   }}
-//                 />
-//               );
-//             })}
+          {/* Fuel Gauge with realistic dial */}
+          <div
+            className="absolute top-0 right-0 w-20 h-20 rounded-full flex items-center justify-center"
+            style={{
+              background:
+                "radial-gradient(circle at center, #102A45 0%, #0A2540 70%)",
+              boxShadow:
+                "inset 0 0 10px rgba(0,0,0,0.5), 0 5px 15px rgba(0,0,0,0.2)",
+              border: "2px solid rgba(235,131,23,0.7)",
+            }}
+          >
+            {/* Gauge markings */}
+            {[...Array(9)].map((_, i) => {
+              const rotation = -135 + i * 30;
+              const isLarge = i % 2 === 0;
+              return (
+                <div
+                  key={i}
+                  className={`absolute w-${isLarge ? "1.5" : "1"} h-${
+                    isLarge ? "3" : "2"
+                  } bg-[#F3C623]/${isLarge ? "70" : "40"}`}
+                  style={{
+                    transform: `rotate(${rotation}deg) translateY(-7px)`,
+                    transformOrigin: "bottom center",
+                  }}
+                />
+              );
+            })}

-//             {/* Gauge needle with smooth animation */}
-//             <div
-//               className="absolute w-1 h-9 bg-gradient-to-t from-[#EB8317] to-[#F3C623] rounded-t-full origin-bottom"
-//               style={{
-//                 transform: `rotate(${-135 + progress * 2.7}deg)`,
-//                 transition: "transform 1s cubic-bezier(0.34, 1.56, 0.64, 1)",
-//                 boxShadow: "0 0 5px rgba(243,198,35,0.5)",
-//               }}
-//             >
-//               <div className="absolute -top-1 left-1/2 transform -translate-x-1/2 w-2 h-2 rounded-full bg-[#F3C623] shadow-lg"></div>
-//             </div>
+            {/* Gauge needle with smooth animation */}
+            <div
+              className="absolute w-1 h-9 bg-gradient-to-t from-[#EB8317] to-[#F3C623] rounded-t-full origin-bottom"
+              style={{
+                transform: `rotate(${-135 + progress * 2.7}deg)`,
+                transition: "transform 1s cubic-bezier(0.34, 1.56, 0.64, 1)",
+                boxShadow: "0 0 5px rgba(243,198,35,0.5)",
+              }}
+            >
+              <div className="absolute -top-1 left-1/2 transform -translate-x-1/2 w-2 h-2 rounded-full bg-[#F3C623] shadow-lg"></div>
+            </div>

-//             {/* Center pin */}
-//             <div className="absolute w-4 h-4 bg-[#0A2540] rounded-full border-2 border-[#EB8317] shadow-inner"></div>
+            {/* Center pin */}
+            <div className="absolute w-4 h-4 bg-[#0A2540] rounded-full border-2 border-[#EB8317] shadow-inner"></div>

-//             {/* E and F indicators */}
-//             <div className="absolute bottom-4 left-4 text-[#F3C623]/70 text-xs font-bold">
-//               E
-//             </div>
-//             <div className="absolute bottom-4 right-4 text-[#F3C623]/70 text-xs font-bold">
-//               F
-//             </div>
-//           </div>
-//         </div>
+            {/* E and F indicators */}
+            <div className="absolute bottom-4 left-4 text-[#F3C623]/70 text-xs font-bold">
+              E
+            </div>
+            <div className="absolute bottom-4 right-4 text-[#F3C623]/70 text-xs font-bold">
+              F
+            </div>
+          </div>
+        </div>

-//         {/* Progress indicator with animated glow */}
-//         <div className="relative">
-//           <p
-//             className="text-white text-2xl font-bold"
-//             style={{
-//               textShadow: "0 0 10px rgba(255,255,255,0.3)",
-//             }}
-//           >
-//             {progress}%
-//           </p>
-//           <div
-//             className="absolute -inset-4 rounded-full opacity-0"
-//             style={{
-//               background:
-//                 "radial-gradient(circle, rgba(243,198,35,0.3) 0%, transparent 70%)",
-//               animation: "pulse 2s ease-in-out infinite",
-//             }}
-//           ></div>
-//         </div>
+        {/* Progress indicator with animated glow */}
+        <div className="relative">
+          <p
+            className="text-white text-2xl font-bold"
+            style={{
+              textShadow: "0 0 10px rgba(255,255,255,0.3)",
+            }}
+          >
+            {progress}%
+          </p>
+          <div
+            className="absolute -inset-4 rounded-full opacity-0"
+            style={{
+              background:
+                "radial-gradient(circle, rgba(243,198,35,0.3) 0%, transparent 70%)",
+              animation: "pulse 2s ease-in-out infinite",
+            }}
+          ></div>
+        </div>

-//         <p className="mt-2 text-gray-300 font-medium tracking-wide">
-//           Filling your tank...
-//         </p>
+        <p className="mt-2 text-gray-300 font-medium tracking-wide">
+          Filling your tank...
+        </p>

-//         {/* Advanced animations */}
-//         {/* <style jsx>{`
-//           @keyframes bubble {
-//             0% {
-//               transform: translateY(0) scale(0.8);
-//               opacity: 0;
-//             }
-//             20% {
-//               opacity: 0.8;
-//               transform: translateY(-10px) scale(1);
-//             }
-//             80% {
-//               opacity: 0.8;
-//               transform: translateY(-30px) scale(0.9);
-//             }
-//             100% {
-//               transform: translateY(-40px) scale(0.3);
-//               opacity: 0;
-//             }
-//           }
+        {/* Advanced animations */}
+        {/* <style jsx>{`
+          @keyframes bubble {
+            0% {
+              transform: translateY(0) scale(0.8);
+              opacity: 0;
+            }
+            20% {
+              opacity: 0.8;
+              transform: translateY(-10px) scale(1);
+            }
+            80% {
+              opacity: 0.8;
+              transform: translateY(-30px) scale(0.9);
+            }
+            100% {
+              transform: translateY(-40px) scale(0.3);
+              opacity: 0;
+            }
+          }

-//           @keyframes pulse {
-//             0% {
-//               opacity: 0;
-//               transform: scale(0.8);
-//             }
-//             50% {
-//               opacity: 0.5;
-//               transform: scale(1.1);
-//             }
-//             100% {
-//               opacity: 0;
-//               transform: scale(0.8);
-//             }
-//           }
+          @keyframes pulse {
+            0% {
+              opacity: 0;
+              transform: scale(0.8);
+            }
+            50% {
+              opacity: 0.5;
+              transform: scale(1.1);
+            }
+            100% {
+              opacity: 0;
+              transform: scale(0.8);
+            }
+          }

-//           @keyframes moveWave {
-//             0% {
-//               transform: translateX(0);
-//             }
-//             100% {
-//               transform: translateX(-50%);
-//             }
-//           }
+          @keyframes moveWave {
+            0% {
+              transform: translateX(0);
+            }
+            100% {
+              transform: translateX(-50%);
+            }
+          }

-//           .perspective-800 {
-//             perspective: 800px;
-//           }
+          .perspective-800 {
+            perspective: 800px;
+          }

-//           .animate-wave {
-//             overflow: hidden;
-//           }
-//         `}</style> */}
-//       </div>
-//     );
-//   }
+          .animate-wave {
+            overflow: hidden;
+          }
+        `}</style> */}
+      </div>
+    );
+  }

-//   return <>{children}</>;
-// };
+  return <>{children}</>;
+};

-// export default ImagePreloader;
+export default ImagePreloader;
--- a/src/Components/Nav/Footer.jsx
+++ b/src/Components/Nav/Footer.jsx
@ -1,13 +1,19 @@
 import React from "react";
+import { useTranslation } from "react-i18next";

-const Footer = () => (
-  <footer className="bg-gray-800 dark:bg-gray-900 text-white py-8 border-t border-gray-700 dark:border-gray-800">
-    <div className="container mx-auto px-4 text-center">
-      <p className="text-sm opacity-90">
-        © {new Date().getFullYear()} REXNT - جميع الحقوق محفوظة
-      </p>
-    </div>
-  </footer>
-);
+const Footer = () => {
+  const { t } = useTranslation();
+  const currentYear = new Date().getFullYear();
+
+  return (
+    <footer className="bg-gray-800 dark:bg-gray-900 text-white py-8 border-t border-gray-700 dark:border-gray-800">
+      <div className="container mx-auto px-4 text-center">
+        <p className="text-sm opacity-90">
+          {t("footer.copyright", { year: currentYear })}
+        </p>
+      </div>
+    </footer>
+  );
+};

 export default Footer;
--- a/src/Components/Nav/Navbar.jsx
+++ b/src/Components/Nav/Navbar.jsx
@ -1,428 +1,173 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import styled from "styled-components";
 import { useTranslation } from "react-i18next";
 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>
-);
+import { FiSun, FiMoon, FiGlobe } from "react-icons/fi";
+import { MdOutlineDarkMode, MdOutlineLightMode } from "react-icons/md";

 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;
+  .theme-toggle-btn {
+    background: transparent;
+    border: none;
+    color: ${props => props.theme === 'dark' ? '#FFD700' : '#FF8C00'};
    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;
+    padding: 0.5rem;
    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);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease;
+    font-size: 1.5rem;
+    
+    &:hover {
+      background: ${props => props.theme === 'dark' ? 'rgba(255, 215, 0, 0.1)' : 'rgba(255, 140, 0, 0.1)'};
+      transform: scale(1.1);
    }
-    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;
+    
+    &:active {
+      transform: scale(0.95);
    }
  }
 `;

-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) {}
-  };
+const ThemeToggle = ({ currentTheme, toggleTheme }) => {
+  const isDark = currentTheme === "dark";

  return (
-    <StyledWrapper>
-      <label
-        role="switch"
-        aria-checked={isDark}
-        tabIndex={0}
-        className="switch"
-        onKeyDown={(e) => {
-          if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            toggle();
-          }
-        }}
+    <StyledWrapper theme={currentTheme}>
+      <button
+        onClick={toggleTheme}
+        className="theme-toggle-btn"
+        aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
      >
-        <input
-          type="checkbox"
-          checked={isDark}
-          onChange={toggle}
-          aria-hidden="false"
-        />
-        <span className="slider" aria-hidden="true">
-          <span className="slider-inner" />
-        </span>
-      </label>
+        {isDark ? <FiSun size={24} /> : <FiMoon size={24} />}
+      </button>
    </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;
-    }
+const LanguageSwitcher = ({ i18n }) => {
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+  const current = i18n.language?.startsWith("ar") ? "ar" : "en";
+
+  useEffect(() => {
+    const onDocClick = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener("click", onDocClick);
+    return () => document.removeEventListener("click", onDocClick);
+  }, []);
+
+  const changeLng = (lng) => {
+    if (lng !== "ar" && lng !== "en") return;
+    i18n.changeLanguage(lng);
+    setOpen(false);
  };

  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>
+    <div ref={ref} style={{ position: "relative", display: "inline-flex", alignItems: "center" }}>
+      <button
+        type="button"
+        aria-haspopup="true"
+        aria-expanded={open}
+        onClick={() => setOpen((s) => !s)}
+        style={{
+          padding: "0.5rem",
+          borderRadius: "50%",
+          border: "none",
+          background: "transparent",
+          color: "inherit",
+          cursor: "pointer",
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center",
+          transition: "all 0.3s ease",
+          fontSize: "1.5rem",
+        }}
+        className="lang-toggle-btn"
+      >
+        <FiGlobe size={24} />
+      </button>
+
+      {open && (
+        <div
+          role="menu"
+          aria-label="Language menu"
+          style={{
+            position: "absolute",
+            top: "calc(100% + 8px)",
+            right: 0,
+            background: "linear-gradient(180deg,#111827,#0b1220)",
+            borderRadius: 8,
+            boxShadow: "0 8px 30px rgba(2,6,23,0.5)",
+            padding: "6px",
+            zIndex: 60,
+            minWidth: 96,
+          }}
+        >
+          <button
+            onClick={() => changeLng("en")}
+            role="menuitem"
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              width: "100%",
+              textAlign: "left",
+              padding: "8px 10px",
+              borderRadius: 6,
+              background: current === "en" ? "rgba(255,183,77,0.12)" : "transparent",
+              color: "inherit",
+              border: "none",
+              cursor: "pointer",
+              transition: "all 0.2s ease",
+            }}
+            className={`lang-item ${current === "en" ? "active" : ""}`}
+          >
+            <span>English</span>
+            {current === "en" && <span style={{ fontSize: "0.9rem" }}>✓</span>}
+          </button>
+          <button
+            onClick={() => changeLng("ar")}
+            role="menuitem"
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              width: "100%",
+              textAlign: "left",
+              padding: "8px 10px",
+              borderRadius: 6,
+              background: current === "ar" ? "rgba(255,183,77,0.12)" : "transparent",
+              color: "inherit",
+              border: "none",
+              cursor: "pointer",
+              transition: "all 0.2s ease",
+              marginTop: 6,
+            }}
+            className={`lang-item ${current === "ar" ? "active" : ""}`}
+          >
+            <span>العربية</span>
+            {current === "ar" && <span style={{ fontSize: "0.9rem" }}>✓</span>}
+          </button>
+        </div>
+      )}
+    </div>
  );
 };

-const Navbar = () => {
+const Navbar = ({ toggleTheme, currentTheme }) => {
  const { t, i18n } = useTranslation();
  const [menuOpen, setMenuOpen] = useState(false);
  const [activeSection, setActiveSection] = useState("home");
-  const [theme, setTheme] = useState("light");
-
-  useEffect(() => {
-    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");
-    }
-  }, []);
-
-  useEffect(() => {
-    if (theme === "dark") document.documentElement.classList.add("dark");
-    else document.documentElement.classList.remove("dark");
-  }, [theme]);
+  const isRtl = i18n.language?.startsWith("ar");

  useEffect(() => {
    const handleScroll = () => {
      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}"]`);
        if (element) {
@ -435,11 +180,22 @@ const Navbar = () => {
        }
      }
    };
+
    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") || "Home" },
    { key: "services", label: t("nav.services") || "Services" },
@ -450,7 +206,23 @@ const Navbar = () => {
  return (
    <>
      <style>{`
-        /* background and glass */
+        html, body, a, button {
+          -webkit-tap-highlight-color: transparent;
+          -webkit-touch-callout: none;
+        }
+
+        .nav-link, .nav-link *, .mobile-drawer a, .mobile-drawer a * {
+          text-decoration: none !important;
+          background-image: none !important;
+          -webkit-text-decoration-skip: none !important;
+          text-decoration-skip-ink: none !important;
+        }
+
+        .nav-link::after, .nav-link:after {
+          display: none !important;
+          content: none !important;
+        }
+
        .glass-nav {
          background: linear-gradient(180deg, rgba(75,85,99,0.96), rgba(55,65,81,0.9));
          color: #e6e6e6;
@ -459,116 +231,110 @@ const Navbar = () => {
          -webkit-backdrop-filter: blur(8px);
        }

-        /* 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;
+          transition: transform .18s cubic-bezier(.2,.9,.2,1), color .15s ease, text-shadow .15s 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 */
+          padding: 0.32rem 0.6rem;
          border-radius: 999px;
-          transition: transform .15s ease, background .18s ease, box-shadow .18s ease, color .12s ease;
+          transition:
+            transform .18s cubic-bezier(.2,.9,.2,1),
+            background .14s ease,
+            box-shadow .14s 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);
+        .nav-link:hover .nav-pill {
+          transform: translateY(-6px) scale(1.06);
+          box-shadow:
+            0 14px 40px rgba(2,6,23,0.28),
+            0 6px 20px rgba(255,122,24,0.08);
+          background: linear-gradient(90deg, #ffd27a, #ff8a00);
+          color: #050505;
        }

-        .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);
+        .nav-link.active .nav-pill,
+        .mobile-drawer .nav-pill.active {
+          background: radial-gradient(circle at 30% 30%, #ffb347, #ff7a18) !important;
+          color: #0b0b0b !important;
+          transform: translateY(-3px) scale(1.03);
+          box-shadow: 0 8px 26px rgba(255, 122, 24, 0.16), 0 2px 6px rgba(0,0,0,0.12);
        }

-        .glass-nav button:focus {
+        .nav-link:active .nav-pill,
+        .mobile-drawer a:active .nav-pill {
+          transition-duration: 0s !important;
+          transform: translateY(-3px) scale(1.03) !important;
+          background: radial-gradient(circle at 30% 30%, #ffb347, #ff7a18) !important;
+          color: #0b0b0b !important;
+          box-shadow: 0 8px 26px rgba(255, 122, 24, 0.16) !important;
+        }
+
+        .nav-link:focus-visible .nav-pill,
+        .mobile-drawer a:focus-visible .nav-pill {
          outline: none;
-          box-shadow: 0 0 0 4px rgba(245,158,11,0.12);
+          box-shadow: 0 0 0 6px rgba(255,165,0,0.14), 0 8px 30px rgba(255,122,24,0.12);
+          background: radial-gradient(circle at 30% 30%, #ffb347, #ff7a18);
+          color: #0b0b0b;
+          transform: translateY(-3px) scale(1.02);
        }

+        .glass-nav button:focus-visible,
+        .mobile-drawer button:focus-visible {
+          outline: none;
+          box-shadow: 0 0 0 6px rgba(255,165,0,0.12);
+        }
+
+        .nav-link:hover, .nav-link:visited, .mobile-drawer a:hover, .mobile-drawer a:visited {
+          text-decoration: none !important;
+          background: transparent !important;
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+          .nav-pill, .nav-link {
+            transition: none !important;
+          }
+        }
+
+        .mobile-left-slot { display:flex; align-items:center; gap:0.5rem; }
+        .mobile-right-slot { display:flex; align-items:center; gap:0.5rem; }
+
+        .lang-toggle-btn {
+          background: transparent;
+          border: none;
+          color: inherit;
+          cursor: pointer;
+          padding: 0.5rem;
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          transition: all 0.3s ease;
+          font-size: 1.5rem;
+        }
+        
+        .lang-toggle-btn:hover {
+          background: rgba(255, 255, 255, 0.1);
+          transform: scale(1.1);
+        }
+        
+        .theme-toggle-btn:hover {
+          background: rgba(255, 255, 255, 0.1);
+          transform: scale(1.1);
+        }
      `}</style>

      <nav
@ -578,71 +344,103 @@ const Navbar = () => {
      >
        <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={600}
-                        spy={true}
-                        offset={-110}
-                        onSetActive={() => setActiveSection(item.key)}
-                        onClick={() => {
-                          if (item.key === "home") scroll.scrollToTop({ duration: 600 });
-                          if (menuOpen) setMenuOpen(false);
-                        }}
-                        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-pill ${isActive ? "active" : ""}`}>{item.label}</span>
-                      </Link>
-                    </li>
-                  );
-                })}
-              </ul>
+            <div className="flex items-center gap-3">
+              <div aria-hidden className="logo-placeholder" style={{ width: 36, height: 36 }} />
+              <div className="hidden md:flex items-center space-x-6 rtl:space-x-reverse ml-6">
+                <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={600}
+                          spy={true}
+                          offset={-110}
+                          onSetActive={() => setActiveSection(item.key)}
+                          onClick={() => {
+                            setActiveSection(item.key);
+                            if (item.key === "home") scroll.scrollToTop({ duration: 600 });
+                            if (menuOpen) setMenuOpen(false);
+                          }}
+                          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-pill ${isActive ? "active" : ""}`}>{item.label}</span>
+                        </Link>
+                      </li>
+                    );
+                  })}
+                </ul>
+              </div>
            </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} />
+                <LanguageSwitcher i18n={i18n} />
+                <ThemeToggle currentTheme={currentTheme} toggleTheme={toggleTheme} />
              </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 className="md:hidden w-full">
+                {!isRtl ? (
+                  <div style={{ display: "flex", alignItems: "center", width: "100%" }}>
+                    <div style={{ display: "flex", alignItems: "center" }}>
+                      <button
+                        onClick={() => setMenuOpen((s) => !s)}
+                        aria-controls="mobile-menu"
+                        aria-expanded={menuOpen}
+                        className="p-2 rounded-md focus:outline-none transition-transform hover:scale-105"
+                        style={{ marginRight: 8 }}
+                      >
+                        <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 style={{ flex: 1 }} />
+
+                    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+                      <ThemeToggle currentTheme={currentTheme} toggleTheme={toggleTheme} />
+                      <LanguageSwitcher i18n={i18n} />
+                    </div>
+                  </div>
+                ) : (
+                  <div style={{ display: "flex", alignItems: "center", width: "100%" }}>
+                    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+                      <ThemeToggle currentTheme={currentTheme} toggleTheme={toggleTheme} />
+                      <LanguageSwitcher i18n={i18n} />
+                    </div>
+
+                    <div style={{ flex: 1 }} />
+
+                    <div>
+                      <button
+                        onClick={() => setMenuOpen((s) => !s)}
+                        aria-controls="mobile-menu"
+                        aria-expanded={menuOpen}
+                        className="p-2 rounded-md focus:outline-none transition-transform hover:scale-105"
+                        style={{ marginLeft: 8 }}
+                      >
+                        <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>
            </div>
          </div>

-          {/* 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>
-
              <ul className="flex flex-col gap-2">
                {navItems.map((item) => {
                  const isActive = activeSection === item.key;
@ -656,26 +454,19 @@ const Navbar = () => {
                        offset={-110}
                        onSetActive={() => setActiveSection(item.key)}
                        onClick={() => {
+                          setActiveSection(item.key); 
                          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>
-
-              <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>
--- a/src/Components/Sections/About/About.css
+++ b/src/Components/Sections/About/About.css
@ -1,30 +0,0 @@
-.grow-img {
-    animation: growIn 1s ease-out forwards;
-}
-
-@keyframes growIn {
-    0% {
-        transform: scale(0.8);
-        opacity: 0.8;
-    }
-    100% {
-        transform: scale(1);
-        opacity: 1;
-    }
-}
-
-@keyframes soft-blink {
-    0%,
-    100% {
-        opacity: 0.5;
-        transform: translateX(0);
-    }
-    50% {
-        opacity: 1;
-        transform: translateX(4px);
-    }
-}
-
-.animate-soft-blink {
-    animation: soft-blink 3s infinite ease-in-out;
-}
--- a/src/Components/Sections/About/About.jsx
+++ b/src/Components/Sections/About/About.jsx
@ -16,432 +16,417 @@ import {
  ChevronRight
 } from "lucide-react";
 import styled, { keyframes } from "styled-components";
+import { useTranslation } from "react-i18next";


-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: [
-      "الجودة الاحترافية",
-      "السلامة المهنية",
-      "الاستدامة والمسؤولية",
-      "التطوير المستمر",
-      "الشفافية و بناء الثقة"
-    ]
-  }
-];

-// 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 rotating = keyframes`
+    from {
+      transform: perspective(var(--perspective)) rotateX(var(--rotateX))
+        rotateY(0);
+    }
+    to {
+      transform: perspective(var(--perspective)) rotateX(var(--rotateX))
+        rotateY(1turn);
+    }
+  `;

-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 {
+  const floatAnimation = keyframes`
    0%, 100% {
-      transform: translateY(0);
+      transform: rotateY(calc((360deg / var(--quantity)) * var(--index)))
+        translateZ(var(--translateZ)) translateY(0px);
    }
    50% {
-      transform: translateY(5px);
+      transform: rotateY(calc((360deg / var(--quantity)) * var(--index)))
+        translateZ(var(--translateZ)) translateY(-10px);
    }
-  }
+  `;

-  &:hover {
-    opacity: 1;
-    span {
-      opacity: 1;
+  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,
    }
-    svg {
-      animation: bounce 1s infinite;
-    }
-  }
-`;
+  }))`
+    position: absolute;
+    border: 2px solid ${props => props.$theme === 'dark' ? '#47718b' : '#47718b'};
+    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' ? 'linear-gradient(45deg,#3c4b5d, #57acd9)' : 'linear-gradient(45deg,white,#47718b)'};
+    backdrop-filter: blur(15px);
+    -webkit-backdrop-filter: blur(15px);

-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'};
+      transform: rotateY(calc((360deg / var(--quantity)) * var(--index)))
+        translateZ(calc(var(--translateZ) + 80px)) scale(1.05);
+      border-color: #47718b;
+      box-shadow:
+        0 0 30px rgba(4, 28, 64, 0.3),
+        0 0 60px rgba(4, 28, 64, 0.2);
    }
-  }
-`;

-const LeftNavButton = styled(NavButton)`
-  left: 30px;
-`;
+    ${props => props.$isFront && `
+      transform: rotateY(calc((360deg / var(--quantity)) * var(--index)))
+        translateZ(calc(var(--translateZ) + 50px)) scale(1.03);
+      border-color:#47718b;
+      box-shadow:
+        0 15px 35px rgba(4, 28, 64, 0.2),
+        0 5px 15px rgba(4, 28, 64, 0.1);
+    `}
+  `;

-const RightNavButton = styled(NavButton)`
-  right: 30px;
-`;
+  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 DotsContainer = styled.div`
-  position: absolute;
-  bottom: 40px;
-  left: 50%;
-  transform: translateX(-50%);
-  display: flex;
-  gap: 12px;
-  z-index: 100;
-`;
+  const CardHeader = styled.div`
+    position: relative;
+    z-index: 2;
+  `;

-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;
+  const IconWrapper = styled.div`
+    width: 30px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 20px;
+    transition: all 0.3s ease;
+  `;

-  &:hover {
+  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' ? '#F5EEE6' : '#131313'};
+    margin-bottom: 6px;
+    display: -webkit-box;
+    -webkit-line-clamp: 8;
+    -webkit-box-orient: 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: 2px;
+    text-shadow: 0 2px 10px rgba(4, 28, 64, 0.2);
+    letter-spacing: -0.5px;
+    position: relative;
+    top: -10px;
+  `;
+
+  const Subtitle = styled.div`
+    font-size: 14px;
+    color: ${props => props.$theme === 'dark' ? '#F5EEE6' : '#131313'};
+    opacity: 0.8;
+    max-width: 600px;
+    margin: 12px auto;
+    font-weight: 300;
+    line-height: 1;
+    position: relative;
+    top: -20px;
+  `;
+
+  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(49 49 49 / 75%)'};
+    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:1050px ;
+    width: 100%;
+    height: 80%;
+    background: ${props => props.$theme === 'dark' ? 'linear-gradient(45deg, #063e5b, gray);' : 'linear-gradient(45deg,#539cc4, gray)'};
+    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.5)' 
-          : 'rgba(4, 28, 64, 0.5)'
+          ? 'rgba(224, 105, 35, 0.3)' 
+          : 'rgba(4, 28, 64, 0.3)'
    };
-    transform: scale(1.2);
-  }
-`;
+    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);
+    }
+  `;

 const About = ({ theme = 'light' }) => {
+  const { t } = useTranslation();
+  
+  const companyInfo = [
+    {
+      id: 1,
+      title: t("about.cards.aboutUs.title"),
+      icon: Building,
+      description: t("about.cards.aboutUs.description"),
+      features: t("about.cards.aboutUs.features", { returnObjects: true })
+    },
+    {
+      id: 2,
+      title: t("about.cards.vision.title"),
+      icon: Eye,
+      description: t("about.cards.vision.description"),
+      features: t("about.cards.vision.features", { returnObjects: true })
+    },
+    {
+      id: 3,
+      title: t("about.cards.mission.title"),
+      icon: MessageSquare,
+      description: t("about.cards.mission.description"),
+      features: t("about.cards.mission.features", { returnObjects: true })
+    },
+    {
+      id: 4,
+      title: t("about.cards.values.title"),
+      icon: Heart,
+      description: t("about.cards.values.description"),
+      features: t("about.cards.values.features", { returnObjects: true })
+    }
+  ];
+
  const [selectedCard, setSelectedCard] = useState(null);
  const [rotation, setRotation] = useState(0);
  const [activeCardIndex, setActiveCardIndex] = useState(0);
@ -481,29 +466,19 @@ const About = ({ theme = 'light' }) => {
  };

  return (
+    <section id="about" >
    <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>
+          <div 
+            className="pt-0 mb-2 text-4xl font-extrabold md:text-5xl lg:text-6xl"
+          >
+            {t("about.mainTitle")}
+          </div>
        </Title>
        <Subtitle $theme={theme}>
          <div className="text-lg font-medium lg:text-xl mb-6 max-w-3xl mx-auto">
-            رحلة التميز الهندسي والتقني، هنا حيث تلتقي الخبرة بالابتكار
+            {t("about.subtitle")}
          </div>
        </Subtitle>
      </HeaderSection>
@ -538,7 +513,7 @@ const About = ({ theme = 'light' }) => {
                <CardContent $theme={theme}>
                  <CardHeader>
                    <IconWrapper>
-                      <Icon size={32} style={{ color: '#e06923' }} />
+                      <Icon size={32} style={{ color: '#57acd9' }} />
                    </IconWrapper>
                    <CardTitle>{card.title}</CardTitle>
                    <CardDescription $theme={theme}>
@ -548,9 +523,11 @@ const About = ({ theme = 'light' }) => {

                  <div>
                    {isFront && (
-                      <ArrowHint style={{ color: '#e06923' }}>
-                        <ArrowDown size={24} style={{ color: '#e06923' }} />
-                        <span style={{ color: '#e06923' }}>إضغط لعرض التفاصيل</span>
+                      <ArrowHint style={{ color: '#57acd9' }}>
+                        <ArrowDown size={24} style={{ color: '#57acd9' }} />
+                        <span style={{ color: '#57acd9' }}>
+                          {t("about.buttons.viewDetails")}
+                        </span>
                      </ArrowHint>
                    )}
                  </div>
@ -602,6 +579,7 @@ const About = ({ theme = 'light' }) => {
              onClick={handleCloseModal}
              whileHover={{ rotate: 90 }}
              whileTap={{ scale: 0.9 }}
+              title={t("about.buttons.close")}
            >
              <X size={20} />
            </CloseButton>
@ -660,11 +638,11 @@ const About = ({ theme = 'light' }) => {
                      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' }} />}
+                      {idx === 1 && <Shield size={20} style={{ color: '#57acd9' }} />}
+                      {idx === 0 && <Target size={20} style={{ color: '#57acd9' }} />}
+                      {idx === 2 && <Globe size={20} style={{ color: '#57acd9' }} />}
+                      {idx === 3 && <Zap size={20} style={{ color: '#57acd9' }} />}
+                      {idx === 4 && <Sparkles size={20} style={{ color: '#57acd9' }} />}
                    </div>
                    <span style={{
                      color: theme === 'dark' ? '#F5EEE6' : '#131313',
@ -682,9 +660,8 @@ const About = ({ theme = 'light' }) => {
        </DetailModal>
      )}
    </StyledWrapper>
+    </section>
  );
 };

-export default About;
-
-
+export default About;
--- a/src/Components/Sections/Contact/Contact.jsx
+++ b/src/Components/Sections/Contact/Contact.jsx
@ -22,10 +22,10 @@ const Contact = () => {
    setMessage({ text: "", type: "" });
 emailjs
      .sendForm(
-        "service_dynf5hg",
-        "template_l4ik4he",
+        "service_cqcqipd",
+        "template_o7xejbn",
        form.current,
-        "rRjr_WNgPp7_rGno1"
+        "_JAFEi75xtLgmGaNi"
      )
      .then(
        (result) => {
@ -58,15 +58,14 @@ emailjs
      className="relative min-h-screen py-16 px-4 sm:px-6 font-sans"
      style={{ 
        direction: "rtl",
-        background: "linear-gradient(135deg, #dceafe 0%, #e8f4ff 25%, #c6e2ff 50%, #a3d0ff 75%, #23558f 100%)"
      }}
    >
      <div className="absolute inset-0 overflow-hidden">
-        <div className="absolute -top-10 -right-40 w-80 h-80 bg-[#3c5ee3] rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse"></div>
-        <div className="absolute -bottom-10 -left-40 w-80 h-80 bg-[#2ecc71] rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse delay-1000"></div>
-        <div className="absolute top-1/2 left-1/3 w-60 h-60 bg-[#9b59b6] rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse delay-500"></div>
+        <div className="absolute -top-10 -right-40 w-80 h-80 bg-[#446a85] rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse"></div>
+        <div className="absolute -bottom-10 -left-40 w-80 h-80 bg-[#446a85] rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse delay-1000"></div>
+        <div className="absolute top-1/2 left-1/3 w-60 h-60 bg-[#57acd9] rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse delay-500"></div>
        
-        <div className="absolute bottom-0 left-0 w-full h-32 bg-gradient-to-t from-[#3c5ee3]/30 to-transparent"></div>
+        <div className="absolute bottom-0 left-0 w-full h-32 bg-gradient-to-t from-[#57acd9]/30 to-transparent"></div>
      </div>

      <div className="relative z-10 w-full max-w-6xl mx-auto">
@ -78,7 +77,7 @@ emailjs
        >
          <h1 className="pt-0 mb-0 text-2xl font-extrabold md:text-5xl lg:text-6xl">
            <motion.span
-              className="bg-clip-text text-transparent bg-gradient-to-r from-[#2d59b3] via-blue-200 to-[#32a896]"
+              className="bg-clip-text text-transparent bg-gradient-to-r from-[#57acd9] via-blue-200 to-[#446a85]"
              animate={{
                backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"]
              }}
@ -105,112 +104,39 @@ emailjs
            <motion.div
              whileHover={{ y: -5, scale: 1.02 }}
              transition={{ duration: 0.3 }}
-              className="group relative bg-white/95 backdrop-blur-sm p-6 rounded-2xl shadow-lg border border-gray-100 hover:border-[#3c5ee3]/50 hover:shadow-2xl transition-all duration-300"
+              className="group relative bg-white/95 backdrop-blur-sm p-8 rounded-2xl shadow-lg border border-gray-100 hover:border-[#063e5b]/50 hover:shadow-2xl transition-all duration-300"
            >
              <div className="flex items-start gap-4">
                <motion.div
                  whileHover={{ rotate: [0, -10, 10, 0] }}
                  transition={{ duration: 0.5 }}
-                  className="p-3 rounded-xl bg-gradient-to-br from-[#23558f] to-[#3360b2] text-white shadow-lg"
+                  className="p-3 rounded-xl bg-gradient-to-br from-[#57acd9] to-[#063e5b] text-white shadow-lg"
                >
                  <FaMapMarkerAlt className="text-2xl" />
                </motion.div>
                
                <div className="flex-1">
-                  <h3 className="text-lg font-bold text-gray-800 mb-2">
+                  <h3 className="text-[#516475] lg font-bold text- mb-2">
                    {t("contact.address")}
                  </h3>
-                  <p className="text-gray-600 text-sm leading-relaxed whitespace-pre-line">
+                  <p className="text-[#063e5b] text-sm leading-relaxed whitespace-pre-line">
                    {t("contact.addressText")}
                  </p>
                </div>
              </div>
              
              <motion.div
-                className="absolute inset-0 rounded-2xl bg-gradient-to-br from-[#3c5ee3]/0 via-[#3c5ee3]/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"
+                className="absolute inset-0 rounded-2xl bg-gradient-to-br from-[#3c5ee3]/0 via-[#063e5b]/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"
                initial={false}
              />
              <motion.div
-                className="absolute bottom-0 left-1/2 h-1 w-0 group-hover:w-3/4 bg-gradient-to-r from-transparent via-[#3c5ee3] to-transparent rounded-full"
-                initial={{ x: "-50%", width: "0%" }}
-                whileHover={{ width: "75%" }}
-                transition={{ duration: 0.3 }}
+               
              />
            </motion.div>
            <motion.div
              whileHover={{ y: -5, scale: 1.02 }}
              transition={{ duration: 0.3 }}
-              className="group relative bg-white/95 backdrop-blur-sm p-6 rounded-2xl shadow-lg border border-gray-100 hover:border-[#3c5ee3]/50 hover:shadow-2xl transition-all duration-300"
-            >
-              <div className="flex items-start gap-4">
-                <motion.div
-                  whileHover={{ rotate: [0, -10, 10, 0] }}
-                  transition={{ duration: 0.5 }}
-                  className="p-3 rounded-xl bg-gradient-to-br from-[#3c5ee3] to-[#5c7ce3] text-white shadow-lg"
-                >
-                  <FaPhoneAlt className="text-2xl" />
-                </motion.div>
-                
-                <div className="flex-1">
-                  <h3 className="text-lg font-bold text-gray-800 mb-3">
-                    {t("contact.phone")}
-                  </h3>
-                  <div className="space-y-3">
-                    <div className="flex items-center justify-between bg-gradient-to-r from-[#e8f4ff] to-[#dceafe] rounded-xl p-3 hover:from-[#dceafe] hover:to-[#c6e2ff] transition-all duration-300">
-                      <span className="text-[#23558f] font-medium">0965656631</span>
-                      <div className="flex items-center gap-2">
-                        <motion.button
-                          whileHover={{ scale: 1.1 }}
-                          whileTap={{ scale: 0.9 }}
-                          className="p-2 rounded-full bg-gradient-to-r from-[#2ecc71] to-[#1abc9c] text-white hover:shadow-lg transition-all duration-300"
-                        >
-                          <FaPhoneAlt className="text-sm" />
-                        </motion.button>
-                      </div>
-                    </div>
-                    
-                    <div className="flex items-center justify-between bg-gradient-to-r from-[#e8f4ff] to-[#dceafe] rounded-xl p-3 hover:from-[#dceafe] hover:to-[#c6e2ff] transition-all duration-300">
-                      <a
-                        href="https://wa.me/963965656631"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="text-[#23558f] font-medium hover:text-[#3c5ee3] transition-colors"
-                      >
-                        963965656631
-                      </a>
-                      <div className="flex items-center gap-2">
-                        <motion.a
-                          href="https://wa.me/963965656631"
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          whileHover={{ scale: 1.1 }}
-                          whileTap={{ scale: 0.9 }}
-                          className="p-2 rounded-full bg-gradient-to-r from-[#25D366] to-[#128C7E] text-white hover:shadow-lg transition-all duration-300"
-                        >
-                          <FaWhatsapp className="text-sm" />
-                        </motion.a>
-                        <motion.button
-                          whileHover={{ scale: 1.1 }}
-                          whileTap={{ scale: 0.9 }}
-                          className="p-2 rounded-full bg-gradient-to-r from-[#23558f] to-[#3360b2] text-white hover:shadow-lg transition-all duration-300"
-                        >
-                          <FaPhoneAlt className="text-sm" />
-                        </motion.button>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              
-              <motion.div
-                className="absolute inset-0 rounded-2xl bg-gradient-to-br from-[#3c5ee3]/0 via-[#3c5ee3]/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"
-                initial={false}
-              />
-            </motion.div>
-            <motion.div
-              whileHover={{ y: -5, scale: 1.02 }}
-              transition={{ duration: 0.3 }}
-              className="group relative bg-white/95 backdrop-blur-sm p-6 rounded-2xl shadow-lg border border-gray-100 hover:border-[#3c5ee3]/50 hover:shadow-2xl transition-all duration-300"
+              className="group relative bg-white/95 backdrop-blur-sm p-8 rounded-2xl shadow-lg border border-gray-100 hover:border-[#3c5ee3]/50 hover:shadow-2xl transition-all duration-300"
            >
              <div className="flex items-start gap-4">
                <motion.div
@ -222,14 +148,14 @@ emailjs
                </motion.div>
                
                <div className="flex-1">
-                  <h3 className="text-lg font-bold text-gray-800 mb-2">
+                  <h3 className="text-lg font-bold text-[#063e5b] mb-2">
                    {t("contact.email")}
                  </h3>
                  <a
-                    href="mailto:info@TPS-STATIONS.COM"
+                    href="mailto:info@rexnt.com"
                    className="inline-block bg-gradient-to-r from-[#e8f4ff] to-[#dceafe] text-[#23558f] font-medium rounded-xl px-4 py-3 hover:from-[#dceafe] hover:to-[#c6e2ff] hover:text-[#3c5ee3] hover:shadow-lg transition-all duration-300"
                  >
-                    Info@TPS-STATIONS.COM
+                    Info@rexnt.com
                  </a>
                </div>
              </div>
@ -240,13 +166,12 @@ emailjs
              />
              
              <motion.div
-                className="absolute bottom-0 left-1/2 h-1 w-0 group-hover:w-3/4 bg-gradient-to-r from-transparent via-[#2ecc71] to-transparent rounded-full"
-                initial={{ x: "-50%", width: "0%" }}
-                whileHover={{ width: "75%" }}
-                transition={{ duration: 0.3 }}
+              
+             
              />
            </motion.div>
          </motion.div>
+          
          <motion.div
            initial={{ x: -50, opacity: 0 }}
            animate={{ x: 0, opacity: 1 }}
@ -254,12 +179,12 @@ emailjs
            className="group relative bg-white/95 backdrop-blur-sm p-8 rounded-2xl shadow-2xl border border-gray-100 hover:border-[#3c5ee3]/50 hover:shadow-3xl transition-all duration-500 lg:w-1/2"
          >
            <div className="relative mb-3 pt-3">
-              <h2 className="text-2xl md:text-3xl font-bold text-center">
-                <span className="bg-clip-text text-transparent bg-gradient-to-r from-[#23558f] via-[#3c5ee3] to-[#2ecc71]">
+              <h2 className="text-2xl md:text-3xl font-bold text-center" style={{ whiteSpace: 'pre-line' }}>
+                <span className="bg-clip-text text-[#063e5b] bg-gradient-to-r from-[#4a7c9b] via-[#063e5b] to-[#57acd9]">
                  {t("contact.formTitle")} 
                </span>
              </h2>
-              <div className="absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-24 h-1 bg-gradient-to-r from-[#23558f] via-[#3c5ee3] to-[#2ecc71] rounded-full"></div>
+              <div className="absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-24 h-1 bg-gradient-to-r from-[#4a7c9b] via-[#063e5b] to-[#57acd9] rounded-full"></div>
            </div>
            <form
              ref={form}
@ -360,7 +285,7 @@ emailjs
                  disabled={isLoading}
                  whileHover={{ scale: 1.02 }}
                  whileTap={{ scale: 0.98 }}
-                  className={`group/btn relative w-full bg-gradient-to-r from-[#23558f] via-[#3c5ee3] to-[#2ecc71] text-white px-6 py-4 text-lg font-semibold rounded-xl hover:shadow-2xl hover:shadow-[#3c5ee3]/30 transition-all duration-500 overflow-hidden ${
+                  className={`group/btn relative w-full bg-gradient-to-r from-[#57acd9] via-[#063e5b] to-[#4a7c9b] text-white px-6 py-4 text-lg font-semibold rounded-xl hover:shadow-2xl hover:shadow-[#3c5ee3]/30 transition-all duration-500 overflow-hidden ${
                    isLoading ? "opacity-70 cursor-not-allowed" : ""
                  }`}
                >
@ -411,7 +336,7 @@ emailjs
          transition={{ duration: 0.8, delay: 0.6 }}
          className="mt-16 p-8 rounded-2xl shadow-2xl text-center relative overflow-hidden"
          style={{
-            background: "linear-gradient(135deg, #23558f 0%, #3360b2 33%, #3c5ee3 66%, #2ecc71 100%)"
+            background: "linear-gradient(135deg, #4a7c9b 0%, #063e5b 33%, #57acd9 66%, #4a7c9b 100%)"
          }}
        >
          <div className="absolute inset-0">
--- a/src/Components/Sections/DepartmentDetail/DepartmentDetail.jsx
+++ b/src/Components/Sections/DepartmentDetail/DepartmentDetail.jsx
@ -1,5 +1,8 @@
 import React, { useState, useEffect, useRef, useCallback } from "react";
 import { motion, AnimatePresence } from "framer-motion";
+import { useTranslation } from "react-i18next";
+import "../../../../src/i18n";
+
 import d1 from "../../../../src/assets/Images/d1.jpeg";
 import d2 from "../../../../src/assets/Images/d2.jpeg";
 import d3 from "../../../../src/assets/Images/d3.jpeg";
@ -125,7 +128,11 @@ function ProjectsTimeline({
      const scrollLeft = scrollContainer.scrollLeft;

      const targetScroll =
-        scrollLeft + itemRect.left - containerRect.left - containerRect.width / 2 + itemRect.width / 2;
+        scrollLeft +
+        itemRect.left -
+        containerRect.left -
+        containerRect.width / 2 +
+        itemRect.width / 2;

      scrollContainer.scrollTo({ left: targetScroll, behavior: "smooth" });
      setActiveItem(index);
@ -182,7 +189,8 @@ function ProjectsTimeline({

    return () => {
      clearTimeout(t);
-      if (scrollContainer) scrollContainer.removeEventListener("scroll", onScroll);
+      if (scrollContainer)
+        scrollContainer.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", onResize);
    };
  }, [itemsRefs, drawCurvedLines, setActiveItem]);
@ -206,7 +214,7 @@ function ProjectsTimeline({
    .timeline-item.active .year-circle { width:clamp(110px,14vw,200px); height:clamp(110px,14vw,200px); font-size:clamp(18px,2.2vw,28px); box-shadow:0 18px 60px rgba(15,23,42,.5), inset 0 2px 6px rgba(255,255,255,0.04); border-color: rgba(249,115,22,0.18); transform: translateY(-15px) scale(1.03); }
    .timeline-item.active .year-circle::after { opacity:1; inset:-12px; animation: ripple 2s ease-out infinite; }
    @keyframes ripple { 0%{ transform: scale(1); opacity:.6;} 100%{ transform: scale(1.25); opacity:0;} }
-    .project-card { margin-top:40px; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)); border-radius:18px; padding:26px; min-width:320px; max-width:420px; box-shadow:0 12px 40px rgba(2,6,23,.45); opacity:.9; transform: scale(.98) translateY(8px); transition:all .6s cubic-bezier(.34,1.56,.64,1); border:1px solid rgba(255,255,255,.06); position:relative; overflow:hidden; backdrop-filter: blur(8px) saturate(120%); }
+    .project-card { margin-top:40px; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)); border-radius:18px; padding:26px; width: clamp(240px, 36vw, 420px); max-width:92vw; 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; }
@ -219,38 +227,78 @@ function ProjectsTimeline({
    .scroll-btn:active:not(:disabled){ transform: scale(1.05); }
    .scroll-btn:disabled { opacity:.4; cursor:not-allowed; }
    @media (max-width:768px){
-      .timeline-wrapper { padding:clamp(36px,6vw,80px) 24px; }
-      .timeline-item { margin:0 18px; }
-      .year-circle { width:90px; height:90px; font-size:15px; }
-      .timeline-item.active .year-circle { width:120px; height:120px; font-size:19px; }
-      .project-card { min-width:260px; max-width:300px; padding:20px; }
-      .project-text { font-size:13px; }
-      .scroll-btn { width:48px; height:48px; font-size:20px; }
+      .timeline-wrapper { padding:clamp(24px,6vw,80px) 16px; }
+      .timeline-item { margin:0 12px; }
+      .year-circle { width:64px !important; height:64px !important; font-size:13px !important; }
+      .timeline-item.active .year-circle { width:96px !important; height:96px !important; font-size:16px !important; transform: translateY(-10px) scale(1.02); }
+      .project-card { width: clamp(160px, 72vw, 280px); padding:16px; margin-top:20px; }
+      .project-text { font-size:13px; line-height:1.6; }
+      .scroll-btn { width:44px; height:44px; font-size:18px; }
+      .projects-timeline-root.plain-bleed .timeline-wrapper { padding:clamp(36px,6vw,80px) 16px; }
    }

    .projects-timeline-root.plain-bleed .timeline-wrapper { padding:clamp(48px,6vw,120px) 24px; }
    .projects-timeline-root.plain-bleed .project-card { max-width:420px; }
  `;

-  const mainStyle = plain ? { background: "#ffffff", paddingBottom: 0 } : { background: "linear-gradient(135deg, var(--bg-start) 0%, var(--bg-mid) 30%, var(--bg-end) 60%)" };
+  const mainStyle = plain
+    ? { background: "#ffffff", paddingBottom: 0 }
+    : {
+        background:
+          "linear-gradient(135deg, var(--bg-start) 0%, var(--bg-mid) 30%, var(--bg-end) 60%)",
+      };

  return (
-    <div className={`projects-timeline-root w-full h-full ${plain ? "plain-bleed" : ""}`}>
+    <div
+      className={`projects-timeline-root w-full h-full ${
+        plain ? "plain-bleed" : ""
+      }`}
+    >
      <style>{css}</style>
      <main className="w-full h-full overflow-hidden" style={mainStyle}>
        <div className="h-full flex flex-col">
          {!plain && (
            <header className="text-center py-8 px-4">
-              <h1 id="main-title" className={` ${plain ? "text-3xl md:text-4xl font-bold text-gray-900" : "text-5xl font-bold text-white"} mb-3`} style={plain ? { textShadow: "none" } : { textShadow: "0 4px 20px rgba(0,0,0,0.3)" }}>
+              <h1
+                id="main-title"
+                className={` ${
+                  plain
+                    ? "text-3xl md:text-4xl font-bold text-gray-900"
+                    : "text-5xl font-bold text-white"
+                } mb-3`}
+                style={
+                  plain
+                    ? { textShadow: "none" }
+                    : { textShadow: "0 4px 20px rgba(0,0,0,0.3)" }
+                }
+              >
                {mainTitle}
              </h1>
-              <p id="subtitle" className={`${plain ? "text-base text-gray-700" : "text-xl text-white opacity-90"}`}>{subtitle}</p>
+              <p
+                id="subtitle"
+                className={`${
+                  plain
+                    ? "text-base text-gray-700"
+                    : "text-xl text-white opacity-90"
+                }`}
+              >
+                {subtitle}
+              </p>
            </header>
          )}

          <div className="flex-1 relative">
-            <div className="timeline-scroll h-full" id="timeline-scroll" ref={scrollRef} aria-label="خط زمني قابل للتمرير">
-              <div className="timeline-wrapper" id="timeline-wrapper" ref={wrapperRef}>
+            <div
+              className="timeline-scroll h-full"
+              id="timeline-scroll"
+              ref={scrollRef}
+              aria-label="خط زمني قابل للتمرير"
+            >
+              <div
+                className="timeline-wrapper"
+                id="timeline-wrapper"
+                ref={wrapperRef}
+              >
                <svg className="svg-container" id="timeline-svg" ref={svgRef} />
                {projects.map((project, idx) => (
                  <div
@ -279,8 +327,24 @@ function ProjectsTimeline({
            </div>

            <div className="scroll-indicator">
-              <button className="scroll-btn" aria-label="السابق" onClick={onPrev} disabled={currentIndex === 0} title="السابق">◄</button>
-              <button className="scroll-btn" aria-label="التالي" onClick={onNext} disabled={currentIndex === projects.length - 1} title="التالي">►</button>
+              <button
+                className="scroll-btn"
+                aria-label="السابق"
+                onClick={onPrev}
+                disabled={currentIndex === 0}
+                title="السابق"
+              >
+                ◄
+              </button>
+              <button
+                className="scroll-btn"
+                aria-label="التالي"
+                onClick={onNext}
+                disabled={currentIndex === projects.length - 1}
+                title="التالي"
+              >
+                ►
+              </button>
            </div>
          </div>
        </div>
@ -300,7 +364,10 @@ const defaultProjects = [
    ],
  },
  { year: "2001", items: ["أعمال تشغيل وصيانة الدورة لمعمل الوهيب ستوك إير"] },
-  { year: "2002", items: ["أعمال تشغيل وصيانة الدورة لمعمل العربية لدرفلة إير"] },
+  {
+    year: "2002",
+    items: ["أعمال تشغيل وصيانة الدورة لمعمل العربية لدرفلة إير"],
+  },
  { year: "2004", items: ["أعمال متنوعة في مجال الدرفلة والتصنيع"] },
  {
    year: "2016",
@ -309,7 +376,10 @@ const defaultProjects = [
      "أي أم، التايتيك - التروت، تصميم وتنفيذ",
    ],
  },
-  { year: "2016-2017", items: ["التدريب العالمي 600 طن/يوم", "التدريب للصناعات الغذائية"] },
+  {
+    year: "2016-2017",
+    items: ["التدريب العالمي 600 طن/يوم", "التدريب للصناعات الغذائية"],
+  },
  { year: "2017", items: ["دراسة تأهيلية معمل الشمس (العسافي - حمص)"] },
  {
    year: "2019",
@ -319,141 +389,78 @@ const defaultProjects = [
    ],
  },
  { year: "2020", items: ["استكمال دراسة تأهيلية للصم وقياس الشمس"] },
-  { year: "2021", items: ["منشأ تيسير لمعمل المتحدة، تصميم الاسور - أبو الشامات"] },
-  { year: "2022", items: ["استكمال منشأ تيسير لمعمل المتحدة", "معمل المثنى للتصنيع السريع - طرطوس"] },
+  {
+    year: "2021",
+    items: ["منشأ تيسير لمعمل المتحدة، تصميم الاسور - أبو الشامات"],
+  },
+  {
+    year: "2022",
+    items: [
+      "استكمال منشأ تيسير لمعمل المتحدة",
+      "معمل المثنى للتصنيع السريع - طرطوس",
+    ],
+  },
  { year: "2023", items: ["مشاريع متنوعة في مجال التصنيع والدرفلة"] },
 ];

 export default function DepartmentDetail() {
+  const { t } = useTranslation();
  const [active, setActive] = useState(null);

  const buttons = [
-    { id: 1, title: "اختصاص القسم", key: "expertise" },
-    { id: 2, title: "خدمات القسم", key: "services" },
-    { id: 3, title: "الاعمال المنفذة", key: "works" },
+    { id: 1, title: t("department.buttons.expertise"), key: "expertise" },
+    { id: 2, title: t("department.buttons.services"), key: "services" },
+    { id: 3, title: t("department.buttons.works"), 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: "تنفيذ الأعمال الميكانيكية والكهربائية وأنظمة التحكم"
-    },
-    {
-      icon: (
-        <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
-        </svg>
-      ),
-      text: "الإشراف على التشغيل التجريبي وتدريب الكوادر الفنية"
-    }
-  ];
+  const expertiseItemsRaw = t("department.expertiseItems", {
+    returnObjects: true,
+  });
+  const expertiseItems = Array.isArray(expertiseItemsRaw)
+    ? expertiseItemsRaw
+    : [
+        "دراسات الجدوى الاقتصادية وتحليل الربحية والمخاطر للمشاريع الصناعية والهندسية",
+        "الدراسات الهندسية الأولية والنهائية والتفصيلية",
+        "تصميم المخططات التنفيذية",
+        "تنفيذ الأعمال المدنية والمعمارية والمعدنية للمنشآت الصناعية",
+        "تصنيع وتركيب خطوط الإنتاج محلياً أو خطوط الانتاج المستوردة",
+        "تنفيذ الأعمال الميكانيكية والكهربائية وأنظمة التحكم",
+        "الإشراف على التشغيل التجريبي وتدريب الكوادر الفنية",
+      ];

-  const servicesItems = [
-    {
-      icon: (
-        <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M12 8v4l3 3"/>
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M20 12a8 8 0 11-16 0 8 8 0 0116 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="M18.364 5.636l-1.414 1.414M6.05 17.95l-1.414 1.414M6.05 6.05L7.464 7.464M17.95 17.95l1.414 1.414"/>
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M12 8v4l3 3"/>
-        </svg>
-      ),
-      text: "الصيانة الطارئة ومعالجة الأعطال."
-    },
-    {
-      icon: (
-        <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M3 7h18M6 21h12M8 7v13M16 7v13"/>
-        </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="M3 7h18M3 12h18M3 17h18"/>
-        </svg>
-      ),
-      text: "فحص وتقييم الحالة الفنية للتجهيزات والآلات."
-    },
-    {
-      icon: (
-        <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M12 2l3 7h7l-5.5 4.2L19 21l-7-4-7 4 1.5-7.8L2 9h7z"/>
-        </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="M3 12h18M3 6h18M3 18h18"/>
-        </svg>
-      ),
-      text: "رفع كفاءة التشغيل وتقليل تكاليف الأعطال"
-    }
-  ];
+  const servicesItemsRaw = t("department.servicesItems", {
+    returnObjects: true,
+  });
+  const servicesItems = Array.isArray(servicesItemsRaw)
+    ? servicesItemsRaw
+    : [
+        "الصيانة الدورية والوقائية.",
+        "الصيانة الطارئة ومعالجة الأعطال.",
+        "إعادة التأهيل والتحديث الفني للمنشآت.",
+        "فحص وتقييم الحالة الفنية للتجهيزات والآلات.",
+        "أعمال التفتيش الفني والهندسي وفق المعايير العالمية.",
+        "رفع كفاءة التشغيل وتقليل تكاليف الأعطال",
+      ];
+
+  const defaultProjectsTranslated =
+    t("department.defaultProjects", { returnObjects: true }) || defaultProjects;
+
+  const displayItems = active === "services" ? servicesItems : expertiseItems;
+  const heroImage =
+    active === "expertise"
+      ? d2
+      : active === "services"
+      ? d3
+      : active === "works"
+      ? d4
+      : d1;

  const handleButtonClick = (key) => {
    setActive((prev) => (prev === key ? null : key));
  };

-  const displayItems = active === "services" ? servicesItems : expertiseItems;
-  const heroImage = active === "expertise" ? d2 : active === "services" ? d3 : active === "works" ? d4 : d1;
-
  return (
-    <div dir="rtl" className="w-full min-h-screen bg-white pb-12">
+    <div dir={t("dir") || "rtl"} className="w-full min-h-screen bg-white pb-12">
      <section className="relative">
        <div className="w-full">
          <AnimatePresence mode="wait">
@ -467,7 +474,7 @@ export default function DepartmentDetail() {
            >
              <img
                src={heroImage}
-                alt="منشآت صناعية"
+                alt={t("department.sectionTitle") || "قسم"}
                className="absolute inset-0 w-full h-full object-cover object-center z-0 brightness-90"
              />

@ -482,33 +489,91 @@ export default function DepartmentDetail() {
                <div className="max-w-7xl mx-auto px-4 sm:px-6 w-full">
                  <AnimatePresence mode="wait">
                    {active === "expertise" ? (
-                      <motion.div key="expertise-title" initial={{ opacity: 0, x: -50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} transition={{ duration: 0.5 }} className="text-white max-w-4xl">
-                        <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
+                        key="expertise-title"
+                        initial={{ opacity: 0, x: -50 }}
+                        animate={{ opacity: 1, x: 0 }}
+                        exit={{ opacity: 0, x: 50 }}
+                        transition={{ duration: 0.5 }}
+                        className="text-white max-w-4xl"
+                      >
+                        <div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">
+                          {t("department.hero.expertiseBadge") ||
+                            "اختصاص القسم"}
+                        </div>
+                        <h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight mb-3 sm:mb-6">
+                          {t("department.hero.expertiseTitle") ||
+                            "حلول متكاملة للمنشآت الصناعية"}
+                        </h2>
+                        <p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">
+                          {t("department.hero.expertiseSubtitle") ||
+                            "يختص هذا القسم بتقديم حلول متكاملة لتنفيذ المنشآت الصناعية وخطوط الانتاج وصيانتها بمختلف أنواعها، ويشمل:"}
+                        </p>
                      </motion.div>
                    ) : active === "services" ? (
-                      <motion.div key="services-title" initial={{ opacity: 0, x: -50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} transition={{ duration: 0.5 }} className="text-white max-w-4xl">
-                        <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
+                        key="services-title"
+                        initial={{ opacity: 0, x: -50 }}
+                        animate={{ opacity: 1, x: 0 }}
+                        exit={{ opacity: 0, x: 50 }}
+                        transition={{ duration: 0.5 }}
+                        className="text-white max-w-4xl"
+                      >
+                        <div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">
+                          {t("department.hero.servicesBadge") || "خدمات القسم"}
+                        </div>
+                        <h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight mb-3 sm:mb-6">
+                          {t("department.hero.servicesTitle") ||
+                            "خدمات الصيانة للمنشآت وخطوط الإنتاج"}
+                        </h2>
+                        <p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">
+                          {t("department.hero.servicesSubtitle") ||
+                            "يتضمن هذا القسم خدمات الصيانة الشاملة والدورية للمنشآت الصناعية وخطوط الانتاج، وتشمل:"}
+                        </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
+                        key="works-title"
+                        initial={{ opacity: 0, x: -50 }}
+                        animate={{ opacity: 1, x: 0 }}
+                        exit={{ opacity: 0, x: 50 }}
+                        transition={{ duration: 0.5 }}
+                        className="text-white max-w-4xl"
+                      >
+                        <div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">
+                          {t("department.hero.worksBadge") || "الأعمال المنفذة"}
+                        </div>
+                        <h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight mb-3 sm:mb-6">
+                          {t("department.hero.worksTitle") || "الأعمال المنفذة"}
+                        </h2>
+                        <p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">
+                          {t("department.hero.worksSubtitle") ||
+                            "عرض مشروعاتنا وخط الزمن الخاص بالأعمال المنفذة."}
+                        </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
+                        key="default-title"
+                        initial={{ opacity: 0, x: -50 }}
+                        animate={{ opacity: 1, x: 0 }}
+                        exit={{ opacity: 0, x: 50 }}
+                        transition={{ duration: 0.5 }}
+                        className="text-white max-w-4xl"
+                      >
+                        <h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight">
+                          {t("department.sectionTitle") ||
+                            "قسم إنشاء وصيانة المنشآت الصناعية وخطوط الإنتاج"}
+                        </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 }}>
+              <div
+                className="absolute left-1/2 bottom-0 transform -translate-x-1/2 translate-y-1/2 w-full px-4 pointer-events-auto hidden md:block"
+                style={{ zIndex: 99999 }}
+              >
                <AnimatePresence>
                  {!active && (
                    <motion.div
@ -526,7 +591,11 @@ export default function DepartmentDetail() {
                            initial={{ opacity: 0, y: 20 }}
                            animate={{ opacity: 1, y: 0 }}
                            transition={{ delay: index * 0.08, duration: 0.5 }}
-                            whileHover={{ scale: 1.03, y: -6, transition: { duration: 0.2 } }}
+                            whileHover={{
+                              scale: 1.03,
+                              y: -6,
+                              transition: { duration: 0.2 },
+                            }}
                            whileTap={{ scale: 0.97 }}
                            onClick={() => handleButtonClick(b.key)}
                            className="group relative rounded-2xl p-4 sm:p-6 shadow-2xl border border-transparent flex flex-col h-full text-right focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-300 overflow-hidden bg-white/80 backdrop-blur-sm"
@ -538,12 +607,24 @@ export default function DepartmentDetail() {
                                <div className="w-10 h-10 sm:w-14 sm:h-14 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white text-base sm:text-2xl font-extrabold shadow-xl group-hover:scale-110 group-hover:rotate-6 transition-transform duration-300">
                                  {b.id}
                                </div>
-                                <h3 className="text-sm sm:text-base font-bold text-gray-800 group-hover:text-amber-700 transition-colors duration-300">{b.title}</h3>
+                                <h3 className="text-sm sm:text-base font-bold text-gray-800 group-hover:text-amber-700 transition-colors duration-300">
+                                  {b.title}
+                                </h3>
                              </div>
                              <p className="text-xs sm:text-sm text-gray-600 mt-auto flex items-center gap-2 group-hover:text-amber-600 transition-colors duration-300">
-                                <span>انقر للاطّلاع على التفاصيل</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"/>
+                                <span>{t("department.clickForDetails")}</span>
+                                <svg
+                                  className="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-2 transition-transform duration-300"
+                                  fill="none"
+                                  stroke="currentColor"
+                                  viewBox="0 0 24 24"
+                                >
+                                  <path
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    strokeWidth="2.5"
+                                    d="M15 19l-7-7 7-7"
+                                  />
                                </svg>
                              </p>
                            </div>
@ -556,8 +637,16 @@ export default function DepartmentDetail() {
              </div>

              <div className="absolute bottom-0 left-0 right-0 z-10">
-                <svg className="w-full h-12 sm:h-16 md:h-24" viewBox="0 0 1200 120" preserveAspectRatio="none">
-                  <path d="M0,0 C300,80 900,80 1200,0 L1200,120 L0,120 Z" fill="#ffffff" opacity="1"/>
+                <svg
+                  className="w-full h-12 sm:h-16 md:h-24"
+                  viewBox="0 0 1200 120"
+                  preserveAspectRatio="none"
+                >
+                  <path
+                    d="M0,0 C300,80 900,80 1200,0 L1200,120 L0,120 Z"
+                    fill="#ffffff"
+                    opacity="1"
+                  />
                </svg>
              </div>
            </motion.div>
@ -565,34 +654,154 @@ export default function DepartmentDetail() {
        </div>
      </section>

+      <div className="block md:hidden w-full max-w-7xl mx-auto px-4 sm:px-6 py-6">
+        <AnimatePresence mode="wait">
+          {!active && (
+            <motion.div
+              key="floating-buttons-mobile"
+              initial={{ opacity: 0, y: 6 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: 6 }}
+              transition={{ duration: 0.4 }}
+            >
+              <div className="grid grid-cols-1 gap-3">
+                {buttons.map((b, index) => (
+                  <motion.button
+                    key={b.id}
+                    initial={{ opacity: 0, y: 10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ delay: index * 0.05, duration: 0.35 }}
+                    whileHover={{ scale: 1.02 }}
+                    onClick={() => handleButtonClick(b.key)}
+                    className="group relative rounded-2xl p-3 shadow-md border border-transparent flex items-center gap-3 text-right focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-200 overflow-hidden bg-white/90"
+                  >
+                    <div className="w-10 h-10 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white text-base font-extrabold shadow">
+                      {b.id}
+                    </div>
+                    <div className="flex-1">
+                      <h3 className="text-sm font-bold text-gray-800">
+                        {b.title}
+                      </h3>
+                      <p className="text-xs text-gray-600 mt-1">
+                        {t("department.clickForDetails")}
+                      </p>
+                    </div>
+                    <svg
+                      className="w-5 h-5 text-amber-500"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth="2.5"
+                        d="M15 19l-7-7 7-7"
+                      />
+                    </svg>
+                  </motion.button>
+                ))}
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+
      <section className="max-w-7xl mx-auto px-4 sm:px-6 md:px-6 -mt-6 md:-mt-8 relative z-20">
        <AnimatePresence mode="wait">
          {!active ? (
-            <motion.div key="buttons-spacer" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.25 }} className="h-0" />
+            <motion.div
+              key="buttons-spacer"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.25 }}
+              className="h-0"
+            />
          ) : active === "works" ? (
-            <motion.div key="timeline-view" initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }} transition={{ duration: 0.45 }} className="w-full">
-              <motion.button initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: 0.15, duration: 0.45 }} onClick={() => setActive(null)} whileHover={{ x: 8 }} className="inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 sm:mb-8 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2 mr-0 md:-mr-4">
-                <svg className="w-5 h-5 sm:w-6 sm:h-6 transition-transform group-hover:translate-x-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
+            <motion.div
+              key="timeline-view"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -10 }}
+              transition={{ duration: 0.45 }}
+              className="w-full"
+            >
+              <motion.button
+                initial={{ opacity: 0, x: 20 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ delay: 0.15, duration: 0.45 }}
+                onClick={() => setActive(null)}
+                whileHover={{ x: 8 }}
+                className="inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 sm:mb-8 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2 mr-0 md:-mr-4"
+              >
+                <svg
+                  className="w-5 h-5 sm:w-6 sm:h-6 transition-transform group-hover:translate-x-2"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2.5"
+                    d="M15 19l-7-7 7-7"
+                  />
                </svg>
-                <span>العودة للقائمة الرئيسية</span>
+                <span>{t("department.backToMenu")}</span>
              </motion.button>

-              <div style={{ position: 'relative', left: '50%', right: '50%', marginLeft: '-50vw', marginRight: '-50vw', width: '100vw' }}>
-                <ProjectsTimeline projects={defaultProjects} plain={true} />
+              <div
+                style={{
+                  position: "relative",
+                  left: "50%",
+                  right: "50%",
+                  marginLeft: "-50vw",
+                  marginRight: "-50vw",
+                  width: "100vw",
+                }}
+              >
+                <ProjectsTimeline
+                  projects={defaultProjectsTranslated}
+                  plain={true}
+                />
              </div>
            </motion.div>
          ) : (
-            <motion.div key="details-view" initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -20 }} transition={{ duration: 0.45 }} className="w-full">
-              <motion.button initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: 0.08, duration: 0.45 }} onClick={() => setActive(null)} whileHover={{ x: 8 }} className="inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 sm:mb-8 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2 mr-0 md:-mr-4">
-                <svg className="w-5 h-5 sm:w-6 sm:h-6 transition-transform group-hover:translate-x-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
+            <motion.div
+              key="details-view"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -20 }}
+              transition={{ duration: 0.45 }}
+              className="w-full"
+            >
+              <motion.button
+                initial={{ opacity: 0, x: 20 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ delay: 0.08, duration: 0.45 }}
+                onClick={() => setActive(null)}
+                whileHover={{ x: 8 }}
+                className="inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 sm:mb-8 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2 mr-0 md:-mr-4"
+              >
+                <svg
+                  className="w-5 h-5 sm:w-6 sm:h-6 transition-transform group-hover:translate-x-2"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2.5"
+                    d="M15 19l-7-7 7-7"
+                  />
                </svg>
-                <span>العودة للقائمة الرئيسية</span>
+                <span>{t("department.backToMenu")}</span>
              </motion.button>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
-                {displayItems.map((item, index) => (
+                {displayItems.map((text, index) => (
                  <motion.div
                    key={index}
                    initial={{ opacity: 0, y: 30 }}
@ -603,19 +812,51 @@ export default function DepartmentDetail() {
                  >
                    <div className="relative flex items-start gap-3 sm:gap-6 rounded-2xl p-3 sm:p-6 border-r-4 border-amber-400 hover:border-orange-500 hover:shadow-xl transition-all duration-300 bg-white">
                      <div className="relative flex-shrink-0">
-                        <motion.div whileHover={{ rotate: 360, scale: 1.08 }} transition={{ duration: 0.6 }} className="w-10 h-10 sm:w-14 sm:h-14 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white shadow-lg group-hover:shadow-2xl transition-shadow duration-300 relative z-10">
-                          {item.icon}
+                        <motion.div
+                          whileHover={{ rotate: 360, scale: 1.08 }}
+                          transition={{ duration: 0.6 }}
+                          className="w-10 h-10 sm:w-14 sm:h-14 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white shadow-lg group-hover:shadow-2xl transition-shadow duration-300 relative z-10"
+                        >
+                          <svg
+                            className="w-6 h-6"
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              strokeWidth="2.5"
+                              d="M15 19l-7-7 7-7"
+                            />
+                          </svg>
                        </motion.div>
                        <div className="absolute inset-0 bg-amber-500 rounded-xl blur-xl opacity-0 group-hover:opacity-30 transition-opacity duration-300" />
                      </div>

                      <div className="flex-1 pt-1">
-                        <p className="text-xs sm:text-sm md:text-base text-gray-800 leading-relaxed font-medium group-hover:text-gray-900 transition-colors duration-300">{item.text}</p>
+                        <p className="text-xs sm:text-sm md:text-base text-gray-800 leading-relaxed font-medium group-hover:text-gray-900 transition-colors duration-300">
+                          {text}
+                        </p>
                      </div>

-                      <motion.div initial={{ opacity: 0, x: -8 }} whileHover={{ opacity: 1, x: 0 }} className="flex-shrink-0 text-amber-500 opacity-0 group-hover:opacity-100 transition-all duration-300">
-                        <svg className="w-4 h-4 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
+                      <motion.div
+                        initial={{ opacity: 0, x: -8 }}
+                        whileHover={{ opacity: 1, x: 0 }}
+                        className="flex-shrink-0 text-amber-500 opacity-0 group-hover:opacity-100 transition-all duration-300"
+                      >
+                        <svg
+                          className="w-4 h-4 sm:w-6 sm:h-6"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth="2.5"
+                            d="M15 19l-7-7 7-7"
+                          />
                        </svg>
                      </motion.div>
                    </div>
@ -623,11 +864,21 @@ export default function DepartmentDetail() {
                ))}
              </div>

-              <motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} transition={{ delay: 0.6, duration: 0.45 }} className="mt-8 sm:mt-12 pt-6 border-t-2 border-gray-100 text-center">
+              <motion.div
+                initial={{ opacity: 0, scale: 0.95 }}
+                animate={{ opacity: 1, scale: 1 }}
+                transition={{ delay: 0.6, duration: 0.45 }}
+                className="mt-8 sm:mt-12 pt-6 border-t-2 border-gray-100 text-center"
+              >
                <div className="inline-flex items-center gap-2 sm:gap-3 text-gray-500">
                  <div className="w-2 h-2 bg-amber-500 rounded-full animate-pulse" />
-                  <span className="text-xs sm:text-sm font-medium">خدمات احترافية متكاملة</span>
-                  <div className="w-2 h-2 bg-orange-500 rounded-full animate-pulse" style={{ animationDelay: "0.5s" }} />
+                  <span className="text-xs sm:text-sm font-medium">
+                    Professional integrated services
+                  </span>
+                  <div
+                    className="w-2 h-2 bg-orange-500 rounded-full animate-pulse"
+                    style={{ animationDelay: "0.5s" }}
+                  />
                </div>
              </motion.div>
            </motion.div>
@ -636,4 +887,4 @@ export default function DepartmentDetail() {
      </section>
    </div>
  );
-}
+}
--- a/src/Components/Sections/DepartmentDetail2/DepartmentDetail2.jsx
+++ b/src/Components/Sections/DepartmentDetail2/DepartmentDetail2.jsx
@ -1,16 +1,23 @@
+// DepartmentDetail2.jsx
 import React, { useState, useEffect, useRef, useCallback } from "react";
 import { motion, AnimatePresence } from "framer-motion";
+import { useTranslation } from "react-i18next";
+
 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";

+/**
+ * ProjectsTimeline (لم يتغير في الهيكل - كامل الوظائف والـ CSS كما في ملفك الأصلي)
+ */
 function ProjectsTimeline({
  projects,
-  mainTitle = "المشاريع المنفذة",
-  subtitle = "خط زمني شامل للأعمال والإنجازات",
+  mainTitle,
+  subtitle,
  plain = false,
 }) {
+  const { t } = useTranslation();
  const wrapperRef = useRef(null);
  const scrollRef = useRef(null);
  const svgRef = useRef(null);
@ -185,19 +192,20 @@ function ProjectsTimeline({
      if (scrollContainer) scrollContainer.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", onResize);
    };
-  }, [itemsRefs, drawCurvedLines, setActiveItem]);
+  }, [itemsRefs, drawCurvedLines, setActiveItem, currentIndex]);

  useEffect(() => {
    setTimeout(() => drawCurvedLines(), 120);
  }, [itemsRefs, drawCurvedLines, projects.length]);

+  // CSS (نُقل كما في الملف الأصلي لضمان عدم تغيير الشكل)
  const css = `
    :root{--bg-start:#0b1220;--bg-mid:#102033;--bg-end:#2b3a4a;--accent:#f97316;--muted:#9ca3af}
-    .projects-timeline-root { direction: rtl; min-height: 100%; }
+    .projects-timeline-root { direction: rtl; min-height: 100%; overflow-y: hidden; }
    .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; }
+    .svg-container { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:0; max-width:100%; }
    .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;
@ -206,7 +214,7 @@ function ProjectsTimeline({
    .timeline-item.active .year-circle { width:clamp(110px,14vw,200px); height:clamp(110px,14vw,200px); font-size:clamp(18px,2.2vw,28px); box-shadow:0 18px 60px rgba(15,23,42,.5), inset 0 2px 6px rgba(255,255,255,0.04); border-color: rgba(249,115,22,0.18); transform: translateY(-15px) scale(1.03); }
    .timeline-item.active .year-circle::after { opacity:1; inset:-12px; animation: ripple 2s ease-out infinite; }
    @keyframes ripple { 0%{ transform: scale(1); opacity:.6;} 100%{ transform: scale(1.25); opacity:0;} }
-    .project-card { margin-top:40px; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)); border-radius:18px; padding:26px; min-width:320px; max-width:420px; box-shadow:0 12px 40px rgba(2,6,23,.45); opacity:.9; transform: scale(.98) translateY(8px); transition:all .6s cubic-bezier(.34,1.56,.64,1); border:1px solid rgba(255,255,255,.06); position:relative; overflow:hidden; backdrop-filter: blur(8px) saturate(120%); }
+    .project-card { margin-top:40px; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)); border-radius:18px; padding:26px; width: clamp(240px, 40vw, 420px); max-width:92vw; 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; }
@ -219,37 +227,40 @@ function ProjectsTimeline({
    .scroll-btn:active:not(:disabled){ transform: scale(1.05); }
    .scroll-btn:disabled { opacity:.4; cursor:not-allowed; }
    @media (max-width:768px){
-      .timeline-wrapper { padding:clamp(36px,6vw,80px) 24px; }
-      .timeline-item { margin:0 18px; }
-      .year-circle { width:90px; height:90px; font-size:15px; }
-      .timeline-item.active .year-circle { width:120px; height:120px; font-size:19px; }
-      .project-card { min-width:260px; max-width:300px; padding:20px; }
-      .project-text { font-size:13px; }
-      .scroll-btn { width:48px; height:48px; font-size:20px; }
+      .timeline-wrapper { padding:clamp(18px,4vw,36px) 16px; }
+      .timeline-item { margin:0 12px; }
+      .year-circle { width:64px !important; height:64px !important; font-size:13px !important; }
+      .timeline-item.active .year-circle { width:96px !important; height:96px !important; font-size:16px !important; transform: translateY(-10px) scale(1.02); }
+      .project-card { width: clamp(160px, 72vw, 300px); padding:16px; margin-top:18px; }
+      .project-text { font-size:13px; line-height:1.6; }
+      .scroll-btn { width:44px; height:44px; font-size:18px; }
+      .scroll-indicator { position:relative; bottom:auto; left:auto; transform:none; margin:12px auto 0; justify-content:center; }
+      .projects-timeline-root { overflow-y: hidden; }
    }

    .projects-timeline-root.plain-bleed .timeline-wrapper { padding:clamp(48px,6vw,120px) 24px; }
    .projects-timeline-root.plain-bleed .project-card { max-width:420px; }
  `;

-  const mainStyle = plain ? { background: "#ffffff", paddingBottom: 0 } : { background: "linear-gradient(135deg, var(--bg-start) 0%, var(--bg-mid) 30%, var(--bg-end) 60%)" };
+  const computedMainTitle = mainTitle ?? t("departmentDetail2.hero.defaultTitle");
+  const computedSubtitle = subtitle ?? t("departmentDetail2.hero.expertiseSubtitle");

  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}>
+      <main className="w-full h-full overflow-hidden" style={plain ? { background: "#ffffff", paddingBottom: 0 } : { background: "linear-gradient(135deg, var(--bg-start) 0%, var(--bg-mid) 30%, var(--bg-end) 60%)" }}>
        <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}
+                {computedMainTitle}
              </h1>
-              <p id="subtitle" className={`${plain ? "text-base text-gray-700" : "text-xl text-white opacity-90"}`}>{subtitle}</p>
+              <p id="subtitle" className={`${plain ? "text-base text-gray-700" : "text-xl text-white opacity-90"}`}>{computedSubtitle}</p>
            </header>
          )}

          <div className="flex-1 relative">
-            <div className="timeline-scroll h-full" id="timeline-scroll" ref={scrollRef} aria-label="خط زمني قابل للتمرير">
+            <div className="timeline-scroll h-full" id="timeline-scroll" ref={scrollRef} aria-label={t("departmentDetail2.scroll.ariaLabel")}>
              <div className="timeline-wrapper" id="timeline-wrapper" ref={wrapperRef}>
                <svg className="svg-container" id="timeline-svg" ref={svgRef} />
                {projects.map((project, idx) => (
@ -279,8 +290,8 @@ function ProjectsTimeline({
            </div>

            <div className="scroll-indicator">
-              <button className="scroll-btn" aria-label="السابق" onClick={onPrev} disabled={currentIndex === 0} title="السابق">◄</button>
-              <button className="scroll-btn" aria-label="التالي" onClick={onNext} disabled={currentIndex === projects.length - 1} title="التالي">►</button>
+              <button className="scroll-btn" aria-label={t("departmentDetail2.scroll.prev")} onClick={onPrev} disabled={currentIndex === 0} title={t("departmentDetail2.scroll.prev")}>◄</button>
+              <button className="scroll-btn" aria-label={t("departmentDetail2.scroll.next")} onClick={onNext} disabled={currentIndex === projects.length - 1} title={t("departmentDetail2.scroll.next")}>►</button>
            </div>
          </div>
        </div>
@ -289,20 +300,39 @@ function ProjectsTimeline({
  );
 }

-const defaultProjects = [
-  { year: "2016", items: ["تنفيذ أبنية خدمية وإدارية ومشاريع إعادة تأهيل."] },
-  { year: "2017", items: ["إنشاء مدينة معارض ومكاتب سيارات (200) مكتب - المدينة الصناعية اللاذقية"] },
-  { year: "2023", items: ["تصميم وتنفيذ مشروع 1000 شقة سكنية (مساكن الإيواء) بإشراف الهلال الأحمر الإماراتي"] },
-];
-
+/**
+ * DepartmentDetail2 — الواجهة الرئيسية
+ * يحافظ الشكل الأصلي بالكامل، مع استبدال كل النصوص بمفاتيح الترجمة.
+ */
 export default function DepartmentDetail2() {
-  const [active, setActive] = useState(null);
+  const { t, i18n } = useTranslation();
+  const isRTL = i18n.dir && i18n.dir() === "rtl";

+  // نحاول أخذ قوائم المشاريع/الميزات من ملف الترجمة، وإن لم توجد نستخدم الافتراضي
+  const defaultProjects =
+    t("departmentDetail2.projectsTimeline.defaultProjects", { returnObjects: true }) || [
+      { year: "2016", items: ["تنفيذ أبنية خدمية وإدارية ومشاريع إعادة تأهيل."] },
+      { year: "2017", items: ["إنشاء مدينة معارض ومكاتب سيارات (200) مكتب - المدينة الصناعية اللاذقية"] },
+      { year: "2023", items: ["تصميم وتنفيذ مشروع 1000 شقة سكنية (مساكن الإيواء) بإشراف الهلال الأحمر الإماراتي"] },
+    ];
+
+  // عناوين الأزرار من الترجمة
  const buttons = [
-    { id: 1, title: "اختصاص القسم", key: "expertise" },
-    { id: 3, title: "الاعمال المنفذة", key: "works" },
+    { id: 1, title: t("departmentDetail2.buttons.1"), key: "expertise" },
+    { id: 3, title: t("departmentDetail2.buttons.3"), key: "works" },
  ];

+  // نصوص الخبرات من الترجمة (مصفوفة نصية)
+  const expertiseTexts = t("departmentDetail2.expertiseItems", { returnObjects: true }) || [
+    "تنفيذ المجمعات السكنية والمناطق الخدمية.",
+    ". الأبنية الإدارية والتجارية.",
+    ". الأبنية مسبقة الصنع والساندويچ بانل والهنغارات والكرفانات المتنقلة وغرف التبريد",
+    "الأعمال المدنية والمعمارية المتكاملة.",
+    ". الإكساء الداخلي والخارجي.",
+    ". الالتزام بمعايير الجودة والسلامة المهنية في التنفيذ.",
+  ];
+
+  // نُعيد بناء عناصر الخبرة مع الاحتفاظ بالأيقونات كما كانت في الأصل
  const expertiseItems = [
    {
      icon: (
@ -310,7 +340,6 @@ export default function DepartmentDetail2() {
          <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: (
@ -318,7 +347,6 @@ export default function DepartmentDetail2() {
          <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: (
@ -326,7 +354,6 @@ export default function DepartmentDetail2() {
          <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: (
@ -334,7 +361,6 @@ export default function DepartmentDetail2() {
          <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: (
@ -342,7 +368,6 @@ export default function DepartmentDetail2() {
          <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: (
@ -350,9 +375,10 @@ export default function DepartmentDetail2() {
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M13 10V3L4 14h7v7l9-11h-7z"/>
        </svg>
      ),
-      text: ". الالتزام بمعايير الجودة والسلامة المهنية في التنفيذ."
-    }
-  ];
+    },
+  ].map((item, idx) => ({ ...item, text: expertiseTexts[idx] || "" }));
+
+  const [active, setActive] = useState(null);

  const displayItems = expertiseItems;
  const heroImage = active === "expertise" ? d12 : active === "works" ? d13 : d7;
@ -362,7 +388,8 @@ export default function DepartmentDetail2() {
  };

  return (
-    <div dir="rtl" className="w-full min-h-screen bg-white pb-12">
+    // نستخدم dir من i18n حتى يتغير اتجاه الوثيقة تلقائياً حسب اللغة
+    <div dir={i18n.dir()} className="w-full min-h-screen bg-white pb-12">
      <section className="relative">
        <div className="w-full">
          <AnimatePresence mode="wait">
@ -376,7 +403,7 @@ export default function DepartmentDetail2() {
            >
              <img
                src={heroImage}
-                alt="مرافق سكنية وخدمية"
+                alt={t("departmentDetail2.hero.heroAlt")}
                className="absolute inset-0 w-full h-full object-cover object-center z-0 brightness-90"
              />

@ -391,27 +418,27 @@ export default function DepartmentDetail2() {
                <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 key="expertise-title" initial={{ opacity: 0, x: -50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} transition={{ duration: 0.5 }} className={`text-white max-w-4xl ${isRTL ? '' : ''}`}>
+                        <div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">{t("departmentDetail2.hero.expertiseBadge")}</div>
+                        <h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight mb-3 sm:mb-6">{t("departmentDetail2.hero.expertiseTitle")}</h2>
+                        <p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">{t("departmentDetail2.hero.expertiseSubtitle")}</p>
                      </motion.div>
                    ) : active === "works" ? (
                      <motion.div key="works-title" initial={{ opacity: 0, x: -50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} transition={{ duration: 0.5 }} className="text-white max-w-4xl">
-                        <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>
+                        <div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">{t("departmentDetail2.hero.worksBadge")}</div>
+                        <h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight mb-3 sm:mb-6">{t("departmentDetail2.hero.worksTitle")}</h2>
+                        <p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">{t("departmentDetail2.hero.worksSubtitle")}</p>
                      </motion.div>
                    ) : (
                      <motion.div key="default-title" initial={{ opacity: 0, x: -50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} transition={{ duration: 0.5 }} className="text-white max-w-4xl">
-                        <h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight">قسم تنفيذ المرافق السكنيه والخدمية</h2>
+                        <h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight">{t("departmentDetail2.hero.defaultTitle")}</h2>
                      </motion.div>
                    )}
                  </AnimatePresence>
                </div>
              </div>

-              <div className="absolute left-1/2 bottom-0 transform -translate-x-1/2 translate-y-1/2 w-full px-4 pointer-events-auto" style={{ zIndex: 99999 }}>
+              <div className="absolute left-1/2 bottom-0 transform -translate-x-1/2 translate-y-1/2 w-full px-4 pointer-events-auto hidden md:block" style={{ zIndex: 99999 }}>
                <AnimatePresence>
                  {!active && (
                    <motion.div
@ -432,9 +459,9 @@ export default function DepartmentDetail2() {
                            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"
+                            className={`group relative rounded-2xl p-4 sm:p-6 shadow-2xl border border-transparent flex flex-col h-full ${isRTL ? 'text-right' : 'text-left'} focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-300 overflow-hidden bg-white/80 backdrop-blur-sm`}
                          >
-                            <div className="absolute top-0 right-0 w-20 h-20 sm:w-24 sm:h-24 bg-gradient-to-br from-amber-500/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-20 h-20 sm:w-24 sm:h-24 bg-gradient-to-br from-amber-500 to-orange-600 rounded-full -mr-12 -mt-12 group-hover:scale-125 transition-transform duration-500" />
                            <div className="absolute top-0 right-0 w-2 h-0 bg-gradient-to-b from-amber-500 to-orange-600 rounded-r-2xl group-hover:h-full transition-all duration-500" />
                            <div className="relative z-10">
                              <div className="flex items-center gap-3 mb-3">
@ -444,7 +471,7 @@ export default function DepartmentDetail2() {
                                <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>
+                                <span>{t("departmentDetail2.buttons.clickForDetails")}</span>
                                <svg className="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-2 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
                                </svg>
@ -468,17 +495,56 @@ export default function DepartmentDetail2() {
        </div>
      </section>

+      <div className="block md:hidden w-full max-w-7xl mx-auto px-4 sm:px-6 py-6">
+        <AnimatePresence mode="wait">
+          {!active && (
+            <motion.div
+              key="floating-buttons-mobile"
+              initial={{ opacity: 0, y: 6 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: 6 }}
+              transition={{ duration: 0.4 }}
+            >
+              <div className="grid grid-cols-1 gap-3">
+                {buttons.map((b, index) => (
+                  <motion.button
+                    key={b.id}
+                    initial={{ opacity: 0, y: 10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ delay: index * 0.05, duration: 0.35 }}
+                    whileHover={{ scale: 1.02 }}
+                    onClick={() => handleButtonClick(b.key)}
+                    className={`group relative rounded-2xl p-3 shadow-md border border-transparent flex items-center gap-3 ${isRTL ? 'text-right' : 'text-left'} focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-200 overflow-hidden bg-white/90`}
+                  >
+                    <div className="w-10 h-10 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white text-base font-extrabold shadow">
+                      {b.id}
+                    </div>
+                    <div className="flex-1">
+                      <h3 className="text-sm font-bold text-gray-800">{b.title}</h3>
+                      <p className="text-xs text-gray-600 mt-1">{t("departmentDetail2.buttons.clickForDetails")}</p>
+                    </div>
+                    <svg className="w-5 h-5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
+                    </svg>
+                  </motion.button>
+                ))}
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+
      <section className="max-w-7xl mx-auto px-4 sm:px-6 md:px-6 -mt-6 md:-mt-8 relative z-20">
        <AnimatePresence mode="wait">
          {!active ? (
            <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">
+              <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 ${isRTL ? '' : ''}`}>
                <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>
+                <span>{t("departmentDetail2.buttons.backToMenu")}</span>
              </motion.button>

              <div style={{ position: 'relative', left: '50%', right: '50%', marginLeft: '-50vw', marginRight: '-50vw', width: '100vw' }}>
@ -487,11 +553,11 @@ export default function DepartmentDetail2() {
            </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">
+              <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 ${isRTL ? '' : ''}`}>
                <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>
+                <span>{t("departmentDetail2.buttons.backToMenu")}</span>
              </motion.button>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
@ -506,7 +572,7 @@ export default function DepartmentDetail2() {
                  >
                    <div className="relative flex items-start gap-3 sm:gap-6 rounded-2xl p-3 sm:p-6 border-r-4 border-amber-400 hover:border-orange-500 hover:shadow-xl transition-all duration-300 bg-white">
                      <div className="relative flex-shrink-0">
-                        <motion.div whileHover={{ rotate: 360, scale: 1.08 }} transition={{ duration: 0.6 }} className="w-10 h-10 sm:w-14 sm:h-14 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white shadow-lg group-hover:shadow-2xl transition-shadow duration-300 relative z-10">
+                        <motion.div whileHover={{ rotate: 360, scale: 1.08 }} transition={{ duration: 0.6 }} className="w-10 h-10 sm:w-14 sm:h-14 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white text-base sm:text-2xl font-extrabold shadow-lg group-hover:shadow-2xl transition-shadow duration-300 relative z-10">
                          {item.icon}
                        </motion.div>
                        <div className="absolute inset-0 bg-amber-500 rounded-xl blur-xl opacity-0 group-hover:opacity-30 transition-opacity duration-300" />
@ -529,7 +595,7 @@ export default function DepartmentDetail2() {
              <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>
+                  <span className="text-xs sm:text-sm font-medium">{t("departmentDetail2.ui.servicesProfessional")}</span>
                  <div className="w-2 h-2 bg-orange-500 rounded-full animate-pulse" style={{ animationDelay: "0.5s" }} />
                </div>
              </motion.div>
--- a/src/Components/Sections/DepartmentDetail3/DepartmentDetail3.jsx
+++ b/src/Components/Sections/DepartmentDetail3/DepartmentDetail3.jsx
@ -0,0 +1,603 @@
+// DepartmentDetail3.jsx
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { useTranslation } from "react-i18next";
+import d14 from "../../../../src/assets/Images/d14.jpg";
+import d15 from "../../../../src/assets/Images/d15.jpg";
+import d16 from "../../../../src/assets/Images/d16.jpg";
+import d7 from "../../../../src/assets/Images/d7.jpeg";
+
+function ProjectsTimeline({
+  projects,
+  mainTitle = "المشاريع المنفذة",
+  subtitle = "خط زمني شامل للأعمال والإنجازات",
+  plain = false,
+  rtl = true, // new prop to control direction
+}) {
+  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 ? "rtl" : "ltr"}; min-height: 100%; overflow-y: hidden; }
+    .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; max-width:100%; }
+    .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; width: clamp(240px, 40vw, 420px); max-width:92vw; 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; text-align: ${rtl ? "right" : "left"}; }
+    .project-text li { margin-bottom:12px; padding-inline: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(${rtl ? "-4px" : "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(18px,4vw,36px) 16px; }
+      .timeline-item { margin:0 12px; }
+      .year-circle { width:64px !important; height:64px !important; font-size:13px !important; }
+      .timeline-item.active .year-circle { width:96px !important; height:96px !important; font-size:16px !important; transform: translateY(-10px) scale(1.02); }
+      .project-card { width: clamp(160px, 72vw, 300px); padding:16px; margin-top:18px; }
+      .project-text { font-size:13px; line-height:1.6; }
+      .scroll-btn { width:44px; height:44px; font-size:18px; }
+      .scroll-indicator { position:relative; bottom:auto; left:auto; transform:none; margin:12px auto 0; justify-content:center; }
+      .projects-timeline-root { overflow-y: hidden; }
+    }
+
+    .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={rtl ? "خط زمني قابل للتمرير" : "Scrollable timeline"}>
+              <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={rtl ? "السابق" : "Previous"} onClick={onPrev} disabled={currentIndex === 0} title={rtl ? "السابق" : "Previous"}>◄</button>
+              <button className="scroll-btn" aria-label={rtl ? "التالي" : "Next"} onClick={onNext} disabled={currentIndex === projects.length - 1} title={rtl ? "التالي" : "Next"}>►</button>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}
+
+const defaultProjectsFallback = [
+  {
+    year: "2019–2022",
+    items: [
+      "صيانة وإعادة تأهيل مراكز خدمة، مباني إقليمية، وغرف الصرافات الآلية لشركتي Syriatel وMTN"
+    ]
+  },
+  {
+    year: "2023",
+    items: [
+      "صيانة منشآت ومبانٍ إدارية لشركات REXOS وSTC"
+    ]
+  }
+];
+
+export default function DepartmentDetail3() {
+  const { t, i18n } = useTranslation();
+  const [active, setActive] = useState(null);
+
+  // detect direction using i18n helper (works with supported languages)
+  const isRTL = typeof i18n.dir === "function" ? i18n.dir() === "rtl" : (i18n.language || "").startsWith("ar");
+  const dir = isRTL ? "rtl" : "ltr";
+
+  const buttons = [
+    { id: 1, title: t("departmentDetail3.buttons.1"), key: "expertise" },
+    { id: 3, title: t("departmentDetail3.buttons.3"), key: "works" },
+  ];
+
+  const expertiseItemsRaw = t("departmentDetail3.expertiseItems", { returnObjects: true });
+  const expertiseItems = Array.isArray(expertiseItemsRaw) && expertiseItemsRaw.length > 0 ? expertiseItemsRaw : [
+    "الصيانة الدورية والطارئة.",
+    "إعادة التأهيل والترميم (أعمال مدنية ومعمارية).",
+    "أعمال الكهرباء والميكانيك وأنظمة التحكم.",
+    "أعمال العزل والحماية.",
+    "الإدارة وصيانة المباني والمنشآت على المدى الطويل.",
+    "الالتزام بمعايير الجودة والسلامة المهنية في التنفيذ."
+  ];
+
+  const displayItems = expertiseItems.map((text, idx) => {
+    const icons = [
+      (
+        <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" key={`i-${idx}-1`}>
+          <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>
+      ),
+      (
+        <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" key={`i-${idx}-2`}>
+          <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>
+      ),
+      (
+        <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" key={`i-${idx}-3`}>
+          <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>
+      ),
+      (
+        <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" key={`i-${idx}-4`}>
+          <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>
+      ),
+      (
+        <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" key={`i-${idx}-5`}>
+          <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>
+      ),
+      (
+        <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" key={`i-${idx}-6`}>
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M13 10V3L4 14h7v7l9-11h-7z"/>
+        </svg>
+      )
+    ];
+
+    const icon = icons[idx % icons.length] || icons[0];
+
+    return { icon, text };
+  });
+
+  const timelineProjectsRaw = t("departmentDetail3.projectsTimeline.defaultProjects", { returnObjects: true });
+  const timelineProjects = Array.isArray(timelineProjectsRaw) && timelineProjectsRaw.length > 0 ? timelineProjectsRaw : defaultProjectsFallback;
+
+  const heroImage = active === null ? d14 : active === "expertise" ? d15 : active === "works" ? d16 : d7;
+
+  const handleButtonClick = (key) => {
+    setActive((prev) => (prev === key ? null : key));
+  };
+
+  return (
+    <div dir={dir} 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={t("departmentDetail3.hero.heroAlt")}
+                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">{t("departmentDetail3.hero.expertiseBadge")}</div>
+                        <h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight mb-3 sm:mb-6">{t("departmentDetail3.hero.expertiseTitle")}</h2>
+                        <p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">{t("departmentDetail3.hero.expertiseSubtitle")}</p>
+                      </motion.div>
+                    ) : active === "works" ? (
+                      <motion.div key="works-title" initial={{ opacity: 0, x: -50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} transition={{ duration: 0.5 }} className="text-white max-w-4xl">
+                        <div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">{t("departmentDetail3.hero.worksBadge")}</div>
+                        <h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight mb-3 sm:mb-6">{t("departmentDetail3.hero.worksTitle")}</h2>
+                        <p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">{t("departmentDetail3.hero.worksSubtitle")}</p>
+                      </motion.div>
+                    ) : (
+                      <motion.div key="default-title" initial={{ opacity: 0, x: -50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} transition={{ duration: 0.5 }} className="text-white max-w-4xl">
+                        <h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight">{t("departmentDetail3.hero.defaultTitle")}</h2>
+                      </motion.div>
+                    )}
+                  </AnimatePresence>
+                </div>
+              </div>
+
+              <div className="absolute left-1/2 bottom-0 transform -translate-x-1/2 translate-y-1/2 w-full px-4 pointer-events-auto hidden md:block" style={{ zIndex: 99999 }}>
+                <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 ${isRTL ? "text-right" : "text-left"} focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-300 overflow-hidden bg-white/80 backdrop-blur-sm`}
+                          >
+                            <div className="absolute top-0 right-0 w-20 h-20 sm:w-24 sm:h-24 bg-gradient-to-br from-amber-500 to-orange-600 rounded-full -mr-12 -mt-12 group-hover:scale-125 transition-transform duration-500" />
+                            <div className="absolute top-0 right-0 w-2 h-0 bg-gradient-to-b from-amber-500 to-orange-600 rounded-r-2xl group-hover:h-full transition-all duration-500" />
+                            <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>{t("departmentDetail3.buttons.clickForDetails")}</span>
+                                <svg className="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-2 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
+                                </svg>
+                              </p>
+                            </div>
+                          </motion.button>
+                        ))}
+                      </div>
+                    </motion.div>
+                  )}
+                </AnimatePresence>
+              </div>
+
+              <div className="absolute bottom-0 left-0 right-0 z-10">
+                <svg className="w-full h-12 sm:h-16 md:h-24" viewBox="0 0 1200 120" preserveAspectRatio="none">
+                  <path d="M0,0 C300,80 900,80 1200,0 L1200,120 L0,120 Z" fill="#ffffff" opacity="1"/>
+                </svg>
+              </div>
+            </motion.div>
+          </AnimatePresence>
+        </div>
+      </section>
+
+      <div className="block md:hidden w-full max-w-7xl mx-auto px-4 sm:px-6 py-6">
+        <AnimatePresence mode="wait">
+          {!active && (
+            <motion.div
+              key="floating-buttons-mobile"
+              initial={{ opacity: 0, y: 6 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: 6 }}
+              transition={{ duration: 0.4 }}
+            >
+              <div className="grid grid-cols-1 gap-3">
+                {buttons.map((b, index) => (
+                  <motion.button
+                    key={b.id}
+                    initial={{ opacity: 0, y: 10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ delay: index * 0.05, duration: 0.35 }}
+                    whileHover={{ scale: 1.02 }}
+                    onClick={() => handleButtonClick(b.key)}
+                    className={`group relative rounded-2xl p-4 shadow-2xl border border-transparent flex flex-col ${isRTL ? "text-right" : "text-left"} focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-300 overflow-hidden bg-white/90`}
+                  >
+                    <div className="absolute top-0 right-0 w-16 h-16 bg-gradient-to-br from-amber-500 to-orange-600 rounded-full -mr-10 -mt-10 group-hover:scale-110 transition-transform duration-300" />
+                    <div className="relative z-10 flex items-center gap-3">
+                      <div className="w-10 h-10 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white text-base font-extrabold shadow">
+                        {b.id}
+                      </div>
+                      <div className="flex-1">
+                        <h3 className="text-sm font-bold text-gray-800">{b.title}</h3>
+                        <p className="text-xs text-gray-600 mt-1">{t("departmentDetail3.buttons.clickForDetails")}</p>
+                      </div>
+                      <svg className="w-5 h-5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
+                      </svg>
+                    </div>
+                  </motion.button>
+                ))}
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+
+      <section className="max-w-7xl mx-auto px-4 sm:px-6 md:px-6 -mt-6 md:-mt-8 relative z-20">
+        <AnimatePresence mode="wait">
+          {!active ? (
+            <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>{t("departmentDetail3.buttons.backToMenu")}</span>
+              </motion.button>
+
+              <div style={{ position: 'relative', left: '50%', right: '50%', marginLeft: '-50vw', marginRight: '-50vw', width: '100vw' }}>
+                <ProjectsTimeline projects={timelineProjects} plain={true} rtl={isRTL} />
+              </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>{t("departmentDetail3.buttons.backToMenu")}</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 ${isRTL ? "text-right" : "text-left"}`}>
+                      <div className="relative flex-shrink-0">
+                        <motion.div whileHover={{ rotate: 360, scale: 1.08 }} transition={{ duration: 0.6 }} className="w-10 h-10 sm:w-14 sm:h-14 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white text-base sm:text-2xl font-extrabold shadow-lg group-hover:shadow-2xl transition-shadow duration-300 relative z-10">
+                          {item.icon}
+                        </motion.div>
+                        <div className="absolute inset-0 bg-amber-500 rounded-xl blur-xl opacity-0 group-hover:opacity-30 transition-opacity duration-300" />
+                      </div>
+
+                      <div className="flex-1 pt-1">
+                        <p className="text-xs sm:text-sm md:text-base text-gray-800 leading-relaxed font-medium group-hover:text-gray-900 transition-colors duration-300">{item.text}</p>
+                      </div>
+
+                      <motion.div initial={{ opacity: 0, x: -8 }} whileHover={{ opacity: 1, x: 0 }} className="flex-shrink-0 text-amber-500 opacity-0 group-hover:opacity-100 transition-all duration-300">
+                        <svg className="w-4 h-4 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
+                        </svg>
+                      </motion.div>
+                    </div>
+                  </motion.div>
+                ))}
+              </div>
+
+              <motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} transition={{ delay: 0.6, duration: 0.45 }} className="mt-8 sm:mt-12 pt-6 border-t-2 border-gray-100 text-center">
+                <div className="inline-flex items-center gap-2 sm:gap-3 text-gray-500">
+                  <div className="w-2 h-2 bg-amber-500 rounded-full animate-pulse" />
+                  <span className="text-xs sm:text-sm font-medium">{t("departmentDetail3.ui.servicesProfessional")}</span>
+                  <div className="w-2 h-2 bg-orange-500 rounded-full animate-pulse" style={{ animationDelay: "0.5s" }} />
+                </div>
+              </motion.div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </section>
+    </div>
+  );
+}
--- a/src/Components/Sections/DepartmentDetail4/DepartmentDetail4.jsx
+++ b/src/Components/Sections/DepartmentDetail4/DepartmentDetail4.jsx
@ -0,0 +1,604 @@
+// DepartmentDetail4.jsx
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { useTranslation } from "react-i18next";
+import d17 from "../../../../src/assets/Images/d17.png";
+import d23 from "../../../../src/assets/Images/d23.jpg";
+import d24 from "../../../../src/assets/Images/d24.png";
+
+/**
+ * ProjectsTimeline: same structure as your original component but supports RTL/LTR via `rtl` prop.
+ */
+function ProjectsTimeline({
+  projects,
+  mainTitle = "المشاريع المنفذة",
+  subtitle = "خط زمني شامل للأعمال والإنجازات",
+  plain = false,
+  rtl = true
+}) {
+  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 ? "rtl" : "ltr"}; 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; flex:0 0 auto; }
+    .year-circle { width:clamp(72px,9vw,150px); height:clamp(72px,9vw,150px); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:clamp(14px,1.6vw,24px); font-weight:700; background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); color:var(--bg-start); box-shadow: 0 6px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.04); transition:all .6s cubic-bezier(.34,1.56,.64,1); cursor:pointer; border:1px solid rgba(255,255,255,0.08); position:relative; z-index:2; backdrop-filter: blur(8px) saturate(120%); background-clip: padding-box; }
+    .year-circle::after { content: ''; position:absolute; inset:-8px; border-radius:50%; border:2px solid rgba(249,115,22,0.08); opacity:0; transition:all .6s ease; }
+    .timeline-item.active .year-circle { width:clamp(110px,14vw,200px); height:clamp(110px,14vw,200px); font-size:clamp(18px,2.2vw,28px); box-shadow:0 18px 60px rgba(15,23,42,.5), inset 0 2px 6px rgba(255,255,255,0.04); border-color: rgba(249,115,22,0.18); transform: translateY(-15px) scale(1.03); }
+    .timeline-item.active .year-circle::after { opacity:1; inset:-12px; animation: ripple 2s ease-out infinite; }
+    @keyframes ripple { 0%{ transform: scale(1); opacity:.6;} 100%{ transform: scale(1.25); opacity:0;} }
+    .project-card { margin-top:40px; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)); border-radius:18px; padding:26px; min-width:320px; max-width:420px; box-shadow:0 12px 40px rgba(2,6,23,.45); opacity:.9; transform: scale(.98) translateY(8px); transition:all .6s cubic-bezier(.34,1.56,.64,1); border:1px solid rgba(255,255,255,.06); position:relative; overflow:hidden; backdrop-filter: blur(8px) saturate(120%); box-sizing: border-box; }
+    .project-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background: linear-gradient(to left, var(--accent), #b91c1c, var(--muted)); opacity:0; transition:opacity .6s ease; }
+    .timeline-item.active .project-card { opacity:1; transform: scale(1) translateY(0); box-shadow:0 28px 80px rgba(2,6,23,.5),0 6px 18px rgba(0,0,0,.08); border-color: rgba(249,115,22,.14); }
+    .timeline-item.active .project-card::before { opacity:1; }
+    .project-text { font-size:15px; line-height:2; color:#0b1220; font-weight:600; text-align: ${rtl ? "right" : "left"}; }
+    .project-text li { margin-bottom:12px; padding-inline: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(${rtl ? "-4px" : "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(18px,4vw,36px) 16px; align-items:flex-start; }
+      .timeline-item { margin:0 12px; }
+      .year-circle { width:64px !important; height:64px !important; font-size:13px !important; }
+      .timeline-item.active .year-circle { width:96px !important; height:96px !important; font-size:16px !important; transform: translateY(-10px) scale(1.02); }
+      .project-card { width: clamp(160px, 72vw, 300px); padding:16px; margin-top:18px; }
+      .project-text { font-size:13px; line-height:1.6; }
+      .scroll-btn { width:44px; height:44px; font-size:18px; }
+      .scroll-indicator { position:relative; bottom:auto; left:auto; transform:none; margin:12px auto 0; justify-content:center; }
+      .projects-timeline-root { overflow-y: hidden; }
+    }
+
+    @media (max-width:420px){
+      .timeline-wrapper { padding:18px 12px; }
+      .timeline-item { margin:0 8px; }
+      .project-card { width: calc(100vw - 56px); max-width:320px; min-width:140px; padding:12px; margin-top:12px; border-radius:14px; }
+      .project-text { font-size:12px; line-height:1.4; }
+      .project-text li { margin-bottom:8px; padding-inline:10px; padding:6px 10px; }
+      .year-circle { width:56px !important; height:56px !important; font-size:12px !important; }
+      .timeline-item.active .year-circle { width:88px !important; height:88px !important; font-size:15px !important; transform: translateY(-8px) scale(1.02); }
+      .svg-container { display:block; }
+      .scroll-indicator { bottom:12px; }
+    }
+
+    .projects-timeline-root.plain-bleed .timeline-wrapper { padding:clamp(48px,6vw,120px) 24px; }
+    .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={rtl ? "خط زمني قابل للتمرير" : "Scrollable timeline"}>
+              <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={rtl ? "السابق" : "Previous"} onClick={onPrev} disabled={currentIndex === 0} title={rtl ? "السابق" : "Previous"}>◄</button>
+              <button className="scroll-btn" aria-label={rtl ? "التالي" : "Next"} onClick={onNext} disabled={currentIndex === projects.length - 1} title={rtl ? "التالي" : "Next"}>►</button>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}
+
+/** defaultProjects used when translations aren't found */
+const defaultProjects = [
+  {
+    year: "2009",
+    items: [
+      "دراسة وإشراف محطة معالجة الغاز الطبيعي في معمل الصهر عدرا 2009",
+      "دراسة وإشراف محطات فصل الغازات في معمل الصهر عدرا 2009"
+    ]
+  },
+  {
+    year: "2022",
+    items: [
+      "الصيانة الدورية والطارئة لمستودعات وقود شركتي Syriatel-MTN في كل سورية من عام 2022 ومستمر الى الآن"
+    ]
+  },
+  {
+    year: "2023",
+    items: ["إنشاء محطة الكيروسين في مطار اللاذقية المدني 2023"]
+  },
+  {
+    year: "2024",
+    items: [
+      "إنشاء مستودع الوقود الاستراتيجي بسعة 1 مليون لتر – ريف دمشق 2024",
+      "الصيانة الدورية والطارئة لمستودع وقود مرفأ طرطوس من عام 2024 ومستمر الى الآن"
+    ]
+  }
+];
+
+export default function DepartmentDetail4() {
+  const { t, i18n } = useTranslation();
+  const [active, setActive] = useState(null);
+
+  // determine direction dynamically
+  const isRTL = typeof i18n.dir === "function" ? i18n.dir() === "rtl" : (i18n.language || "").startsWith("ar");
+  const dir = isRTL ? "rtl" : "ltr";
+
+  const buttons = [
+    { id: 1, title: t("departmentDetail4.buttons.1"), key: "expertise" },
+    { id: 3, title: t("departmentDetail4.buttons.3"), key: "works" }
+  ];
+
+  // get expertise items from translations (array)
+  const expertiseItemsRaw = t("departmentDetail4.expertiseItems", { returnObjects: true });
+  const expertiseItems = Array.isArray(expertiseItemsRaw) && expertiseItemsRaw.length > 0 ? expertiseItemsRaw : [
+    "دراسات إنشاء وتطوير محطات الوقود.",
+    "تنفيذ الأعمال المدنية والميكانيكية والكهربائية وأنظمة التحكم في محطات الوقود.",
+    "صيانة محطات الوقود والمنشآت النفطية دورية وطارئة.",
+    "صيانة المضخات والعدادات ومعايرتها.",
+    "تنظيف والتفتيش الفني وصيانة خزانات الوقود وتقييم عمرها الفني.",
+    "توريد وتركيب التجهيزات المقاومة للانفجار (Explosion Proof).",
+    "الالتزام الصارم بإجراءات السلامة المهنية والصحة والبيئة.",
+    "الجاهزية للعمل على مدار 24/7 في جميع المحافظات.",
+    "تقديم وتركيب أنظمة المراقبة والإنذار المبكر والإطفاء الآلي والتأريض."
+  ];
+
+  const displayItems = expertiseItems.map((text, idx) => {
+    // reuse the same icon set approach (choose icon by index)
+    const icons = [
+      (<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" key={`i-${idx}-1`}><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>),
+      (<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" key={`i-${idx}-2`}><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>),
+      (<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" key={`i-${idx}-3`}><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>),
+      (<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" key={`i-${idx}-4`}><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>),
+      (<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" key={`i-${idx}-5`}><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>)
+    ];
+    const icon = icons[idx % icons.length] || icons[0];
+    return { icon, text };
+  });
+
+  // timeline projects from translations or fallback
+  const timelineProjectsRaw = t("departmentDetail4.projectsTimeline.defaultProjects", { returnObjects: true });
+  const timelineProjects = Array.isArray(timelineProjectsRaw) && timelineProjectsRaw.length > 0 ? timelineProjectsRaw : defaultProjects;
+
+  const heroImage = active === "expertise" ? d23 : active === "works" ? d24 : d17;
+
+  const handleButtonClick = (key) => {
+    setActive((prev) => (prev === key ? null : key));
+  };
+
+  return (
+    <div dir={dir} 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={t("departmentDetail4.hero.heroAlt")}
+                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">{t("departmentDetail4.hero.expertiseBadge")}</div>
+                        <h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight mb-3 sm:mb-6">{t("departmentDetail4.hero.expertiseTitle")}</h2>
+                        <p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">{t("departmentDetail4.hero.expertiseSubtitle")}</p>
+                      </motion.div>
+                    ) : active === "works" ? (
+                      <motion.div key="works-title" initial={{ opacity: 0, x: -50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} transition={{ duration: 0.5 }} className="text-white max-w-4xl">
+                        <div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">{t("departmentDetail4.hero.worksBadge")}</div>
+                        <h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight mb-3 sm:mb-6">{t("departmentDetail4.hero.worksTitle")}</h2>
+                        <p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">{t("departmentDetail4.hero.worksSubtitle")}</p>
+                      </motion.div>
+                    ) : (
+                      <motion.div key="default-title" initial={{ opacity: 0, x: -50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} transition={{ duration: 0.5 }} className="text-white max-w-4xl">
+                        <h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight">{t("departmentDetail4.hero.defaultTitle")}</h2>
+                      </motion.div>
+                    )}
+                  </AnimatePresence>
+                </div>
+              </div>
+
+              <div className="absolute left-1/2 bottom-0 transform -translate-x-1/2 translate-y-1/2 w-full px-4 pointer-events-auto hidden md:block" style={{ zIndex: 99999 }}>
+                <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 ${isRTL ? "text-right" : "text-left"} focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-300 overflow-hidden bg-white/80 backdrop-blur-sm`}
+                          >
+                            <div className="absolute top-0 right-0 w-20 h-20 sm:w-24 sm:h-24 bg-gradient-to-br from-amber-500/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>{t("departmentDetail4.buttons.clickForDetails")}</span>
+                                <svg className="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-2 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
+                                </svg>
+                              </p>
+                            </div>
+                          </motion.button>
+                        ))}
+                      </div>
+                    </motion.div>
+                  )}
+                </AnimatePresence>
+              </div>
+
+              <div className="absolute bottom-0 left-0 right-0 z-10">
+                <svg className="w-full h-12 sm:h-16 md:h-24" viewBox="0 0 1200 120" preserveAspectRatio="none">
+                  <path d="M0,0 C300,80 900,80 1200,0 L1200,120 L0,120 Z" fill="#ffffff" opacity="1"/>
+                </svg>
+              </div>
+            </motion.div>
+          </AnimatePresence>
+        </div>
+      </section>
+
+      <div className="block md:hidden w-full max-w-7xl mx-auto px-4 sm:px-6 py-6">
+        <AnimatePresence mode="wait">
+          {!active && (
+            <motion.div
+              key="floating-buttons-mobile"
+              initial={{ opacity: 0, y: 6 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: 6 }}
+              transition={{ duration: 0.4 }}
+            >
+              <div className="grid grid-cols-1 gap-3">
+                {buttons.map((b, index) => (
+                  <motion.button
+                    key={b.id}
+                    initial={{ opacity: 0, y: 10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ delay: index * 0.05, duration: 0.35 }}
+                    whileHover={{ scale: 1.02 }}
+                    onClick={() => handleButtonClick(b.key)}
+                    className={`group relative rounded-2xl p-3 shadow-md border border-transparent flex items-center gap-3 ${isRTL ? "text-right" : "text-left"} focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-200 overflow-hidden bg-white/90`}
+                  >
+                    <div className="w-10 h-10 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white text-base font-extrabold shadow">
+                      {b.id}
+                    </div>
+                    <div className="flex-1">
+                      <h3 className="text-sm font-bold text-gray-800">{b.title}</h3>
+                      <p className="text-xs text-gray-600 mt-1">{t("departmentDetail4.buttons.clickForDetails")}</p>
+                    </div>
+                    <svg className="w-5 h-5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
+                    </svg>
+                  </motion.button>
+                ))}
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+
+      <section className="max-w-7xl mx-auto px-4 sm:px-6 md:px-6 -mt-6 md:-mt-8 relative z-20">
+        <AnimatePresence mode="wait">
+          {!active ? (
+            <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>{t("departmentDetail4.buttons.backToMenu")}</span>
+              </motion.button>
+
+              <div style={{ position: 'relative', left: '50%', right: '50%', marginLeft: '-50vw', marginRight: '-50vw', width: '100vw' }}>
+                <ProjectsTimeline projects={timelineProjects} plain={true} rtl={isRTL} />
+              </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>{t("departmentDetail4.buttons.backToMenu")}</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 ${isRTL ? "text-right" : "text-left"}`}>
+                      <div className="relative flex-shrink-0">
+                        <motion.div whileHover={{ rotate: 360, scale: 1.08 }} transition={{ duration: 0.6 }} className="w-10 h-10 sm:w-14 sm:h-14 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white text-base sm:text-2xl font-extrabold shadow-lg group-hover:shadow-2xl transition-shadow duration-300 relative z-10">
+                          {item.icon}
+                        </motion.div>
+                        <div className="absolute inset-0 bg-amber-500 rounded-xl blur-xl opacity-0 group-hover:opacity-30 transition-opacity duration-300" />
+                      </div>
+
+                      <div className="flex-1 pt-1">
+                        <p className="text-xs sm:text-sm md:text-base text-gray-800 leading-relaxed font-medium group-hover:text-gray-900 transition-colors duration-300">{item.text}</p>
+                      </div>
+
+                      <motion.div initial={{ opacity: 0, x: -8 }} whileHover={{ opacity: 1, x: 0 }} className="flex-shrink-0 text-amber-500 opacity-0 group-hover:opacity-100 transition-all duration-300">
+                        <svg className="w-4 h-4 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
+                        </svg>
+                      </motion.div>
+                    </div>
+                  </motion.div>
+                ))}
+              </div>
+
+              <motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} transition={{ delay: 0.6, duration: 0.45 }} className="mt-8 sm:mt-12 pt-6 border-t-2 border-gray-100 text-center">
+                <div className="inline-flex items-center gap-2 sm:gap-3 text-gray-500">
+                  <div className="w-2 h-2 bg-amber-500 rounded-full animate-pulse" />
+                  <span className="text-xs sm:text-sm font-medium">{t("departmentDetail4.ui.servicesProfessional")}</span>
+                  <div className="w-2 h-2 bg-orange-500 rounded-full animate-pulse" style={{ animationDelay: "0.5s" }} />
+                </div>
+              </motion.div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </section>
+    </div>
+  );
+}
--- a/src/Components/Sections/DepartmentDetail5/DepartmentDetail5.jsx
+++ b/src/Components/Sections/DepartmentDetail5/DepartmentDetail5.jsx
@ -0,0 +1,623 @@
+// DepartmentDetail5.jsx
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { useTranslation } from "react-i18next";
+import d18 from "../../../../src/assets/Images/d18.jpg";
+import d25 from "../../../../src/assets/Images/d25.jpeg";
+import d26 from "../../../../src/assets/Images/d26.jpeg";
+
+/**
+ * ProjectsTimeline: same logic as original, accepts rtl prop to flip text-align and small behaviors.
+ */
+function ProjectsTimeline({
+  projects,
+  mainTitle = "المشاريع المنفذة",
+  subtitle = "خط زمني شامل للأعمال والإنجازات",
+  plain = false,
+  rtl = true
+}) {
+  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 ? "rtl" : "ltr"}; 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; flex:0 0 auto; }
+    .year-circle { width:clamp(72px,9vw,150px); height:clamp(72px,9vw,150px); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:clamp(14px,1.6vw,24px); font-weight:700; background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); color:var(--bg-start); box-shadow: 0 6px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.04); transition:all .6s cubic-bezier(.34,1.56,.64,1); cursor:pointer; border:1px solid rgba(255,255,255,0.08); position:relative; z-index:2; backdrop-filter: blur(8px) saturate(120%);
+      background-clip: padding-box;
+    }
+    .year-circle::after { content: ''; position:absolute; inset:-8px; border-radius:50%; border:2px solid rgba(249,115,22,0.08); opacity:0; transition:all .6s ease; }
+    .timeline-item.active .year-circle { width:clamp(110px,14vw,200px); height:clamp(110px,14vw,200px); font-size:clamp(18px,2.2vw,28px); box-shadow:0 18px 60px rgba(15,23,42,.5), inset 0 2px 6px rgba(255,255,255,0.04); border-color: rgba(249,115,22,0.18); transform: translateY(-15px) scale(1.03); }
+    .timeline-item.active .year-circle::after { opacity:1; inset:-12px; animation: ripple 2s ease-out infinite; }
+    @keyframes ripple { 0%{ transform: scale(1); opacity:.6;} 100%{ transform: scale(1.25); opacity:0;} }
+    .project-card { margin-top:40px; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)); border-radius:18px; padding:26px; min-width:320px; max-width:420px; box-shadow:0 12px 40px rgba(2,6,23,.45); opacity:.9; transform: scale(.98) translateY(8px); transition:all .6s cubic-bezier(.34,1.56,.64,1); border:1px solid rgba(255,255,255,.06); position:relative; overflow:hidden; backdrop-filter: blur(8px) saturate(120%); box-sizing: border-box; }
+    .project-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background: linear-gradient(to left, var(--accent), #b91c1c, var(--muted)); opacity:0; transition:opacity .6s ease; }
+    .timeline-item.active .project-card { opacity:1; transform: scale(1) translateY(0); box-shadow:0 28px 80px rgba(2,6,23,.5),0 6px 18px rgba(0,0,0,.08); border-color: rgba(249,115,22,.14); }
+    .timeline-item.active .project-card::before { opacity:1; }
+    .project-text { font-size:15px; line-height:2; color:#0b1220; font-weight:600; text-align: ${rtl ? "right" : "left"}; }
+    .project-text li { margin-bottom:12px; padding-inline: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(${rtl ? "-4px" : "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(18px,4vw,36px) 16px; align-items:flex-start; }
+      .timeline-item { margin:0 12px; }
+      .year-circle { width:64px !important; height:64px !important; font-size:13px !important; }
+      .timeline-item.active .year-circle { width:96px !important; height:96px !important; font-size:16px !important; transform: translateY(-10px) scale(1.02); }
+      .project-card { width: clamp(160px, 72vw, 300px); padding:16px; margin-top:18px; }
+      .project-text { font-size:13px; line-height:1.6; }
+      .scroll-btn { width:44px; height:44px; font-size:18px; }
+      .scroll-indicator { position:relative; bottom:auto; left:auto; transform:none; margin:12px auto 0; justify-content:center; }
+      .projects-timeline-root { overflow-y: hidden; }
+    }
+
+    @media (max-width:420px){
+      .timeline-wrapper { padding:18px 12px; }
+      .timeline-item { margin:0 8px; }
+      .project-card { width: calc(100vw - 56px); max-width:320px; min-width:140px; padding:12px; margin-top:12px; border-radius:14px; }
+      .project-text { font-size:12px; line-height:1.4; }
+      .project-text li { margin-bottom:8px; padding-inline:10px; padding:6px 10px; }
+      .year-circle { width:56px !important; height:56px !important; font-size:12px !important; }
+      .timeline-item.active .year-circle { width:88px !important; height:88px !important; font-size:15px !important; transform: translateY(-8px) scale(1.02); }
+      .svg-container { display:block; }
+      .scroll-indicator { bottom:12px; }
+    }
+
+    .projects-timeline-root.plain-bleed .timeline-wrapper { padding:clamp(48px,6vw,120px) 24px; }
+    .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={rtl ? "خط زمني قابل للتمرير" : "Scrollable timeline"}>
+              <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={rtl ? "السابق" : "Previous"} onClick={onPrev} disabled={currentIndex === 0} title={rtl ? "السابق" : "Previous"}>◄</button>
+              <button className="scroll-btn" aria-label={rtl ? "التالي" : "Next"} onClick={onNext} disabled={currentIndex === projects.length - 1} title={rtl ? "التالي" : "Next"}>►</button>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}
+
+/** fallback timeline (used if translations missing) */
+const defaultProjects = [
+  {
+    year: "2009-2010",
+    items: [
+      "تدقيق ومطابقة المخططات الهندسية والتكنولوجية لخطوط الدرفلة وصهر الحد - الشركة المصنعة: دانييلي (إيطاليا) 2009-2010"
+    ]
+  },
+  {
+    year: "2007-2008",
+    items: [
+      "تدقيق ومطابقة المخططات الهندسية والتكنولوجية - الشركة المصنعة: SMS (إيطاليا) 2007-2008"
+    ]
+  },
+  {
+    year: "2015",
+    items: [
+      "التفتيش والاختبارات لخطوط والخزانات لدى الشركة السورية لنقل النفط (2015)"
+    ]
+  },
+  {
+    year: "2018",
+    items: [
+      "التفتيش الفني والاختبارات لخزانات غاز الراموسة في حلب (2018)"
+    ]
+  },
+  {
+    year: "2022",
+    items: [
+      "التفتيش الفني والاختبارات لقواعد وهيكل الفرن في معمل المتحدة للأسمنت - أبو الشامات (2022)"
+    ]
+  },
+  {
+    year: "2017-2019",
+    items: [
+      "التفتيش الفني والاختبارات لخزانات شركة محروقات سادكوب شنشار - بوقا - عدرا (2017-2019)"
+    ]
+  },
+  {
+    year: "2023-2024",
+    items: [
+      "إجراء الفحص الفني لخزانات مستودعات وقود MTN-SYRIATEL الاستراتيجية والثانوية (2023-2024)"
+    ]
+  }
+];
+
+export default function DepartmentDetail5() {
+  const { t, i18n } = useTranslation();
+  const [active, setActive] = useState(null);
+
+  // direction: rely on i18n.dir() if available, otherwise language prefix
+  const isRTL = typeof i18n.dir === "function" ? i18n.dir() === "rtl" : (i18n.language || "").startsWith("ar");
+  const dir = isRTL ? "rtl" : "ltr";
+
+  const buttons = [
+    { id: 1, title: t("departmentDetail5.buttons.1"), key: "expertise", img: d25 },
+    { id: 3, title: t("departmentDetail5.buttons.3"), key: "works", img: d26 }
+  ];
+
+  // expertise items (translation array)
+  const expertiseItemsRaw = t("departmentDetail5.expertiseItems", { returnObjects: true });
+  const expertiseItems = Array.isArray(expertiseItemsRaw) && expertiseItemsRaw.length > 0 ? expertiseItemsRaw : [
+    "إجراء الفحوصات غير الإتلافية (NDT) للكشف عن العيوب الخفية في المكونات المعدنية.",
+    "فحص اللحامات باستخدام:",
+    "Ultrasonic Testing (UT) - الفحص بالموجات فوق الصوتية.",
+    "Magnetic Particle Testing (MT) - الفحص بالجسيمات المغناطيسية.",
+    "Penetrant Testing (PT) - الفحص بالسوائل المتغلغلة.",
+    "Visual Testing (VT) - الفحص البصري وتقييم جودة اللحام ومطابقته للمواصفات.",
+    "تدقيق ومطابقة المخططات التكنولوجية والهندسية لأعمال التصنيع المعدني، الميكانيكي، الكهربائي ومنظومات التحكم.",
+    "تدقيق ومطابقة جاهزية المعدات الهندسية وملائمتها للمعايير العالمية.",
+    "الالتزام بتطبيق معايير السلامة المهنية والجودة أثناء تنفيذ أعمال التفتيش."
+  ];
+
+  const displayItems = expertiseItems.map((text, idx) => {
+    const icons = [
+      (<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" key={`ic-${idx}-1`}><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M12 8v4l3 3" /></svg>),
+      (<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" key={`ic-${idx}-2`}><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M3 7h18M3 12h18M3 17h18" /></svg>),
+      (<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" key={`ic-${idx}-3`}><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M12 2l3 7h7l-5.5 4 2 7L12 17l-6.5 3 2-7L2 9h7z" /></svg>),
+      (<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" key={`ic-${idx}-4`}><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M12 2l3 7h7l-5.5 4 2 7L12 17l-6.5 3 2-7L2 9h7z" /></svg>),
+      (<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" key={`ic-${idx}-5`}><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M4 7h16M4 12h16M4 17h8" /></svg>)
+    ];
+    const icon = icons[idx % icons.length] || icons[0];
+    return { icon, text };
+  });
+
+  // timeline translations or fallback
+  const timelineProjectsRaw = t("departmentDetail5.projectsTimeline.defaultProjects", { returnObjects: true });
+  const timelineProjects = Array.isArray(timelineProjectsRaw) && timelineProjectsRaw.length > 0 ? timelineProjectsRaw : defaultProjects;
+
+  const heroImage = active === "expertise" ? d25 : active === "works" ? d26 : d18;
+
+  const handleButtonClick = (key) => {
+    setActive((prev) => (prev === key ? null : key));
+  };
+
+  return (
+    <div dir={dir} 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={t("departmentDetail5.hero.heroAlt")}
+                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">{t("departmentDetail5.hero.expertiseBadge")}</div>
+                        <h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight mb-3 sm:mb-6">{t("departmentDetail5.hero.expertiseTitle")}</h2>
+                        <p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">{t("departmentDetail5.hero.expertiseSubtitle")}</p>
+                      </motion.div>
+                    ) : active === "works" ? (
+                      <motion.div key="works-title" initial={{ opacity: 0, x: -50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} transition={{ duration: 0.5 }} className="text-white max-w-4xl">
+                        <div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">{t("departmentDetail5.hero.worksBadge")}</div>
+                        <h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight mb-3 sm:mb-6">{t("departmentDetail5.hero.worksTitle")}</h2>
+                        <p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">{t("departmentDetail5.hero.worksSubtitle")}</p>
+                      </motion.div>
+                    ) : (
+                      <motion.div key="default-title" initial={{ opacity: 0, x: -50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} transition={{ duration: 0.5 }} className="text-white max-w-4xl">
+                        <h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight">{t("departmentDetail5.hero.defaultTitle")}</h2>
+                      </motion.div>
+                    )}
+                  </AnimatePresence>
+                </div>
+              </div>
+
+              <div className="absolute left-1/2 bottom-0 transform -translate-x-1/2 translate-y-1/2 w-full px-4 pointer-events-auto hidden md:block" style={{ zIndex: 99999 }}>
+                <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 ${isRTL ? "text-right" : "text-left"} focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-300 overflow-hidden bg-white/80 backdrop-blur-sm`}
+                          >
+                            <div className="absolute top-0 right-0 w-20 h-20 sm:w-24 sm:h-24 bg-gradient-to-br from-amber-500/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>{t("departmentDetail5.buttons.clickForDetails")}</span>
+                                <svg className="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-2 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
+                                </svg>
+                              </p>
+                            </div>
+                          </motion.button>
+                        ))}
+                      </div>
+                    </motion.div>
+                  )}
+                </AnimatePresence>
+              </div>
+
+              <div className="absolute bottom-0 left-0 right-0 z-10">
+                <svg className="w-full h-12 sm:h-16 md:h-24" viewBox="0 0 1200 120" preserveAspectRatio="none">
+                  <path d="M0,0 C300,80 900,80 1200,0 L1200,120 L0,120 Z" fill="#ffffff" opacity="1"/>
+                </svg>
+              </div>
+            </motion.div>
+          </AnimatePresence>
+        </div>
+      </section>
+
+      <div className="block md:hidden w-full max-w-7xl mx-auto px-4 sm:px-6 py-6">
+        <AnimatePresence mode="wait">
+          {!active && (
+            <motion.div
+              key="floating-buttons-mobile"
+              initial={{ opacity: 0, y: 6 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: 6 }}
+              transition={{ duration: 0.4 }}
+            >
+              <div className="grid grid-cols-1 gap-3">
+                {buttons.map((b, index) => (
+                  <motion.button
+                    key={b.id}
+                    initial={{ opacity: 0, y: 10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ delay: index * 0.05, duration: 0.35 }}
+                    whileHover={{ scale: 1.02 }}
+                    onClick={() => handleButtonClick(b.key)}
+                    className={`group relative rounded-2xl p-3 shadow-md border border-transparent flex items-center gap-3 ${isRTL ? "text-right" : "text-left"} focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-200 overflow-hidden bg-white/90`}
+                  >
+                    <div className="w-10 h-10 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white text-base font-extrabold shadow">
+                      {b.id}
+                    </div>
+                    <div className="flex-1">
+                      <h3 className="text-sm font-bold text-gray-800">{b.title}</h3>
+                      <p className="text-xs text-gray-600 mt-1">{t("departmentDetail5.buttons.clickForDetails")}</p>
+                    </div>
+                    <svg className="w-5 h-5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
+                    </svg>
+                  </motion.button>
+                ))}
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+
+      <section className="max-w-7xl mx-auto px-4 sm:px-6 md:px-6 -mt-6 md:-mt-8 relative z-20">
+        <AnimatePresence mode="wait">
+          {!active ? (
+            <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>{t("departmentDetail5.buttons.backToMenu")}</span>
+              </motion.button>
+
+              <div style={{ position: 'relative', left: '50%', right: '50%', marginLeft: '-50vw', marginRight: '-50vw', width: '100vw' }}>
+                <ProjectsTimeline projects={timelineProjects} plain={true} rtl={isRTL} />
+              </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>{t("departmentDetail5.buttons.backToMenu")}</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 ${isRTL ? "text-right" : "text-left"}`}>
+                      <div className="relative flex-shrink-0">
+                        <motion.div whileHover={{ rotate: 360, scale: 1.08 }} transition={{ duration: 0.6 }} className="w-10 h-10 sm:w-14 sm:h-14 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white text-base sm:text-2xl font-extrabold shadow-lg group-hover:shadow-2xl transition-shadow duration-300 relative z-10">
+                          {item.icon}
+                        </motion.div>
+                        <div className="absolute inset-0 bg-amber-500 rounded-xl blur-xl opacity-0 group-hover:opacity-30 transition-opacity duration-300" />
+                      </div>
+
+                      <div className="flex-1 pt-1">
+                        <p className="text-xs sm:text-sm md:text-base text-gray-800 leading-relaxed font-medium group-hover:text-gray-900 transition-colors duration-300">{item.text}</p>
+                      </div>
+
+                      <motion.div initial={{ opacity: 0, x: -8 }} whileHover={{ opacity: 1, x: 0 }} className="flex-shrink-0 text-amber-500 opacity-0 group-hover:opacity-100 transition-all duration-300">
+                        <svg className="w-4 h-4 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
+                        </svg>
+                      </motion.div>
+                    </div>
+                  </motion.div>
+                ))}
+              </div>
+
+              <motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} transition={{ delay: 0.6, duration: 0.45 }} className="mt-8 sm:mt-12 pt-6 border-t-2 border-gray-100 text-center">
+                <div className="inline-flex items-center gap-2 sm:gap-3 text-gray-500">
+                  <div className="w-2 h-2 bg-amber-500 rounded-full animate-pulse" />
+                  <span className="text-xs sm:text-sm font-medium">{t("departmentDetail5.ui.servicesProfessional")}</span>
+                  <div className="w-2 h-2 bg-orange-500 rounded-full animate-pulse" style={{ animationDelay: "0.5s" }} />
+                </div>
+              </motion.div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </section>
+    </div>
+  );
+}
--- a/src/Components/Sections/DepartmentDetail6/DepartmentDetail6.jsx
+++ b/src/Components/Sections/DepartmentDetail6/DepartmentDetail6.jsx
@ -0,0 +1,879 @@
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { useTranslation } from "react-i18next";
+import d19 from "../../../../src/assets/Images/d19.jpeg";
+import d27 from "../../../../src/assets/Images/d27.jpeg";
+import d28 from "../../../../src/assets/Images/d28.jpeg";
+import d29 from "../../../../src/assets/Images/d29.jpeg";
+import d30 from "../../../../src/assets/Images/d30.png";
+
+function ProjectsTimeline({
+  projects,
+  mainTitle = "المشاريع المنفذة",
+  subtitle = "خط زمني شامل للأعمال والإنجازات",
+  plain = false,
+  dir = "rtl",
+  scrollLabel = "خط زمني قابل للتمرير",
+  prevLabel = "السابق",
+  nextLabel = "التالي",
+}) {
+  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: ${dir}; 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:1024px){
+      .timeline-wrapper { padding:clamp(36px,5vw,80px) 24px; }
+    }
+    @media (max-width:768px){
+      .timeline-wrapper { padding:clamp(28px,5vw,60px) 20px; align-items:flex-start; }
+      .timeline-item { margin:0 14px; }
+      .year-circle { width:84px; height:84px; font-size:14px; }
+      .timeline-item.active .year-circle { width:116px; height:116px; font-size:18px; }
+      .project-card { min-width:240px; max-width:320px; padding:18px; margin-top:18px; }
+      .project-text { font-size:13px; line-height:1.6; }
+      .scroll-btn { width:48px; height:48px; font-size:20px; }
+      .scroll-indicator { bottom:18px; }
+      .svg-container { display:block; }
+    }
+    @media (max-width:420px){
+      .timeline-wrapper { padding:14px 12px; align-items:flex-start; }
+      .timeline-item { margin:0 8px; }
+      .project-card { width: calc(100vw - 64px); max-width:340px; min-width:140px; padding:12px; margin-top:12px; border-radius:14px; }
+      .project-text { font-size:13px; line-height:1.4; }
+      .project-text li { margin-bottom:8px; padding-right:10px; padding:6px 10px; }
+      .year-circle { width:54px !important; height:54px !important; font-size:12px !important; }
+      .timeline-item.active .year-circle { width:86px !important; height:86px !important; font-size:15px !important; transform: translateY(-8px) scale(1.02); }
+      .scroll-indicator { bottom:24px; }
+    }
+
+    .projects-timeline-root.plain-bleed .timeline-wrapper { padding:clamp(48px,6vw,120px) 24px; }
+    .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" : ""
+      }`}
+      dir={dir}
+    >
+      <style>{css}</style>
+      <main className="w-full h-full overflow-hidden" style={mainStyle}>
+        <div className="h-full flex flex-col">
+          {!plain && (
+            <header className="text-center py-8 px-4">
+              <h1
+                id="main-title"
+                className={` ${
+                  plain
+                    ? "text-3xl md:text-4xl font-bold text-gray-900"
+                    : "text-5xl font-bold text-white"
+                } mb-3`}
+                style={
+                  plain
+                    ? { textShadow: "none" }
+                    : { textShadow: "0 4px 20px rgba(0,0,0,0.3)" }
+                }
+              >
+                {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={scrollLabel}
+            >
+              <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={prevLabel}
+                onClick={onPrev}
+                disabled={currentIndex === 0}
+                title={prevLabel}
+              >
+                ◄
+              </button>
+              <button
+                className="scroll-btn"
+                aria-label={nextLabel}
+                onClick={onNext}
+                disabled={currentIndex === projects.length - 1}
+                title={nextLabel}
+              >
+                ►
+              </button>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}
+
+export default function DepartmentDetail6() {
+  const { t, i18n } = useTranslation();
+  const isRTL = i18n.dir() === "rtl";
+
+  const [active, setActive] = useState(null);
+
+  const cycleImgs = [d28, d27, d29];
+  const [cycleIndex, setCycleIndex] = useState(0);
+  useEffect(() => {
+    const tInterval = setInterval(
+      () => setCycleIndex((i) => (i + 1) % cycleImgs.length),
+      3000
+    );
+    return () => clearInterval(tInterval);
+  }, []);
+
+  // buttons from translations (array)
+  const buttons = [
+    { id: 1, title: t("departmentDetail6.buttons.1"), key: "expertise" },
+    { id: 3, title: t("departmentDetail6.buttons.3"), key: "works" },
+  ];
+
+  // card groups from translations
+  const cardGroupsRaw = t("departmentDetail6.cardGroups", {
+    returnObjects: true,
+  });
+
+  const expertiseItemsRaw = t("departmentDetail6.expertiseItems", {
+    returnObjects: true,
+  });
+  const validExpertiseItems = Array.isArray(expertiseItemsRaw)
+    ? expertiseItemsRaw
+    : [];
+
+  const cardGroups = Array.isArray(cardGroupsRaw)
+    ? cardGroupsRaw
+    : [
+        {
+          title:
+            t("departmentDetail6.hero.expertiseBadge") ||
+            "Department Expertise",
+          items: validExpertiseItems,
+        },
+      ];
+
+  const projectsTimeline = t(
+    "departmentDetail6.projectsTimeline.defaultProjects",
+    { returnObjects: true }
+  );
+
+  const heroImage =
+    active === "expertise"
+      ? cycleImgs[cycleIndex]
+      : active === "works"
+      ? d30
+      : d19;
+
+  const handleButtonClick = (key) => {
+    setActive((prev) => (prev === key ? null : key));
+  };
+
+  // translated text fragments
+  const hero = t("departmentDetail6.hero", { returnObjects: true });
+  const ui = t("departmentDetail6.ui", { returnObjects: true });
+  const scroll = t("departmentDetail6.scroll", { returnObjects: true });
+  const backToMenu = t("departmentDetail6.backToMenu");
+
+  return (
+    <div
+      dir={isRTL ? "rtl" : "ltr"}
+      className="w-full min-h-screen bg-white pb-12"
+    >
+      <section className="relative">
+        <div className="w-full">
+          <AnimatePresence mode="wait">
+            <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 ${
+                active
+                  ? "h-80 sm:h-96 md:h-[540px] lg:h-[680px]"
+                  : "h-72 sm:h-80 md:h-[480px] lg:h-[580px]"
+              } overflow-visible`}
+            >
+              <img
+                src={heroImage}
+                alt={t("departmentDetail6.hero.heroAlt")}
+                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 ${
+                          isRTL ? "text-right" : "text-left"
+                        }`}
+                      >
+                        <div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">
+                          {t("departmentDetail6.hero.expertiseBadge")}
+                        </div>
+                        <h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight mb-3 sm:mb-6">
+                          {t("departmentDetail6.hero.expertiseTitle")}
+                        </h2>
+                        <p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">
+                          {t("departmentDetail6.hero.expertiseSubtitle")}
+                        </p>
+                      </motion.div>
+                    ) : active === "works" ? (
+                      <motion.div
+                        key="works-title"
+                        initial={{ opacity: 0, x: -50 }}
+                        animate={{ opacity: 1, x: 0 }}
+                        exit={{ opacity: 0, x: 50 }}
+                        transition={{ duration: 0.5 }}
+                        className={`text-white max-w-4xl ${
+                          isRTL ? "text-right" : "text-left"
+                        }`}
+                      >
+                        <div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">
+                          {t("departmentDetail6.hero.worksBadge")}
+                        </div>
+                        <h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight mb-3 sm:mb-6">
+                          {t("departmentDetail6.hero.worksTitle")}
+                        </h2>
+                        <p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">
+                          {t("departmentDetail6.hero.worksSubtitle")}
+                        </p>
+                      </motion.div>
+                    ) : (
+                      <motion.div
+                        key="default-title"
+                        initial={{ opacity: 0, x: -50 }}
+                        animate={{ opacity: 1, x: 0 }}
+                        exit={{ opacity: 0, x: 50 }}
+                        transition={{ duration: 0.5 }}
+                        className={`text-white max-w-4xl ${
+                          isRTL ? "text-right" : "text-left"
+                        }`}
+                      >
+                        <h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight">
+                          {t("departmentDetail6.hero.defaultTitle")}
+                        </h2>
+                      </motion.div>
+                    )}
+                  </AnimatePresence>
+                </div>
+              </div>
+
+              <div
+                className="absolute left-1/2 bottom-0 transform -translate-x-1/2 translate-y-1/2 w-full px-4 pointer-events-auto hidden md:block"
+                style={{ zIndex: 99999 }}
+              >
+                <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 ${
+                              isRTL ? "text-right" : "text-left"
+                            } focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-300 overflow-hidden bg-white/80 backdrop-blur-sm`}
+                          >
+                            <div className="absolute top-0 right-0 w-20 h-20 sm:w-24 sm:h-24 bg-gradient-to-br from-amber-500 to-orange-600 rounded-full -mr-12 -mt-12 group-hover:scale-125 transition-transform duration-500" />
+                            <div className="absolute top-0 right-0 w-2 h-0 bg-gradient-to-b from-amber-500 to-orange-600 rounded-r-2xl group-hover:h-full transition-all duration-500" />
+
+                            <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>{ui.clickToView}</span>
+                                <svg
+                                  className="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-2 transition-transform duration-300"
+                                  fill="none"
+                                  stroke="currentColor"
+                                  viewBox="0 0 24 24"
+                                >
+                                  <path
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    strokeWidth="2.5"
+                                    d="M15 19l-7-7 7-7"
+                                  />
+                                </svg>
+                              </p>
+                            </div>
+                          </motion.button>
+                        ))}
+                      </div>
+                    </motion.div>
+                  )}
+                </AnimatePresence>
+              </div>
+
+              <div className="absolute bottom-0 left-0 right-0 z-10">
+                <svg
+                  className="w-full h-12 sm:h-16 md:h-24"
+                  viewBox="0 0 1200 120"
+                  preserveAspectRatio="none"
+                >
+                  <path
+                    d="M0,0 C300,80 900,80 1200,0 L1200,120 L0,120 Z"
+                    fill="#ffffff"
+                    opacity="1"
+                  />
+                </svg>
+              </div>
+            </motion.div>
+          </AnimatePresence>
+        </div>
+      </section>
+
+      <div className="block md:hidden w-full max-w-7xl mx-auto px-4 sm:px-6 py-6">
+        <AnimatePresence mode="wait">
+          {!active && (
+            <motion.div
+              key="floating-buttons-mobile"
+              initial={{ opacity: 0, y: 6 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: 6 }}
+              transition={{ duration: 0.4 }}
+            >
+              <div className="grid grid-cols-1 gap-3">
+                {buttons.map((b, index) => (
+                  <motion.button
+                    key={b.id}
+                    initial={{ opacity: 0, y: 10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ delay: index * 0.05, duration: 0.35 }}
+                    whileHover={{ scale: 1.02 }}
+                    onClick={() => handleButtonClick(b.key)}
+                    className={`group relative rounded-2xl p-3 shadow-md border border-transparent flex items-center gap-3 ${
+                      isRTL ? "text-right" : "text-left"
+                    } focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-200 overflow-hidden bg-white/90`}
+                  >
+                    <div className="w-10 h-10 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white text-base font-extrabold shadow">
+                      {b.id}
+                    </div>
+                    <div className="flex-1">
+                      <h3 className="text-sm font-bold text-gray-800">
+                        {b.title}
+                      </h3>
+                      <p className="text-xs text-gray-600 mt-1">
+                        {ui.clickToView}
+                      </p>
+                    </div>
+                    <svg
+                      className="w-5 h-5 text-amber-500"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth="2.5"
+                        d="M15 19l-7-7 7-7"
+                      />
+                    </svg>
+                  </motion.button>
+                ))}
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+
+      <section className="max-w-7xl mx-auto px-4 sm:px-6 md:px-6 -mt-6 md:-mt-8 relative z-20">
+        <AnimatePresence mode="wait">
+          {!active ? (
+            <motion.div
+              key="buttons-spacer"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.25 }}
+              className="h-0"
+            />
+          ) : active === "works" ? (
+            <motion.div
+              key="timeline-view"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -10 }}
+              transition={{ duration: 0.45 }}
+              className="w-full"
+            >
+              <motion.button
+                initial={{ opacity: 0, x: 20 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ delay: 0.15, duration: 0.45 }}
+                onClick={() => setActive(null)}
+                whileHover={{ x: 8 }}
+                className={`inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 sm:mb-8 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2 ${
+                  isRTL ? "mr-0 md:-mr-4" : "ml-0 md:-ml-4"
+                }`}
+              >
+                <svg
+                  className="w-5 h-5 sm:w-6 sm:h-6 transition-transform group-hover:translate-x-2"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2.5"
+                    d="M15 19l-7-7 7-7"
+                  />
+                </svg>
+                <span>{backToMenu}</span>
+              </motion.button>
+
+              <div
+                style={{
+                  position: "relative",
+                  left: "50%",
+                  right: "50%",
+                  marginLeft: "-50vw",
+                  marginRight: "-50vw",
+                  width: "100vw",
+                }}
+              >
+                <ProjectsTimeline
+                  projects={projectsTimeline}
+                  plain={true}
+                  dir={isRTL ? "rtl" : "ltr"}
+                  mainTitle={t("departmentDetail6.hero.worksTitle")}
+                  subtitle={t("departmentDetail6.hero.worksSubtitle")}
+                  scrollLabel={t("departmentDetail6.scroll.ariaLabel")}
+                  prevLabel={t("departmentDetail6.scroll.prev")}
+                  nextLabel={t("departmentDetail6.scroll.next")}
+                />
+              </div>
+            </motion.div>
+          ) : (
+            <motion.div
+              key="details-view"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -20 }}
+              transition={{ duration: 0.45 }}
+              className="w-full"
+            >
+              <motion.button
+                initial={{ opacity: 0, x: 20 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ delay: 0.08, duration: 0.45 }}
+                onClick={() => setActive(null)}
+                whileHover={{ x: 8 }}
+                className={`inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 sm:mb-8 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2 ${
+                  isRTL ? "mr-0 md:-mr-4" : "ml-0 md:-ml-4"
+                }`}
+              >
+                <svg
+                  className="w-5 h-5 sm:w-6 sm:h-6 transition-transform group-hover:translate-x-2"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2.5"
+                    d="M15 19l-7-7 7-7"
+                  />
+                </svg>
+                <span>{backToMenu}</span>
+              </motion.button>
+
+              <div className="grid grid-cols-1 gap-6">
+                {cardGroups.map((group, gIndex) => (
+                  <div
+                    key={gIndex}
+                    className="bg-white rounded-2xl p-4 sm:p-6 shadow-lg border border-gray-100"
+                  >
+                    <h3 className="text-lg font-bold text-gray-800 mb-3">
+                      {group.title}
+                    </h3>
+                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                      {group.items.map((text, idx) => (
+                        <motion.div
+                          key={idx}
+                          initial={{ opacity: 0, y: 20 }}
+                          whileInView={{ opacity: 1, y: 0 }}
+                          viewport={{ once: true, amount: 0.2 }}
+                          transition={{ delay: idx * 0.06, duration: 0.4 }}
+                          className="relative group"
+                        >
+                          <div className="relative flex items-start gap-3 sm:gap-6 rounded-2xl p-3 sm:p-6 border-r-4 border-amber-400 hover:border-orange-500 hover:shadow-xl transition-all duration-300 bg-white">
+                            <div className="relative flex-shrink-0">
+                              <motion.div
+                                whileHover={{ rotate: 360, scale: 1.03 }}
+                                transition={{ duration: 0.6 }}
+                                className="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white text-base sm:text-2xl font-extrabold shadow-lg group-hover:shadow-2xl transition-shadow duration-300 relative z-10"
+                              >
+                                <svg
+                                  className="w-6 h-6"
+                                  fill="none"
+                                  stroke="currentColor"
+                                  viewBox="0 0 24 24"
+                                >
+                                  <path
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    strokeWidth="2"
+                                    d="M5 13l4 4L19 7"
+                                  />
+                                </svg>
+                              </motion.div>
+                              <div className="absolute inset-0 bg-amber-500 rounded-xl blur-xl opacity-0 group-hover:opacity-30 transition-opacity duration-300" />
+                            </div>
+
+                            <div className="flex-1 pt-1">
+                              <p className="text-xs sm:text-sm md:text-base text-gray-800 leading-relaxed font-medium">
+                                {text}
+                              </p>
+                            </div>
+
+                            <div className="flex-shrink-0 text-amber-500 opacity-0 group-hover:opacity-100 transition-all duration-300">
+                              <svg
+                                className="w-4 h-4 sm:w-6 sm:h-6"
+                                fill="none"
+                                stroke="currentColor"
+                                viewBox="0 0 24 24"
+                              >
+                                <path
+                                  strokeLinecap="round"
+                                  strokeLinejoin="round"
+                                  strokeWidth="2.5"
+                                  d="M15 19l-7-7 7-7"
+                                />
+                              </svg>
+                            </div>
+                          </div>
+                        </motion.div>
+                      ))}
+                    </div>
+                  </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">
+                    {t("departmentDetail6.ui.servicesProfessional")}
+                  </span>
+                  <div
+                    className="w-2 h-2 bg-orange-500 rounded-full animate-pulse"
+                    style={{ animationDelay: "0.5s" }}
+                  />
+                </div>
+              </motion.div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </section>
+    </div>
+  );
+}
--- a/src/Components/Sections/DepartmentDetail7/DepartmentDetail7.jsx
+++ b/src/Components/Sections/DepartmentDetail7/DepartmentDetail7.jsx
@ -0,0 +1,605 @@
+import React, { useState, useEffect, useRef, useCallback } from "react"; 
+import { motion, AnimatePresence } from "framer-motion";
+import { useTranslation } from "react-i18next";
+import d20 from "../../../../src/assets/Images/d20.jpeg";
+import d31 from "../../../../src/assets/Images/d31.jpeg";
+import d32 from "../../../../src/assets/Images/d32.jpeg";
+
+function ProjectsTimeline({
+  projects,
+  mainTitle = "المشاريع المنفذة",
+  subtitle = "خط زمني شامل للأعمال والإنجازات",
+  plain = false,
+  dir = "rtl",
+  scrollLabel = "خط زمني قابل للتمرير",
+  prevLabel = "السابق",
+  nextLabel = "التالي"
+}) {
+  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: ${dir}; 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; flex:0 0 auto; }
+    .year-circle { width:clamp(72px,9vw,150px); height:clamp(72px,9vw,150px); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:clamp(14px,1.6vw,24px); font-weight:700; background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); color:var(--bg-start); box-shadow: 0 6px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.04); transition:all .6s cubic-bezier(.34,1.56,.64,1); cursor:pointer; border:1px solid rgba(255,255,255,0.08); position:relative; z-index:2; backdrop-filter: blur(8px) saturate(120%); background-clip: padding-box; }
+    .year-circle::after { content: ''; position:absolute; inset:-8px; border-radius:50%; border:2px solid rgba(249,115,22,0.08); opacity:0; transition:all .6s ease; }
+    .timeline-item.active .year-circle { width:clamp(110px,14vw,200px); height:clamp(110px,14vw,200px); font-size:clamp(18px,2.2vw,28px); box-shadow:0 18px 60px rgba(15,23,42,.5), inset 0 2px 6px rgba(255,255,255,0.04); border-color: rgba(249,115,22,0.18); transform: translateY(-15px) scale(1.03); }
+    .timeline-item.active .year-circle::after { opacity:1; inset:-12px; animation: ripple 2s ease-out infinite; }
+    @keyframes ripple { 0%{ transform: scale(1); opacity:.6;} 100%{ transform: scale(1.25); opacity:0;} }
+    .project-card { margin-top:40px; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)); border-radius:18px; padding:26px; min-width:320px; max-width:420px; box-shadow:0 12px 40px rgba(2,6,23,.45); opacity:.9; transform: scale(.98) translateY(8px); transition:all .6s cubic-bezier(.34,1.56,.64,1); border:1px solid rgba(255,255,255,.06); position:relative; overflow:hidden; backdrop-filter: blur(8px) saturate(120%); box-sizing:border-box; }
+    .project-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background: linear-gradient(to left, var(--accent), #b91c1c, var(--muted)); opacity:0; transition:opacity .6s ease; }
+    .timeline-item.active .project-card { opacity:1; transform: scale(1) translateY(0); box-shadow:0 28px 80px rgba(2,6,23,.5),0 6px 18px rgba(0,0,0,.08); border-color: rgba(249,115,22,.14); }
+    .timeline-item.active .project-card::before { opacity:1; }
+    .project-text { font-size:15px; line-height:2; color:#0b1220; font-weight:600; }
+    .project-text li { margin-bottom:12px; padding-right:12px; transition:all .3s ease; border-radius:8px; padding:8px 12px; }
+    .timeline-item.active .project-text li:hover { background: rgba(249,115,22,.06); transform: translateX(-4px); }
+    .scroll-indicator { position:absolute; bottom:30px; left:50%; transform: translateX(-50%); display:flex; gap:20px; z-index:10; }
+    .scroll-btn { background: linear-gradient(135deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.82) 100%); border:none; border-radius:50%; width:56px; height:56px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:22px; color:var(--accent); box-shadow:0 6px 20px rgba(2,6,23,.35); transition:all .4s cubic-bezier(.34,1.56,.64,1); backdrop-filter: blur(6px); }
+    .scroll-btn:hover:not(:disabled){ background: linear-gradient(135deg,#fff 0%,#fff8f2 100%); transform: scale(1.12); box-shadow:0 10px 35px rgba(15,23,42,.22); }
+    .scroll-btn:active:not(:disabled){ transform: scale(1.05); }
+    .scroll-btn:disabled { opacity:.4; cursor:not-allowed; }
+
+    @media (max-width:1024px){
+      .timeline-wrapper { padding:clamp(36px,5vw,80px) 24px; }
+    }
+    @media (max-width:768px){
+      .timeline-wrapper { padding:clamp(28px,5vw,60px) 20px; align-items:flex-start; }
+      .timeline-item { margin:0 14px; }
+      .year-circle { width:84px; height:84px; font-size:14px; }
+      .timeline-item.active .year-circle { width:116px; height:116px; font-size:18px; }
+      .project-card { min-width:240px; max-width:320px; padding:18px; margin-top:18px; }
+      .project-text { font-size:13px; line-height:1.6; }
+      .scroll-btn { width:48px; height:48px; font-size:20px; }
+      .scroll-indicator { bottom:18px; }
+      .svg-container { display:block; }
+    }
+    @media (max-width:420px){
+      .timeline-wrapper { padding:14px 12px; align-items:flex-start; }
+      .timeline-item { margin:0 8px; }
+      .project-card { width: calc(100vw - 64px); max-width:340px; min-width:140px; padding:12px; margin-top:12px; border-radius:14px; }
+      .project-text { font-size:13px; line-height:1.4; }
+      .project-text li { margin-bottom:8px; padding-right:10px; padding:6px 10px; }
+      .year-circle { width:54px !important; height:54px !important; font-size:12px !important; }
+      .timeline-item.active .year-circle { width:86px !important; height:86px !important; font-size:15px !important; transform: translateY(-8px) scale(1.02); }
+      .scroll-indicator { bottom:8px; }
+    }
+
+    .projects-timeline-root.plain-bleed .timeline-wrapper { padding:clamp(48px,6vw,120px) 24px; }
+    .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" : ""}`} dir={dir}>
+      <style>{css}</style>
+      <main className="w-full h-full overflow-hidden" style={mainStyle}>
+        <div className="h-full flex flex-col">
+          {!plain && (
+            <header className="text-center py-8 px-4">
+              <h1 id="main-title" className={` ${plain ? "text-3xl md:text-4xl font-bold text-gray-900" : "text-5xl font-bold text-white"} mb-3`} style={plain ? { textShadow: "none" } : { textShadow: "0 4px 20px rgba(0,0,0,0.3)" }}>
+                {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={scrollLabel}>
+              <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={prevLabel} onClick={onPrev} disabled={currentIndex === 0} title={prevLabel}>◄</button>
+              <button className="scroll-btn" aria-label={nextLabel} onClick={onNext} disabled={currentIndex === projects.length - 1} title={nextLabel}>►</button>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}
+
+/* DepartmentDetail7 component: معدّل لاستخدام i18n */
+export default function DepartmentDetail7() {
+  const { t, i18n } = useTranslation();
+  const isRTL = i18n.dir() === "rtl";
+
+  const [active, setActive] = useState(null);
+
+  // صور البطل
+  const heroImages = {
+    default: d20,
+    expertise: d31,
+    works: d32
+  };
+
+  // جلب الأزرار/البيانات من الترجمة
+  const buttons = [
+    { id: 1, title: t("departmentDetail7.buttons.1"), key: "expertise" },
+    { id: 2, title: t("departmentDetail7.buttons.2"), key: "works" },
+  ];
+  const projectsTimeline = t("departmentDetail7.projectsTimeline.defaultProjects", { returnObjects: true });
+  const expertiseTextsRaw = t("departmentDetail7.expertiseItems", { returnObjects: true });
+  const expertiseTexts = Array.isArray(expertiseTextsRaw) ? expertiseTextsRaw : [];
+  const hero = t("departmentDetail7.hero", { returnObjects: true });
+  const ui = t("departmentDetail7.ui", { returnObjects: true });
+  const backToMenu = t("departmentDetail7.backToMenu");
+
+  // أيقونات ثابتة (مثل الملف الأصلي) — سنطابقها مع النصوص حسب الترتيب
+  const icons = [
+    (
+      <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>
+    ),
+    (
+      <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>
+    ),
+    (
+      <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>
+    ),
+    (
+      <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>
+    ),
+    (
+      <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>
+    )
+  ];
+
+  // خلق عناصر الخدمات بدمج الأيقونات مع النصوص (نحافظ على ترتيب الأيقونات كما في النسخة الأصلية)
+  const expertiseItems = expertiseTexts.map((text, idx) => {
+    const icon = icons[idx] || icons[icons.length - 1]; // fallback للأيقونة الأخيرة إن نقصت
+    return { icon, text };
+  });
+
+  useEffect(() => {
+    // تهيئة أي شيء عند تغير اللغة إن احتجنا (لا تغيير للواجهة هنا)
+  }, [i18n.language]);
+
+  const handleButtonClick = (key) => {
+    setActive((prev) => (prev === key ? null : key));
+  };
+
+  const heroImage = active === "expertise" ? heroImages.expertise : active === "works" ? heroImages.works : heroImages.default;
+
+  return (
+    <div dir={isRTL ? "rtl" : "ltr"} className="w-full min-h-screen bg-white pb-12">
+      <section className="relative">
+        <div className="w-full">
+          <AnimatePresence mode="wait">
+            <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={hero.heroAlt}
+                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/85 via-slate-800/70 to-slate-900/55 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 ${isRTL ? 'text-right' : 'text-left'}`}>
+                        <div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">{hero.expertiseBadge}</div>
+                        <h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight mb-3 sm:mb-6">{hero.expertiseTitle}</h2>
+                        <p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">{hero.expertiseSubtitle}</p>
+                      </motion.div>
+                    ) : active === "works" ? (
+                      <motion.div key="works-title" initial={{ opacity: 0, x: -50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} transition={{ duration: 0.5 }} className={`text-white max-w-4xl ${isRTL ? 'text-right' : 'text-left'}`}>
+                        <div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">{hero.worksBadge}</div>
+                        <h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight mb-3 sm:mb-6">{hero.worksTitle}</h2>
+                        <p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">{hero.worksSubtitle}</p>
+                      </motion.div>
+                    ) : (
+                      <motion.div key="default-title" initial={{ opacity: 0, x: -50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} transition={{ duration: 0.5 }} className={`text-white max-w-4xl ${isRTL ? 'text-right' : 'text-left'}`}>
+                        <h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight">{hero.defaultTitle}</h2>
+                      </motion.div>
+                    )}
+                  </AnimatePresence>
+                </div>
+              </div>
+
+              <div className="absolute left-1/2 bottom-0 transform -translate-x-1/2 translate-y-1/2 w-full px-4 pointer-events-auto hidden md:block" 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 ${isRTL ? 'text-right' : 'text-left'} focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-300 overflow-hidden bg-white/85 backdrop-blur-sm`}
+                          >
+                            <div className="absolute top-0 right-0 w-20 h-20 sm:w-24 sm:h-24 bg-gradient-to-br from-amber-500/10 to-orange-600/10 rounded-full -mr-12 -mt-12 group-hover:scale-125 transition-transform duration-500" />
+                            <div className="absolute top-0 right-0 w-2 h-0 bg-gradient-to-b from-amber-500 to-orange-600 rounded-r-2xl group-hover:h-full transition-all duration-500" />
+                            <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>{ui.clickToView}</span>
+                                <svg className="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-2 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
+                                </svg>
+                              </p>
+                            </div>
+                          </motion.button>
+                        ))}
+                      </div>
+                    </motion.div>
+                  )}
+                </AnimatePresence>
+              </div>
+
+              <div className="absolute bottom-0 left-0 right-0 z-10">
+                <svg className="w-full h-12 sm:h-16 md:h-24" viewBox="0 0 1200 120" preserveAspectRatio="none">
+                  <path d="M0,0 C300,80 900,80 1200,0 L1200,120 L0,120 Z" fill="#ffffff" opacity="1"/>
+                </svg>
+              </div>
+            </motion.div>
+          </AnimatePresence>
+        </div>
+      </section>
+
+      <div className="block md:hidden w-full max-w-7xl mx-auto px-4 sm:px-6 py-6">
+        <AnimatePresence mode="wait">
+          {!active && (
+            <motion.div
+              key="floating-buttons-mobile"
+              initial={{ opacity: 0, y: 6 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: 6 }}
+              transition={{ duration: 0.4 }}
+            >
+              <div className="grid grid-cols-1 gap-3">
+                {buttons.map((b, index) => (
+                  <motion.button
+                    key={b.id}
+                    initial={{ opacity: 0, y: 10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ delay: index * 0.05, duration: 0.35 }}
+                    whileHover={{ scale: 1.02 }}
+                    onClick={() => handleButtonClick(b.key)}
+                    className={`group relative rounded-2xl p-3 shadow-md border border-transparent flex items-center gap-3 ${isRTL ? 'text-right' : 'text-left'} focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-200 overflow-hidden bg-white/90`}
+                  >
+                    <div className="w-10 h-10 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white text-base font-extrabold shadow">
+                      {b.id}
+                    </div>
+                    <div className="flex-1">
+                      <h3 className="text-sm font-bold text-gray-800">{b.title}</h3>
+                      <p className="text-xs text-gray-600 mt-1">{ui.clickToView}</p>
+                    </div>
+                    <svg className="w-5 h-5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
+                    </svg>
+                  </motion.button>
+                ))}
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+
+      <section className="max-w-7xl mx-auto px-4 sm:px-6 md:px-6 -mt-6 md:-mt-8 relative z-20">
+        <AnimatePresence mode="wait">
+          {!active ? (
+            <motion.div key="buttons-spacer" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.25 }} className="h-0" />
+          ) : active === "works" ? (
+            <motion.div key="timeline-view" initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }} transition={{ duration: 0.45 }} className="w-full">
+              <motion.button initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: 0.15, duration: 0.45 }} onClick={() => setActive(null)} whileHover={{ x: 8 }} className={`inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 sm:mb-8 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2 ${isRTL ? 'mr-0 md:-mr-4' : 'ml-0 md:-ml-4'}`}>
+                <svg className="w-5 h-5 sm:w-6 sm:h-6 transition-transform group-hover:translate-x-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
+                </svg>
+                <span>{backToMenu}</span>
+              </motion.button>
+
+              <div style={{ position: 'relative', left: '50%', right: '50%', marginLeft: '-50vw', marginRight: '-50vw', width: '100vw' }}>
+                <ProjectsTimeline
+                  projects={projectsTimeline}
+                  plain={true}
+                  dir={isRTL ? 'rtl' : 'ltr'}
+                  mainTitle={hero.worksTitle}
+                  subtitle={hero.worksSubtitle}
+                  scrollLabel={t("departmentDetail7.scroll.ariaLabel")}
+                  prevLabel={t("departmentDetail7.scroll.prev")}
+                  nextLabel={t("departmentDetail7.scroll.next")}
+                />
+              </div>
+            </motion.div>
+          ) : (
+            <motion.div key="details-view" initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -20 }} transition={{ duration: 0.45 }} className="w-full">
+              <motion.button initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: 0.08, duration: 0.45 }} onClick={() => setActive(null)} whileHover={{ x: 8 }} className={`inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 sm:mb-8 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2 ${isRTL ? 'mr-0 md:-mr-4' : 'ml-0 md:-ml-4'}`}>
+                <svg className="w-5 h-5 sm:w-6 sm:h-6 transition-transform group-hover:translate-x-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
+                </svg>
+                <span>{backToMenu}</span>
+              </motion.button>
+
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
+                {expertiseItems.map((item, idx) => (
+                  <motion.div
+                    key={idx}
+                    initial={{ opacity: 0, y: 30 }}
+                    whileInView={{ opacity: 1, y: 0 }}
+                    viewport={{ once: true, amount: 0.25 }}
+                    transition={{ delay: idx * 0.06, duration: 0.45 }}
+                    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-sm md:text-base text-gray-800 leading-relaxed font-medium group-hover:text-gray-900 transition-colors duration-300">{item.text}</p>
+                      </div>
+
+                      <motion.div initial={{ opacity: 0, x: -8 }} whileHover={{ opacity: 1, x: 0 }} className="flex-shrink-0 text-amber-500 opacity-0 group-hover:opacity-100 transition-all duration-300">
+                        <svg className="w-4 h-4 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.2" d="M15 19l-7-7 7-7"/>
+                        </svg>
+                      </motion.div>
+                    </div>
+                  </motion.div>
+                ))}
+
+                <motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} transition={{ delay: 0.6, duration: 0.45 }} className="mt-2 sm:mt-6 pt-4 border-t-2 border-gray-100 text-center col-span-full">
+                  <div className="inline-flex items-center gap-2 sm:gap-3 text-gray-500">
+                    <div className="w-2 h-2 bg-amber-500 rounded-full animate-pulse" />
+                    <span className="text-xs sm:text-sm font-medium">{ui.servicesProfessional}</span>
+                    <div className="w-2 h-2 bg-orange-500 rounded-full animate-pulse" style={{ animationDelay: "0.5s" }} />
+                  </div>
+                </motion.div>
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </section>
+    </div>
+  );
+}
--- a/src/Components/Sections/DepartmentDetail8/DepartmentDetail8.jsx
+++ b/src/Components/Sections/DepartmentDetail8/DepartmentDetail8.jsx
@ -0,0 +1,916 @@
+import React, { useState, useEffect } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { useTranslation } from "react-i18next";
+import d21 from "../../../../src/assets/Images/d21.jpeg";
+import d34 from "../../../../src/assets/Images/d34.jpg";
+import d33 from "../../../../src/assets/Images/d33.png";
+
+import { useRef, useCallback, useState as useStateLocal } from "react";
+
+function ProjectsTimeline({
+  projects,
+  mainTitle = "المشاريع المنفذة",
+  subtitle = "خط زمني شامل للأعمال والإنجازات",
+  plain = false,
+  dir = "rtl",
+  scrollLabel = "خط زمني قابل للتمرير",
+  prevLabel = "السابق",
+  nextLabel = "التالي",
+}) {
+  const wrapperRef = useRef(null);
+  const scrollRef = useRef(null);
+  const svgRef = useRef(null);
+  const [itemsRefs, setItemsRefs] = useStateLocal([]);
+  const [currentIndex, setCurrentIndex] = useStateLocal(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: ${dir}; 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; flex:0 0 auto; }
+    .year-circle { width:clamp(72px,9vw,150px); height:clamp(72px,9vw,150px); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:clamp(14px,1.6vw,24px); font-weight:700; background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); color:var(--bg-start); box-shadow: 0 6px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.04); transition:all .6s cubic-bezier(.34,1.56,.64,1); cursor:pointer; border:1px solid rgba(255,255,255,0.08); position:relative; z-index:2; backdrop-filter: blur(8px) saturate(120%); background-clip: padding-box; }
+    .year-circle::after { content: ''; position:absolute; inset:-8px; border-radius:50%; border:2px solid rgba(249,115,22,0.08); opacity:0; transition:all .6s ease; }
+    .timeline-item.active .year-circle { width:clamp(110px,14vw,200px); height:clamp(110px,14vw,200px); font-size:clamp(18px,2.2vw,28px); box-shadow:0 18px 60px rgba(15,23,42,.5), inset 0 2px 6px rgba(255,255,255,0.04); border-color: rgba(249,115,22,0.18); transform: translateY(-15px) scale(1.03); }
+    .timeline-item.active .year-circle::after { opacity:1; inset:-12px; animation: ripple 2s ease-out infinite; }
+    @keyframes ripple { 0%{ transform: scale(1); opacity:.6;} 100%{ transform: scale(1.25); opacity:0;} }
+    .project-card { margin-top:40px; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)); border-radius:18px; padding:26px; min-width:320px; max-width:420px; box-shadow:0 12px 40px rgba(2,6,23,.45); opacity:.9; transform: scale(.98) translateY(8px); transition:all .6s cubic-bezier(.34,1.56,.64,1); border:1px solid rgba(255,255,255,.06); position:relative; overflow:hidden; backdrop-filter: blur(8px) saturate(120%); box-sizing:border-box; }
+    .project-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background: linear-gradient(to left, var(--accent), #b91c1c, var(--muted)); opacity:0; transition:opacity .6s ease; }
+    .timeline-item.active .project-card { opacity:1; transform: scale(1) translateY(0); box-shadow:0 28px 80px rgba(2,6,23,.5),0 6px 18px rgba(0,0,0,.08); border-color: rgba(249,115,22,.14); }
+    .timeline-item.active .project-card::before { opacity:1; }
+    .project-text { font-size:15px; line-height:2; color:#0b1220; font-weight:600; }
+    .project-text li { margin-bottom:12px; padding-right:12px; transition:all .3s ease; border-radius:8px; padding:8px 12px; }
+    .timeline-item.active .project-text li:hover { background: rgba(249,115,22,.06); transform: translateX(-4px); }
+    .scroll-indicator { position:absolute; bottom:30px; left:50%; transform: translateX(-50%); display:flex; gap:20px; z-index:10; }
+    .scroll-btn { background: linear-gradient(135deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.82) 100%); border:none; border-radius:50%; width:56px; height:56px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:22px; color:var(--accent); box-shadow:0 6px 20px rgba(2,6,23,.35); transition:all .4s cubic-bezier(.34,1.56,.64,1); backdrop-filter: blur(6px); }
+    .scroll-btn:hover:not(:disabled){ background: linear-gradient(135deg,#fff 0%,#fff8f2 100%); transform: scale(1.12); box-shadow:0 10px 35px rgba(15,23,42,.22); }
+    .scroll-btn:active:not(:disabled){ transform: scale(1.05); }
+    .scroll-btn:disabled { opacity:.4; cursor:not-allowed; }
+
+    @media (max-width:1024px){
+      .timeline-wrapper { padding:clamp(36px,5vw,80px) 24px; }
+    }
+    @media (max-width:768px){
+      .timeline-wrapper { padding:clamp(28px,5vw,60px) 20px; align-items:flex-start; }
+      .timeline-item { margin:0 14px; }
+      .year-circle { width:84px; height:84px; font-size:14px; }
+      .timeline-item.active .year-circle { width:116px; height:116px; font-size:18px; }
+      .project-card { min-width:240px; max-width:320px; padding:18px; margin-top:18px; }
+      .project-text { font-size:13px; line-height:1.6; }
+      .scroll-btn { width:48px; height:48px; font-size:20px; }
+      .scroll-indicator { bottom:18px; }
+      .svg-container { display:block; }
+    }
+    @media (max-width:420px){
+      .timeline-wrapper { padding:14px 12px; align-items:flex-start; }
+      .timeline-item { margin:0 8px; }
+      .project-card { width: calc(100vw - 64px); max-width:340px; min-width:140px; padding:12px; margin-top:12px; border-radius:14px; }
+      .project-text { font-size:13px; line-height:1.4; }
+      .project-text li { margin-bottom:8px; padding-right:10px; padding:6px 10px; }
+      .year-circle { width:54px !important; height:54px !important; font-size:12px !important; }
+      .timeline-item.active .year-circle { width:86px !important; height:86px !important; font-size:15px !important; transform: translateY(-8px) scale(1.02); }
+      .scroll-indicator { bottom:24px; }
+    }
+
+    .projects-timeline-root.plain-bleed .timeline-wrapper { padding:clamp(48px,6vw,120px) 24px; }
+    .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" : ""
+      }`}
+      dir={dir}
+    >
+      <style>{css}</style>
+      <main className="w-full h-full overflow-hidden" style={mainStyle}>
+        <div className="h-full flex flex-col">
+          {!plain && (
+            <header className="text-center py-8 px-4">
+              <h1
+                id="main-title"
+                className={` ${
+                  plain
+                    ? "text-3xl md:text-4xl font-bold text-gray-900"
+                    : "text-5xl font-bold text-white"
+                } mb-3`}
+                style={
+                  plain
+                    ? { textShadow: "none" }
+                    : { textShadow: "0 4px 20px rgba(0,0,0,0.3)" }
+                }
+              >
+                {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={scrollLabel}
+            >
+              <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={prevLabel}
+                onClick={onPrev}
+                disabled={currentIndex === 0}
+                title={prevLabel}
+              >
+                ◄
+              </button>
+              <button
+                className="scroll-btn"
+                aria-label={nextLabel}
+                onClick={onNext}
+                disabled={currentIndex === projects.length - 1}
+                title={nextLabel}
+              >
+                ►
+              </button>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}
+
+/* DepartmentDetail8 component: يقرأ النصوص من i18n ويضبط الاتجاه/المحاذاة */
+export default function DepartmentDetail8() {
+  const { t, i18n } = useTranslation();
+  const isRTL = i18n.dir() === "rtl";
+
+  const [active, setActive] = useState(null);
+
+  const hero = t("departmentDetail8.hero", { returnObjects: true });
+
+  const buttons = [
+    { id: 1, title: t("departmentDetail8.buttons.1"), key: "expertise" },
+    { id: 2, title: t("departmentDetail8.buttons.2"), key: "works" },
+  ];
+  const projectsTimeline = t(
+    "departmentDetail8.projectsTimeline.defaultProjects",
+    { returnObjects: true }
+  );
+  const expertiseTextsRaw = t("departmentDetail8.expertiseItems", {
+    returnObjects: true,
+  });
+  const expertiseTexts = Array.isArray(expertiseTextsRaw)
+    ? expertiseTextsRaw
+    : [];
+  const ui = t("departmentDetail8.ui", { returnObjects: true });
+  const backToMenu = t("departmentDetail8.backToMenu");
+  const scrollLabels = t("departmentDetail8.scroll", { returnObjects: true });
+
+  const icons = [
+    <svg
+      className="w-7 h-7"
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+      key="i1"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2.2"
+        d="M3 7h13l3 3v7a1 1 0 01-1 1h-1a2 2 0 11-4 0H9a2 2 0 11-4 0H4a1 1 0 01-1-1V7zM16 7v4"
+      />
+    </svg>,
+    <svg
+      className="w-7 h-7"
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+      key="i2"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2.2"
+        d="M4 7h4l4 5 4-5h4M5 19a2 2 0 104 0 2 2 0 00-4 0zm10 0a2 2 0 104 0 2 2 0 00-4 0z"
+      />
+    </svg>,
+    <svg
+      className="w-7 h-7"
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+      key="i3"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2.2"
+        d="M3 7l9-4 9 4-9 4-9-4zM21 8v8a2 2 0 01-2 2H5a2 2 0 01-2-2V8"
+      />
+    </svg>,
+    <svg
+      className="w-7 h-7"
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+      key="i4"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2.2"
+        d="M3 12l4 4 8-8 4 4M14 7l3-3M7 17l-3 3"
+      />
+    </svg>,
+    <svg
+      className="w-7 h-7"
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+      key="i5"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2.2"
+        d="M3 9l9-5 9 5v8a2 2 0 01-2 2H5a2 2 0 01-2-2V9zM9 22V12"
+      />
+    </svg>,
+    <svg
+      className="w-7 h-7"
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+      key="i6"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2.2"
+        d="M12 8v4l2 2M6.16 4.94l1.42 1.42M17.42 4.94l-1.42 1.42M4 13h2M18 13h2M6.16 19.06l1.42-1.42M17.42 19.06l-1.42-1.42"
+      />
+    </svg>,
+  ];
+
+  const expertiseItems = expertiseTexts.map((text, idx) => {
+    const icon = icons[idx] || icons[icons.length - 1];
+    return { icon, text };
+  });
+
+  useEffect(() => {
+    // أي تهيئة مرتبطة باللغة إذا احتجنا
+  }, [i18n.language]);
+
+  const handleButtonClick = (key) => {
+    setActive((prev) => (prev === key ? null : key));
+  };
+
+  const heroImage =
+    active === "expertise" ? d34 : active === "works" ? d33 : d21;
+
+  return (
+    <div
+      dir={isRTL ? "rtl" : "ltr"}
+      className="w-full min-h-screen bg-white pb-12"
+    >
+      <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={hero.heroAlt}
+                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/85 via-slate-800/70 to-slate-900/55 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 ${
+                          isRTL ? "text-right" : "text-left"
+                        }`}
+                      >
+                        <div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">
+                          {hero.expertiseBadge}
+                        </div>
+                        <h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight mb-3 sm:mb-6">
+                          {hero.expertiseTitle}
+                        </h2>
+                        <p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">
+                          {hero.expertiseSubtitle}
+                        </p>
+                      </motion.div>
+                    ) : active === "works" ? (
+                      <motion.div
+                        key="works-title"
+                        initial={{ opacity: 0, x: -50 }}
+                        animate={{ opacity: 1, x: 0 }}
+                        exit={{ opacity: 0, x: 50 }}
+                        transition={{ duration: 0.5 }}
+                        className={`text-white max-w-4xl ${
+                          isRTL ? "text-right" : "text-left"
+                        }`}
+                      >
+                        <div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">
+                          {hero.worksBadge}
+                        </div>
+                        <h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight mb-3 sm:mb-6">
+                          {hero.worksTitle}
+                        </h2>
+                        <p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">
+                          {hero.worksSubtitle}
+                        </p>
+                      </motion.div>
+                    ) : (
+                      <motion.div
+                        key="default-title"
+                        initial={{ opacity: 0, x: -50 }}
+                        animate={{ opacity: 1, x: 0 }}
+                        exit={{ opacity: 0, x: 50 }}
+                        transition={{ duration: 0.5 }}
+                        className={`text-white max-w-4xl ${
+                          isRTL ? "text-right" : "text-left"
+                        }`}
+                      >
+                        <h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight">
+                          {hero.defaultTitle}
+                        </h2>
+                      </motion.div>
+                    )}
+                  </AnimatePresence>
+                </div>
+              </div>
+
+              <div
+                className="absolute left-1/2 bottom-0 transform -translate-x-1/2 translate-y-1/2 w-full px-4 pointer-events-auto hidden sm:block"
+                style={{ zIndex: 99999 }}
+              >
+                <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 ${
+                              isRTL ? "text-right" : "text-left"
+                            } focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-300 overflow-hidden bg-white/85 backdrop-blur-sm`}
+                          >
+                            <div className="absolute top-0 right-0 w-20 h-20 sm:w-24 sm:h-24 bg-gradient-to-br from-amber-500/10 to-orange-600/10 rounded-full -mr-12 -mt-12 group-hover:scale-125 transition-transform duration-500" />
+                            <div className="absolute top-0 right-0 w-2 h-0 bg-gradient-to-b from-amber-500 to-orange-600 rounded-r-2xl group-hover:h-full transition-all duration-500" />
+                            <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>{ui.clickToView}</span>
+                                <svg
+                                  className="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-2 transition-transform duration-300"
+                                  fill="none"
+                                  stroke="currentColor"
+                                  viewBox="0 0 24 24"
+                                >
+                                  <path
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    strokeWidth="2.5"
+                                    d="M15 19l-7-7 7-7"
+                                  />
+                                </svg>
+                              </p>
+                            </div>
+                          </motion.button>
+                        ))}
+                      </div>
+                    </motion.div>
+                  )}
+                </AnimatePresence>
+              </div>
+
+              <div className="absolute bottom-0 left-0 right-0 z-10">
+                <svg
+                  className="w-full h-12 sm:h-16 md:h-24"
+                  viewBox="0 0 1200 120"
+                  preserveAspectRatio="none"
+                >
+                  <path
+                    d="M0,0 C300,80 900,80 1200,0 L1200,120 L0,120 Z"
+                    fill="#ffffff"
+                    opacity="1"
+                  />
+                </svg>
+              </div>
+            </motion.div>
+          </AnimatePresence>
+        </div>
+      </section>
+
+      <div className="block md:hidden w-full max-w-7xl mx-auto px-4 sm:px-6 py-6">
+        <AnimatePresence mode="wait">
+          {!active && (
+            <motion.div
+              key="floating-buttons-mobile"
+              initial={{ opacity: 0, y: 6 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: 6 }}
+              transition={{ duration: 0.4 }}
+            >
+              <div className="grid grid-cols-1 gap-3">
+                {buttons.map((b, index) => (
+                  <motion.button
+                    key={b.id}
+                    initial={{ opacity: 0, y: 10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ delay: index * 0.05, duration: 0.35 }}
+                    whileHover={{ scale: 1.02 }}
+                    onClick={() => handleButtonClick(b.key)}
+                    className={`group relative rounded-2xl p-3 shadow-md border border-transparent flex items-center gap-3 ${
+                      isRTL ? "text-right" : "text-left"
+                    } focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-200 overflow-hidden bg-white/90`}
+                  >
+                    <div className="w-10 h-10 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white text-base font-extrabold shadow">
+                      {b.id}
+                    </div>
+                    <div className="flex-1">
+                      <h3 className="text-sm font-bold text-gray-800">
+                        {b.title}
+                      </h3>
+                      <p className="text-xs text-gray-600 mt-1">
+                        {ui.clickToView}
+                      </p>
+                    </div>
+                    <svg
+                      className="w-5 h-5 text-amber-500"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth="2.5"
+                        d="M15 19l-7-7 7-7"
+                      />
+                    </svg>
+                  </motion.button>
+                ))}
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+
+      <section className="max-w-7xl mx-auto px-4 sm:px-6 md:px-6 -mt-6 md:-mt-8 relative z-20">
+        <AnimatePresence mode="wait">
+          {!active ? (
+            <motion.div
+              key="buttons-spacer"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.25 }}
+              className="h-0"
+            />
+          ) : active === "works" ? (
+            <motion.div
+              key="timeline-view"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -10 }}
+              transition={{ duration: 0.45 }}
+              className="w-full"
+            >
+              <motion.button
+                initial={{ opacity: 0, x: 20 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ delay: 0.15, duration: 0.45 }}
+                onClick={() => setActive(null)}
+                whileHover={{ x: 8 }}
+                className={`inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 sm:mb-8 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2 ${
+                  isRTL ? "mr-0 md:-mr-4" : "ml-0 md:-ml-4"
+                }`}
+              >
+                <svg
+                  className="w-5 h-5 sm:w-6 sm:h-6 transition-transform group-hover:translate-x-2"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2.5"
+                    d="M15 19l-7-7 7-7"
+                  />
+                </svg>
+                <span>{backToMenu}</span>
+              </motion.button>
+
+              <div
+                style={{
+                  position: "relative",
+                  left: "50%",
+                  right: "50%",
+                  marginLeft: "-50vw",
+                  marginRight: "-50vw",
+                  width: "100vw",
+                }}
+              >
+                <ProjectsTimeline
+                  projects={projectsTimeline}
+                  plain={true}
+                  dir={isRTL ? "rtl" : "ltr"}
+                  mainTitle={hero.worksTitle}
+                  subtitle={hero.worksSubtitle}
+                  scrollLabel={scrollLabels.ariaLabel}
+                  prevLabel={scrollLabels.prev}
+                  nextLabel={scrollLabels.next}
+                />
+              </div>
+            </motion.div>
+          ) : (
+            <motion.div
+              key="details-view"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -20 }}
+              transition={{ duration: 0.45 }}
+              className="w-full"
+            >
+              <motion.button
+                initial={{ opacity: 0, x: 20 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ delay: 0.08, duration: 0.45 }}
+                onClick={() => setActive(null)}
+                whileHover={{ x: 8 }}
+                className={`inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 sm:mb-8 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2 ${
+                  isRTL ? "mr-0 md:-mr-4" : "ml-0 md:-ml-4"
+                }`}
+              >
+                <svg
+                  className="w-5 h-5 sm:w-6 sm:h-6 transition-transform group-hover:translate-x-2"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2.5"
+                    d="M15 19l-7-7 7-7"
+                  />
+                </svg>
+                <span>{backToMenu}</span>
+              </motion.button>
+
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
+                {expertiseItems.map((item, idx) => (
+                  <motion.div
+                    key={idx}
+                    initial={{ opacity: 0, y: 30 }}
+                    whileInView={{ opacity: 1, y: 0 }}
+                    viewport={{ once: true, amount: 0.25 }}
+                    transition={{ delay: idx * 0.06, duration: 0.45 }}
+                    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-sm md:text-base text-gray-800 leading-relaxed font-medium group-hover:text-gray-900 transition-colors duration-300">
+                          {item.text}
+                        </p>
+                      </div>
+
+                      <motion.div
+                        initial={{ opacity: 0, x: -8 }}
+                        whileHover={{ opacity: 1, x: 0 }}
+                        className="flex-shrink-0 text-amber-500 opacity-0 group-hover:opacity-100 transition-all duration-300"
+                      >
+                        <svg
+                          className="w-4 h-4 sm:w-6 sm:h-6"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth="2.2"
+                            d="M15 19l-7-7 7-7"
+                          />
+                        </svg>
+                      </motion.div>
+                    </div>
+                  </motion.div>
+                ))}
+
+                <motion.div
+                  initial={{ opacity: 0, scale: 0.95 }}
+                  animate={{ opacity: 1, scale: 1 }}
+                  transition={{ delay: 0.6, duration: 0.45 }}
+                  className="mt-2 sm:mt-6 pt-4 border-t-2 border-gray-100 text-center col-span-full"
+                >
+                  <div className="inline-flex items-center gap-2 sm:gap-3 text-gray-500">
+                    <div className="w-2 h-2 bg-amber-500 rounded-full animate-pulse" />
+                    <span className="text-xs sm:text-sm font-medium">
+                      {ui.servicesProfessional}
+                    </span>
+                    <div
+                      className="w-2 h-2 bg-orange-500 rounded-full animate-pulse"
+                      style={{ animationDelay: "0.5s" }}
+                    />
+                  </div>
+                </motion.div>
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </section>
+    </div>
+  );
+}
--- a/src/Components/Sections/DepartmentDetail9/DepartmentDetail9.jsx
+++ b/src/Components/Sections/DepartmentDetail9/DepartmentDetail9.jsx
@ -0,0 +1,561 @@
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { useTranslation } from "react-i18next";
+import d22 from "../../../../src/assets/Images/d22.jpg";
+import d35 from "../../../../src/assets/Images/d35.jpeg";
+import d36 from "../../../../src/assets/Images/d36.jpg";
+
+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:unset; max-width:88vw; padding:18px; margin-top:18px; width:calc(86vw); }
+      .project-text { font-size:13px; }
+      .scroll-btn { width:48px; height:48px; font-size:20px; }
+      .scroll-indicator { bottom:8px; }
+    }
+    @media (max-width:420px){
+      .project-card { width: calc(100vw - 48px); max-width:100%; min-width:120px; padding:12px; margin-top:12px; border-radius:14px; }
+      .scroll-indicator { bottom:6px; }
+    }
+
+    .projects-timeline-root.plain-bleed .timeline-wrapper { padding:clamp(48px,6vw,120px) 24px; }
+    .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>
+  );
+}
+
+export default function DepartmentDetail9() {
+  const { t, i18n } = useTranslation();
+  const dir = i18n.dir(); // 'rtl' or 'ltr'
+  const [active, setActive] = useState(null);
+
+  const defaultProjects = t("departmentDetail9.projectsTimeline.defaultProjects", { returnObjects: true });
+  const expertiseTexts = t("departmentDetail9.expertiseItems", { returnObjects: true });
+
+  const buttons = [
+    { id: 1, title: t("departmentDetail9.buttons.1"), key: "expertise" },
+    { id: 2, title: t("departmentDetail9.buttons.2"), key: "works" },
+  ];
+
+  const expertiseItems = [
+    {
+      icon: (
+        <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <rect x="3" y="4" width="18" height="16" rx="2" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
+          <path d="M7 8h.01M11 8h.01M15 8h.01M7 12h10" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
+        </svg>
+      ),
+      text: expertiseTexts[0] || "تصميم وتنفيذ أنظمة التحكم الصناعية."
+    },
+    {
+      icon: (
+        <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" d="M3 7h4l2 6h6l2-6h4M5 21h14" />
+        </svg>
+      ),
+      text: expertiseTexts[1] || "أتمتة خطوط الإنتاج والمنشآت وأنظمة المراقبة التشغيلية مع توريد التجهيزات اللازمة."
+    },
+    {
+      icon: (
+        <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <rect x="2" y="3" width="20" height="14" rx="1.5" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
+          <path d="M8 21h8M12 17v4" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
+        </svg>
+      ),
+      text: expertiseTexts[2] || "أنظمة SCADA و PLC."
+    },
+    {
+      icon: (
+        <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" d="M3 7v10a2 2 0 002 2h10l4-4V7a2 2 0 00-2-2H5a2 2 0 00-2 2zM16 3v4" />
+        </svg>
+      ),
+      text: expertiseTexts[3] || "تطوير وتنفيذ أنظمة إدارة محطات الوقود (FMS)."
+    },
+    {
+      icon: (
+        <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" d="M10 14a3 3 0 104 0M4 10a4 4 0 018 0M20 14a4 4 0 00-8 0" />
+        </svg>
+      ),
+      text: expertiseTexts[4] || "ربط الأنظمة التشغيلية بالحلول البرمجية."
+    },
+    {
+      icon: (
+        <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" d="M3 3v18h18" />
+          <path strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" d="M7 14l3-3 4 4 5-7" />
+        </svg>
+      ),
+      text: expertiseTexts[5] || "تحليل الأعطال والتنبؤ بالمشاكل قبل حدوثها، ورفع كفاءة التشغيل وتقليل الفاقد والتكاليف."
+    },
+  ];
+
+  const heroImage = active === "expertise" ? d35 : active === "works" ? d36 : d22;
+
+  const handleButtonClick = (key) => {
+    setActive((prev) => (prev === key ? null : key));
+  };
+
+  const backButtonMargin = dir === "rtl" ? "mr-0 md:-mr-4" : "ml-0 md:-ml-4";
+
+  return (
+    <div dir={dir} 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.03 }}
+              animate={{ opacity: 1, scale: 1 }}
+              exit={{ opacity: 0, scale: 0.98 }}
+              transition={{ duration: 0.5 }}
+              className="relative h-72 sm:h-80 md:h-[480px] lg:h-[580px] overflow-visible"
+            >
+              <img
+                src={heroImage}
+                alt={t("departmentDetail9.hero.heroAlt")}
+                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.18, duration: 0.45 }}
+                className="absolute inset-0 bg-gradient-to-r from-slate-900/85 via-slate-800/70 to-slate-900/55 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="exp" initial={{ opacity: 0, x: -40 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 40 }} transition={{ duration: 0.45 }} className="text-white max-w-4xl">
+                        <div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">{t("departmentDetail9.hero.expertiseBadge")}</div>
+                        <h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold leading-tight mb-3 sm:mb-6">{t("departmentDetail9.hero.expertiseTitle")}</h2>
+                        <p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold">
+                          {t("departmentDetail9.hero.expertiseSubtitle")}
+                        </p>
+                      </motion.div>
+                    ) : active === "works" ? (
+                      <motion.div key="works" initial={{ opacity: 0, x: -40 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 40 }} transition={{ duration: 0.45 }} className="text-white max-w-4xl">
+                        <div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">{t("departmentDetail9.hero.worksBadge")}</div>
+                        <h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold leading-tight mb-3 sm:mb-6">{t("departmentDetail9.hero.worksTitle")}</h2>
+                        <p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold">{t("departmentDetail9.hero.worksSubtitle")}</p>
+                      </motion.div>
+                    ) : (
+                      <motion.div key="def" initial={{ opacity: 0, x: -40 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 40 }} transition={{ duration: 0.45 }} className="text-white max-w-4xl">
+                        <h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold leading-tight">{t("departmentDetail9.hero.defaultTitle")}</h2>
+                      </motion.div>
+                    )}
+                  </AnimatePresence>
+                </div>
+              </div>
+
+              <div className="absolute left-1/2 bottom-0 transform -translate-x-1/2 translate-y-1/2 w-full px-4 pointer-events-auto hidden sm:block" style={{ zIndex: 99999 }}>
+                <AnimatePresence>
+                  {!active && (
+                    <motion.div key="buttons" initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.45 }} className="w-full max-w-7xl mx-auto">
+                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6">
+                        {buttons.map((b, i) => (
+                          <motion.button
+                            key={b.id}
+                            initial={{ opacity: 0, y: 18 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            transition={{ delay: i * 0.06, duration: 0.45 }}
+                            onClick={() => handleButtonClick(b.key)}
+                            whileHover={{ scale: 1.03, y: -6 }}
+                            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/85 backdrop-blur-sm`}
+                          >
+                            <div className="absolute top-0 right-0 w-20 h-20 sm:w-24 sm:h-24 bg-gradient-to-br from-amber-500/10 to-orange-600/10 rounded-full -mr-12 -mt-12 group-hover:scale-125 transition-transform duration-500" />
+                            <div className="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">
+                                  {b.id}
+                                </div>
+                                <h3 className="text-sm sm:text-base font-bold text-gray-800">{b.title}</h3>
+                              </div>
+                              <p className="text-xs sm:text-sm text-gray-600 mt-auto flex items-center gap-2">
+                                <span>{t("departmentDetail9.ui.clickToView") || "انقر للاطّلاع على التفاصيل"}</span>
+                                <svg className="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
+                                </svg>
+                              </p>
+                            </div>
+                          </motion.button>
+                        ))}
+                      </div>
+                    </motion.div>
+                  )}
+                </AnimatePresence>
+              </div>
+
+              <div className="absolute bottom-0 left-0 right-0 z-10">
+                <svg className="w-full h-12 sm:h-16 md:h-24" viewBox="0 0 1200 120" preserveAspectRatio="none">
+                  <path d="M0,0 C300,80 900,80 1200,0 L1200,120 L0,120 Z" fill="#ffffff" opacity="1"/>
+                </svg>
+              </div>
+            </motion.div>
+          </AnimatePresence>
+        </div>
+      </section>
+
+      <div className="block md:hidden w-full max-w-7xl mx-auto px-4 sm:px-6 py-6">
+        <AnimatePresence mode="wait">
+          {!active && (
+            <motion.div key="floating-buttons-mobile" initial={{ opacity: 0, y: 6 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: 6 }} transition={{ duration: 0.4 }}>
+              <div className="grid grid-cols-1 gap-3">
+                {buttons.map((b, index) => (
+                  <motion.button
+                    key={b.id}
+                    initial={{ opacity: 0, y: 10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ delay: index * 0.05, duration: 0.35 }}
+                    whileHover={{ scale: 1.02 }}
+                    onClick={() => handleButtonClick(b.key)}
+                    className="group relative rounded-2xl p-3 shadow-md border border-transparent flex items-center gap-3 text-right focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-200 overflow-hidden bg-white/90"
+                  >
+                    <div className="w-10 h-10 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white text-base font-extrabold shadow">
+                      {b.id}
+                    </div>
+                    <div className="flex-1">
+                      <h3 className="text-sm font-bold text-gray-800">{b.title}</h3>
+                      <p className="text-xs text-gray-600 mt-1">{t("departmentDetail9.ui.clickToView") || "انقر للاطّلاع على التفاصيل"}</p>
+                    </div>
+                    <svg className="w-5 h-5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
+                    </svg>
+                  </motion.button>
+                ))}
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+
+      <section className="max-w-7xl mx-auto px-4 sm:px-6 md:px-6 -mt-6 md:-mt-8 relative z-20">
+        <AnimatePresence mode="wait">
+          {!active ? (
+            <motion.div key="spacer" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.25 }} className="h-0" />
+          ) : active === "works" ? (
+            <motion.div key="timeline" initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }} transition={{ duration: 0.45 }} className="w-full">
+              <motion.button onClick={() => setActive(null)} whileHover={{ x: 8 }} className={`inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2 ${backButtonMargin}`}>
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.2" d="M15 19l-7-7 7-7"/></svg>
+                <span>{t("departmentDetail9.backToMenu")}</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" initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -20 }} transition={{ duration: 0.45 }} className="w-full">
+              <motion.button onClick={() => setActive(null)} whileHover={{ x: 8 }} className={`inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2 ${backButtonMargin}`}>
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.2" d="M15 19l-7-7 7-7"/></svg>
+                <span>{t("departmentDetail9.backToMenu")}</span>
+              </motion.button>
+
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
+                {expertiseItems.map((item, idx) => (
+                  <motion.div key={idx} initial={{ opacity: 0, y: 30 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true, amount: 0.25 }} transition={{ delay: idx * 0.06, duration: 0.45 }} 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 relative z-10">
+                          {item.icon}
+                        </motion.div>
+                        <div className="absolute inset-0 bg-amber-500 rounded-xl blur-xl opacity-0 group-hover:opacity-25 transition-opacity duration-300" />
+                      </div>
+
+                      <div className="flex-1 pt-1">
+                        <p className="text-sm md:text-base text-gray-800 leading-relaxed font-medium">{item.text}</p>
+                      </div>
+
+                      <motion.div initial={{ opacity: 0, x: -8 }} whileHover={{ opacity: 1, x: 0 }} className="flex-shrink-0 text-amber-500 opacity-0 group-hover:opacity-100 transition-all duration-300">
+                        <svg className="w-4 h-4 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.2" d="M15 19l-7-7 7-7"/></svg>
+                      </motion.div>
+                    </div>
+                  </motion.div>
+                ))}
+
+                <motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} transition={{ delay: 0.6, duration: 0.45 }} className="mt-2 sm:mt-6 pt-4 border-t-2 border-gray-100 text-center col-span-full">
+                  <div className="inline-flex items-center gap-2 sm:gap-3 text-gray-500">
+                    <div className="w-2 h-2 bg-amber-500 rounded-full animate-pulse" />
+                    <span className="text-xs sm:text-sm font-medium">{t("departmentDetail9.ui.servicesProfessional")}</span>
+                    <div className="w-2 h-2 bg-orange-500 rounded-full animate-pulse" style={{ animationDelay: "0.5s" }} />
+                  </div>
+                </motion.div>
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </section>
+    </div>
+  );
+}
--- a/src/Components/Sections/Departments/Departments.jsx
+++ b/src/Components/Sections/Departments/Departments.jsx
@ -8,6 +8,7 @@ import {
  useVelocity,
 } from "framer-motion";
 import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";

 import d1 from "../../../../src/assets/Images/d1.jpeg";
 import d7 from "../../../../src/assets/Images/d7.jpeg";
@ -20,7 +21,11 @@ import d21 from "../../../../src/assets/Images/d21.jpeg";
 import d22 from "../../../../src/assets/Images/d22.jpg";

 const departments = [
-  { id: 1, title: "قسم إنشاء وصيانة المنشآت الصناعية وخطوط الإنتاج", image: d1 },
+  {
+    id: 1,
+    title: "قسم إنشاء وصيانة المنشآت الصناعية وخطوط الإنتاج",
+    image: d1,
+  },
  { id: 2, title: "قسم تنفيذ المرافق السكنية والخدمية", image: d7 },
  { id: 3, title: "قسم اعادة تأهيل وصيانة المباني", image: d14 },
  { id: 4, title: "قسم محطات الوقود وصيانة المنشآت النفطية", image: d17 },
@ -31,9 +36,10 @@ const departments = [
  { id: 9, title: "قسم الاتمتة والتحكم", image: d22 },
 ];

-function DepartmentCard({ dept, offset }) {
+function DepartmentCard({ dept, offset, index }) {
  const navigate = useNavigate();
  const wrapperRef = useRef(null);
+  const { t } = useTranslation();

  const rotateX = useMotionValue(0);
  const rotateY = useMotionValue(0);
@ -75,11 +81,7 @@ function DepartmentCard({ dept, offset }) {
    [-45, 0, 45]
  );

-  const progressParallax = useTransform(
-    scrollYProgress,
-    [0, 1],
-    [15, -15]
-  );
+  const progressParallax = useTransform(scrollYProgress, [0, 1], [15, -15]);

  const y = useTransform(
    [velocityParallax, progressParallax],
@ -87,13 +89,38 @@ function DepartmentCard({ dept, offset }) {
  );

  const handleClick = () => {
-    if (dept.id === 2) {
+    if (dept.id === 1) {
+      navigate("/departments/1");
+    }
+    if (dept.id === 9) {
+      navigate("/department-detail9");
+    }
+    if (dept.id === 8) {
+      navigate("/department-detail8");
+    }
+    if (dept.id === 7) {
+      navigate("/department-detail7");
+    }
+    if (dept.id === 6) {
+      navigate("/department-detail6");
+    }
+    if (dept.id === 5) {
+      navigate("/department-detail5");
+    }
+    if (dept.id === 4) {
+      navigate("/department-detail4");
+    }
+    if (dept.id === 3) {
+      navigate("/department-detail3");
+    } else if (dept.id === 2) {
      navigate("/department-detail2");
-    } else {
-      navigate(`/departments/${dept.id}`);
    }
  };

+  const translatedTitle = t(`departments.list.${dept.id - 1}`, {
+    defaultValue: dept.title,
+  });
+
  return (
    <div
      ref={wrapperRef}
@ -102,21 +129,18 @@ 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">
+      <div className="absolute bottom-4 sm:bottom-6 right-[-8px] sm:right-[-16px] md:right-[-32px] z-40 pointer-events-none max-w-xs">
        <motion.span
          style={{ translateZ: titleZ }}
-          className="block text-2xl md:text-3xl font-extrabold leading-snug
-                     text-white drop-shadow-lg
-                     bg-gradient-to-tr from-black/60 via-black/30 to-transparent
-                     px-3 py-1 rounded-lg"
+          className="block text-lg sm:text-xl md:text-2xl lg:text-3xl font-extrabold leading-snug text-white drop-shadow-lg bg-gradient-to-tr from-black/60 via-black/30 to-transparent px-2 sm:px-3 py-1 rounded-lg"
        >
-          {dept.title}
+          {translatedTitle}
        </motion.span>
      </div>

      <motion.img
        src={dept.image}
-        alt={dept.title}
+        alt={translatedTitle}
        draggable={false}
        onClick={handleClick}
        style={{
@ -128,21 +152,29 @@ function DepartmentCard({ dept, offset }) {
          boxShadow:
            "0 18px 50px rgba(2,6,23,0.12), 0 6px 18px rgba(2,6,23,0.06)",
        }}
-        className="cursor-pointer w-full h-96 object-cover rounded-2xl"
+        className="cursor-pointer w-full h-56 sm:h-72 md:h-96 lg:h-[28rem] object-cover rounded-2xl bg-white/20 backdrop-blur-md border border-white/10"
      />
    </div>
  );
 }

 export default function Departments() {
+  const { t } = useTranslation();
+
  return (
-    <section className="min-h-screen bg-white text-black" dir="rtl">
-      <header className="max-w-6xl mx-auto px-6 pt-12">
-        <h1 className="text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-orange-400 via-orange-500 to-orange-600">أقسامنا</h1>
+    <section
+      id="departments"
+      className="min-h-screen text-black bg-transparent"
+      dir="rtl"
+    >
+      <header className="max-w-6xl mx-auto px-4 sm:px-6 md:px-8 pt-10 sm:pt-12 relative z-20">
+        <h1 className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-[#041c40] via-[#57acd9] to-[#041c40] drop-shadow-lg">
+          {t("departments.heading", { defaultValue: "أقسامنا" })}
+        </h1>
      </header>

-      <main className="max-w-6xl mx-auto px-6 py-20">
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-x-16 gap-y-48">
+      <main className="max-w-6xl mx-auto px-4 sm:px-6 md:px-8 py-12 sm:py-16 md:py-20 relative z-20">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-x-8 md:gap-x-16 gap-y-10 sm:gap-y-16 md:gap-y-48">
          {departments.map((dept, index) => (
            <motion.div
              key={dept.id}
@ -158,6 +190,7 @@ export default function Departments() {
              <DepartmentCard
                dept={dept}
                offset={index % 2 === 0 ? "" : "md:translate-y-16"}
+                index={index}
              />
            </motion.div>
          ))}
--- a/src/Components/Sections/Home/Home.jsx
+++ b/src/Components/Sections/Home/Home.jsx
@ -1,11 +1,15 @@
 import React, { useEffect, useState, useRef } from "react";
-import styled from 'styled-components';
-import { Element } from "react-scroll";
-import Departments from "../Departments/Departments";
-
+import styled from "styled-components";
+import { useTranslation } from "react-i18next";
+import REXNT from "../../../assets/Images/REXNT.png";
+import TPSlogo from "../../../assets/Images/TPS-logo.png";
+import NSC from "../../../assets/Images/NSC.png";
+import LOGO from "../../../assets/Images/LOGO.png";
 export default function EngineeringHeroFlowbite() {
+  const { t, i18n } = useTranslation();
+
  const defaultConfig = {
-    main_title: "شريكك الهندسي لتنفيذ وإدارة المشاريع باحتراف",
+    main_title: "عندما تطلب الرؤية مستشارًا، ويحتاج المخطط منفذًا استراتيجيًا…\nنكون القرار بالقيادة من الرؤية حتى التسليم",
    subtitle:
      "حلول متكاملة تشمل التصميم، التنفيذ، التشغيل، والصيانة\nللمشاريع الصناعية والمدنية، وفق أحدث المعايير والتقنيات",
    primary_color: "#e67e22",
@ -17,12 +21,15 @@ export default function EngineeringHeroFlowbite() {
    font_size: 16,
  };

-  const [config, setConfig] = useState(defaultConfig);
+  const [config, setConfig] = useState({
+    ...defaultConfig,
+    main_title: t ? t("hero.main_title") : defaultConfig.main_title,
+    subtitle: t ? t("hero.subtitle") : defaultConfig.subtitle,
+  });
  const [isMounted, setIsMounted] = useState(false);

  const mainTitleRef = useRef(null);
  const subtitleRef = useRef(null);
-  const departmentsRef = useRef(null);

  useEffect(() => {
    const id = "cairo-font-link";
@ -30,143 +37,145 @@ export default function EngineeringHeroFlowbite() {
      const link = document.createElement("link");
      link.id = id;
      link.rel = "stylesheet";
-      link.href = "https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&display=swap";
+      link.href =
+        "https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&display=swap";
      document.head.appendChild(link);
    }
  }, []);

  useEffect(() => {
-    // slight delay to ensure mount then trigger animations
-    const t = setTimeout(() => setIsMounted(true), 60);
-    return () => clearTimeout(t);
+    const tId = setTimeout(() => setIsMounted(true), 60);
+    return () => clearTimeout(tId);
  }, []);

+  useEffect(() => {
+    const updateFromI18n = () => {
+      const lang = i18n.language || "en";
+      let main = t("hero.main_title");
+      if (lang && lang.startsWith("en")) {
+        main = main.replace(/[—–]/g, " - ");
+      }
+      setConfig((c) => ({
+        ...c,
+        main_title: main,
+        subtitle: t("hero.subtitle"),
+      }));
+      document.documentElement.lang = lang;
+      document.documentElement.dir = lang.startsWith("ar") ? "rtl" : "ltr";
+    };
+    updateFromI18n();
+    i18n.on && i18n.on("languageChanged", updateFromI18n);
+    return () => {
+      i18n.off && i18n.off("languageChanged", updateFromI18n);
+    };
+  }, [i18n, t]);
+
  useEffect(() => {
    const main = mainTitleRef.current;
    const sub = subtitleRef.current;
    const baseFontStack = "Arial, sans-serif";
-    const font = (config.font_family || defaultConfig.font_family) + ", " + baseFontStack;
+    const font =
+      (config.font_family || defaultConfig.font_family) + ", " + baseFontStack;
    const baseSize = config.font_size || defaultConfig.font_size;

-    if (main) {
-      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>`;
+    const applyStyles = () => {
+      const lang = i18n.language || "en";
+      const isArabic = lang.startsWith("ar");
+      const width = typeof window !== "undefined" ? window.innerWidth : 1024;
+      const responsiveBase =
+        width <= 400
+          ? baseSize * 0.78
+          : width <= 640
+          ? baseSize * 0.88
+          : width <= 1024
+          ? baseSize * 0.96
+          : baseSize;
+      const headingMultiplier = width <= 640 ? 2.6 : 3.2;
+      const subtitleMultiplier = width <= 640 ? 0.95 : 1.1;
+      const mainText = (config.main_title || defaultConfig.main_title)
+        .replace(/\s+/g, " ")
+        .trim();
+      const mainTextLength = mainText.length;
+      const lengthFactor =
+        mainTextLength > 100 ? 0.78 : mainTextLength > 70 ? 0.86 : 1.0;
+      const maxFont = 68;
+      const minFont = Math.max(Math.round(responsiveBase * 1.6), 14);
+      const root = document.documentElement;
+      root.style.setProperty("--base", `${responsiveBase}px`);
+
+      if (main) {
+        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;
+        const computedSize = Math.min(
+          Math.max(
+            Math.round(responsiveBase * headingMultiplier * lengthFactor),
+            minFont
+          ),
+          maxFont
+        );
+        main.style.fontSize = `${computedSize}px`;
+        main.style.color = config.text_color || defaultConfig.text_color;
+        main.style.fontWeight = 800;
+        main.style.textAlign = isArabic ? "right" : "left";
+        main.style.whiteSpace = "normal";
+        main.style.wordBreak = "break-word";
+        main.style.overflowWrap = "anywhere";
+        main.style.direction = isArabic ? "rtl" : "ltr";
+        main.style.display = "block";
      }

-      main.style.fontFamily = font;
-      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.innerHTML = (config.subtitle || defaultConfig.subtitle)
+          .split("\n")
+          .map((s) => `<div>${s.trim()}</div>`)
+          .join("");
+        sub.style.fontFamily = font;
+        const subSize = Math.round(responsiveBase * subtitleMultiplier);
+        sub.style.fontSize = `${subSize}px`;
+        sub.style.color = config.text_color || defaultConfig.text_color;
+        sub.style.textAlign = isArabic ? "right" : "left";
+        sub.style.maxWidth = "800px";
+        sub.style.whiteSpace = "normal";
+        sub.style.wordBreak = "break-word";
+        sub.style.overflowWrap = "anywhere";
+        sub.style.direction = isArabic ? "rtl" : "ltr";
+        sub.style.display = "block";
+      }

-    if (sub) {
-      sub.innerHTML = (config.subtitle || defaultConfig.subtitle)
-        .split("\n")
-        .map((s) => `<div>${s.trim()}</div>`)
-        .join("");
-      sub.style.fontFamily = font;
-      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;
-    root.style.setProperty("--ehb-primary", config.primary_color || defaultConfig.primary_color);
-    root.style.setProperty("--ehb-background", config.background_color || defaultConfig.background_color);
-    root.style.setProperty("--ehb-surface", config.secondary_surface || defaultConfig.secondary_surface);
-    root.style.setProperty("--ehb-action", config.secondary_action || defaultConfig.secondary_action);
-  }, [config]);
-
-  useEffect(() => {
-    const element = {
-      defaultConfig,
-      onConfigChange: async (newCfg) => {
-        setConfig((c) => ({ ...c, ...newCfg }));
-      },
-      mapToCapabilities: (cfg) => ({
-        recolorables: [
-          {
-            get: () => cfg.background_color || defaultConfig.background_color,
-            set: (value) => {
-              cfg.background_color = value;
-              window?.elementSdk?.setConfig?.({ background_color: value });
-              setConfig({ ...cfg });
-            },
-          },
-          {
-            get: () => cfg.secondary_surface || defaultConfig.secondary_surface,
-            set: (value) => {
-              cfg.secondary_surface = value;
-              window?.elementSdk?.setConfig?.({ secondary_surface: value });
-              setConfig({ ...cfg });
-            },
-          },
-          {
-            get: () => cfg.text_color || defaultConfig.text_color,
-            set: (value) => {
-              cfg.text_color = value;
-              window?.elementSdk?.setConfig?.({ text_color: value });
-              setConfig({ ...cfg });
-            },
-          },
-          {
-            get: () => cfg.primary_color || defaultConfig.primary_color,
-            set: (value) => {
-              cfg.primary_color = value;
-              window?.elementSdk?.setConfig?.({ primary_color: value });
-              setConfig({ ...cfg });
-            },
-          },
-          {
-            get: () => cfg.secondary_action || defaultConfig.secondary_action,
-            set: (value) => {
-              cfg.secondary_action = value;
-              window?.elementSdk?.setConfig?.({ secondary_action: value });
-              setConfig({ ...cfg });
-            },
-          },
-        ],
-        borderables: [],
-        fontEditable: {
-          get: () => cfg.font_family || defaultConfig.font_family,
-          set: (value) => {
-            cfg.font_family = value;
-            window?.elementSdk?.setConfig?.({ font_family: value });
-            setConfig({ ...cfg });
-          },
-        },
-        fontSizeable: {
-          get: () => cfg.font_size || defaultConfig.font_size,
-          set: (value) => {
-            cfg.font_size = value;
-            window?.elementSdk?.setConfig?.({ font_size: value });
-            setConfig({ ...cfg });
-          },
-        },
-      }),
-      mapToEditPanelValues: (cfg) =>
-        new Map([
-          ["main_title", cfg.main_title || defaultConfig.main_title],
-          ["subtitle", cfg.subtitle || defaultConfig.subtitle],
-        ]),
+      root.style.setProperty(
+        "--ehb-primary",
+        config.primary_color || defaultConfig.primary_color
+      );
+      root.style.setProperty(
+        "--ehb-background",
+        config.background_color || defaultConfig.background_color
+      );
+      root.style.setProperty(
+        "--ehb-surface",
+        config.secondary_surface || defaultConfig.secondary_surface
+      );
+      root.style.setProperty(
+        "--ehb-action",
+        config.secondary_action || defaultConfig.secondary_action
+      );
    };

-    if (window?.elementSdk?.init) {
-      try {
-        window.elementSdk.init(element);
-      } catch (e) {}
-    }
-  }, []);
+    applyStyles();
+    window.addEventListener("resize", applyStyles);
+    return () => window.removeEventListener("resize", applyStyles);
+  }, [config, i18n.language]);

  const goToDepartments = (e) => {
    e && e.preventDefault && e.preventDefault();
@ -178,30 +187,48 @@ export default function EngineeringHeroFlowbite() {
    }
  };

-  const OrangeActionButton = ({ onClick, children }) => {
+  const OrangeActionButton = ({ onClick }) => {
    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" />
+        <button
+          className="button"
+          onClick={onClick}
+          aria-label={t("hero.action")}
+        >
+          {t("hero.action")}
+          <svg
+            className="icon"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            aria-hidden
+          >
+            <path
+              fillRule="evenodd"
+              d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm4.28 10.28a.75.75 0 000-1.06l-3-3a.75.75 0 10-1.06 1.06l1.72 1.72H8.25a.75.75 0 000 1.5h5.69l-1.72 1.72a.75.75 0 101.06 1.06l3-3z"
+              clipRule="evenodd"
+            />
          </svg>
        </button>
      </StyledWrapper>
    );
  };

+  const isArabic = i18n.language && i18n.language.startsWith("ar");
+
  return (
-    <div dir="rtl" className="h-screen w-full overflow-hidden" style={{ background: "var(--ehb-background, #000000)" }}>
+    <div
+      dir={isArabic ? "rtl" : "ltr"}
+      className="h-screen w-full overflow-hidden content-container"
+      style={{ background: "transparent" }}
+    >
      <style>{` 
-        :root { --ehb-primary: #e67e22; --ehb-background: #000000; --ehb-surface: #95a5a6; --ehb-action: #34495e }
+        :root { --ehb-primary: #e67e22; --ehb-background: #000000; --ehb-surface: #95a5a6; --ehb-action: #34495e; --base: 16px }

        .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-layout{position:relative;z-index:10;height:100%;display:flex;align-items:center;justify-content:space-between;padding:clamp(12px,4vw,40px);gap:2rem;direction:ltr;flex-direction:row}
+        .hero-layout.layout-ltr{flex-direction:row-reverse}
        .hero-left{flex:1;display:flex;align-items:center;justify-content:flex-start;padding:20px;position:relative;flex-direction:column}
-
-        /* 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);
@ -213,13 +240,11 @@ export default function EngineeringHeroFlowbite() {
          65% { transform: translateX(18px) scale(1.02); opacity: 1; filter: blur(0); }
          100% { transform: translateX(0) scale(1); opacity: 1; }
        }
-
-        /* 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;
+          width:132px;height:132px;border-radius:9999px;background:linear-gradient(180deg, rgba(255 255 255 / 17%), rgba(255 255 255 / 35%));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);
+          transform: translateY(10px) scale(0.95);
          opacity: 0;
          will-change: transform, opacity;
        }
@ -228,18 +253,14 @@ export default function EngineeringHeroFlowbite() {
            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 img{max-width:78%;max-height:78%;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)}
-
        @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 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)}}
-
-        /* 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%);
@ -252,11 +273,9 @@ export default function EngineeringHeroFlowbite() {
          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}
        }
-
        .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)}
-
        @media (max-width: 1024px){
          .partner-strip{padding:10px 14px;border-radius:12px}
          .partner-item{min-width:72px;min-height:44px}
@ -267,14 +286,15 @@ export default function EngineeringHeroFlowbite() {
          .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}
+          .partner-bubble{width:100px;height:100px}
+          .partner-bubble img{max-width:64%;max-height:64%}
+          .hero-layout{gap:1rem}
        }
-
-        /* 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-content{flex:1;z-index:15;display:flex;flex-direction:column;justify-content:center;padding:clamp(12px,3.5vw,40px)}
+        .hero-content.content-rtl{align-items:flex-end}
+        .hero-content.content-ltr{align-items:flex-start}
        .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);
@ -290,17 +310,15 @@ export default function EngineeringHeroFlowbite() {
          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}
+          .hero-layout.layout-ltr{flex-direction:column;align-items:center;text-align:center}
+          .hero-content{align-items:center;padding-inline:16px}
+          .hero-content.content-rtl, .hero-content.content-ltr { align-items: center !important }
+          .hero-title{font-size:calc(var(--base,16px) * 2.0) !important; text-align:center !important}
+          .hero-subtitle{font-size:calc(var(--base,16px) * 1.0) !important; text-align:center !important}
+          .action-wrapper{align-self:center !important}
        }
-
-        /* BUTTON: slower pop-in */
        .button {
          position: relative;
          transition: all 0.3s ease-in-out;
@ -323,19 +341,16 @@ export default function EngineeringHeroFlowbite() {
          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;
@ -351,13 +366,11 @@ export default function EngineeringHeroFlowbite() {
          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%; }
@ -366,53 +379,64 @@ export default function EngineeringHeroFlowbite() {
      `}</style>

      <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-layout ${isArabic ? "" : "layout-ltr"}`}>
          <div className="hero-left">
-            <img src="src/assets/REXNT.png" alt="REXNT" />
-
+            <img src={REXNT} alt="REXNT" />
            <div className="partner-logos" aria-hidden>
-              <div className="partner-bubble" style={{ animationDelay: "0ms" }} aria-label="شريك TPS">
-                <img src="src/assets/TPS-logo.png" alt="TPS" />
+              <div
+                className="partner-bubble"
+                style={{ animationDelay: "0ms" }}
+                aria-label="شريك TPS"
+              >
+                <img src={TPSlogo} alt="TPS" />
              </div>
-              <div className="partner-bubble" style={{ animationDelay: "180ms" }} aria-label="شريك NSC">
-                <img src="src/assets/NSC.png" alt="NSC" />
+              <div
+                className="partner-bubble"
+                style={{ animationDelay: "180ms" }}
+                aria-label="شريك NSC"
+              >
+                <img src={NSC} alt="NSC" />
              </div>
-              <div className="partner-bubble" style={{ animationDelay: "360ms" }} aria-label="شريك LOGO">
-                <img src="src/assets/LOGO.png" alt="LOGO" />
+              <div
+                className="partner-bubble"
+                style={{ animationDelay: "360ms" }}
+                aria-label="شريك LOGO"
+              >
+                <img src={LOGO} alt="LOGO" />
              </div>
            </div>
          </div>

-          <div className="hero-content">
-            <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
+            className={`hero-content ${
+              isArabic ? "content-rtl" : "content-ltr"
+            }`}
+          >
+            <h1
+              ref={mainTitleRef}
+              className="hero-title text-white"
+              style={{
+                fontWeight: 800,
+                marginBottom: 16,
+                textShadow: "2px 2px 10px rgba(0,0,0,0.6)",
+              }}
+            />
+            <p
+              ref={subtitleRef}
+              className="hero-subtitle text-white"
+              style={{
+                maxWidth: 800,
+                textShadow: "1px 1px 6px rgba(0,0,0,0.45)",
+                lineHeight: 1.6,
+              }}
+            />
+            <div className="action-wrapper" style={{ marginTop: 18 }}>
+              <OrangeActionButton onClick={goToDepartments} />
            </div>
          </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>
  );
 }
@ -439,11 +463,22 @@ const StyledWrapper = styled.div`
    cursor: pointer;
  }

-  .icon { width: 24px; height: 24px; transition: all 0.3s ease-in-out; }
+  .icon {
+    width: 24px;
+    height: 24px;
+    transition: all 0.3s ease-in-out;
+  }

-  .button:hover { transform: scale(1.05); border-color: #fff9; }
-  .button:hover .icon { transform: translate(4px); }
-  .button:hover::before { animation: shine 1.5s ease-out infinite; }
+  .button:hover {
+    transform: scale(1.05);
+    border-color: #fff9;
+  }
+  .button:hover .icon {
+    transform: translate(4px);
+  }
+  .button:hover::before {
+    animation: shine 1.5s ease-out infinite;
+  }

  .button::before {
    content: "";
@ -462,8 +497,14 @@ const StyledWrapper = styled.div`
  }

  @keyframes shine {
-    0% { left: -100px; }
-    60% { left: 100%; }
-    to { left: 100%; }
+    0% {
+      left: -100px;
+    }
+    60% {
+      left: 100%;
+    }
+    to {
+      left: 100%;
+    }
  }
 `;
--- a/src/Components/Sections/Services/Services.jsx
+++ b/src/Components/Sections/Services/Services.jsx
@ -1,656 +1,152 @@
-import React, { useState, useEffect } from "react";
-import { Element } from "react-scroll";
-import { useTranslation } from "react-i18next";
-import { motion, AnimatePresence } from "framer-motion";
-import {
-  Globe,
-  MessageSquare,
-  Bell,
-  Package,
-  BarChart3,
-  Zap,
-  Shield,
-  Users,
-  Clock,
-  CheckCircle
-} from "lucide-react";
+import React from "react";
+import { Wallet, Zap, Users, PieChart, Sparkles } from "lucide-react";
+// import { useTranslation } from "react-i18next";
+import { withTranslation } from "react-i18next";

-const CARDS_PER_PAGE = 4;
-
-const Services = () => {
-  const { t, ready } = useTranslation();
-  const servicesData = [
+const Services = ({ t, i18n })=> {
+  
+  const features = [
    {
-      id: "service-1",
-      title: t('tradesafe.services.platform.title'),
-      description: t('tradesafe.services.platform.description'),
-      details: t('tradesafe.services.platform.details'),
-      icon: <Globe className="w-10 h-10" />,
-      color: "from-[#23558f] to-[#3360b2]",
-      bgColor: "bg-gradient-to-br from-[#23558f]/20 to-[#3360b2]/20",
-      features: t('tradesafe.services.platform.features', { returnObjects: true })
+      id: 1,
+      icon: <Wallet className="w-8 h-8" />,
+      title: t("services.features.industrial.title"),
+      description: t("services.features.industrial.description"),
    },
    {
-      id: "service-2",
-      title: t('tradesafe.services.orders.title'),
-      description: t('tradesafe.services.orders.description'),
-      details: t('tradesafe.services.orders.details'),
-      icon: <Package className="w-10 h-10" />,
-      color: "from-[#3360b2] to-[#3c5ee3]",
-      bgColor: "bg-gradient-to-br from-[#3360b2]/20 to-[#3c5ee3]/20",
-      features: t('tradesafe.services.orders.features', { returnObjects: true })
-    },
-    {
-      id: "service-3",
-      title: t('tradesafe.services.communication.title'),
-      description: t('tradesafe.services.communication.description'),
-      details: t('tradesafe.services.communication.details'),
-      icon: <MessageSquare className="w-10 h-10" />,
-      color: "from-[#3c5ee3] to-[#5c7ce3]",
-      bgColor: "bg-gradient-to-br from-[#3c5ee3]/20 to-[#5c7ce3]/20",
-      features: t('tradesafe.services.communication.features', { returnObjects: true })
-    },
-    {
-      id: "service-4",
-      title: t('tradesafe.services.notifications.title'),
-      description: t('tradesafe.services.notifications.description'),
-      details: t('tradesafe.services.notifications.details'),
-      icon: <Bell className="w-10 h-10" />,
-      color: "from-[#4a90e2] to-[#6aa8f2]",
-      bgColor: "bg-gradient-to-br from-[#4a90e2]/20 to-[#6aa8f2]/20",
-      features: t('tradesafe.services.notifications.features', { returnObjects: true })
-    },
-    {
-      id: "service-5",
-      title: t('tradesafe.services.dashboard.title'),
-      description: t('tradesafe.services.dashboard.description'),
-      details: t('tradesafe.services.dashboard.details'),
-      icon: <BarChart3 className="w-10 h-10" />,
-      color: "from-[#2ecc71] to-[#1abc9c]",
-      bgColor: "bg-gradient-to-br from-[#2ecc71]/20 to-[#1abc9c]/20",
-      features: t('tradesafe.services.dashboard.features', { returnObjects: true })
-    },
-    {
-      id: "service-6",
-      title: t('tradesafe.services.solutions.title'),
-      description: t('tradesafe.services.solutions.description'),
-      details: t('tradesafe.services.solutions.details'),
-      icon: <Shield className="w-10 h-10" />,
-      color: "from-[#9b59b6] to-[#8e44ad]",
-      bgColor: "bg-gradient-to-br from-[#9b59b6]/20 to-[#8e44ad]/20",
-      features: t('tradesafe.services.solutions.features', { returnObjects: true })
-    },
-    {
-      id: "service-7",
-      title: t('tradesafe.services.speed.title'),
-      description: t('tradesafe.services.speed.description'),
-      details: t('tradesafe.services.speed.details'),
-      icon: <Zap className="w-10 h-10" />,
-      color: "from-[#f39c12] to-[#e67e22]",
-      bgColor: "bg-gradient-to-br from-[#f39c12]/20 to-[#e67e22]/20",
-      features: t('tradesafe.services.speed.features', { returnObjects: true })
-    },
-    {
-      id: "service-8",
-      title: t('tradesafe.services.network.title'),
-      description: t('tradesafe.services.network.description'),
-      details: t('tradesafe.services.network.details'),
-      icon: <Users className="w-10 h-10" />,
-      color: "from-[#3498db] to-[#2980b9]",
-      bgColor: "bg-gradient-to-br from-[#3498db]/20 to-[#2980b9]/20",
-      features: t('tradesafe.services.network.features', { returnObjects: true })
-    }
-  ];
-
-  const reasonsToChooseUs = [
-    {
+      id: 2,
      icon: <Zap className="w-8 h-8" />,
-      text: t('tradesafe.reasons.speed.text'),
-      description: t('tradesafe.reasons.speed.description')
+      title: t("services.features.residential.title"),
+      description: t("services.features.residential.description"),
    },
    {
-      icon: <Shield className="w-8 h-8" />,
-      text: t('tradesafe.reasons.reliability.text'),
-      description: t('tradesafe.reasons.reliability.description')
+      id: 3,
+      icon: <Users className="w-8 h-8" />,
+      title: t("services.features.infrastructure.title"),
+      description: t("services.features.infrastructure.description"),
    },
    {
-      icon: <Globe className="w-8 h-8" />,
-      text: t('tradesafe.reasons.connection.text'),
-      description: t('tradesafe.reasons.connection.description')
+      id: 4,
+      icon: <PieChart className="w-8 h-8" />,
+      title: t("services.features.maintenance.title"),
+      description: t("services.features.maintenance.description"),
    },
-    {
-      icon: <MessageSquare className="w-8 h-8" />,
-      text: t('tradesafe.reasons.communication.text'),
-      description: t('tradesafe.reasons.communication.description')
-    },
-    {
-      icon: <Clock className="w-8 h-8" />,
-      text: t('tradesafe.reasons.time.text'),
-      description: t('tradesafe.reasons.time.description')
-    },
-    {
-      icon: <CheckCircle className="w-8 h-8" />,
-      text: t('tradesafe.reasons.solutions.text'),
-      description: t('tradesafe.reasons.solutions.description')
-    }
  ];

-  const [expandedCards, setExpandedCards] = useState({});
-  const [hoveredCard, setHoveredCard] = useState(null);
-  const [page, setPage] = useState(0);
-
-  const startIndex = page * CARDS_PER_PAGE;
-  const endIndex = startIndex + CARDS_PER_PAGE;
-  const visibleServices = servicesData.slice(startIndex, endIndex);
-  const totalPages = Math.ceil(servicesData.length / CARDS_PER_PAGE);
-
-  const toggleCard = (cardId) => {
-    setExpandedCards(prev => ({
-      ...prev,
-      [cardId]: !prev[cardId]
-    }));
-  };
-  
-  const toggleAllCards = () => {
-    const allExpanded = Object.values(expandedCards).every(Boolean);
-    const newState = {};
-    visibleServices.forEach(service => {
-      newState[service.id] = !allExpanded;
-    });
-    setExpandedCards(newState);
-  };
-
-  const handleNextPage = () => {
-    const newExpandedState = {};
-    visibleServices.forEach(service => {
-      newExpandedState[service.id] = false;
-    });
-    setExpandedCards(newExpandedState);
-    setPage((prev) => (prev + 1) % totalPages);
-  };
-
-  const handlePrevPage = () => {
-    const newExpandedState = {};
-    visibleServices.forEach(service => {
-      newExpandedState[service.id] = false;
-    });
-    setExpandedCards(newExpandedState);
-    setPage((prev) => (prev - 1 + totalPages) % totalPages);
-  };
-
-  useEffect(() => {
-    const newExpandedState = {};
-    visibleServices.forEach(service => {
-      newExpandedState[service.id] = expandedCards[service.id] || false;
-    });
-    setExpandedCards(newExpandedState);
-  }, [page]);
-  
-  const openPdfPresentation = () => {
-    const pdfUrl = `${window.location.origin}/trader-safe.pdf`;
-    window.open(pdfUrl, "_blank", "noopener,noreferrer");
-  };
-  
-  const openPlatformLink = () => {
-    const platformUrl = "http://45.93.137.91/";
-    window.open(platformUrl, "_blank", "noopener,noreferrer");
-  };
-
-  if (!ready) return (
-    <div className="flex justify-center items-center h-screen bg-gradient-to-br from-[#23558f] via-[#3360b2] to-[#3c5ee3]">
-      <div className="animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-white"></div>
-    </div>
-  );
-
  return (
-    <>
-      <Element name="services">
-        <motion.section
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          transition={{ duration: 0.8 }}
-          className="w-full min-h-screen py-12 px-4 sm:px-6 text-gray-800 flex flex-col items-center font-sans relative overflow-hidden"
-          style={{ 
-            direction: "rtl",
-            background: "linear-gradient(135deg, #dceafe 0%, #e8f4ff 25%, #c6e2ff 50%, #a3d0ff 75%, #23558f 100%)"
-          }}
-        >
-          <div className="absolute inset-0 overflow-hidden">
-            <div className="absolute -top-40 -right-40 w-80 h-80 bg-[#3c5ee3] rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse"></div>
-            <div className="absolute -bottom-40 -left-40 w-80 h-80 bg-[#2ecc71] rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse delay-1000"></div>
-            <div className="absolute top-1/2 left-1/3 w-60 h-60 bg-[#9b59b6] rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse delay-500"></div>
-            <div className="absolute top-0 left-0 w-full h-32 bg-gradient-to-b from-[#23558f]/30 to-transparent"></div>
-            <div className="absolute bottom-0 left-0 w-full h-32 bg-gradient-to-t from-[#3c5ee3]/30 to-transparent"></div>
-          </div>
-
-          <div className="relative z-10 w-full max-w-7xl mx-auto">
-            <motion.div
-              initial={{ y: -50, opacity: 0 }}
-              animate={{ y: 0, opacity: 1 }}
-              transition={{ duration: 0.6 }}
-              className="text-center mb-8"
-            >
-              <h1 className="pt-6 mb-4 text-4xl font-extrabold md:text-5xl lg:text-6xl">
-                <motion.span
-                  className="bg-clip-text text-transparent bg-gradient-to-r from-[#2d59b3] via-blue-200 to-[#32a896]"
-                  animate={{
-                    backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"]
-                  }}
-                  transition={{
-                    duration: 5,
-                    repeat: Infinity,
-                    ease: "linear"
-                  }}
-                  style={{
-                    backgroundSize: "200% 100%"
-                  }}
-                >
-                  {t('tradesafe.services.title')}
-                </motion.span>
-              </h1>
-              <p className="text-lg font-medium text-gray-700 lg:text-xl mb-6 max-w-3xl mx-auto">
-                 {t('tradesafe.subtitle')}
-              </p>
-              <div className="flex justify-center mb-8">
-                <motion.button
-                  whileHover={{ scale: 1.05 }}
-                  whileTap={{ scale: 0.95 }}
-                  onClick={toggleAllCards}
-                  className="px-6 py-3 bg-gradient-to-r from-[#23558f] to-[#3c5ee3] text-white font-semibold rounded-full shadow-lg hover:shadow-xl transition-all duration-300 flex items-center gap-2"
-                >
-                  {Object.values(expandedCards).every(Boolean) ? (
-                    <>
-                      <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 15l7-7 7 7" />
-                      </svg>
-                      {t('tradesafe.buttons.collapseAll')}
-                    </>
-                  ) : (
-                    <>
-                      <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-                      </svg>
-                      {t('tradesafe.buttons.showDetails')}
-                    </>
-                  )}
-                </motion.button>
-              </div>
-            </motion.div>
-
-            <div className="w-full px-4 relative z-10">
-              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
-                <AnimatePresence>
-                  {visibleServices.map((service, index) => {
-                    const isExpanded = expandedCards[service.id] || false;
-                    const isHovered = hoveredCard === service.id;
-                    return (
-                      <motion.div
-                        key={service.id}
-                        initial={{ scale: 0.9, opacity: 0, y: 20 }}
-                        animate={{ 
-                          scale: 1, 
-                          opacity: 1, 
-                          y: 0,
-                        }}
-                        exit={{ scale: 0.9, opacity: 0, y: -20 }}
-                        transition={{ 
-                          duration: 0.4, 
-                          delay: index * 0.1,
-                          type: "spring",
-                          stiffness: 100
-                        }}
-                        whileHover={{ 
-                          y: -5, 
-                          transition: { duration: 0.2 } 
-                        }}
-                        onHoverStart={() => setHoveredCard(service.id)}
-                        onHoverEnd={() => setHoveredCard(null)}
-                        onClick={() => toggleCard(service.id)}
-                        className={`relative cursor-pointer transition-all duration-300 ease-in-out p-6 rounded-2xl shadow-lg backdrop-blur-sm bg-white/90 border-2 ${
-                          isExpanded 
-                            ? 'border-[#3c5ee3] shadow-xl' 
-                            : 'border-white/20 hover:border-[#3c5ee3]/30'
-                        }`}
-                      >
-                        <div className={`absolute inset-0 rounded-2xl ${service.bgColor} opacity-20`}></div>
-                        <div className="relative z-10 h-full flex flex-col">
-                          <div className="flex items-center justify-between mb-4">
-                            <div className={`p-3 rounded-xl bg-gradient-to-br ${service.color} text-white shadow-lg`}>
-                              {service.icon}
-                            </div>
-                            <motion.div
-                              animate={{ rotate: isExpanded ? 180 : 0 }}
-                              transition={{ duration: 0.3 }}
-                              className="w-6 h-6 text-gray-500"
-                            >
-                              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-                              </svg>
-                            </motion.div>
-                          </div>
-                          <div className="flex-1">
-                            <h3 className="text-xl font-bold text-gray-800 mb-2">
-                              {service.title}
-                            </h3>
-                            <p className="text-gray-600 text-sm mb-4">
-                              {service.description}
-                            </p>
-                            <AnimatePresence>
-                              {isExpanded && (
-                                <motion.div
-                                  initial={{ height: 0, opacity: 0 }}
-                                  animate={{ height: 'auto', opacity: 1 }}
-                                  exit={{ height: 0, opacity: 0 }}
-                                  transition={{ duration: 0.3 }}
-                                  className="overflow-hidden"
-                                >
-                                  <div className="pt-4 border-t border-gray-200">
-                                    <p className="text-gray-700 text-sm mb-3 leading-relaxed">
-                                      {service.details}
-                                    </p>
-                                    <div className="flex flex-wrap gap-2">
-                                      {Array.isArray(service.features) && service.features.map((feature, idx) => (
-                                        <motion.span
-                                          key={idx}
-                                          initial={{ scale: 0.8, opacity: 0 }}
-                                          animate={{ scale: 1, opacity: 1 }}
-                                          transition={{ delay: idx * 0.05 }}
-                                          className="px-3 py-1 bg-gradient-to-r from-white to-gray-50 text-[#23558f] text-xs font-medium rounded-full border border-[#23558f]/20 shadow-sm"
-                                        >
-                                          {feature}
-                                        </motion.span>
-                                      ))}
-                                    </div>
-                                  </div>
-                                </motion.div>
-                              )}
-                            </AnimatePresence>
-                            <AnimatePresence>
-                              {!isExpanded && isHovered && (
-                                <motion.div
-                                  initial={{ height: 0, opacity: 0 }}
-                                  animate={{ height: 'auto', opacity: 1 }}
-                                  exit={{ height: 0, opacity: 0 }}
-                                  transition={{ duration: 0.2 }}
-                                  className="overflow-hidden"
-                                >
-                                  <div className="pt-3 border-t border-dashed border-gray-300 mt-3">
-                                    <p className="text-gray-700 text-xs mb-2 line-clamp-2">
-                                      {service.details.split(' - ')[0]}
-                                    </p>
-                                    <div className="flex flex-wrap gap-1">
-                                      {Array.isArray(service.features) && service.features.slice(0, 2).map((feature, idx) => (
-                                        <span
-                                          key={idx}
-                                          className="px-2 py-1 bg-gradient-to-r from-[#dceafe] to-[#e8f4ff] text-[#23558f] text-xs font-medium rounded-full"
-                                        >
-                                          {feature}
-                                        </span>
-                                      ))}
-                                    </div>
-                                  </div>
-                                </motion.div>
-                              )}
-                            </AnimatePresence>
-                          </div>
-                        </div>
-                        {isHovered && !isExpanded && (
-                          <motion.div
-                            className="absolute inset-0 rounded-2xl bg-gradient-to-br from-[#3c5ee3]/5 to-transparent"
-                            initial={{ opacity: 0 }}
-                            animate={{ opacity: 1 }}
-                            exit={{ opacity: 0 }}
-                          />
-                        )}
-                        {isExpanded && (
-                          <motion.div
-                            className="absolute inset-0 rounded-2xl bg-gradient-to-br from-[#3c5ee3]/10 to-transparent"
-                            initial={{ opacity: 0 }}
-                            animate={{ opacity: 1 }}
-                          />
-                        )}
-                      </motion.div>
-                    );
-                  })}
-                </AnimatePresence>
-              </div>
-              <div className="flex justify-center items-center gap-6 mt-12">
-                <motion.button
-                  whileHover={{ scale: 1.05, x: -5 }}
-                  whileTap={{ scale: 0.95 }}
-                  onClick={handlePrevPage}
-                  className="p-4 rounded-full bg-gradient-to-r from-[#23558f] to-[#3360b2] text-white shadow-lg hover:shadow-xl transition-all duration-300"
-                >
-                  <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
-                  </svg>
-                </motion.button>
-                <div className="flex gap-3">
-                  {Array.from({ length: totalPages }).map((_, idx) => (
-                    <motion.button
-                      key={idx}
-                      whileHover={{ scale: 1.2 }}
-                      whileTap={{ scale: 0.9 }}
-                      onClick={() => {
-                        const newExpandedState = {};
-                        visibleServices.forEach(service => {
-                          newExpandedState[service.id] = false;
-                        });
-                        setExpandedCards(newExpandedState);
-                        setPage(idx);
-                      }}
-                      className={`w-10 h-10 rounded-full flex items-center justify-center font-medium transition-all ${
-                        page === idx 
-                          ? 'bg-gradient-to-r from-[#3c5ee3] to-[#2ecc71] text-white shadow-lg scale-110' 
-                          : 'bg-white/80 text-gray-600 hover:bg-white'
-                      }`}
-                    >
-                      {idx + 1}
-                    </motion.button>
-                  ))}
-                </div>
-                <motion.button
-                  whileHover={{ scale: 1.05, x: 5 }}
-                  whileTap={{ scale: 0.95 }}
-                  onClick={handleNextPage}
-                  className="p-4 rounded-full bg-gradient-to-r from-[#23558f] to-[#3360b2] text-white shadow-lg hover:shadow-xl transition-all duration-300"
-                >
-                  <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-                  </svg>
-                </motion.button>
-              </div>
-              <div className="text-center mt-4">
-                <span className="text-gray-600 font-medium">
-                  {t('tradesafe.buttons.page', { current: page + 1, total: totalPages })}
-                </span>
-              </div>
-            </div>
-          </div>
-        </motion.section>
-      </Element>
-
-      <Element name="why-us">
-        <motion.section
-          initial={{ opacity: 0 }}
-          whileInView={{ opacity: 1 }}
-          transition={{ duration: 0.8 }}
-          viewport={{ once: true }}
-          className="w-full py-16 px-4 sm:px-6 text-gray-800 flex flex-col items-center font-sans relative overflow-hidden"
-          style={{ 
-            direction: "rtl",
-            background: "linear-gradient(135deg, #dceafe 0%, #e8f4ff 25%, #c6e2ff 50%, #a3d0ff 75%, #23558f 100%)"
-          }}
-        >
-          <div className="absolute inset-0 bg-white/90"></div>
-          
-          <div className="absolute inset-0 overflow-hidden">
-            <div className="absolute -top-40 -right-40 w-80 h-80 bg-[#3c5ee3] rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse"></div>
-            <div className="absolute -bottom-40 -left-40 w-80 h-80 bg-[#2ecc71] rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse delay-1000"></div>
-            <div className="absolute top-1/2 left-1/3 w-60 h-60 bg-[#9b59b6] rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse delay-500"></div>
-            
-            <div className="absolute top-0 left-0 w-full h-32 bg-gradient-to-b from-[#23558f]/30 to-transparent"></div>
-            <div className="absolute bottom-0 left-0 w-full h-32 bg-gradient-to-t from-[#3c5ee3]/30 to-transparent"></div>
-          </div>
-          
-          <div className="relative z-10 w-full max-w-6xl mx-auto">
-            <motion.h1
-              initial={{ y: -30, opacity: 0 }}
-              whileInView={{ y: 0, opacity: 1 }}
-              transition={{ duration: 0.6 }}
-              className="pt-6 mb-12 text-4xl font-extrabold md:text-5xl lg:text-6xl text-center"
-            >
-              <motion.span
-                className="bg-clip-text text-transparent bg-gradient-to-r from-[#2d59b3] via-blue-200 to-[#32a896]"
-                animate={{
-                  backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"]
-                }}
-                transition={{
-                  duration: 5,
-                  repeat: Infinity,
-                  ease: "linear"
-                }}
-                style={{
-                  backgroundSize: "200% 100%"
-                }}
+    <section id="services" >
+    <div className="min-h-screen bg-transparent font-sans overflow-hidden relative" dir="rtl">
+    <div className="min-h-screen bg-transparent font-sans overflow-hidden relative">
+      <div className="absolute inset-0 z-0 overflow-hidden">
+        <div className="absolute inset-0 bg-transparent"></div>
+      </div>
+      <div className="relative z-10 flex flex-col lg:flex-row min-h-screen items-center">
+        <div className="flex flex-col justify-center max-h-screen">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-10 max-w-4xl mx-auto p-6">
+            {features.map((feature) => (
+              <div 
+                key={feature.id} 
+                className="group relative overflow-hidden"
              >
-                {t('tradesafe.reasons.title')}
-              </motion.span>
-            </motion.h1>
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 px-4">
-              {reasonsToChooseUs.map((reason, index) => (
-                <motion.div
-                  key={index}
-                  initial={{ y: 50, opacity: 0, scale: 0.9 }}
-                  whileInView={{ y: 0, opacity: 1, scale: 1 }}
-                  transition={{ 
-                    duration: 0.5, 
-                    delay: index * 0.1,
-                    type: "spring",
-                    stiffness: 100
-                  }}
-                  whileHover={{ 
-                    y: -8, 
-                    scale: 1.02,
-                    transition: { duration: 0.2 } 
-                  }}
-                  className="group relative bg-white/95 backdrop-blur-sm p-6 rounded-2xl shadow-lg border border-gray-100 hover:border-[#3c5ee3]/50 hover:shadow-2xl transition-all duration-300"
-                >
-                  <div className="flex items-start gap-4">
-                    <motion.div
-                      whileHover={{ rotate: [0, -10, 10, 0] }}
-                      transition={{ duration: 0.5 }}
-                      className={`p-3 rounded-xl bg-gradient-to-br ${
-                        index % 3 === 0 ? 'from-[#23558f] to-[#3360b2]' :
-                        index % 3 === 1 ? 'from-[#3c5ee3] to-[#5c7ce3]' :
-                        'from-[#2ecc71] to-[#1abc9c]'
-                      } text-white shadow-lg`}
-                    >
-                      {reason.icon}
-                    </motion.div>
-                    
+                <div className="absolute inset-0 bg-gradient-to-br from-white to-[#47718b] rounded-2xl shadow-lg group-hover:shadow-2xl transition-all duration-500 border border-gray-200 group-hover:border-[#47718b]"></div>
+                
+                <div className="relative p-6 z-10">
+                  <div className="flex items-start space-x-5 rtl:space-x-reverse">
+                    <div className="p-3 bg-gradient-to-br from-white to-[#47718b] rounded-xl group-hover:from-[#47718b] group-hover:to-[#063e5b] group-hover:text-white transition-all duration-500 shadow-sm group-hover:shadow-lg">
+                      {feature.icon}
+                    </div>
                    <div className="flex-1">
-                      <h3 className="text-lg font-bold text-gray-800 mb-2">
-                        {reason.text}
+                      <h3 className="text-xl font-bold text-gray-800 mb-3 group-hover:text-[#47718b] transition-colors duration-500">
+                        {feature.title}
                      </h3>
-                      <p className="text-gray-600 text-sm leading-relaxed">
-                        {reason.description}
+                      <p className="text-gray-600 leading-relaxed text-sm">
+                        {feature.description}
                      </p>
                    </div>
                  </div>
-                  <motion.div
-                    className="absolute inset-0 rounded-2xl bg-gradient-to-br from-[#3c5ee3]/0 via-[#3c5ee3]/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"
-                    initial={false}
-                  />
-                  <motion.div
-                    className="absolute bottom-0 left-1/2 h-1 w-0 group-hover:w-3/4 bg-gradient-to-r from-transparent via-[#3c5ee3] to-transparent rounded-full"
-                    initial={{ x: "-50%", width: "0%" }}
-                    whileHover={{ width: "75%" }}
-                    transition={{ duration: 0.3 }}
-                  />
-                </motion.div>
-              ))}
-            </div>
-            <motion.div
-              initial={{ opacity: 0, scale: 0.9, y: 30 }}
-              whileInView={{ opacity: 1, scale: 1, y: 0 }}
-              transition={{ duration: 0.6, delay: 0.3 }}
-              className="mt-16 p-8 rounded-2xl shadow-2xl text-center relative overflow-hidden"
-              style={{
-                background: "linear-gradient(135deg, #23558f 0%, #3360b2 33%, #3c5ee3 66%, #2ecc71 100%)"
-              }}
-            >
-              <div className="absolute inset-0">
-                <div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full blur-2xl"></div>
-                <div className="absolute bottom-0 left-0 w-32 h-32 bg-white/10 rounded-full blur-2xl"></div>
-              </div>
-              
-              <div className="relative z-10">
-                <h3 className="text-2xl md:text-3xl font-bold text-white mb-4">
-                  {t('tradesafe.reasons.cta.title')}
-                </h3>
-                <p className="text-white/90 text-lg mb-6 max-w-2xl mx-auto">
-                  {t('tradesafe.reasons.cta.subtitle')}
-                </p>
-                <div className="flex flex-col sm:flex-row gap-4 justify-center">
-                  <motion.button
-                    whileHover={{ 
-                      scale: 1.05,
-                      boxShadow: "0 10px 25px rgba(0,0,0,0.2)"
-                    }}
-                    whileTap={{ scale: 0.95 }}
-                    onClick={openPlatformLink}
-                    className="px-8 py-3 bg-white text-[#23558f] font-bold rounded-full shadow-lg hover:shadow-xl transition-all duration-300 flex items-center justify-center gap-2"
-                  >
-                    <svg 
-                      xmlns="http://www.w3.org/2000/svg" 
-                      className="h-5 w-5" 
-                      fill="none" 
-                      viewBox="0 0 24 24" 
-                      stroke="currentColor"
-                    >
-                      <path 
-                        strokeLinecap="round" 
-                        strokeLinejoin="round" 
-                        strokeWidth={2} 
-                        d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" 
-                      />
-                    </svg>
-                    {t('tradesafe.buttons.startNow')}
-                  </motion.button>
-                  <motion.button
-                    whileHover={{ 
-                      scale: 1.05,
-                      boxShadow: "0 10px 25px rgba(255,255,255,0.2)"
-                    }}
-                    whileTap={{ scale: 0.95 }}
-                    onClick={openPdfPresentation}
-                    className="px-8 py-3 bg-transparent border-2 border-white text-white font-bold rounded-full hover:bg-white/10 transition-all duration-300 flex items-center justify-center gap-2"
-                  >
-                    <svg 
-                      xmlns="http://www.w3.org/2000/svg" 
-                      className="h-5 w-5" 
-                      fill="none" 
-                      viewBox="0 0 24 24" 
-                      stroke="currentColor"
-                    >
-                      <path 
-                        strokeLinecap="round" 
-                        strokeLinejoin="round" 
-                        strokeWidth={2} 
-                        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>
-                    {t('tradesafe.buttons.viewPresentation')}
-                  </motion.button>
                </div>
              </div>
-            </motion.div>
+            ))}
          </div>
-        </motion.section>
-      </Element>
-    </>
+        </div>
+        <div className="relative lg:w-1/2 lg:min-h-screen flex items-center justify-center py-16 lg:py-0">
+          <div className="absolute inset-0 lg:inset-y-0 lg:right-0 lg:left-auto lg:w-[100%]">
+            <div className="absolute inset-0">
+              <div className="hidden lg:block absolute inset-0">
+                <div 
+                  className="absolute inset-0 bg-gradient-to-br from-[#57acd9] via-gray-700/85 to-[#47718b] backdrop-blur-xl"
+                  style={{
+                    clipPath: 'circle(150% at 0% 50%)',
+                    borderTopLeftRadius: '0',
+                    borderBottomLeftRadius: '0',
+                    borderTopRightRadius: '9999px',
+                    borderBottomRightRadius: '9999px'
+                  }}
+                > 
+                </div>
+              </div>
+              <div className="lg:hidden absolute inset-0">
+                <div 
+                  className="absolute inset-0 bg-gradient-to-br from-[#57acd9] via-gray-700/85 to-[#47718b] backdrop-blur-xl"
+                  style={{
+                    clipPath: 'ellipse(150% 100% at 50% 0%)',
+                    borderBottomLeftRadius: '9999px',
+                    borderBottomRightRadius: '9999px'
+                  }}
+                >
+                  <div className="absolute inset-0 bg-gradient-to-b from-white/10 via-transparent to-white/5"></div>
+                  <div className="absolute inset-0 border-2 border-white/20"></div>
+                </div>
+              </div>
+            </div>
+            <div className="absolute inset-0 overflow-hidden">
+              <div className="absolute top-1/4 -left-16 w-64 h-64 bg-white/10 rounded-full backdrop-blur-md"></div>
+              <div className="absolute bottom-1/3 -left-8 w-48 h-48 bg-purple-400/20 rounded-full backdrop-blur-lg"></div>
+              <div className="absolute top-1/2 right-1/4 w-32 h-32 bg-indigo-400/15 rounded-full backdrop-blur-md animate-pulse"></div>
+            </div>
+            <div className="absolute top-0 left-0 w-32 h-full bg-gradient-to-r from-white/5 to-transparent"></div>
+          </div>
+          {/* <div className="relative z-20 text-white p-8 md:p-12 lg:p-16 max-w-2xl mx-auto lg:mr-16 lg:ml-auto"> */}
+         <div 
+  className={`relative z-20 text-white p-8 md:p-12 lg:p-16 max-w-2xl mx-auto lg:mr-16 lg:ml-auto ${
+    i18n && i18n.language === 'ar' ? 'text-right' : 'text-left'
+  }`}
+>
+            <div className="space-y-8 lg:space-y-10">
+              <div className="relative">
+                <div className="flex items-center space-x-3 mb-2 rtl:space-x-reverse">
+                  <span className="text-sm font-semibold tracking-widest text-white">
+                    {t("services.summary")}
+                  </span>
+                  <Sparkles className="w-6 h-6 text-[#57acd9]" />
+                </div>
+                {/* <h1 className="text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-white via-white to-[#539cc4]"> */}
+                <h1 className={`text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-white via-white to-[#539cc4] ${
+  i18n && i18n.language === 'ar' ? 'text-right' : 'text-left'
+}`}>
+                  {t("services.pageTitle")}
+                </h1>
+              </div>
+              <div className="space-y-4">
+                {/* <h2 className="text-2xl md:text-3xl lg:text-4xl font-bold leading-tight drop-shadow-xl"> */}
+<h2 className={`text-2xl md:text-3xl lg:text-4xl font-bold leading-tight drop-shadow-xl ${
+  i18n && i18n.language === 'ar' ? 'text-right' : 'text-left'
+}`}>
+                  {t("services.mainHeading")}
+                </h2>
+                <div className="w-20 h-1 bg-gradient-to-r from-white to-[#57acd9] rounded-full"></div>
+              </div>
+              <p className="text-lg md:text-xl text-purple-100/90 font-light leading-relaxed max-w-lg">
+                {t("services.description")}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    </div>
+</section>
  );
 };

-export default Services;
+// export default Services;
+export default withTranslation()(Services);
--- a/src/assets/Images/LOGO.png
+++ b/src/assets/Images/LOGO.png
--- a/src/assets/Images/NSC.png
+++ b/src/assets/Images/NSC.png
--- a/src/assets/Images/REXNT.png
+++ b/src/assets/Images/REXNT.png
--- a/src/assets/Images/TPS-logo.png
+++ b/src/assets/Images/TPS-logo.png
--- a/src/assets/Images/d23.jpg
+++ b/src/assets/Images/d23.jpg
--- a/src/assets/Images/d24.png
+++ b/src/assets/Images/d24.png
--- a/src/assets/Images/d25.jpeg
+++ b/src/assets/Images/d25.jpeg
--- a/src/assets/Images/d26.jpeg
+++ b/src/assets/Images/d26.jpeg
--- a/src/assets/Images/d27.jpeg
+++ b/src/assets/Images/d27.jpeg
--- a/src/assets/Images/d28.jpeg
+++ b/src/assets/Images/d28.jpeg
--- a/src/assets/Images/d29.jpeg
+++ b/src/assets/Images/d29.jpeg
--- a/src/assets/Images/d30.png
+++ b/src/assets/Images/d30.png
--- a/src/assets/Images/d31.jpeg
+++ b/src/assets/Images/d31.jpeg
--- a/src/assets/Images/d32.jpeg
+++ b/src/assets/Images/d32.jpeg
--- a/src/assets/Images/d33.png
+++ b/src/assets/Images/d33.png
--- a/src/assets/Images/d34.jpg
+++ b/src/assets/Images/d34.jpg
--- a/src/assets/Images/d35.jpeg
+++ b/src/assets/Images/d35.jpeg
--- a/src/assets/Images/d36.jpg
+++ b/src/assets/Images/d36.jpg
--- a/src/i18n.js
+++ b/src/i18n.js
--- a/src/index.css
+++ b/src/index.css
@ -1,8 +1,10 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
+@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;800&display=swap');
@layer base {
     :root {
+        overflow-y: scroll !important;
        --primary: #041c40;
        --secondary: #e06923;
        --tertiary: #313131;
@ -11,6 +13,7 @@
        --border-color: #d1c9be;
    }
    .dark {
+        overflow-y: scroll !important;
        --primary: #041c40;
        --secondary: #e06923;
        --tertiary: #313131;
@ -19,16 +22,18 @@
        --border-color: #4a4a4a;
    }
    body {
+        overflow-y: scroll !important;
        margin: 0;
        padding: 0;
        min-height: 100vh;
        width: 100vw;
        overflow-x: hidden;
-        font-family: system-ui, -apple-system, sans-serif;
+        font-family: 'Cairo', system-ui, -apple-system, sans-serif;
        color: var(--text-color);
        transition: background-color 0.3s ease, color 0.3s ease;
    }
    html {
+        overflow-y: scroll !important;
        scroll-behavior: smooth;
        overflow-x: hidden;
    }
--- a/vite.config.js
+++ b/vite.config.js
@ -1,19 +1,25 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";

 export default defineConfig({
    plugins: [react()],
    css: {
-        postcss: './postcss.config.js',
+        postcss: "./postcss.config.js",
    },
    build: {
        rollupOptions: {
            output: {
                manualChunks: {
-                    'react-vendor': ['react', 'react-dom'],
-                    'animation-vendor': ['three', 'styled-components', 'framer-motion'],
-                }
-            }
-        }
-    }
-})
+                    "react-vendor": ["react", "react-dom"],
+                    "animation-vendor": ["three", "styled-components", "framer-motion"],
+                },
+                assetFileNames: ({ name }) => {
+                    if (name && name.match(/\.(png|jpe?g|svg|gif|webp)$/)) {
+                        return "assets/images/[name][extname]";
+                    }
+                    return "assets/[name]-[hash][extname]";
+                },
+            },
+        },
+    },
+});
Author	SHA1	Message	Date
Rahaf	69528ac0c7	Edit background of logo in home All checks were successful Build frontend / build (push) Successful in 28s Details	2026-01-14 14:28:28 +03:00
Rahaf	bcd76787f4	Edit title About us All checks were successful Build frontend / build (push) Successful in 24s Details	2026-01-14 14:21:32 +03:00
Rahaf	0792b32fcc	Edit text in services All checks were successful Build frontend / build (push) Successful in 33s Details	2026-01-14 13:58:28 +03:00
Rahaf	955a827d78	Edit text All checks were successful Build frontend / build (push) Successful in 34s Details	2026-01-14 13:26:50 +03:00
Rahaf	9c641cc650	Merge branch 'main' of http://45.93.137.91:3000/Rahaf/REXNT	2026-01-14 13:08:05 +03:00
Rahaf	93b89b7665	Edit contact us	2026-01-14 12:59:32 +03:00
Beilin	d3f4bb9349	fixing translation All checks were successful Build frontend / build (push) Successful in 25s Details	2026-01-13 22:25:22 +03:00
Beilin	a7c577ee09	Merge branch 'main' of http://45.93.137.91:3000/Rahaf/REXNT All checks were successful Build frontend / build (push) Successful in 32s Details	2026-01-13 22:04:11 +03:00
Beilin	a96b4fd326	fixing translation	2026-01-13 22:03:36 +03:00
mouazkh	5cf1e54c58	fix: guard projects and items mapping to prevent TypeError on button click All checks were successful Build frontend / build (push) Successful in 34s Details	2026-01-13 21:48:14 +03:00
mouazkh	88ab4119e8	Merge branch 'main' of http://45.93.137.91:3000/Rahaf/REXNT All checks were successful Build frontend / build (push) Successful in 29s Details	2026-01-13 20:44:03 +03:00
mouazkh	301232fef1	fix: handle non-array translation data before mapping buttons	2026-01-13 20:42:48 +03:00
Beilin	fa6f8aba26	Merge branch 'main' of http://45.93.137.91:3000/Rahaf/REXNT All checks were successful Build frontend / build (push) Successful in 29s Details	2026-01-13 20:09:51 +03:00
Beilin	2ea31c3f5d	test	2026-01-13 20:09:34 +03:00
mouazkh	062a4257e4	edited the home to fix the images import All checks were successful Build frontend / build (push) Successful in 51s Details	2026-01-13 19:14:59 +03:00
Rahaf	e9ae4e7bf6	Edit path for images in Home All checks were successful Build frontend / build (push) Successful in 1m4s Details	2026-01-13 16:35:20 +03:00
Rahaf	a7f6e766d4	Deleted pdf	2026-01-13 16:28:33 +03:00
Rahaf	dee674afc5	Edit vite config All checks were successful Build frontend / build (push) Successful in 46s Details	2026-01-13 13:02:55 +03:00
hamzeh	32bf587e4b	Forgot to change the name of the repo... All checks were successful Build frontend / build (push) Successful in 1m13s Details	2026-01-13 02:10:02 +00:00
hamzeh	b16193bc39	Changed workflow branch to main Some checks failed Build frontend / build (push) Failing after 34s Details	2026-01-13 02:07:57 +00:00
hamzeh	119059ea67	Copied workflow from CustomsClearance	2026-01-13 02:06:12 +00:00
Hamzeh	0b743a8639	Added workflow file	2026-01-13 05:03:01 +03:00
Beilin	3e82aab933	translation	2026-01-13 03:58:08 +03:00
Rahaf	6987f87a92	Added Email js	2026-01-12 17:29:19 +03:00
Rahaf	fcbc65a5e1	Added translation	2026-01-12 16:53:25 +03:00
Rahaf	963805cada	Added Id	2026-01-12 16:46:00 +03:00
Rahaf	ee7ceb0745	Added translation	2026-01-12 15:27:19 +03:00
Beilin	4ee30601b5	fixing depts	2026-01-12 11:27:13 +03:00
Beilin	b41f4c335c	fixing depts	2026-01-12 09:21:50 +03:00
Beilin	6423d42ea9	fixing depts	2026-01-11 01:55:51 +03:00
Beilin	8f2dc93663	departments	2026-01-10 01:51:30 +03:00
Beilin	645149a6ef	Merge branch 'main' of http://45.93.137.91:3000/Rahaf/REXNT	2026-01-09 21:54:39 +03:00
Beilin	7a3eb020a0	department3	2026-01-09 21:54:07 +03:00
Rahaf	2529675964	Merge	2026-01-09 21:47:45 +03:00
Rahaf	bb709c4523	merge	2026-01-09 20:38:10 +03:00
Rahaf	92d42c1bb5	Merge branch 'main' of http://45.93.137.91:3000/Rahaf/REXNT	2026-01-09 20:28:53 +03:00
Rahaf	4bedf7b193	Added contact us Added services	2026-01-09 19:24:08 +03:00