diff --git a/package-lock.json b/package-lock.json
index 1d81c8a..c75eb3d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,8 @@
         "@emailjs/browser": "^4.4.1",
         "@heroicons/react": "^2.2.0",
         "aos": "^2.3.4",
+        "flowbite": "^4.0.1",
+        "flowbite-react": "^0.12.16",
         "clsx": "^2.1.1",
         "framer-motion": "^12.23.26",
         "i18next": "^25.7.3",
@@ -20,6 +22,7 @@
         "react-dom": "^19.2.0",
         "react-i18next": "^16.5.0",
         "react-icons": "^5.5.0",
+        "react-router-dom": "^7.11.0",
         "react-scroll": "^1.9.3",
         "styled-components": "^6.1.19",
         "tailwind-merge": "^3.4.0",
@@ -46,7 +49,6 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
       "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -86,6 +88,7 @@
       "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",
@@ -355,6 +358,9 @@
         "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",
@@ -469,6 +475,7 @@
         "x64"
       ],
       "dev": true,
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -486,6 +493,7 @@
         "arm64"
       ],
       "dev": true,
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -503,6 +511,7 @@
         "x64"
       ],
       "dev": true,
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -520,6 +529,7 @@
         "arm"
       ],
       "dev": true,
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -537,6 +547,7 @@
         "arm64"
       ],
       "dev": true,
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -554,6 +565,7 @@
         "ia32"
       ],
       "dev": true,
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -571,6 +583,7 @@
         "loong64"
       ],
       "dev": true,
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -588,6 +601,7 @@
         "mips64el"
       ],
       "dev": true,
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -605,6 +619,7 @@
         "ppc64"
       ],
       "dev": true,
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -622,6 +637,7 @@
         "riscv64"
       ],
       "dev": true,
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -639,6 +655,7 @@
         "s390x"
       ],
       "dev": true,
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -656,6 +673,7 @@
         "x64"
       ],
       "dev": true,
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -673,6 +691,7 @@
         "arm64"
       ],
       "dev": true,
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -690,6 +709,7 @@
         "x64"
       ],
       "dev": true,
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -707,6 +727,7 @@
         "arm64"
       ],
       "dev": true,
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -724,6 +745,7 @@
         "x64"
       ],
       "dev": true,
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -741,6 +763,7 @@
         "arm64"
       ],
       "dev": true,
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -758,6 +781,7 @@
         "x64"
       ],
       "dev": true,
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -775,6 +799,7 @@
         "arm64"
       ],
       "dev": true,
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -792,6 +817,7 @@
         "ia32"
       ],
       "dev": true,
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -809,6 +835,7 @@
         "x64"
       ],
       "dev": true,
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -975,6 +1002,68 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.3.tgz",
+      "integrity": "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.10"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.4.tgz",
+      "integrity": "sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.7.3",
+        "@floating-ui/utils": "^0.2.10"
+      }
+    },
+    "node_modules/@floating-ui/react": {
+      "version": "0.27.16",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.27.16.tgz",
+      "integrity": "sha512-9O8N4SeG2z++TSM8QA/KTeKFBVCNEz/AGS7gWPJf6KFRzmRWixFRnCnkPHRDwSVZW6QPDO6uT0P2SpWNKCc9/g==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.1.6",
+        "@floating-ui/utils": "^0.2.10",
+        "tabbable": "^6.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=17.0.0",
+        "react-dom": ">=17.0.0"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.6.tgz",
+      "integrity": "sha512-4JX6rEatQEvlmgU80wZyq9RT96HZJa88q8hp0pBd+LrczeDI4o6uA2M+uvxngVHo4Ihr8uibXxH6+70zhAFrVw==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.7.4"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.10",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz",
+      "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
+      "license": "MIT"
+    },
+    "node_modules/@heroicons/react": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.2.0.tgz",
+      "integrity": "sha512-LMcepvRaS9LYHJGsF0zzmgKCUim/X3N/DQKc4jepAXJ7l8QxJ1PmxJzqplF2Z3FE4PqBAIGyJAQ/w4B5dsqbtQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">= 16 || ^19.0.0-rc"
+      }
+    },
     "node_modules/@heroicons/react": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.2.0.tgz",
@@ -1036,6 +1125,12 @@
         "url": "https://github.com/sponsors/nzakas"
       }
     },
+    "node_modules/@iarna/toml": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/@iarna/toml/-/toml-2.2.5.tgz",
+      "integrity": "sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg==",
+      "license": "ISC"
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@@ -1090,7 +1185,6 @@
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
       "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@nodelib/fs.stat": "2.0.5",
@@ -1104,7 +1198,6 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
       "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 8"
@@ -1114,7 +1207,6 @@
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
       "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@nodelib/fs.scandir": "2.1.5",
@@ -1124,6 +1216,16 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@rolldown/pluginutils": {
       "version": "1.0.0-beta.53",
       "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.53.tgz",
@@ -1131,6 +1233,52 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@rollup/plugin-node-resolve": {
+      "version": "15.3.1",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.3.1.tgz",
+      "integrity": "sha512-tgg6b91pAybXHJQMAAwW9VuWBO6Thi+q7BCNARLwSqlmsHz0XYURtGvh/AuwSADXSI4h/2uHbs7s4FzlZDGSGA==",
+      "license": "MIT",
+      "dependencies": {
+        "@rollup/pluginutils": "^5.0.1",
+        "@types/resolve": "1.20.2",
+        "deepmerge": "^4.2.2",
+        "is-module": "^1.0.0",
+        "resolve": "^1.22.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^2.78.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/pluginutils": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.3.0.tgz",
+      "integrity": "sha512-5EdhGZtnu3V88ces7s53hhfK5KSASnJZv8Lulpc04cWO3REESroJXg73DFsOmgbU2BhwV0E20bu2IDZb3VKW4Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "estree-walker": "^2.0.2",
+        "picomatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.54.0",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.54.0.tgz",
@@ -1139,6 +1287,7 @@
         "arm"
       ],
       "dev": true,
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1153,6 +1302,7 @@
         "arm64"
       ],
       "dev": true,
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1167,6 +1317,7 @@
         "arm64"
       ],
       "dev": true,
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1181,6 +1332,7 @@
         "x64"
       ],
       "dev": true,
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1195,6 +1347,7 @@
         "arm64"
       ],
       "dev": true,
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1209,6 +1362,7 @@
         "x64"
       ],
       "dev": true,
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1223,6 +1377,7 @@
         "arm"
       ],
       "dev": true,
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1237,6 +1392,7 @@
         "arm"
       ],
       "dev": true,
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1251,6 +1407,7 @@
         "arm64"
       ],
       "dev": true,
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1265,6 +1422,7 @@
         "arm64"
       ],
       "dev": true,
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1279,6 +1437,7 @@
         "loong64"
       ],
       "dev": true,
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1293,6 +1452,7 @@
         "ppc64"
       ],
       "dev": true,
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1307,6 +1467,7 @@
         "riscv64"
       ],
       "dev": true,
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1321,6 +1482,7 @@
         "riscv64"
       ],
       "dev": true,
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1335,6 +1497,7 @@
         "s390x"
       ],
       "dev": true,
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1349,6 +1512,7 @@
         "x64"
       ],
       "dev": true,
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1363,6 +1527,7 @@
         "x64"
       ],
       "dev": true,
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1377,6 +1542,7 @@
         "arm64"
       ],
       "dev": true,
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1391,6 +1557,7 @@
         "arm64"
       ],
       "dev": true,
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1405,6 +1572,7 @@
         "ia32"
       ],
       "dev": true,
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1419,6 +1587,7 @@
         "x64"
       ],
       "dev": true,
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1433,12 +1602,281 @@
         "x64"
       ],
       "dev": true,
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
         "win32"
       ]
     },
+    "node_modules/@tailwindcss/node": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.18.tgz",
+      "integrity": "sha512-DoR7U1P7iYhw16qJ49fgXUlry1t4CpXeErJHnQ44JgTSKMaZUdf17cfn5mHchfJ4KRBZRFA/Coo+MUF5+gOaCQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.4",
+        "enhanced-resolve": "^5.18.3",
+        "jiti": "^2.6.1",
+        "lightningcss": "1.30.2",
+        "magic-string": "^0.30.21",
+        "source-map-js": "^1.2.1",
+        "tailwindcss": "4.1.18"
+      }
+    },
+    "node_modules/@tailwindcss/node/node_modules/tailwindcss": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.18.tgz",
+      "integrity": "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==",
+      "license": "MIT"
+    },
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.18.tgz",
+      "integrity": "sha512-EgCR5tTS5bUSKQgzeMClT6iCY3ToqE1y+ZB0AKldj809QXk1Y+3jB0upOYZrn9aGIzPtUsP7sX4QQ4XtjBB95A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.1.18",
+        "@tailwindcss/oxide-darwin-arm64": "4.1.18",
+        "@tailwindcss/oxide-darwin-x64": "4.1.18",
+        "@tailwindcss/oxide-freebsd-x64": "4.1.18",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.18",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.18",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.1.18",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.1.18",
+        "@tailwindcss/oxide-linux-x64-musl": "4.1.18",
+        "@tailwindcss/oxide-wasm32-wasi": "4.1.18",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.18",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.1.18"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.18.tgz",
+      "integrity": "sha512-dJHz7+Ugr9U/diKJA0W6N/6/cjI+ZTAoxPf9Iz9BFRF2GzEX8IvXxFIi/dZBloVJX/MZGvRuFA9rqwdiIEZQ0Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.18.tgz",
+      "integrity": "sha512-Gc2q4Qhs660bhjyBSKgq6BYvwDz4G+BuyJ5H1xfhmDR3D8HnHCmT/BSkvSL0vQLy/nkMLY20PQ2OoYMO15Jd0A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.18.tgz",
+      "integrity": "sha512-FL5oxr2xQsFrc3X9o1fjHKBYBMD1QZNyc1Xzw/h5Qu4XnEBi3dZn96HcHm41c/euGV+GRiXFfh2hUCyKi/e+yw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.18.tgz",
+      "integrity": "sha512-Fj+RHgu5bDodmV1dM9yAxlfJwkkWvLiRjbhuO2LEtwtlYlBgiAT4x/j5wQr1tC3SANAgD+0YcmWVrj8R9trVMA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.18.tgz",
+      "integrity": "sha512-Fp+Wzk/Ws4dZn+LV2Nqx3IilnhH51YZoRaYHQsVq3RQvEl+71VGKFpkfHrLM/Li+kt5c0DJe/bHXK1eHgDmdiA==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.18.tgz",
+      "integrity": "sha512-S0n3jboLysNbh55Vrt7pk9wgpyTTPD0fdQeh7wQfMqLPM/Hrxi+dVsLsPrycQjGKEQk85Kgbx+6+QnYNiHalnw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.18.tgz",
+      "integrity": "sha512-1px92582HkPQlaaCkdRcio71p8bc8i/ap5807tPRDK/uw953cauQBT8c5tVGkOwrHMfc2Yh6UuxaH4vtTjGvHg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.18.tgz",
+      "integrity": "sha512-v3gyT0ivkfBLoZGF9LyHmts0Isc8jHZyVcbzio6Wpzifg/+5ZJpDiRiUhDLkcr7f/r38SWNe7ucxmGW3j3Kb/g==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.18.tgz",
+      "integrity": "sha512-bhJ2y2OQNlcRwwgOAGMY0xTFStt4/wyU6pvI6LSuZpRgKQwxTec0/3Scu91O8ir7qCR3AuepQKLU/kX99FouqQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.18.tgz",
+      "integrity": "sha512-LffYTvPjODiP6PT16oNeUQJzNVyJl1cjIebq/rWWBF+3eDst5JGEFSc5cWxyRCJ0Mxl+KyIkqRxk1XPEs9x8TA==",
+      "bundleDependencies": [
+        "@napi-rs/wasm-runtime",
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@tybys/wasm-util",
+        "@emnapi/wasi-threads",
+        "tslib"
+      ],
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.7.1",
+        "@emnapi/runtime": "^1.7.1",
+        "@emnapi/wasi-threads": "^1.1.0",
+        "@napi-rs/wasm-runtime": "^1.1.0",
+        "@tybys/wasm-util": "^0.10.1",
+        "tslib": "^2.4.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.18.tgz",
+      "integrity": "sha512-HjSA7mr9HmC8fu6bdsZvZ+dhjyGCLdotjVOgLA2vEqxEBZaQo9YTX4kwgEvPCpRh8o4uWc4J/wEoFzhEmjvPbA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.18.tgz",
+      "integrity": "sha512-bJWbyYpUlqamC8dpR7pfjA0I7vdF6t5VpUGMWRkXVE3AXgIZjYUYAK7II1GNaxR8J1SSrSrppRar8G++JekE3Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/postcss": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.1.18.tgz",
+      "integrity": "sha512-Ce0GFnzAOuPyfV5SxjXGn0CubwGcuDB0zcdaPuCSzAa/2vII24JTkH+I6jcbXLb1ctjZMZZI6OjDaLPJQL1S0g==",
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "@tailwindcss/node": "4.1.18",
+        "@tailwindcss/oxide": "4.1.18",
+        "postcss": "^8.4.41",
+        "tailwindcss": "4.1.18"
+      }
+    },
+    "node_modules/@tailwindcss/postcss/node_modules/tailwindcss": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.18.tgz",
+      "integrity": "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==",
+      "license": "MIT"
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -1504,6 +1942,7 @@
       "integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -1518,6 +1957,149 @@
         "@types/react": "^19.2.0"
       }
     },
+    "node_modules/@types/resolve": {
+      "version": "1.20.2",
+      "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
+      "integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==",
+      "license": "MIT"
+    },
+    "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/@typescript-eslint/project-service": {
+      "version": "8.46.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.46.2.tgz",
+      "integrity": "sha512-PULOLZ9iqwI7hXcmL4fVfIsBi6AN9YxRc0frbvmg8f+4hQAjQ5GYNKK0DIArNo+rOKmR/iBYwkpBmnIwin4wBg==",
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/tsconfig-utils": "^8.46.2",
+        "@typescript-eslint/types": "^8.46.2",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/tsconfig-utils": {
+      "version": "8.46.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.46.2.tgz",
+      "integrity": "sha512-a7QH6fw4S57+F5y2FIxxSDyi5M4UfGF+Jl1bCGd7+L4KsaUY80GsiF/t0UoRFDHAguKlBaACWJRmdrc6Xfkkag==",
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/types": {
+      "version": "8.46.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.46.2.tgz",
+      "integrity": "sha512-lNCWCbq7rpg7qDsQrd3D6NyWYu+gkTENkG5IKYhUIcxSb59SQC/hEQ+MrG4sTgBVghTonNWq42bA/d4yYumldQ==",
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree": {
+      "version": "8.46.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.46.2.tgz",
+      "integrity": "sha512-f7rW7LJ2b7Uh2EiQ+7sza6RDZnajbNbemn54Ob6fRwQbgcIn+GWfyuHDHRYgRoZu1P4AayVScrRW+YfbTvPQoQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/project-service": "8.46.2",
+        "@typescript-eslint/tsconfig-utils": "8.46.2",
+        "@typescript-eslint/types": "8.46.2",
+        "@typescript-eslint/visitor-keys": "8.46.2",
+        "debug": "^4.3.4",
+        "fast-glob": "^3.3.2",
+        "is-glob": "^4.0.3",
+        "minimatch": "^9.0.4",
+        "semver": "^7.6.0",
+        "ts-api-utils": "^2.1.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/semver": {
+      "version": "7.7.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
+      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys": {
+      "version": "8.46.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.46.2.tgz",
+      "integrity": "sha512-tUFMXI4gxzzMXt4xpGJEsBsTox0XbNQ1y94EwlD/CuZwFcQP79xfQqMhau9HsRc/J0cAPA/HZt1dZPtGn9V/7w==",
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.46.2",
+        "eslint-visitor-keys": "^4.2.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "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",
@@ -1551,6 +2133,7 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -1605,14 +2188,12 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
       "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
       "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "normalize-path": "^3.0.0",
@@ -1626,7 +2207,6 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8.6"
@@ -1650,7 +2230,6 @@
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
       "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/argparse": {
@@ -1660,6 +2239,24 @@
       "dev": true,
       "license": "Python-2.0"
     },
+    "node_modules/array-timsort": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/array-timsort/-/array-timsort-1.0.3.tgz",
+      "integrity": "sha512-/+3GRL7dDAGEfM6TseQk/U+mi18TU2Ms9I3UlLdUMhz2hbvGNTKdj9xniwXfUqgYhHxRx0+8UnKkvlNwVU+cWQ==",
+      "license": "MIT"
+    },
+    "node_modules/ast-types": {
+      "version": "0.16.1",
+      "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.16.1.tgz",
+      "integrity": "sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.23",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.23.tgz",
@@ -1701,7 +2298,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/baseline-browser-mapping": {
@@ -1718,7 +2314,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
       "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -1742,7 +2337,6 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
       "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "fill-range": "^7.1.1"
@@ -1771,6 +2365,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -1799,7 +2394,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
       "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 6"
@@ -1814,6 +2408,15 @@
         "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",
@@ -1856,7 +2459,6 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
       "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "anymatch": "~3.1.2",
@@ -1881,7 +2483,6 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "is-glob": "^4.0.1"
@@ -1896,6 +2497,12 @@
       "integrity": "sha512-GzIjNdcEtH4ieA2S8NmrSxv7DfEV5fmixQeyTmqmRmRJPGpRBaSnA2a0VrCjyT8iW8JjEdMbKzDotAJf+ajgaQ==",
       "license": "Unlicense"
     },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
+      "license": "MIT"
+    },
     "node_modules/clsx": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
@@ -1929,12 +2536,25 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
       "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 6"
       }
     },
+    "node_modules/comment-json": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/comment-json/-/comment-json-4.4.1.tgz",
+      "integrity": "sha512-r1To31BQD5060QdkC+Iheai7gHwoSZobzunqkf2/kQ6xIAfJyrKNAFUwdKvkK7Qgu7pVTKQEa7ok7Ed3ycAJgg==",
+      "license": "MIT",
+      "dependencies": {
+        "array-timsort": "^1.0.3",
+        "core-util-is": "^1.0.3",
+        "esprima": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -1949,6 +2569,25 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/cookie": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
+      "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
+      "license": "MIT"
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -1984,11 +2623,30 @@
         "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",
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-      "dev": true,
       "license": "MIT",
       "bin": {
         "cssesc": "bin/cssesc"
@@ -2004,11 +2662,22 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/debounce": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/debounce/-/debounce-2.2.0.tgz",
+      "integrity": "sha512-Xks6RUDLZFdz8LIdR6q0MTH44k7FikOmnh5xkSjMig6ch45afc8sjTjRQf3P6ax8dMgcQrYO/AR2RGWURrruqw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
       "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ms": "^2.1.3"
@@ -2029,6 +2698,24 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/deepmerge": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/deepmerge-ts": {
+      "version": "7.1.5",
+      "resolved": "https://registry.npmjs.org/deepmerge-ts/-/deepmerge-ts-7.1.5.tgz",
+      "integrity": "sha512-HOJkrhaYsweh+W+e74Yn7YStZOilkoPb6fycpwNLKzSPtruFs48nYis0zy5yJz1+ktUhHxoRDJ27RQAWLIJVJw==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
     "node_modules/detect-libc": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
@@ -2045,14 +2732,12 @@
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
       "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
-      "dev": true,
       "license": "Apache-2.0"
     },
     "node_modules/dlv": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
       "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/electron-to-chromium": {
@@ -2067,6 +2752,7 @@
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.2.tgz",
       "integrity": "sha512-HyNQImnsOC7X9PMNaCIeAm4ISCQXs5a5YasTXVliKv4uuBo1dKrG0A+uQS8M5eXjVMnLg3WgXaKvprHlFJQffw==",
       "dev": true,
+      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "bin": {
@@ -2133,6 +2819,7 @@
       "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",
@@ -2238,7 +2925,6 @@
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
       "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
-      "dev": true,
       "license": "Apache-2.0",
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -2265,6 +2951,19 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "license": "BSD-2-Clause",
+      "bin": {
+        "esparse": "bin/esparse.js",
+        "esvalidate": "bin/esvalidate.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/esquery": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
@@ -2301,6 +3000,12 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "license": "MIT"
+    },
     "node_modules/esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -2322,7 +3027,6 @@
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
       "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
@@ -2339,7 +3043,6 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "is-glob": "^4.0.1"
@@ -2366,7 +3069,6 @@
       "version": "1.20.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
       "integrity": "sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "reusify": "^1.0.4"
@@ -2407,7 +3109,6 @@
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
       "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "to-regex-range": "^5.0.1"
@@ -2454,6 +3155,93 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/flowbite": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/flowbite/-/flowbite-4.0.1.tgz",
+      "integrity": "sha512-UwUjvnqrQTiFm3uMJ0WWnzKXKoDyNyfyEzoNnxmZo6KyDzCedjqZw1UW0Oqdn+E0iYVdPu0fizydJN6e4pP9Rw==",
+      "license": "MIT",
+      "dependencies": {
+        "@popperjs/core": "^2.9.3",
+        "flowbite-datepicker": "^2.0.0",
+        "mini-svg-data-uri": "^1.4.3",
+        "postcss": "^8.5.1",
+        "tailwindcss": "^4.1.12"
+      }
+    },
+    "node_modules/flowbite-datepicker": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/flowbite-datepicker/-/flowbite-datepicker-2.0.0.tgz",
+      "integrity": "sha512-m81hl0Bimq45MUg4maJLOnXrX+C9lZ0AkjMb9uotuVUSr729k/YiymWDfVAm63AYDH7g7y3rI3ke3XaBzWWqLw==",
+      "license": "MIT",
+      "dependencies": {
+        "@rollup/plugin-node-resolve": "^15.2.3",
+        "@tailwindcss/postcss": "^4.1.17"
+      }
+    },
+    "node_modules/flowbite-react": {
+      "version": "0.12.16",
+      "resolved": "https://registry.npmjs.org/flowbite-react/-/flowbite-react-0.12.16.tgz",
+      "integrity": "sha512-lq7Go6AhcrWI98efbuea9xG5j9DNUUiHkWROOQ8772g61CoGkkOz6hjU/WC7SIHfmvHiQFaCDIs7nhxH3uUbRg==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "1.7.3",
+        "@floating-ui/react": "0.27.16",
+        "@iarna/toml": "2.2.5",
+        "@typescript-eslint/typescript-estree": "8.46.2",
+        "chokidar": "4.0.3",
+        "classnames": "2.5.1",
+        "comment-json": "4.4.1",
+        "debounce": "2.2.0",
+        "deepmerge-ts": "7.1.5",
+        "klona": "2.0.6",
+        "package-manager-detector": "1.5.0",
+        "recast": "0.23.11",
+        "tailwind-merge-v2": "npm:tailwind-merge@2.6.0",
+        "tailwind-merge-v3": "npm:tailwind-merge@3.0.1"
+      },
+      "bin": {
+        "flowbite-react": "dist/cli/bin.js"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19",
+        "react-dom": "^18 || ^19",
+        "tailwindcss": "^3 || ^4"
+      }
+    },
+    "node_modules/flowbite-react/node_modules/chokidar": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+      "license": "MIT",
+      "dependencies": {
+        "readdirp": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/flowbite-react/node_modules/readdirp": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.18.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/flowbite/node_modules/tailwindcss": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.18.tgz",
+      "integrity": "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==",
+      "license": "MIT"
+    },
     "node_modules/fraction.js": {
       "version": "5.3.4",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz",
@@ -2514,7 +3302,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -2534,7 +3321,6 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
       "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "is-glob": "^4.0.3"
@@ -2570,7 +3356,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
       "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "function-bind": "^1.1.2"
@@ -2624,6 +3409,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.28.4"
       },
@@ -2686,7 +3472,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "binary-extensions": "^2.0.0"
@@ -2699,7 +3484,6 @@
       "version": "2.16.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
       "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "hasown": "^2.0.2"
@@ -2715,7 +3499,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -2725,7 +3508,6 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-extglob": "^2.1.1"
@@ -2734,11 +3516,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-module": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
+      "integrity": "sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==",
+      "license": "MIT"
+    },
     "node_modules/is-number": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.12.0"
@@ -2839,6 +3626,15 @@
         "json-buffer": "3.0.1"
       }
     },
+    "node_modules/klona": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.6.tgz",
+      "integrity": "sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -3131,7 +3927,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
       "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -3141,7 +3936,6 @@
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/locate-path": {
@@ -3214,7 +4008,6 @@
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
       "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 8"
@@ -3224,7 +4017,6 @@
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
       "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "braces": "^3.0.3",
@@ -3238,7 +4030,6 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8.6"
@@ -3247,6 +4038,15 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/mini-svg-data-uri": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
+      "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
+      "license": "MIT",
+      "bin": {
+        "mini-svg-data-uri": "cli.js"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -3279,14 +4079,12 @@
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/mz": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
       "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "any-promise": "^1.0.0",
@@ -3330,7 +4128,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -3349,7 +4146,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
       "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 6"
@@ -3405,6 +4201,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/package-manager-detector": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/package-manager-detector/-/package-manager-detector-1.5.0.tgz",
+      "integrity": "sha512-uBj69dVlYe/+wxj8JOpr97XfsxH/eumMt6HqjNTmJDf/6NO9s+0uxeOneIz3AsPt2m6y9PqzDzd3ATcU17MNfw==",
+      "license": "MIT"
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -3442,7 +4244,6 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/picocolors": {
@@ -3468,7 +4269,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
       "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -3478,7 +4278,6 @@
       "version": "4.0.7",
       "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
       "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 6"
@@ -3504,6 +4303,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -3517,7 +4317,6 @@
       "version": "15.1.0",
       "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
       "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "postcss-value-parser": "^4.0.0",
@@ -3535,7 +4334,6 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.1.0.tgz",
       "integrity": "sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -3561,7 +4359,6 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
       "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -3597,7 +4394,6 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
       "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=14"
@@ -3610,7 +4406,6 @@
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
       "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -3636,7 +4431,6 @@
       "version": "6.1.2",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
       "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "cssesc": "^3.0.0",
@@ -3687,7 +4481,6 @@
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -3709,6 +4502,7 @@
       "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"
       }
@@ -3718,6 +4512,7 @@
       "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"
       },
@@ -3777,6 +4572,44 @@
         "node": ">=0.10.0"
       }
     },
+    "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==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "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==",
+      "license": "MIT",
+      "dependencies": {
+        "react-router": "7.11.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
     "node_modules/react-scroll": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/react-scroll/-/react-scroll-1.9.3.tgz",
@@ -3795,7 +4628,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
       "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "pify": "^2.3.0"
@@ -3805,7 +4637,6 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
       "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "picomatch": "^2.2.1"
@@ -3818,7 +4649,6 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8.6"
@@ -3827,11 +4657,26 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/recast": {
+      "version": "0.23.11",
+      "resolved": "https://registry.npmjs.org/recast/-/recast-0.23.11.tgz",
+      "integrity": "sha512-YTUo+Flmw4ZXiWfQKGcwwc11KnoRAYgzAE2E7mXKCjSviTKShtxBsN6YUUBB2gtaBzKzeKunxhUwNHQuRryhWA==",
+      "license": "MIT",
+      "dependencies": {
+        "ast-types": "^0.16.1",
+        "esprima": "~4.0.0",
+        "source-map": "~0.6.1",
+        "tiny-invariant": "^1.3.3",
+        "tslib": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 4"
+      }
+    },
     "node_modules/resolve": {
       "version": "1.22.11",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
       "integrity": "sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-core-module": "^2.16.1",
@@ -3862,7 +4707,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
       "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "iojs": ">=1.0.0",
@@ -3873,8 +4717,10 @@
       "version": "4.54.0",
       "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"
       },
@@ -3915,7 +4761,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
       "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -3951,6 +4796,18 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
+      "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
+      "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/shallowequal": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
@@ -3980,6 +4837,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -4076,11 +4942,84 @@
       "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",
       "integrity": "sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.2",
@@ -4116,7 +5055,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -4125,6 +5063,34 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/tabbable": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.4.0.tgz",
+      "integrity": "sha512-05PUHKSNE8ou2dwIxTngl4EzcnsCDZGJ/iCLtDflR/SHB/ny14rXc+qU5P4mG9JkusiV7EivzY9Mhm55AzAvCg==",
+      "license": "MIT"
+    },
+    "node_modules/tailwind-merge-v2": {
+      "name": "tailwind-merge",
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.6.0.tgz",
+      "integrity": "sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
+    "node_modules/tailwind-merge-v3": {
+      "name": "tailwind-merge",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.0.1.tgz",
+      "integrity": "sha512-AvzE8FmSoXC7nC+oU5GlQJbip2UO7tmOhOfQyOmPhrStOGXHU08j8mZEHZ4BmCqY5dWTCo4ClWkNyRNx1wpT0g==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "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",
@@ -4136,11 +5102,15 @@
       }
     },
     "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",
@@ -4177,7 +5147,6 @@
       "version": "1.21.7",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
       "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
-      "dev": true,
       "license": "MIT",
       "bin": {
         "jiti": "bin/jiti.js"
@@ -4187,7 +5156,6 @@
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
       "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "any-promise": "^1.0.0"
@@ -4197,7 +5165,6 @@
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
       "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "thenify": ">= 3.1.0 < 4"
@@ -4206,6 +5173,12 @@
         "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",
@@ -4233,7 +5206,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-number": "^7.0.0"
@@ -4242,11 +5214,22 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/ts-api-utils": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.4.0.tgz",
+      "integrity": "sha512-3TaVTaAv2gTiMB35i3FiGJaRfwb3Pyn/j3m/bfAvGe8FB7CF6u+LMYqYlDh7reQf7UNvoTvdfAqHGmPGOSsPmA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.12"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4"
+      }
+    },
     "node_modules/ts-interface-checker": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
       "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
-      "dev": true,
       "license": "Apache-2.0"
     },
     "node_modules/tslib": {
@@ -4277,6 +5260,20 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/typescript": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "license": "Apache-2.0",
+      "peer": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
@@ -4331,7 +5328,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/vanta": {
@@ -4345,7 +5341,9 @@
       "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",
@@ -4492,6 +5490,7 @@
       "integrity": "sha512-0wZ1IRqGGhMP76gLqz8EyfBXKk0J2qo2+H3fi4mcUP/KtTocoX08nmIAHl1Z2kJIZbZee8KOpBCSNPRgauucjw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
diff --git a/package.json b/package.json
index e3787e9..5520116 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,8 @@
     "@emailjs/browser": "^4.4.1",
     "@heroicons/react": "^2.2.0",
     "aos": "^2.3.4",
+    "flowbite": "^4.0.1",
+    "flowbite-react": "^0.12.16",
     "clsx": "^2.1.1",
     "framer-motion": "^12.23.26",
     "i18next": "^25.7.3",
@@ -22,6 +24,7 @@
     "react-dom": "^19.2.0",
     "react-i18next": "^16.5.0",
     "react-icons": "^5.5.0",
+    "react-router-dom": "^7.11.0",
     "react-scroll": "^1.9.3",
     "styled-components": "^6.1.19",
     "tailwind-merge": "^3.4.0",
diff --git a/src/App.jsx b/src/App.jsx
index a0176cc..4f363b5 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,80 +1,86 @@
-import React, { useState, useEffect } from "react";
+import React from "react";
+import { BrowserRouter, Routes, Route, useLocation } from "react-router-dom";
+import { AnimatePresence, LayoutGroup } from "framer-motion";
+
 import "./i18n";
+import "./App.css";
+
 import Navbar from "./Components/Nav/Navbar";
 import Home from "./Components/Sections/Home/Home";
 import Services from "./Components/Sections/Services/Services";
 import About from "./Components/Sections/About/About";
+import Departments from "./Components/Sections/Departments/Departments";
+import DepartmentDetail from "./Components/Sections/DepartmentDetail/DepartmentDetail";
 import Contact from "./Components/Sections/Contact/Contact";
-import ImagePreloader from "./Components/ImagePreloader";
 import Footer from "./Components/Nav/Footer";
-import BackgroundCanvas from "./Components/BackgroundCanvas/BackgroundCanvas";
-import "./App.css";
-
-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);
-    console.log("Canvas position:", canvas.style.position);
-    console.log("Canvas z-index:", canvas.style.zIndex);
-  } 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);
-  };
+import DepartmentDetail2 from "./Components/Sections/DepartmentDetail2/DepartmentDetail2";
 
+const MainPage = () => {
   return (
-    <ImagePreloader>
-      <div className="relative min-h-screen bg-transparent">
-        <BackgroundCanvas theme={theme} />
-        <div className="relative z-10">
-          <div className="min-h-screen bg-transparent">
-            <div className="flex flex-col min-h-screen">
-              <Navbar toggleTheme={toggleTheme} currentTheme={theme} />
-              <main className="flex-grow">
-                {/* <Home /> */}
-                <Services />
-                <About theme={theme} />
-                <Contact />
-              </main>
-              
-              <Footer />
-            </div>
-          </div>
-        </div>
+    <div className="min-h-screen bg-white dark:bg-gray-900 text-gray-900 dark:text-white transition-colors duration-300">
+      <div className="flex flex-col min-h-screen">
+        <main className="flex-grow">
+          <Home />
+          <Services />
+          <About />
+          <Departments />
+          <Contact />
+        </main>
+        <Footer />
       </div>
-    </ImagePreloader>
+    </div>
   );
 };
 
-export default App;
\ No newline at end of file
+function RouterView() {
+  const location = useLocation();
+
+  return (
+    <LayoutGroup>
+      <AnimatePresence mode="wait" initial={false}>
+        <Routes location={location} key={location.pathname}>
+          <Route path="/" element={<MainPage />} />
+          <Route path="/departments/:id" element={<DepartmentDetail />} />
+          <Route path="/department-detail2" element={<DepartmentDetail2 />} />
+        </Routes>
+      </AnimatePresence>
+    </LayoutGroup>
+  );
+}
+
+function Layout() {
+  const location = useLocation();
+
+  const excludedExactPaths = [
+    "/department-detail2",
+  ];
+
+  const excludedPrefixes = ["/departments/"];
+
+  const isExcludedExact = excludedExactPaths.includes(location.pathname);
+  const isExcludedPrefix = excludedPrefixes.some((p) => location.pathname.startsWith(p));
+
+  const hideNavbar = isExcludedExact || isExcludedPrefix;
+
+  const navbarHeight = hideNavbar ? 0 : 56;
+
+  return (
+    <>
+      {!hideNavbar && <Navbar />}
+
+      <div style={{ paddingTop: navbarHeight }}>
+        <RouterView />
+      </div>
+    </>
+  );
+}
+
+const App = () => {
+  return (
+    <BrowserRouter>
+      <Layout />
+    </BrowserRouter>
+  );
+};
+
+export default App;
diff --git a/src/Components/ImagePreloader.jsx b/src/Components/ImagePreloader.jsx
index 2c6aadb..7b6e0e8 100644
--- 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;
diff --git a/src/Components/Nav/Navbar.jsx b/src/Components/Nav/Navbar.jsx
index f451e3c..f7bc70c 100644
--- a/src/Components/Nav/Navbar.jsx
+++ b/src/Components/Nav/Navbar.jsx
@@ -1,147 +1,686 @@
 import React, { useState, useEffect } from "react";
+import styled from "styled-components";
 import { useTranslation } from "react-i18next";
-import { Link } from "react-scroll";
-import LanguageSwitcher from "../LanguageSwitcher/LanguageSwitcher";
-import "../../index.css";
+import { Link, animateScroll as scroll } from "react-scroll";
 
-const Navbar = ({ toggleTheme, currentTheme }) => {
+const SunIcon = ({ className }) => (
+  <svg viewBox="0 0 24 24" className={className} fill="none" aria-hidden>
+    <path d="M12 4v2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M12 18v2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M4.22 4.22l1.42 1.42" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M18.36 18.36l1.42 1.42" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M1 12h2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M21 12h2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+    <circle cx="12" cy="12" r="3" stroke="currentColor" strokeWidth="1.6" />
+  </svg>
+);
+const MoonIcon = ({ className }) => (
+  <svg viewBox="0 0 24 24" className={className} fill="none" aria-hidden>
+    <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+const GlobeIcon = ({ className }) => (
+  <svg viewBox="0 0 24 24" className={className} fill="none" aria-hidden>
+    <path d="M21 12c0 4.97-4.03 9-9 9s-9-4.03-9-9 4.03-9 9-9 9 4.03 9 9z" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M2.05 12h19.9" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M12 2.05v19.9" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+const StyledWrapper = styled.div`
+  /* Base Styles */
+  .switch {
+    display: inline-block;
+    /* reduced a bit */
+    width: 5.2em;
+    height: 2.6em;
+    position: relative;
+    font-size: 16px;
+    user-select: none;
+    margin: 0;
+    transform-origin: center;
+  }
+
+  /* Hide default HTML checkbox */
+  .switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+    position: absolute;
+  }
+
+  /* Slider */
+  .slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(to right, #87ceeb, #e0f6ff);
+    border-radius: 50px;
+    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+    box-shadow:
+      0 4px 8px rgba(0, 0, 0, 0.1),
+      inset 0 -5px 10px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+  }
+
+  /* Inner slider for additional styling */
+  .slider-inner {
+    position: absolute;
+    top: 0.28em;
+    left: 0.28em;
+    height: 2.1em;
+    width: 2.1em;
+    border-radius: 50%;
+    background-color: #ffd700;
+    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+    box-shadow:
+      0 2px 4px rgba(0, 0, 0, 0.2),
+      inset 0 -2px 5px rgba(0, 0, 0, 0.2);
+  }
+
+  /* Checked state */
+  .switch input:checked + .slider {
+    background: linear-gradient(to right, #1a237e, #3949ab);
+  }
+
+  .switch input:checked + .slider .slider-inner {
+    transform: translateX(2.6em);
+    background-color: #ffffff;
+  }
+
+  /* Focus state */
+  .switch input:focus + .slider {
+    outline: none;
+    box-shadow: 0 0 0.4em rgba(25, 118, 210, 0.5);
+  }
+
+  /* Hover and active states */
+  .switch:hover .slider {
+    background: linear-gradient(to right, #64b5f6, #e3f2fd);
+  }
+
+  .switch input:checked:hover + .slider {
+    background: linear-gradient(to right, #283593, #5c6bc0);
+  }
+
+  /* Animation for slider inner */
+  @keyframes sunPulse {
+    0%,
+    100% {
+      box-shadow:
+        0 0 0 0 rgba(255, 215, 0, 0.7),
+        0 0 0 0 rgba(255, 215, 0, 0.4);
+    }
+    50% {
+      box-shadow:
+        0 0 20px 10px rgba(255, 215, 0, 0.7),
+        0 0 40px 20px rgba(255, 215, 0, 0.4);
+    }
+  }
+
+  @keyframes moonPhase {
+    0%,
+    100% {
+      box-shadow:
+        inset -10px -5px 0 0 #ddd,
+        0 0 20px rgba(255, 255, 255, 0.5);
+    }
+    50% {
+      box-shadow:
+        inset 0 0 0 0 #ddd,
+        0 0 20px rgba(255, 255, 255, 0.5);
+    }
+  }
+
+  .switch input:not(:checked) + .slider .slider-inner {
+    animation: sunPulse 3s infinite;
+  }
+
+  .switch input:checked + .slider .slider-inner {
+    animation: moonPhase 5s infinite;
+  }
+
+  /* Stars effect */
+  @keyframes twinkle {
+    0%,
+    100% {
+      opacity: 0.2;
+    }
+    50% {
+      opacity: 1;
+    }
+  }
+
+  .slider::before,
+  .slider::after {
+    content: "";
+    position: absolute;
+    width: 4px;
+    height: 4px;
+    background-color: #ffffff;
+    border-radius: 50%;
+    transition: all 0.6s ease;
+    opacity: 0;
+  }
+
+  .slider::before {
+    top: 20%;
+    left: 30%;
+  }
+
+  .slider::after {
+    bottom: 25%;
+    right: 25%;
+  }
+
+  .switch input:checked + .slider::before,
+  .switch input:checked + .slider::after {
+    opacity: 1;
+    animation: twinkle 2s infinite;
+  }
+
+  .switch input:checked + .slider::before {
+    animation-delay: 0.5s;
+  }
+
+  /* 3D effect */
+  .slider {
+    transform-style: preserve-3d;
+    perspective: 500px;
+  }
+
+  .slider-inner {
+    transform: translateZ(5px);
+  }
+
+  .switch input:checked + .slider .slider-inner {
+    transform: translateX(2.6em) translateZ(5px) rotateY(180deg);
+  }
+
+  /* Cloud effect for day mode */
+  .slider-inner::before,
+  .slider-inner::after {
+    content: "";
+    position: absolute;
+    background-color: rgba(255, 255, 255, 0.8);
+    border-radius: 50%;
+    transition: all 0.6s ease;
+  }
+
+  .slider-inner::before {
+    width: 1em;
+    height: 1em;
+    top: -0.5em;
+    left: -0.2em;
+  }
+
+  .slider-inner::after {
+    width: 1.2em;
+    height: 1.2em;
+    bottom: -0.6em;
+    right: -0.3em;
+  }
+
+  .switch input:checked + .slider .slider-inner::before,
+  .switch input:checked + .slider .slider-inner::after {
+    opacity: 0;
+  }
+
+  /* Crater effect for night mode */
+  .switch input:checked + .slider .slider-inner::before {
+    width: 0.6em;
+    height: 0.6em;
+    background-color: rgba(0, 0, 0, 0.2);
+    top: 0.3em;
+    left: 0.3em;
+    opacity: 1;
+  }
+
+  .switch input:checked + .slider .slider-inner::after {
+    width: 0.4em;
+    height: 0.4em;
+    background-color: rgba(0, 0, 0, 0.15);
+    bottom: 0.5em;
+    right: 0.5em;
+    opacity: 1;
+  }
+
+  /* Accessibility improvements */
+  .switch input:focus + .slider {
+    outline: 2px solid #4a90e2;
+    outline-offset: 2px;
+  }
+
+  /* Responsive adjustments */
+  @media (max-width: 768px) {
+    .switch {
+      width: 4.6em;
+      height: 2.3em;
+    }
+
+    .slider-inner {
+      height: 1.85em;
+      width: 1.85em;
+      top: 0.23em;
+      left: 0.23em;
+    }
+
+    .switch input:checked + .slider .slider-inner {
+      transform: translateX(2.2em) translateZ(5px) rotateY(180deg);
+    }
+  }
+
+  @media (max-width: 480px) {
+    .switch {
+      width: 3.8em;
+      height: 1.9em;
+    }
+
+    .slider-inner {
+      height: 1.5em;
+      width: 1.5em;
+      top: 0.2em;
+      left: 0.2em;
+    }
+
+    .switch input:checked + .slider .slider-inner {
+      transform: translateX(1.8em) translateZ(5px) rotateY(180deg);
+    }
+  }
+
+  /* High contrast mode */
+  @media (forced-colors: active) {
+    .slider {
+      background: Canvas;
+      border: 2px solid ButtonText;
+    }
+
+    .switch input:checked + .slider {
+      background: Highlight;
+    }
+
+    .slider-inner {
+      background-color: ButtonFace;
+    }
+
+    .switch::before,
+    .switch::after {
+      color: ButtonText;
+    }
+  }
+
+  /* Reduced motion preference */
+  @media (prefers-reduced-motion: reduce) {
+    .switch,
+    .slider,
+    .slider-inner {
+      transition: none;
+    }
+
+    .switch input:checked + .slider .slider-inner,
+    .switch input:not(:checked) + .slider .slider-inner,
+    .switch input:checked + .slider::before,
+    .switch input:checked + .slider::after {
+      animation: none;
+    }
+  }
+`;
+
+const ThemeToggle = ({ theme, setTheme }) => {
+  const isDark = theme === "dark";
+
+  const toggle = () => {
+    const next = isDark ? "light" : "dark";
+    setTheme(next);
+    if (next === "dark") document.documentElement.classList.add("dark");
+    else document.documentElement.classList.remove("dark");
+    try {
+      localStorage.setItem("theme", next);
+    } catch (e) {}
+  };
+
+  return (
+    <StyledWrapper>
+      <label
+        role="switch"
+        aria-checked={isDark}
+        tabIndex={0}
+        className="switch"
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            toggle();
+          }
+        }}
+      >
+        <input
+          type="checkbox"
+          checked={isDark}
+          onChange={toggle}
+          aria-hidden="false"
+        />
+        <span className="slider" aria-hidden="true">
+          <span className="slider-inner" />
+        </span>
+      </label>
+    </StyledWrapper>
+  );
+};
+
+const LanguageToggle = ({ i18n }) => {
+  const isAr = i18n.language === "ar";
+  const toggle = () => {
+    const next = isAr ? "en" : "ar";
+    i18n.changeLanguage(next);
+    if (next === "ar") {
+      document.documentElement.dir = "rtl";
+      document.documentElement.lang = "ar";
+    } else {
+      document.documentElement.dir = "ltr";
+      document.documentElement.lang = next;
+    }
+  };
+
+  return (
+    <button
+      onClick={toggle}
+      className="flex items-center gap-2 px-3 py-1 rounded-md font-semibold text-sm border border-transparent hover:border-amber-500/30 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-400/40 hover:shadow-md active:scale-95"
+      aria-label="Toggle language"
+      title={isAr ? "Switch to English" : "التبديل للعربية"}
+    >
+      <GlobeIcon className="w-4 h-4" />
+      <span className="hidden sm:inline">{isAr ? "عربي" : "EN"}</span>
+      <span className="text-amber-400/95 text-xs sm:text-sm">{isAr ? "AR" : "EN"}</span>
+    </button>
+  );
+};
+
+const Navbar = () => {
   const { t, i18n } = useTranslation();
   const [menuOpen, setMenuOpen] = useState(false);
   const [activeSection, setActiveSection] = useState("home");
+  const [theme, setTheme] = useState("light");
 
-  const toggleMenu = () => {
-    setMenuOpen(!menuOpen);
-  };
+  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]);
 
   useEffect(() => {
     const handleScroll = () => {
       const sections = ["home", "services", "about", "contact"];
-      const scrollPosition = window.scrollY + 100;
-
+      const scrollPosition = window.scrollY + 140;
       for (const section of sections) {
-        const element =
-          document.getElementById(section) ||
-          document.querySelector(`[name="${section}"]`);
+        const element = document.getElementById(section) || document.querySelector(`[name="${section}"]`);
         if (element) {
           const offsetTop = element.offsetTop;
           const offsetHeight = element.offsetHeight;
-
-          if (
-            scrollPosition >= offsetTop &&
-            scrollPosition < offsetTop + offsetHeight
-          ) {
+          if (scrollPosition >= offsetTop && scrollPosition < offsetTop + offsetHeight) {
             setActiveSection(section);
             break;
           }
         }
       }
     };
-
-    window.addEventListener("scroll", handleScroll);
+    handleScroll();
+    window.addEventListener("scroll", handleScroll, { passive: true });
     return () => window.removeEventListener("scroll", handleScroll);
   }, []);
 
-  useEffect(() => {
-    if (i18n.language === "ar") {
-      document.documentElement.dir = "rtl";
-      document.documentElement.lang = "ar";
-    } else {
-      document.documentElement.dir = "ltr";
-      document.documentElement.lang = i18n.language;
-    }
-  }, [i18n.language]);
-
   const navItems = [
-    { key: "home", label: t("nav.home") },
-    { key: "services", label: t("nav.services") },
-    { key: "about", label: t("nav.about") },
-    { key: "contact", label: t("nav.contact") },
+    { key: "home", label: t("nav.home") || "Home" },
+    { key: "services", label: t("nav.services") || "Services" },
+    { key: "about", label: t("nav.about") || "About" },
+    { key: "contact", label: t("nav.contact") || "Contact" },
   ];
 
   return (
-    <nav className="navbar-theme fixed top-0 w-full z-50 shadow h-14">
-      <div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto py-2 px-4">
-        <img
-          src="src/assets/TPS-logo.png"
-          className="h-8 sm:h-10 md:h-12 transition-all duration-300"
-          alt="TPS Logo"
-        />
+    <>
+      <style>{`
+        /* background and glass */
+        .glass-nav {
+          background: linear-gradient(180deg, rgba(75,85,99,0.96), rgba(55,65,81,0.9));
+          color: #e6e6e6;
+          border-bottom: 1px solid rgba(255,255,255,0.05);
+          backdrop-filter: blur(8px);
+          -webkit-backdrop-filter: blur(8px);
+        }
 
-        {/* الجانب الأيمن */}
-        <div className="flex items-center md:order-2 space-x-1 md:space-x-0 rtl:space-x-reverse relative">
-          {/* زر تبديل الثيم */}
-          <button
-            onClick={toggleTheme}
-            type="button"
-            className="icon-button-theme inline-flex items-center p-2 w-10 h-10 justify-center text-sm"
-            aria-label={currentTheme === "dark" ? "الوضع الفاتح" : "الوضع الداكن"}
-            title={currentTheme === "dark" ? "الوضع الفاتح" : "الوضع الداكن"}
-          >
-            {currentTheme === "dark" ? (
-              <svg className="w-5 h-5 text-secondary" fill="currentColor" viewBox="0 0 20 20">
-                <path fillRule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clipRule="evenodd" />
-              </svg>
-            ) : (
-              <svg className="w-5 h-5 text-primary" fill="currentColor" viewBox="0 0 20 20">
-                <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
-              </svg>
-            )}
-          </button>
+        /* nav links */
+        .nav-link {
+          position: relative;
+          padding-bottom: 6px;
+          transition: transform .22s cubic-bezier(.2,.9,.2,1), color .18s ease, text-shadow .18s ease, box-shadow .18s ease;
+          color: rgba(229,231,235,0.95);
+          display: inline-block;
+        }
+        .nav-link::after {
+          content: '';
+          position: absolute;
+          left: 50%;
+          transform: translateX(-50%) scaleX(0);
+          bottom: -8px;
+          height: 3px;
+          width: 64%;
+          border-radius: 999px;
+          transition: transform .22s cubic-bezier(.2,.9,.2,1), opacity .22s;
+          opacity: 0;
+        }
+        .nav-link:hover {
+          transform: translateY(-6px) scale(1.03);
+          color: #fff;
+          text-shadow: 0 10px 30px rgba(2,6,23,0.5);
+          box-shadow: 0 8px 24px rgba(2,6,23,0.25);
+        }
+        .nav-link:hover::after {
+          background: linear-gradient(90deg, #9CA3AF, #F59E0B);
+          transform: translateX(-50%) scaleX(1);
+          opacity: 1;
+        }
+        .nav-link.active {
+          color: #fff;
+          font-weight: 700;
+        }
+        .nav-link.active::after {
+          background: linear-gradient(90deg, #9CA3AF, #F59E0B);
+          transform: translateX(-50%) scaleX(1);
+          opacity: 1;
+        }
 
-          {/* Language Switcher */}
-          <LanguageSwitcher />
+        /* NEW: pill / circular orange background for the active/pressed link */
+        .nav-pill {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          padding: 0.32rem 0.6rem; /* vertical horizontal */
+          border-radius: 999px;
+          transition: transform .15s ease, background .18s ease, box-shadow .18s ease, color .12s ease;
+          background: transparent;
+          color: inherit;
+          line-height: 1;
+          font-weight: 600;
+        }
 
-          {/* زر القائمة للجوال */}
-          <button
-            onClick={toggleMenu}
-            type="button"
-            className="icon-button-theme inline-flex items-center p-2 w-10 h-10 justify-center text-sm md:hidden"
-            aria-controls="navbar-menu"
-            aria-expanded={menuOpen}
-          >
-            <span className="sr-only">Open main menu</span>
-            <svg className="w-5 h-5" viewBox="0 0 17 14" fill="none">
-              <path
-                d="M1 1h15M1 7h15M1 13h15"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-            </svg>
-          </button>
-        </div>
+        /* 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);
+        }
 
-        {/* روابط الأقسام */}
-        <div
-          className={`w-full md:flex md:w-auto md:order-1 transition-all duration-300 ease-in-out ${
-            menuOpen ? "block" : "hidden"
-          }`}
-          id="navbar-menu"
-        >
-          <ul className="flex flex-col md:flex-row p-4 md:p-0 rounded-lg space-y-2 md:space-y-0 md:space-x-6 mt-4 md:mt-0 divide-y md:divide-y-0"
-              style={{ borderColor: 'var(--border-color)' }}>
-            {navItems.map((item) => (
-              <li key={item.key} className="pt-2 md:pt-0 first:pt-0 md:first:pt-0">
-                <Link
-                  to={item.key}
-                  smooth
-                  duration={500}
-                  spy={true}
-                  offset={0}
-                  onSetActive={() => setActiveSection(item.key)}
-                  className={`nav-link-theme block text-center md:inline cursor-pointer text-lg px-4 py-2 rounded-lg ${
-                    activeSection === item.key ? "nav-link-active" : ""
-                  }`}
+        /* Make press feedback snappier */
+        .nav-link:active .nav-pill {
+          transform: translateY(-2px) scale(0.995);
+        }
+
+        /* mobile drawer */
+        .mobile-drawer {
+          background: linear-gradient(180deg, rgba(17,24,39,0.98), rgba(15,23,42,0.95));
+          backdrop-filter: blur(6px);
+        }
+
+        /* ensure mobile pill doesn't stretch full width — make it inline inside block */
+        .mobile-drawer .nav-pill {
+          display: inline-flex;
+          padding: 0.4rem 0.8rem;
+        }
+
+        /* adjust mobile active color */
+        .mobile-drawer .nav-pill.active,
+        .mobile-drawer a[aria-current="page"] .nav-pill {
+          background: radial-gradient(circle at 30% 30%, #ffb347, #ff7a18);
+          color: #0b0b0b;
+        }
+
+        /* Enhanced button hover (more professional) */
+        .glass-nav button, .mobile-drawer button {
+          transition: transform .18s cubic-bezier(.2,.9,.2,1), box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
+          will-change: transform, box-shadow;
+        }
+
+        .glass-nav button:hover, .mobile-drawer button:hover {
+          transform: translateY(-3px);
+          box-shadow: 0 10px 24px rgba(2,6,23,0.25), 0 2px 6px rgba(0,0,0,0.12);
+        }
+
+        .glass-nav button:active, .mobile-drawer button:active {
+          transform: translateY(-1px) scale(0.995);
+          box-shadow: 0 6px 18px rgba(2,6,23,0.2);
+        }
+
+        .glass-nav button:focus {
+          outline: none;
+          box-shadow: 0 0 0 4px rgba(245,158,11,0.12);
+        }
+
+      `}</style>
+
+      <nav
+        className="fixed top-0 left-0 right-0 z-50 w-full glass-nav px-4 md:px-8 lg:px-16 py-3"
+        aria-label="Main navigation"
+        role="navigation"
+      >
+        <div className="mx-auto max-w-screen-xl">
+          <div className="flex items-center justify-between h-14 px-2 md:px-4">
+            <div className="hidden md:flex items-center space-x-6 rtl:space-x-reverse">
+              <ul className="flex items-center gap-6">
+                {navItems.map((item) => {
+                  const isActive = activeSection === item.key;
+                  return (
+                    <li key={item.key}>
+                      <Link
+                        to={item.key}
+                        smooth
+                        duration={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>
+
+            {/* controls */}
+            <div className="flex items-center gap-3 md:gap-5">
+              <div className="hidden md:flex items-center gap-3">
+                <LanguageToggle i18n={i18n} />
+                <ThemeToggle theme={theme} setTheme={setTheme} />
+              </div>
+
+              <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"
                 >
-                  {item.label}
-                </Link>
-              </li>
-            ))}
-          </ul>
+                  <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>
+
+          {/* 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;
+                  return (
+                    <li key={item.key}>
+                      <Link
+                        to={item.key}
+                        smooth
+                        duration={600}
+                        spy={true}
+                        offset={-110}
+                        onSetActive={() => setActiveSection(item.key)}
+                        onClick={() => {
+                          if (item.key === "home") scroll.scrollToTop({ duration: 600 });
+                          setMenuOpen(false);
+                        }}
+                        className={`block w-full text-right px-3 py-2 rounded-md font-semibold text-base ${isActive ? "text-amber-400" : "text-slate-200 hover:text-amber-400"}`}
+                        aria-current={isActive ? "page" : undefined}
+                      >
+                        {/* add inline pill for mobile too — stays inline so it looks like a circle around the label */}
+                        <span className={`nav-pill ${isActive ? "active" : ""}`}>{item.label}</span>
+                      </Link>
+                    </li>
+                  );
+                })}
+              </ul>
+
+              <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>
-      </div>
-    </nav>
+      </nav>
+    </>
   );
 };
 
diff --git a/src/Components/Sections/AnimatedRoutes/AnimatedRoutes.jsx b/src/Components/Sections/AnimatedRoutes/AnimatedRoutes.jsx
new file mode 100644
index 0000000..c0eb669
--- /dev/null
+++ b/src/Components/Sections/AnimatedRoutes/AnimatedRoutes.jsx
@@ -0,0 +1,22 @@
+// AnimatedRoutes.jsx
+import React from "react";
+import { Routes, Route, useLocation } from "react-router-dom";
+import { AnimatePresence, LayoutGroup } from "framer-motion";
+import Departments from "./Departments";
+import DepartmentDetail from "./DepartmentDetail";
+
+export default function AnimatedRoutes() {
+  const location = useLocation();
+
+  return (
+    <LayoutGroup>
+      <AnimatePresence mode="wait">
+        {/* key مهم حتى يعمل خروج/دخول الصفحة مع الانتقال */}
+        <Routes location={location} key={location.pathname}>
+          <Route path="/" element={<Departments />} />
+          <Route path="/departments/1" element={<DepartmentDetail />} />
+        </Routes>
+      </AnimatePresence>
+    </LayoutGroup>
+  );
+}
diff --git a/src/Components/Sections/DepartmentDetail/DepartmentDetail.jsx b/src/Components/Sections/DepartmentDetail/DepartmentDetail.jsx
new file mode 100644
index 0000000..9822afa
--- /dev/null
+++ b/src/Components/Sections/DepartmentDetail/DepartmentDetail.jsx
@@ -0,0 +1,639 @@
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import d1 from "../../../../src/assets/Images/d1.jpeg";
+import d2 from "../../../../src/assets/Images/d2.jpeg";
+import d3 from "../../../../src/assets/Images/d3.jpeg";
+import d4 from "../../../../src/assets/Images/d4.jpeg";
+
+function ProjectsTimeline({
+  projects,
+  mainTitle = "المشاريع المنفذة",
+  subtitle = "خط زمني شامل للأعمال والإنجازات",
+  plain = false,
+}) {
+  const wrapperRef = useRef(null);
+  const scrollRef = useRef(null);
+  const svgRef = useRef(null);
+  const [itemsRefs, setItemsRefs] = useState([]);
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  useEffect(() => {
+    setItemsRefs((r) => {
+      const arr = Array(projects.length)
+        .fill()
+        .map((_, i) => r[i] || React.createRef());
+      return arr;
+    });
+  }, [projects.length]);
+
+  const drawCurvedLines = useCallback(() => {
+    const svgEl = svgRef.current;
+    const wrapper = wrapperRef.current;
+    if (!svgEl || !wrapper) return;
+
+    while (svgEl.firstChild) svgEl.removeChild(svgEl.firstChild);
+    svgEl.setAttribute("width", wrapper.scrollWidth);
+    svgEl.setAttribute("height", wrapper.offsetHeight);
+
+    if (!itemsRefs || itemsRefs.length < 2) return;
+
+    const svgNS = "http://www.w3.org/2000/svg";
+    const defs = document.createElementNS(svgNS, "defs");
+    const gradient = document.createElementNS(svgNS, "linearGradient");
+    gradient.setAttribute("id", "timeline-gradient");
+    gradient.setAttribute("x1", "0%");
+    gradient.setAttribute("y1", "0%");
+    gradient.setAttribute("x2", "100%");
+    gradient.setAttribute("y2", "0%");
+
+    const stop1 = document.createElementNS(svgNS, "stop");
+    stop1.setAttribute("offset", "0%");
+    stop1.setAttribute("style", "stop-color:#0f172a;stop-opacity:1");
+
+    const stop2 = document.createElementNS(svgNS, "stop");
+    stop2.setAttribute("offset", "50%");
+    stop2.setAttribute("style", "stop-color:#f97316;stop-opacity:1");
+
+    const stop3 = document.createElementNS(svgNS, "stop");
+    stop3.setAttribute("offset", "100%");
+    stop3.setAttribute("style", "stop-color:#9ca3af;stop-opacity:1");
+
+    gradient.appendChild(stop1);
+    gradient.appendChild(stop2);
+    gradient.appendChild(stop3);
+    defs.appendChild(gradient);
+    svgEl.appendChild(defs);
+
+    for (let i = 0; i < itemsRefs.length - 1; i++) {
+      const item1 = itemsRefs[i].current;
+      const item2 = itemsRefs[i + 1].current;
+      if (!item1 || !item2) continue;
+
+      const circle1 = item1.querySelector(".year-circle");
+      const circle2 = item2.querySelector(".year-circle");
+      if (!circle1 || !circle2) continue;
+
+      const rect1 = circle1.getBoundingClientRect();
+      const rect2 = circle2.getBoundingClientRect();
+      const wrapperRect = wrapper.getBoundingClientRect();
+
+      const x1 = rect1.left - wrapperRect.left + rect1.width / 2;
+      const y1 = rect1.top - wrapperRect.top + rect1.height / 2;
+      const x2 = rect2.left - wrapperRect.left + rect2.width / 2;
+      const y2 = rect2.top - wrapperRect.top + rect2.height / 2;
+
+      const controlPointOffset = Math.abs(x2 - x1) * 0.4;
+      const cx1 = x1 - controlPointOffset;
+      const cy1 = y1 - 40;
+      const cx2 = x2 + controlPointOffset;
+      const cy2 = y2 - 40;
+
+      const path = document.createElementNS(svgNS, "path");
+      const d = `M ${x1} ${y1} C ${cx1} ${cy1}, ${cx2} ${cy2}, ${x2} ${y2}`;
+      path.setAttribute("d", d);
+      path.setAttribute("stroke", "url(#timeline-gradient)");
+      path.setAttribute("stroke-width", "4");
+      path.setAttribute("fill", "none");
+      path.setAttribute("stroke-linecap", "round");
+      path.style.filter = "drop-shadow(0 2px 8px rgba(15,23,42,0.22))";
+      svgEl.appendChild(path);
+    }
+  }, [itemsRefs]);
+
+  const setActiveItem = useCallback(
+    (index) => {
+      setCurrentIndex(index);
+      itemsRefs.forEach((ref, i) => {
+        const el = ref.current;
+        if (!el) return;
+        if (i === index) el.classList.add("active");
+        else el.classList.remove("active");
+      });
+    },
+    [itemsRefs]
+  );
+
+  const scrollToItem = useCallback(
+    (index) => {
+      if (index < 0 || index >= itemsRefs.length) return;
+      const scrollContainer = scrollRef.current;
+      const item = itemsRefs[index].current;
+      if (!scrollContainer || !item) return;
+
+      const itemRect = item.getBoundingClientRect();
+      const containerRect = scrollContainer.getBoundingClientRect();
+      const scrollLeft = scrollContainer.scrollLeft;
+
+      const targetScroll =
+        scrollLeft + itemRect.left - containerRect.left - containerRect.width / 2 + itemRect.width / 2;
+
+      scrollContainer.scrollTo({ left: targetScroll, behavior: "smooth" });
+      setActiveItem(index);
+    },
+    [itemsRefs, setActiveItem]
+  );
+
+  const onPrev = () => {
+    if (currentIndex > 0) scrollToItem(currentIndex - 1);
+  };
+  const onNext = () => {
+    if (currentIndex < itemsRefs.length - 1) scrollToItem(currentIndex + 1);
+  };
+
+  useEffect(() => {
+    const t = setTimeout(() => {
+      drawCurvedLines();
+      setActiveItem(0);
+    }, 100);
+
+    const scrollContainer = scrollRef.current;
+    let scrollTimeout = null;
+
+    const onScroll = () => {
+      clearTimeout(scrollTimeout);
+      scrollTimeout = setTimeout(() => {
+        const containerRect = scrollContainer.getBoundingClientRect();
+        const containerCenter = containerRect.left + containerRect.width / 2;
+
+        let closestIndex = 0;
+        let closestDistance = Infinity;
+
+        itemsRefs.forEach((ref, index) => {
+          const el = ref.current;
+          if (!el) return;
+          const itemRect = el.getBoundingClientRect();
+          const itemCenter = itemRect.left + itemRect.width / 2;
+          const distance = Math.abs(containerCenter - itemCenter);
+          if (distance < closestDistance) {
+            closestDistance = distance;
+            closestIndex = index;
+          }
+        });
+
+        if (closestIndex !== currentIndex) {
+          setActiveItem(closestIndex);
+        }
+      }, 150);
+    };
+
+    if (scrollContainer) scrollContainer.addEventListener("scroll", onScroll);
+    const onResize = () => setTimeout(drawCurvedLines, 120);
+    window.addEventListener("resize", onResize);
+
+    return () => {
+      clearTimeout(t);
+      if (scrollContainer) scrollContainer.removeEventListener("scroll", onScroll);
+      window.removeEventListener("resize", onResize);
+    };
+  }, [itemsRefs, drawCurvedLines, setActiveItem]);
+
+  useEffect(() => {
+    setTimeout(() => drawCurvedLines(), 120);
+  }, [itemsRefs, drawCurvedLines, projects.length]);
+
+  const css = `
+    :root{--bg-start:#0b1220;--bg-mid:#102033;--bg-end:#2b3a4a;--accent:#f97316;--muted:#9ca3af}
+    .projects-timeline-root { direction: rtl; min-height: 100%; }
+    .timeline-scroll { overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
+    .timeline-scroll::-webkit-scrollbar{ display:none; height:0; }
+    .timeline-wrapper { display:flex; align-items:center; position:relative; padding:clamp(48px,6vw,120px) clamp(12px,4vw,120px); min-width:max-content; }
+    .svg-container { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:0; }
+    .timeline-item { position:relative; display:flex; flex-direction:column; align-items:center; margin:0 clamp(20px,4vw,60px); transition:all .6s cubic-bezier(.34,1.56,.64,1); z-index:1; }
+    .year-circle { width:clamp(72px,9vw,150px); height:clamp(72px,9vw,150px); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:clamp(14px,1.6vw,24px); font-weight:700; background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); color:var(--bg-start); box-shadow: 0 6px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.04); transition:all .6s cubic-bezier(.34,1.56,.64,1); cursor:pointer; border:1px solid rgba(255,255,255,0.08); position:relative; z-index:2; backdrop-filter: blur(8px) saturate(120%);
+      background-clip: padding-box;
+    }
+    .year-circle::after { content: ''; position:absolute; inset:-8px; border-radius:50%; border:2px solid rgba(249,115,22,0.08); opacity:0; transition:all .6s ease; }
+    .timeline-item.active .year-circle { width:clamp(110px,14vw,200px); height:clamp(110px,14vw,200px); font-size:clamp(18px,2.2vw,28px); box-shadow:0 18px 60px rgba(15,23,42,.5), inset 0 2px 6px rgba(255,255,255,0.04); border-color: rgba(249,115,22,0.18); transform: translateY(-15px) scale(1.03); }
+    .timeline-item.active .year-circle::after { opacity:1; inset:-12px; animation: ripple 2s ease-out infinite; }
+    @keyframes ripple { 0%{ transform: scale(1); opacity:.6;} 100%{ transform: scale(1.25); opacity:0;} }
+    .project-card { margin-top:40px; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)); border-radius:18px; padding:26px; min-width:320px; max-width:420px; box-shadow:0 12px 40px rgba(2,6,23,.45); opacity:.9; transform: scale(.98) translateY(8px); transition:all .6s cubic-bezier(.34,1.56,.64,1); border:1px solid rgba(255,255,255,.06); position:relative; overflow:hidden; backdrop-filter: blur(8px) saturate(120%); }
+    .project-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background: linear-gradient(to left, var(--accent), #b91c1c, var(--muted)); opacity:0; transition:opacity .6s ease; }
+    .timeline-item.active .project-card { opacity:1; transform: scale(1) translateY(0); box-shadow:0 28px 80px rgba(2,6,23,.5),0 6px 18px rgba(0,0,0,.08); border-color: rgba(249,115,22,.14); }
+    .timeline-item.active .project-card::before { opacity:1; }
+    .project-text { font-size:15px; line-height:2; color:#0b1220; font-weight:600; }
+    .project-text li { margin-bottom:12px; padding-right:12px; transition:all .3s ease; border-radius:8px; padding:8px 12px; }
+    .timeline-item.active .project-text li:hover { background: rgba(249,115,22,.06); transform: translateX(-4px); }
+    .scroll-indicator { position:absolute; bottom:30px; left:50%; transform: translateX(-50%); display:flex; gap:20px; z-index:10; }
+    .scroll-btn { background: linear-gradient(135deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.82) 100%); border:none; border-radius:50%; width:56px; height:56px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:22px; color:var(--accent); box-shadow:0 6px 20px rgba(2,6,23,.35); transition:all .4s cubic-bezier(.34,1.56,.64,1); backdrop-filter: blur(6px); }
+    .scroll-btn:hover:not(:disabled){ background: linear-gradient(135deg,#fff 0%,#fff8f2 100%); transform: scale(1.12); box-shadow:0 10px 35px rgba(15,23,42,.22); }
+    .scroll-btn:active:not(:disabled){ transform: scale(1.05); }
+    .scroll-btn:disabled { opacity:.4; cursor:not-allowed; }
+    @media (max-width:768px){
+      .timeline-wrapper { padding:clamp(36px,6vw,80px) 24px; }
+      .timeline-item { margin:0 18px; }
+      .year-circle { width:90px; height:90px; font-size:15px; }
+      .timeline-item.active .year-circle { width:120px; height:120px; font-size:19px; }
+      .project-card { min-width:260px; max-width:300px; padding:20px; }
+      .project-text { font-size:13px; }
+      .scroll-btn { width:48px; height:48px; font-size:20px; }
+    }
+
+    .projects-timeline-root.plain-bleed .timeline-wrapper { padding:clamp(48px,6vw,120px) 24px; }
+    .projects-timeline-root.plain-bleed .project-card { max-width:420px; }
+  `;
+
+  const mainStyle = plain ? { background: "#ffffff", paddingBottom: 0 } : { background: "linear-gradient(135deg, var(--bg-start) 0%, var(--bg-mid) 30%, var(--bg-end) 60%)" };
+
+  return (
+    <div className={`projects-timeline-root w-full h-full ${plain ? "plain-bleed" : ""}`}>
+      <style>{css}</style>
+      <main className="w-full h-full overflow-hidden" style={mainStyle}>
+        <div className="h-full flex flex-col">
+          {!plain && (
+            <header className="text-center py-8 px-4">
+              <h1 id="main-title" className={` ${plain ? "text-3xl md:text-4xl font-bold text-gray-900" : "text-5xl font-bold text-white"} mb-3`} style={plain ? { textShadow: "none" } : { textShadow: "0 4px 20px rgba(0,0,0,0.3)" }}>
+                {mainTitle}
+              </h1>
+              <p id="subtitle" className={`${plain ? "text-base text-gray-700" : "text-xl text-white opacity-90"}`}>{subtitle}</p>
+            </header>
+          )}
+
+          <div className="flex-1 relative">
+            <div className="timeline-scroll h-full" id="timeline-scroll" ref={scrollRef} aria-label="خط زمني قابل للتمرير">
+              <div className="timeline-wrapper" id="timeline-wrapper" ref={wrapperRef}>
+                <svg className="svg-container" id="timeline-svg" ref={svgRef} />
+                {projects.map((project, idx) => (
+                  <div
+                    className="timeline-item"
+                    key={idx}
+                    ref={itemsRefs[idx]}
+                    data-index={idx}
+                    onClick={() => scrollToItem(idx)}
+                    role="button"
+                    tabIndex={0}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter" || e.key === " ") scrollToItem(idx);
+                    }}
+                  >
+                    <div className="year-circle">{project.year}</div>
+                    <div className="project-card">
+                      <ul className="project-text" aria-live="polite">
+                        {project.items.map((it, i) => (
+                          <li key={i}>• {it}</li>
+                        ))}
+                      </ul>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <div className="scroll-indicator">
+              <button className="scroll-btn" aria-label="السابق" onClick={onPrev} disabled={currentIndex === 0} title="السابق">◄</button>
+              <button className="scroll-btn" aria-label="التالي" onClick={onNext} disabled={currentIndex === projects.length - 1} title="التالي">►</button>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}
+
+const defaultProjects = [
+  {
+    year: "1999-2015",
+    items: [
+      "دراسة وتصميم وتنفيذ خطوط السور والدرفلة (الوهيب)",
+      "العربية للدرفلة",
+      "العولية للدرفلة",
+      "معهد الإدارة العليا للسور والدرفلة",
+    ],
+  },
+  { year: "2001", items: ["أعمال تشغيل وصيانة الدورة لمعمل الوهيب ستوك إير"] },
+  { year: "2002", items: ["أعمال تشغيل وصيانة الدورة لمعمل العربية لدرفلة إير"] },
+  { year: "2004", items: ["أعمال متنوعة في مجال الدرفلة والتصنيع"] },
+  {
+    year: "2016",
+    items: [
+      "دراسة وتصميم وتنفيذ خطوط السور والدرفلة (الأنام)",
+      "أي أم، التايتيك - التروت، تصميم وتنفيذ",
+    ],
+  },
+  { year: "2016-2017", items: ["التدريب العالمي 600 طن/يوم", "التدريب للصناعات الغذائية"] },
+  { year: "2017", items: ["دراسة تأهيلية معمل الشمس (العسافي - حمص)"] },
+  {
+    year: "2019",
+    items: [
+      "إعادة تأهيل وصيانة مقومات تحميل وصيانة الستوك في مرفأ طرطوس",
+      "دراسة تأهيلية للصم وقياس الشمس (طرطوس - حمص)",
+    ],
+  },
+  { year: "2020", items: ["استكمال دراسة تأهيلية للصم وقياس الشمس"] },
+  { year: "2021", items: ["منشأ تيسير لمعمل المتحدة، تصميم الاسور - أبو الشامات"] },
+  { year: "2022", items: ["استكمال منشأ تيسير لمعمل المتحدة", "معمل المثنى للتصنيع السريع - طرطوس"] },
+  { year: "2023", items: ["مشاريع متنوعة في مجال التصنيع والدرفلة"] },
+];
+
+export default function DepartmentDetail() {
+  const [active, setActive] = useState(null);
+
+  const buttons = [
+    { id: 1, title: "اختصاص القسم", key: "expertise" },
+    { id: 2, title: "خدمات القسم", key: "services" },
+    { id: 3, title: "الاعمال المنفذة", key: "works" },
+  ];
+
+  const expertiseItems = [
+    {
+      icon: (
+        <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
+        </svg>
+      ),
+      text: "دراسات الجدوى الاقتصادية وتحليل الربحية والمخاطر للمشاريع الصناعية والهندسية"
+    },
+    {
+      icon: (
+        <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
+        </svg>
+      ),
+      text: "الدراسات الهندسية الأولية والنهائية والتفصيلية"
+    },
+    {
+      icon: (
+        <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"/>
+        </svg>
+      ),
+      text: "تصميم المخططات التنفيذية"
+    },
+    {
+      icon: (
+        <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
+        </svg>
+      ),
+      text: "تنفيذ الأعمال المدنية والمعمارية والمعدنية للمنشآت الصناعية"
+    },
+    {
+      icon: (
+        <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
+        </svg>
+      ),
+      text: "تصنيع وتركيب خطوط الإنتاج محلياً أو خطوط الانتاج المستوردة"
+    },
+    {
+      icon: (
+        <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M13 10V3L4 14h7v7l9-11h-7z"/>
+        </svg>
+      ),
+      text: "تنفيذ الأعمال الميكانيكية والكهربائية وأنظمة التحكم"
+    },
+    {
+      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 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 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">
+      <section className="relative">
+        <div className="w-full">
+          <AnimatePresence mode="wait">
+            <motion.div
+              key={active}
+              initial={{ opacity: 0, scale: 1.05 }}
+              animate={{ opacity: 1, scale: 1 }}
+              exit={{ opacity: 0, scale: 0.98 }}
+              transition={{ duration: 0.6 }}
+              className="relative h-72 sm:h-80 md:h-[480px] lg:h-[580px] overflow-visible"
+            >
+              <img
+                src={heroImage}
+                alt="منشآت صناعية"
+                className="absolute inset-0 w-full h-full object-cover object-center z-0 brightness-90"
+              />
+
+              <motion.div
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ delay: 0.25, duration: 0.45 }}
+                className="absolute inset-0 bg-gradient-to-r from-slate-900/90 via-slate-800/75 to-slate-900/60 z-5"
+              />
+
+              <div className="absolute inset-0 z-10 flex items-center pointer-events-none">
+                <div className="max-w-7xl mx-auto px-4 sm:px-6 w-full">
+                  <AnimatePresence mode="wait">
+                    {active === "expertise" ? (
+                      <motion.div key="expertise-title" initial={{ opacity: 0, x: -50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} transition={{ duration: 0.5 }} className="text-white max-w-4xl">
+                        <div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">اختصاص القسم</div>
+                        <h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight mb-3 sm:mb-6">حلول متكاملة للمنشآت الصناعية</h2>
+                        <p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">يختص هذا القسم بتقديم حلول متكاملة لتنفيذ المنشآت الصناعية وخطوط الانتاج وصيانتها بمختلف أنواعها، ويشمل:</p>
+                      </motion.div>
+                    ) : active === "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>
+                    ) : active === "works" ? (
+                      <motion.div key="works-title" initial={{ opacity: 0, x: -50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} transition={{ duration: 0.5 }} className="text-white max-w-4xl">
+                        <div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">الاعمال المنفذة</div>
+                        <h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight mb-3 sm:mb-6">الاعمال المنفذة</h2>
+                        <p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">عرض مشروعاتنا وخط الزمن الخاص بالأعمال المنفذة.</p>
+                      </motion.div>
+                    ) : (
+                      <motion.div key="default-title" initial={{ opacity: 0, x: -50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} transition={{ duration: 0.5 }} className="text-white max-w-4xl">
+                        <h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight">قسم إنشاء وصيانة المنشآت الصناعية وخطوط الإنتاج</h2>
+                      </motion.div>
+                    )}
+                  </AnimatePresence>
+                </div>
+              </div>
+
+              <div className="absolute left-1/2 bottom-0 transform -translate-x-1/2 translate-y-1/2 w-full px-4 pointer-events-auto" style={{ zIndex: 99999 }}>
+                <AnimatePresence>
+                  {!active && (
+                    <motion.div
+                      key="floating-buttons"
+                      initial={{ opacity: 0, y: 10 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      exit={{ opacity: 0, y: 10 }}
+                      transition={{ duration: 0.45 }}
+                      className="w-full max-w-7xl mx-auto"
+                    >
+                      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 sm:gap-6">
+                        {buttons.map((b, index) => (
+                          <motion.button
+                            key={b.id}
+                            initial={{ opacity: 0, y: 20 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            transition={{ delay: index * 0.08, duration: 0.5 }}
+                            whileHover={{ scale: 1.03, y: -6, transition: { duration: 0.2 } }}
+                            whileTap={{ scale: 0.97 }}
+                            onClick={() => handleButtonClick(b.key)}
+                            className="group relative rounded-2xl p-4 sm:p-6 shadow-2xl border border-transparent flex flex-col h-full text-right focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-300 overflow-hidden bg-white/80 backdrop-blur-sm"
+                          >
+                            <div className="absolute top-0 right-0 w-20 h-20 sm:w-24 sm:h-24 bg-gradient-to-br from-amber-500/10 to-orange-600/10 rounded-full -mr-12 -mt-12 group-hover:scale-125 transition-transform duration-500" />
+                            <div className="absolute top-0 right-0 w-2 h-0 bg-gradient-to-b from-amber-500 to-orange-600 rounded-r-2xl group-hover:h-full transition-all duration-500" />
+                            <div className="relative z-10">
+                              <div className="flex items-center gap-3 mb-3">
+                                <div className="w-10 h-10 sm:w-14 sm:h-14 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white text-base sm:text-2xl font-extrabold shadow-xl group-hover:scale-110 group-hover:rotate-6 transition-transform duration-300">
+                                  {b.id}
+                                </div>
+                                <h3 className="text-sm sm:text-base font-bold text-gray-800 group-hover:text-amber-700 transition-colors duration-300">{b.title}</h3>
+                              </div>
+                              <p className="text-xs sm:text-sm text-gray-600 mt-auto flex items-center gap-2 group-hover:text-amber-600 transition-colors duration-300">
+                                <span>انقر للاطّلاع على التفاصيل</span>
+                                <svg className="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-2 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
+                                </svg>
+                              </p>
+                            </div>
+                          </motion.button>
+                        ))}
+                      </div>
+                    </motion.div>
+                  )}
+                </AnimatePresence>
+              </div>
+
+              <div className="absolute bottom-0 left-0 right-0 z-10">
+                <svg className="w-full h-12 sm:h-16 md:h-24" viewBox="0 0 1200 120" preserveAspectRatio="none">
+                  <path d="M0,0 C300,80 900,80 1200,0 L1200,120 L0,120 Z" fill="#ffffff" opacity="1"/>
+                </svg>
+              </div>
+            </motion.div>
+          </AnimatePresence>
+        </div>
+      </section>
+
+      <section className="max-w-7xl mx-auto px-4 sm:px-6 md:px-6 -mt-6 md:-mt-8 relative z-20">
+        <AnimatePresence mode="wait">
+          {!active ? (
+            <motion.div key="buttons-spacer" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.25 }} className="h-0" />
+          ) : active === "works" ? (
+            <motion.div key="timeline-view" initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }} transition={{ duration: 0.45 }} className="w-full">
+              <motion.button initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: 0.15, duration: 0.45 }} onClick={() => setActive(null)} whileHover={{ x: 8 }} className="inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 sm:mb-8 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2 mr-0 md:-mr-4">
+                <svg className="w-5 h-5 sm:w-6 sm:h-6 transition-transform group-hover:translate-x-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
+                </svg>
+                <span>العودة للقائمة الرئيسية</span>
+              </motion.button>
+
+              <div style={{ position: 'relative', left: '50%', right: '50%', marginLeft: '-50vw', marginRight: '-50vw', width: '100vw' }}>
+                <ProjectsTimeline projects={defaultProjects} plain={true} />
+              </div>
+            </motion.div>
+          ) : (
+            <motion.div key="details-view" initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -20 }} transition={{ duration: 0.45 }} className="w-full">
+              <motion.button initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: 0.08, duration: 0.45 }} onClick={() => setActive(null)} whileHover={{ x: 8 }} className="inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 sm:mb-8 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2 mr-0 md:-mr-4">
+                <svg className="w-5 h-5 sm:w-6 sm:h-6 transition-transform group-hover:translate-x-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
+                </svg>
+                <span>العودة للقائمة الرئيسية</span>
+              </motion.button>
+
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
+                {displayItems.map((item, index) => (
+                  <motion.div
+                    key={index}
+                    initial={{ opacity: 0, y: 30 }}
+                    whileInView={{ opacity: 1, y: 0 }}
+                    viewport={{ once: true, amount: 0.25 }}
+                    transition={{ delay: index * 0.08, duration: 0.5 }}
+                    className="relative group"
+                  >
+                    <div className="relative flex items-start gap-3 sm:gap-6 rounded-2xl p-3 sm:p-6 border-r-4 border-amber-400 hover:border-orange-500 hover:shadow-xl transition-all duration-300 bg-white">
+                      <div className="relative flex-shrink-0">
+                        <motion.div whileHover={{ rotate: 360, scale: 1.08 }} transition={{ duration: 0.6 }} className="w-10 h-10 sm:w-14 sm:h-14 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white shadow-lg group-hover:shadow-2xl transition-shadow duration-300 relative z-10">
+                          {item.icon}
+                        </motion.div>
+                        <div className="absolute inset-0 bg-amber-500 rounded-xl blur-xl opacity-0 group-hover:opacity-30 transition-opacity duration-300" />
+                      </div>
+
+                      <div className="flex-1 pt-1">
+                        <p className="text-xs sm:text-sm md:text-base text-gray-800 leading-relaxed font-medium group-hover:text-gray-900 transition-colors duration-300">{item.text}</p>
+                      </div>
+
+                      <motion.div initial={{ opacity: 0, x: -8 }} whileHover={{ opacity: 1, x: 0 }} className="flex-shrink-0 text-amber-500 opacity-0 group-hover:opacity-100 transition-all duration-300">
+                        <svg className="w-4 h-4 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
+                        </svg>
+                      </motion.div>
+                    </div>
+                  </motion.div>
+                ))}
+              </div>
+
+              <motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} transition={{ delay: 0.6, duration: 0.45 }} className="mt-8 sm:mt-12 pt-6 border-t-2 border-gray-100 text-center">
+                <div className="inline-flex items-center gap-2 sm:gap-3 text-gray-500">
+                  <div className="w-2 h-2 bg-amber-500 rounded-full animate-pulse" />
+                  <span className="text-xs sm:text-sm font-medium">خدمات احترافية متكاملة</span>
+                  <div className="w-2 h-2 bg-orange-500 rounded-full animate-pulse" style={{ animationDelay: "0.5s" }} />
+                </div>
+              </motion.div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </section>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/Components/Sections/DepartmentDetail2/DepartmentDetail2.jsx b/src/Components/Sections/DepartmentDetail2/DepartmentDetail2.jsx
new file mode 100644
index 0000000..7cdef6e
--- /dev/null
+++ b/src/Components/Sections/DepartmentDetail2/DepartmentDetail2.jsx
@@ -0,0 +1,542 @@
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import d1 from "../../../../src/assets/Images/d1.jpeg";
+import d12 from "../../../../src/assets/Images/d12.jpeg";
+import d13 from "../../../../src/assets/Images/d13.jpeg";
+import d7 from "../../../../src/assets/Images/d7.jpeg";
+
+function ProjectsTimeline({
+  projects,
+  mainTitle = "المشاريع المنفذة",
+  subtitle = "خط زمني شامل للأعمال والإنجازات",
+  plain = false,
+}) {
+  const wrapperRef = useRef(null);
+  const scrollRef = useRef(null);
+  const svgRef = useRef(null);
+  const [itemsRefs, setItemsRefs] = useState([]);
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  useEffect(() => {
+    setItemsRefs((r) => {
+      const arr = Array(projects.length)
+        .fill()
+        .map((_, i) => r[i] || React.createRef());
+      return arr;
+    });
+  }, [projects.length]);
+
+  const drawCurvedLines = useCallback(() => {
+    const svgEl = svgRef.current;
+    const wrapper = wrapperRef.current;
+    if (!svgEl || !wrapper) return;
+
+    while (svgEl.firstChild) svgEl.removeChild(svgEl.firstChild);
+    svgEl.setAttribute("width", wrapper.scrollWidth);
+    svgEl.setAttribute("height", wrapper.offsetHeight);
+
+    if (!itemsRefs || itemsRefs.length < 2) return;
+
+    const svgNS = "http://www.w3.org/2000/svg";
+    const defs = document.createElementNS(svgNS, "defs");
+    const gradient = document.createElementNS(svgNS, "linearGradient");
+    gradient.setAttribute("id", "timeline-gradient");
+    gradient.setAttribute("x1", "0%");
+    gradient.setAttribute("y1", "0%");
+    gradient.setAttribute("x2", "100%");
+    gradient.setAttribute("y2", "0%");
+
+    const stop1 = document.createElementNS(svgNS, "stop");
+    stop1.setAttribute("offset", "0%");
+    stop1.setAttribute("style", "stop-color:#0f172a;stop-opacity:1");
+
+    const stop2 = document.createElementNS(svgNS, "stop");
+    stop2.setAttribute("offset", "50%");
+    stop2.setAttribute("style", "stop-color:#f97316;stop-opacity:1");
+
+    const stop3 = document.createElementNS(svgNS, "stop");
+    stop3.setAttribute("offset", "100%");
+    stop3.setAttribute("style", "stop-color:#9ca3af;stop-opacity:1");
+
+    gradient.appendChild(stop1);
+    gradient.appendChild(stop2);
+    gradient.appendChild(stop3);
+    defs.appendChild(gradient);
+    svgEl.appendChild(defs);
+
+    for (let i = 0; i < itemsRefs.length - 1; i++) {
+      const item1 = itemsRefs[i].current;
+      const item2 = itemsRefs[i + 1].current;
+      if (!item1 || !item2) continue;
+
+      const circle1 = item1.querySelector(".year-circle");
+      const circle2 = item2.querySelector(".year-circle");
+      if (!circle1 || !circle2) continue;
+
+      const rect1 = circle1.getBoundingClientRect();
+      const rect2 = circle2.getBoundingClientRect();
+      const wrapperRect = wrapper.getBoundingClientRect();
+
+      const x1 = rect1.left - wrapperRect.left + rect1.width / 2;
+      const y1 = rect1.top - wrapperRect.top + rect1.height / 2;
+      const x2 = rect2.left - wrapperRect.left + rect2.width / 2;
+      const y2 = rect2.top - wrapperRect.top + rect2.height / 2;
+
+      const controlPointOffset = Math.abs(x2 - x1) * 0.4;
+      const cx1 = x1 - controlPointOffset;
+      const cy1 = y1 - 40;
+      const cx2 = x2 + controlPointOffset;
+      const cy2 = y2 - 40;
+
+      const path = document.createElementNS(svgNS, "path");
+      const d = `M ${x1} ${y1} C ${cx1} ${cy1}, ${cx2} ${cy2}, ${x2} ${y2}`;
+      path.setAttribute("d", d);
+      path.setAttribute("stroke", "url(#timeline-gradient)");
+      path.setAttribute("stroke-width", "4");
+      path.setAttribute("fill", "none");
+      path.setAttribute("stroke-linecap", "round");
+      path.style.filter = "drop-shadow(0 2px 8px rgba(15,23,42,0.22))";
+      svgEl.appendChild(path);
+    }
+  }, [itemsRefs]);
+
+  const setActiveItem = useCallback(
+    (index) => {
+      setCurrentIndex(index);
+      itemsRefs.forEach((ref, i) => {
+        const el = ref.current;
+        if (!el) return;
+        if (i === index) el.classList.add("active");
+        else el.classList.remove("active");
+      });
+    },
+    [itemsRefs]
+  );
+
+  const scrollToItem = useCallback(
+    (index) => {
+      if (index < 0 || index >= itemsRefs.length) return;
+      const scrollContainer = scrollRef.current;
+      const item = itemsRefs[index].current;
+      if (!scrollContainer || !item) return;
+
+      const itemRect = item.getBoundingClientRect();
+      const containerRect = scrollContainer.getBoundingClientRect();
+      const scrollLeft = scrollContainer.scrollLeft;
+
+      const targetScroll =
+        scrollLeft + itemRect.left - containerRect.left - containerRect.width / 2 + itemRect.width / 2;
+
+      scrollContainer.scrollTo({ left: targetScroll, behavior: "smooth" });
+      setActiveItem(index);
+    },
+    [itemsRefs, setActiveItem]
+  );
+
+  const onPrev = () => {
+    if (currentIndex > 0) scrollToItem(currentIndex - 1);
+  };
+  const onNext = () => {
+    if (currentIndex < itemsRefs.length - 1) scrollToItem(currentIndex + 1);
+  };
+
+  useEffect(() => {
+    const t = setTimeout(() => {
+      drawCurvedLines();
+      setActiveItem(0);
+    }, 100);
+
+    const scrollContainer = scrollRef.current;
+    let scrollTimeout = null;
+
+    const onScroll = () => {
+      clearTimeout(scrollTimeout);
+      scrollTimeout = setTimeout(() => {
+        const containerRect = scrollContainer.getBoundingClientRect();
+        const containerCenter = containerRect.left + containerRect.width / 2;
+
+        let closestIndex = 0;
+        let closestDistance = Infinity;
+
+        itemsRefs.forEach((ref, index) => {
+          const el = ref.current;
+          if (!el) return;
+          const itemRect = el.getBoundingClientRect();
+          const itemCenter = itemRect.left + itemRect.width / 2;
+          const distance = Math.abs(containerCenter - itemCenter);
+          if (distance < closestDistance) {
+            closestDistance = distance;
+            closestIndex = index;
+          }
+        });
+
+        if (closestIndex !== currentIndex) {
+          setActiveItem(closestIndex);
+        }
+      }, 150);
+    };
+
+    if (scrollContainer) scrollContainer.addEventListener("scroll", onScroll);
+    const onResize = () => setTimeout(drawCurvedLines, 120);
+    window.addEventListener("resize", onResize);
+
+    return () => {
+      clearTimeout(t);
+      if (scrollContainer) scrollContainer.removeEventListener("scroll", onScroll);
+      window.removeEventListener("resize", onResize);
+    };
+  }, [itemsRefs, drawCurvedLines, setActiveItem]);
+
+  useEffect(() => {
+    setTimeout(() => drawCurvedLines(), 120);
+  }, [itemsRefs, drawCurvedLines, projects.length]);
+
+  const css = `
+    :root{--bg-start:#0b1220;--bg-mid:#102033;--bg-end:#2b3a4a;--accent:#f97316;--muted:#9ca3af}
+    .projects-timeline-root { direction: rtl; min-height: 100%; }
+    .timeline-scroll { overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
+    .timeline-scroll::-webkit-scrollbar{ display:none; height:0; }
+    .timeline-wrapper { display:flex; align-items:center; position:relative; padding:clamp(48px,6vw,120px) clamp(12px,4vw,120px); min-width:max-content; }
+    .svg-container { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:0; }
+    .timeline-item { position:relative; display:flex; flex-direction:column; align-items:center; margin:0 clamp(20px,4vw,60px); transition:all .6s cubic-bezier(.34,1.56,.64,1); z-index:1; }
+    .year-circle { width:clamp(72px,9vw,150px); height:clamp(72px,9vw,150px); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:clamp(14px,1.6vw,24px); font-weight:700; background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); color:var(--bg-start); box-shadow: 0 6px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.04); transition:all .6s cubic-bezier(.34,1.56,.64,1); cursor:pointer; border:1px solid rgba(255,255,255,0.08); position:relative; z-index:2; backdrop-filter: blur(8px) saturate(120%);
+      background-clip: padding-box;
+    }
+    .year-circle::after { content: ''; position:absolute; inset:-8px; border-radius:50%; border:2px solid rgba(249,115,22,0.08); opacity:0; transition:all .6s ease; }
+    .timeline-item.active .year-circle { width:clamp(110px,14vw,200px); height:clamp(110px,14vw,200px); font-size:clamp(18px,2.2vw,28px); box-shadow:0 18px 60px rgba(15,23,42,.5), inset 0 2px 6px rgba(255,255,255,0.04); border-color: rgba(249,115,22,0.18); transform: translateY(-15px) scale(1.03); }
+    .timeline-item.active .year-circle::after { opacity:1; inset:-12px; animation: ripple 2s ease-out infinite; }
+    @keyframes ripple { 0%{ transform: scale(1); opacity:.6;} 100%{ transform: scale(1.25); opacity:0;} }
+    .project-card { margin-top:40px; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)); border-radius:18px; padding:26px; min-width:320px; max-width:420px; box-shadow:0 12px 40px rgba(2,6,23,.45); opacity:.9; transform: scale(.98) translateY(8px); transition:all .6s cubic-bezier(.34,1.56,.64,1); border:1px solid rgba(255,255,255,.06); position:relative; overflow:hidden; backdrop-filter: blur(8px) saturate(120%); }
+    .project-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background: linear-gradient(to left, var(--accent), #b91c1c, var(--muted)); opacity:0; transition:opacity .6s ease; }
+    .timeline-item.active .project-card { opacity:1; transform: scale(1) translateY(0); box-shadow:0 28px 80px rgba(2,6,23,.5),0 6px 18px rgba(0,0,0,.08); border-color: rgba(249,115,22,.14); }
+    .timeline-item.active .project-card::before { opacity:1; }
+    .project-text { font-size:15px; line-height:2; color:#0b1220; font-weight:600; }
+    .project-text li { margin-bottom:12px; padding-right:12px; transition:all .3s ease; border-radius:8px; padding:8px 12px; }
+    .timeline-item.active .project-text li:hover { background: rgba(249,115,22,.06); transform: translateX(-4px); }
+    .scroll-indicator { position:absolute; bottom:30px; left:50%; transform: translateX(-50%); display:flex; gap:20px; z-index:10; }
+    .scroll-btn { background: linear-gradient(135deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.82) 100%); border:none; border-radius:50%; width:56px; height:56px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:22px; color:var(--accent); box-shadow:0 6px 20px rgba(2,6,23,.35); transition:all .4s cubic-bezier(.34,1.56,.64,1); backdrop-filter: blur(6px); }
+    .scroll-btn:hover:not(:disabled){ background: linear-gradient(135deg,#fff 0%,#fff8f2 100%); transform: scale(1.12); box-shadow:0 10px 35px rgba(15,23,42,.22); }
+    .scroll-btn:active:not(:disabled){ transform: scale(1.05); }
+    .scroll-btn:disabled { opacity:.4; cursor:not-allowed; }
+    @media (max-width:768px){
+      .timeline-wrapper { padding:clamp(36px,6vw,80px) 24px; }
+      .timeline-item { margin:0 18px; }
+      .year-circle { width:90px; height:90px; font-size:15px; }
+      .timeline-item.active .year-circle { width:120px; height:120px; font-size:19px; }
+      .project-card { min-width:260px; max-width:300px; padding:20px; }
+      .project-text { font-size:13px; }
+      .scroll-btn { width:48px; height:48px; font-size:20px; }
+    }
+
+    .projects-timeline-root.plain-bleed .timeline-wrapper { padding:clamp(48px,6vw,120px) 24px; }
+    .projects-timeline-root.plain-bleed .project-card { max-width:420px; }
+  `;
+
+  const mainStyle = plain ? { background: "#ffffff", paddingBottom: 0 } : { background: "linear-gradient(135deg, var(--bg-start) 0%, var(--bg-mid) 30%, var(--bg-end) 60%)" };
+
+  return (
+    <div className={`projects-timeline-root w-full h-full ${plain ? "plain-bleed" : ""}`}>
+      <style>{css}</style>
+      <main className="w-full h-full overflow-hidden" style={mainStyle}>
+        <div className="h-full flex flex-col">
+          {!plain && (
+            <header className="text-center py-8 px-4">
+              <h1 id="main-title" className={` ${plain ? "text-3xl md:text-4xl font-bold text-gray-900" : "text-5xl font-bold text-white"} mb-3`} style={plain ? { textShadow: "none" } : { textShadow: "0 4px 20px rgba(0,0,0,0.3)" }}>
+                {mainTitle}
+              </h1>
+              <p id="subtitle" className={`${plain ? "text-base text-gray-700" : "text-xl text-white opacity-90"}`}>{subtitle}</p>
+            </header>
+          )}
+
+          <div className="flex-1 relative">
+            <div className="timeline-scroll h-full" id="timeline-scroll" ref={scrollRef} aria-label="خط زمني قابل للتمرير">
+              <div className="timeline-wrapper" id="timeline-wrapper" ref={wrapperRef}>
+                <svg className="svg-container" id="timeline-svg" ref={svgRef} />
+                {projects.map((project, idx) => (
+                  <div
+                    className="timeline-item"
+                    key={idx}
+                    ref={itemsRefs[idx]}
+                    data-index={idx}
+                    onClick={() => scrollToItem(idx)}
+                    role="button"
+                    tabIndex={0}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter" || e.key === " ") scrollToItem(idx);
+                    }}
+                  >
+                    <div className="year-circle">{project.year}</div>
+                    <div className="project-card">
+                      <ul className="project-text" aria-live="polite">
+                        {project.items.map((it, i) => (
+                          <li key={i}>• {it}</li>
+                        ))}
+                      </ul>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <div className="scroll-indicator">
+              <button className="scroll-btn" aria-label="السابق" onClick={onPrev} disabled={currentIndex === 0} title="السابق">◄</button>
+              <button className="scroll-btn" aria-label="التالي" onClick={onNext} disabled={currentIndex === projects.length - 1} title="التالي">►</button>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}
+
+const defaultProjects = [
+  { year: "2016", items: ["تنفيذ أبنية خدمية وإدارية ومشاريع إعادة تأهيل."] },
+  { year: "2017", items: ["إنشاء مدينة معارض ومكاتب سيارات (200) مكتب - المدينة الصناعية اللاذقية"] },
+  { year: "2023", items: ["تصميم وتنفيذ مشروع 1000 شقة سكنية (مساكن الإيواء) بإشراف الهلال الأحمر الإماراتي"] },
+];
+
+export default function DepartmentDetail2() {
+  const [active, setActive] = useState(null);
+
+  const buttons = [
+    { id: 1, title: "اختصاص القسم", key: "expertise" },
+    { id: 3, title: "الاعمال المنفذة", key: "works" },
+  ];
+
+  const expertiseItems = [
+    {
+      icon: (
+        <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
+        </svg>
+      ),
+      text: "تنفيذ المجمعات السكنية والمناطق الخدمية."
+    },
+    {
+      icon: (
+        <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
+        </svg>
+      ),
+      text: ". الأبنية الإدارية والتجارية."
+    },
+    {
+      icon: (
+        <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"/>
+        </svg>
+      ),
+      text: ". الأبنية مسبقة الصنع والساندويش بانل والهنغارات والكرفانات المتنقلة وغرف التبريد"
+    },
+    {
+      icon: (
+        <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
+        </svg>
+      ),
+      text: "الأعمال المدنية والمعمارية المتكاملة."
+    },
+    {
+      icon: (
+        <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
+        </svg>
+      ),
+      text: ". الإكساء الداخلي والخارجي."
+    },
+    {
+      icon: (
+        <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M13 10V3L4 14h7v7l9-11h-7z"/>
+        </svg>
+      ),
+      text: ". الالتزام بمعايير الجودة والسلامة المهنية في التنفيذ."
+    }
+  ];
+
+  const displayItems = expertiseItems;
+  const heroImage = active === "expertise" ? d12 : active === "works" ? d13 : d7;
+
+  const handleButtonClick = (key) => {
+    setActive((prev) => (prev === key ? null : key));
+  };
+
+  return (
+    <div dir="rtl" className="w-full min-h-screen bg-white pb-12">
+      <section className="relative">
+        <div className="w-full">
+          <AnimatePresence mode="wait">
+            <motion.div
+              key={active}
+              initial={{ opacity: 0, scale: 1.05 }}
+              animate={{ opacity: 1, scale: 1 }}
+              exit={{ opacity: 0, scale: 0.98 }}
+              transition={{ duration: 0.6 }}
+              className="relative h-72 sm:h-80 md:h-[480px] lg:h-[580px] overflow-visible"
+            >
+              <img
+                src={heroImage}
+                alt="مرافق سكنية وخدمية"
+                className="absolute inset-0 w-full h-full object-cover object-center z-0 brightness-90"
+              />
+
+              <motion.div
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ delay: 0.25, duration: 0.45 }}
+                className="absolute inset-0 bg-gradient-to-r from-slate-900/90 via-slate-800/75 to-slate-900/60 z-5"
+              />
+
+              <div className="absolute inset-0 z-10 flex items-center pointer-events-none">
+                <div className="max-w-7xl mx-auto px-4 sm:px-6 w-full">
+                  <AnimatePresence mode="wait">
+                    {active === "expertise" ? (
+                      <motion.div key="expertise-title" initial={{ opacity: 0, x: -50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} transition={{ duration: 0.5 }} className="text-white max-w-4xl">
+                        <div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">اختصاص القسم</div>
+                        <h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight mb-3 sm:mb-6">حلول متكاملة للمشاريع السكنية والخدمية</h2>
+                        <p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">يتضمن هذا القسم تنفيذ المشاريع السكنية والخدمية بمختلف أنواعها، ويشمل:</p>
+                      </motion.div>
+                    ) : active === "works" ? (
+                      <motion.div key="works-title" initial={{ opacity: 0, x: -50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} transition={{ duration: 0.5 }} className="text-white max-w-4xl">
+                        <div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">الاعمال المنفذة</div>
+                        <h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight mb-3 sm:mb-6">الاعمال المنفذة</h2>
+                        <p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">عرض مشروعاتنا وخط الزمن الخاص بالأعمال المنفذة.</p>
+                      </motion.div>
+                    ) : (
+                      <motion.div key="default-title" initial={{ opacity: 0, x: -50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} transition={{ duration: 0.5 }} className="text-white max-w-4xl">
+                        <h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight">قسم تنفيذ المرافق السكنيه والخدمية</h2>
+                      </motion.div>
+                    )}
+                  </AnimatePresence>
+                </div>
+              </div>
+
+              <div className="absolute left-1/2 bottom-0 transform -translate-x-1/2 translate-y-1/2 w-full px-4 pointer-events-auto" style={{ zIndex: 99999 }}>
+                <AnimatePresence>
+                  {!active && (
+                    <motion.div
+                      key="floating-buttons"
+                      initial={{ opacity: 0, y: 10 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      exit={{ opacity: 0, y: 10 }}
+                      transition={{ duration: 0.45 }}
+                      className="w-full max-w-7xl mx-auto"
+                    >
+                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6">
+                        {buttons.map((b, index) => (
+                          <motion.button
+                            key={b.id}
+                            initial={{ opacity: 0, y: 20 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            transition={{ delay: index * 0.08, duration: 0.5 }}
+                            whileHover={{ scale: 1.03, y: -6, transition: { duration: 0.2 } }}
+                            whileTap={{ scale: 0.97 }}
+                            onClick={() => handleButtonClick(b.key)}
+                            className="group relative rounded-2xl p-4 sm:p-6 shadow-2xl border border-transparent flex flex-col h-full text-right focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-300 overflow-hidden bg-white/80 backdrop-blur-sm"
+                          >
+                            <div className="absolute top-0 right-0 w-20 h-20 sm:w-24 sm:h-24 bg-gradient-to-br from-amber-500/10 to-orange-600/10 rounded-full -mr-12 -mt-12 group-hover:scale-125 transition-transform duration-500" />
+                            <div className="absolute top-0 right-0 w-2 h-0 bg-gradient-to-b from-amber-500 to-orange-600 rounded-r-2xl group-hover:h-full transition-all duration-500" />
+                            <div className="relative z-10">
+                              <div className="flex items-center gap-3 mb-3">
+                                <div className="w-10 h-10 sm:w-14 sm:h-14 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white text-base sm:text-2xl font-extrabold shadow-xl group-hover:scale-110 group-hover:rotate-6 transition-transform duration-300">
+                                  {b.id}
+                                </div>
+                                <h3 className="text-sm sm:text-base font-bold text-gray-800 group-hover:text-amber-700 transition-colors duration-300">{b.title}</h3>
+                              </div>
+                              <p className="text-xs sm:text-sm text-gray-600 mt-auto flex items-center gap-2 group-hover:text-amber-600 transition-colors duration-300">
+                                <span>انقر للاطّلاع على التفاصيل</span>
+                                <svg className="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-2 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
+                                </svg>
+                              </p>
+                            </div>
+                          </motion.button>
+                        ))}
+                      </div>
+                    </motion.div>
+                  )}
+                </AnimatePresence>
+              </div>
+
+              <div className="absolute bottom-0 left-0 right-0 z-10">
+                <svg className="w-full h-12 sm:h-16 md:h-24" viewBox="0 0 1200 120" preserveAspectRatio="none">
+                  <path d="M0,0 C300,80 900,80 1200,0 L1200,120 L0,120 Z" fill="#ffffff" opacity="1"/>
+                </svg>
+              </div>
+            </motion.div>
+          </AnimatePresence>
+        </div>
+      </section>
+
+      <section className="max-w-7xl mx-auto px-4 sm:px-6 md:px-6 -mt-6 md:-mt-8 relative z-20">
+        <AnimatePresence mode="wait">
+          {!active ? (
+            <motion.div key="buttons-spacer" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.25 }} className="h-0" />
+          ) : active === "works" ? (
+            <motion.div key="timeline-view" initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }} transition={{ duration: 0.45 }} className="w-full">
+              <motion.button initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: 0.15, duration: 0.45 }} onClick={() => setActive(null)} whileHover={{ x: 8 }} className="inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 sm:mb-8 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2 mr-0 md:-mr-4">
+                <svg className="w-5 h-5 sm:w-6 sm:h-6 transition-transform group-hover:translate-x-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
+                </svg>
+                <span>العودة للقائمة الرئيسية</span>
+              </motion.button>
+
+              <div style={{ position: 'relative', left: '50%', right: '50%', marginLeft: '-50vw', marginRight: '-50vw', width: '100vw' }}>
+                <ProjectsTimeline projects={defaultProjects} plain={true} />
+              </div>
+            </motion.div>
+          ) : (
+            <motion.div key="details-view" initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -20 }} transition={{ duration: 0.45 }} className="w-full">
+              <motion.button initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: 0.08, duration: 0.45 }} onClick={() => setActive(null)} whileHover={{ x: 8 }} className="inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 sm:mb-8 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2 mr-0 md:-mr-4">
+                <svg className="w-5 h-5 sm:w-6 sm:h-6 transition-transform group-hover:translate-x-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
+                </svg>
+                <span>العودة للقائمة الرئيسية</span>
+              </motion.button>
+
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
+                {displayItems.map((item, index) => (
+                  <motion.div
+                    key={index}
+                    initial={{ opacity: 0, y: 30 }}
+                    whileInView={{ opacity: 1, y: 0 }}
+                    viewport={{ once: true, amount: 0.25 }}
+                    transition={{ delay: index * 0.08, duration: 0.5 }}
+                    className="relative group"
+                  >
+                    <div className="relative flex items-start gap-3 sm:gap-6 rounded-2xl p-3 sm:p-6 border-r-4 border-amber-400 hover:border-orange-500 hover:shadow-xl transition-all duration-300 bg-white">
+                      <div className="relative flex-shrink-0">
+                        <motion.div whileHover={{ rotate: 360, scale: 1.08 }} transition={{ duration: 0.6 }} className="w-10 h-10 sm:w-14 sm:h-14 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white shadow-lg group-hover:shadow-2xl transition-shadow duration-300 relative z-10">
+                          {item.icon}
+                        </motion.div>
+                        <div className="absolute inset-0 bg-amber-500 rounded-xl blur-xl opacity-0 group-hover:opacity-30 transition-opacity duration-300" />
+                      </div>
+
+                      <div className="flex-1 pt-1">
+                        <p className="text-xs sm:text-sm md:text-base text-gray-800 leading-relaxed font-medium group-hover:text-gray-900 transition-colors duration-300">{item.text}</p>
+                      </div>
+
+                      <motion.div initial={{ opacity: 0, x: -8 }} whileHover={{ opacity: 1, x: 0 }} className="flex-shrink-0 text-amber-500 opacity-0 group-hover:opacity-100 transition-all duration-300">
+                        <svg className="w-4 h-4 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
+                        </svg>
+                      </motion.div>
+                    </div>
+                  </motion.div>
+                ))}
+              </div>
+
+              <motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} transition={{ delay: 0.6, duration: 0.45 }} className="mt-8 sm:mt-12 pt-6 border-t-2 border-gray-100 text-center">
+                <div className="inline-flex items-center gap-2 sm:gap-3 text-gray-500">
+                  <div className="w-2 h-2 bg-amber-500 rounded-full animate-pulse" />
+                  <span className="text-xs sm:text-sm font-medium">خدمات احترافية متكاملة</span>
+                  <div className="w-2 h-2 bg-orange-500 rounded-full animate-pulse" style={{ animationDelay: "0.5s" }} />
+                </div>
+              </motion.div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </section>
+    </div>
+  );
+}
diff --git a/src/Components/Sections/Departments/Departments.jsx b/src/Components/Sections/Departments/Departments.jsx
new file mode 100644
index 0000000..bbf1762
--- /dev/null
+++ b/src/Components/Sections/Departments/Departments.jsx
@@ -0,0 +1,168 @@
+import React, { useRef } from "react";
+import {
+  motion,
+  useMotionValue,
+  useSpring,
+  useTransform,
+  useScroll,
+  useVelocity,
+} from "framer-motion";
+import { useNavigate } from "react-router-dom";
+
+import d1 from "../../../../src/assets/Images/d1.jpeg";
+import d7 from "../../../../src/assets/Images/d7.jpeg";
+import d14 from "../../../../src/assets/Images/d14.jpg";
+import d17 from "../../../../src/assets/Images/d17.png";
+import d18 from "../../../../src/assets/Images/d18.jpg";
+import d19 from "../../../../src/assets/Images/d19.jpeg";
+import d20 from "../../../../src/assets/Images/d20.jpeg";
+import d21 from "../../../../src/assets/Images/d21.jpeg";
+import d22 from "../../../../src/assets/Images/d22.jpg";
+
+const departments = [
+  { id: 1, title: "قسم إنشاء وصيانة المنشآت الصناعية وخطوط الإنتاج", image: d1 },
+  { id: 2, title: "قسم تنفيذ المرافق السكنية والخدمية", image: d7 },
+  { id: 3, title: "قسم اعادة تأهيل وصيانة المباني", image: d14 },
+  { id: 4, title: "قسم محطات الوقود وصيانة المنشآت النفطية", image: d17 },
+  { id: 5, title: "قسم التفتيش والفحص الفني والهندسي", image: d18 },
+  { id: 6, title: "قسم المشاريع الاستراتيجية", image: d19 },
+  { id: 7, title: "قسم الاعمال المعدنية والدعم الصناعي", image: d20 },
+  { id: 8, title: "قسم الخدمات والدعم اللوجستي", image: d21 },
+  { id: 9, title: "قسم الاتمتة والتحكم", image: d22 },
+];
+
+function DepartmentCard({ dept, offset }) {
+  const navigate = useNavigate();
+  const wrapperRef = useRef(null);
+
+  const rotateX = useMotionValue(0);
+  const rotateY = useMotionValue(0);
+  const scale = useMotionValue(1);
+
+  const rx = useSpring(rotateX, { stiffness: 180, damping: 22 });
+  const ry = useSpring(rotateY, { stiffness: 180, damping: 22 });
+  const s = useSpring(scale, { stiffness: 180, damping: 24 });
+
+  const titleZ = useTransform(s, [1, 1.05], [0, 36]);
+
+  const onMove = (e) => {
+    if (!wrapperRef.current) return;
+    const rect = wrapperRef.current.getBoundingClientRect();
+    const x = (e.clientX - rect.left - rect.width / 2) / rect.width;
+    const y = (e.clientY - rect.top - rect.height / 2) / rect.height;
+
+    rotateY.set(-x * 28);
+    rotateX.set(y * 12);
+    scale.set(1.05);
+  };
+
+  const onLeave = () => {
+    rotateX.set(0);
+    rotateY.set(0);
+    scale.set(1);
+  };
+
+  const { scrollY, scrollYProgress } = useScroll({ target: wrapperRef });
+  const velocity = useVelocity(scrollY);
+  const smoothVelocity = useSpring(velocity, {
+    stiffness: 600,
+    damping: 90,
+  });
+
+  const velocityParallax = useTransform(
+    smoothVelocity,
+    [-3000, 0, 3000],
+    [-45, 0, 45]
+  );
+
+  const progressParallax = useTransform(
+    scrollYProgress,
+    [0, 1],
+    [15, -15]
+  );
+
+  const y = useTransform(
+    [velocityParallax, progressParallax],
+    ([v, p]) => v + p
+  );
+
+  const handleClick = () => {
+    if (dept.id === 2) {
+      navigate("/department-detail2");
+    } else {
+      navigate(`/departments/${dept.id}`);
+    }
+  };
+
+  return (
+    <div
+      ref={wrapperRef}
+      onMouseMove={onMove}
+      onMouseLeave={onLeave}
+      style={{ perspective: 1400 }}
+      className={`relative w-full ${offset}`}
+    >
+      <div className="absolute bottom-6 right-[-32px] z-40 pointer-events-none max-w-xs">
+        <motion.span
+          style={{ translateZ: titleZ }}
+          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"
+        >
+          {dept.title}
+        </motion.span>
+      </div>
+
+      <motion.img
+        src={dept.image}
+        alt={dept.title}
+        draggable={false}
+        onClick={handleClick}
+        style={{
+          rotateX: rx,
+          rotateY: ry,
+          scale: s,
+          y,
+          transformStyle: "preserve-3d",
+          boxShadow:
+            "0 18px 50px rgba(2,6,23,0.12), 0 6px 18px rgba(2,6,23,0.06)",
+        }}
+        className="cursor-pointer w-full h-96 object-cover rounded-2xl"
+      />
+    </div>
+  );
+}
+
+export default function Departments() {
+  return (
+    <section className="min-h-screen bg-white text-black" dir="rtl">
+      <header className="max-w-6xl mx-auto px-6 pt-12">
+        <h1 className="text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-orange-400 via-orange-500 to-orange-600">أقسامنا</h1>
+      </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">
+          {departments.map((dept, index) => (
+            <motion.div
+              key={dept.id}
+              initial={{ opacity: 0, y: 24 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: false, amount: 0.25 }}
+              transition={{
+                duration: 0.7,
+                ease: "easeOut",
+                delay: index * 0.06,
+              }}
+            >
+              <DepartmentCard
+                dept={dept}
+                offset={index % 2 === 0 ? "" : "md:translate-y-16"}
+              />
+            </motion.div>
+          ))}
+        </div>
+      </main>
+    </section>
+  );
+}
diff --git a/src/Components/Sections/Home/Home.jsx b/src/Components/Sections/Home/Home.jsx
index aefd77a..c0b9863 100644
--- a/src/Components/Sections/Home/Home.jsx
+++ b/src/Components/Sections/Home/Home.jsx
@@ -1,254 +1,469 @@
-import React, { useState, useEffect, useRef } from "react";
-import { motion, AnimatePresence } from "framer-motion";
+import React, { useEffect, useState, useRef } from "react";
+import styled from 'styled-components';
 import { Element } from "react-scroll";
-import { useTranslation } from "react-i18next";
-import "../../../index.css";
+import Departments from "../Departments/Departments";
 
-import companyLogo from "../../../assets/REXNT.png";
+export default function EngineeringHeroFlowbite() {
+  const defaultConfig = {
+    main_title: "شريكك الهندسي لتنفيذ وإدارة المشاريع باحتراف",
+    subtitle:
+      "حلول متكاملة تشمل التصميم، التنفيذ، التشغيل، والصيانة\nللمشاريع الصناعية والمدنية، وفق أحدث المعايير والتقنيات",
+    primary_color: "#e67e22",
+    background_color: "#000000",
+    text_color: "#ffffff",
+    secondary_surface: "#95a5a6",
+    secondary_action: "#34495e",
+    font_family: "Cairo",
+    font_size: 16,
+  };
 
-const createStars = (count, config = {}) => 
-  Array.from({ length: count }).map((_, i) => ({
-    id: i,
-    x: Math.random() * 100,
-    y: Math.random() * 100,
-    size: Math.random() * (config.maxSize || 3) + (config.minSize || 1),
-    opacity: Math.random() * (config.maxOpacity || 0.8) + (config.minOpacity || 0.2),
-    duration: Math.random() * (config.maxDuration || 10) + (config.minDuration || 5),
-    delay: Math.random() * (config.maxDelay || 2),
-  }));
+  const [config, setConfig] = useState(defaultConfig);
+  const [isMounted, setIsMounted] = useState(false);
 
-const Home = () => {
-  const { t } = useTranslation();
-  const [showLogo, setShowLogo] = useState(false);
-  const [showTagline, setShowTagline] = useState(false);
-  const [scrollProgress, setScrollProgress] = useState(0);
-  const homeRef = useRef(null);
-
-  const stars = createStars(120);
-  const backgroundStars = createStars(80, {
-    minSize: 0.5,
-    maxSize: 2,
-    minOpacity: 0.1,
-    maxOpacity: 0.5,
-  });
+  const mainTitleRef = useRef(null);
+  const subtitleRef = useRef(null);
+  const departmentsRef = useRef(null);
 
   useEffect(() => {
-    const logoTimeout = setTimeout(() => setShowLogo(true), 500);
-    const taglineTimeout = setTimeout(() => setShowTagline(true), 1500);
-
-    const handleScroll = () => {
-      if (homeRef.current) {
-        const scrollPosition = window.scrollY;
-        const windowHeight = window.innerHeight;
-        const progress = Math.min(scrollPosition / (windowHeight * 0.2), 1);
-        setScrollProgress(progress);
-      }
-    };
-
-    window.addEventListener("scroll", handleScroll);
-    
-    return () => {
-      clearTimeout(logoTimeout);
-      clearTimeout(taglineTimeout);
-      window.removeEventListener("scroll", handleScroll);
-    };
+    const id = "cairo-font-link";
+    if (!document.getElementById(id)) {
+      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";
+      document.head.appendChild(link);
+    }
   }, []);
 
-  const AnimatedStars = () => (
-    <>
-      {stars.map((star) => (
-        <motion.div
-          key={`star-${star.id}`}
-          className="absolute rounded-full bg-white"
-          style={{
-            left: `${star.x}%`,
-            top: `${star.y}%`,
-            width: star.size,
-            height: star.size,
-            opacity: star.opacity,
-          }}
-          animate={{
-            opacity: [star.opacity, star.opacity * 0.3, star.opacity],
-            y: star.y - (scrollProgress * 10),
-          }}
-          transition={{
-            duration: star.duration,
-            delay: star.delay,
-            repeat: Infinity,
-            repeatType: "reverse",
-          }}
-        />
-      ))}
-    </>
-  );
+  useEffect(() => {
+    // slight delay to ensure mount then trigger animations
+    const t = setTimeout(() => setIsMounted(true), 60);
+    return () => clearTimeout(t);
+  }, []);
 
-  const StaticStars = () => (
-    <>
-      {backgroundStars.map((star) => (
-        <div
-          key={`bg-star-${star.id}`}
-          className="absolute rounded-full bg-white"
-          style={{
-            left: `${star.x}%`,
-            top: `${star.y}%`,
-            width: star.size,
-            height: star.size,
-            opacity: star.opacity,
-          }}
-        />
-      ))}
-    </>
-  );
+  useEffect(() => {
+    const main = mainTitleRef.current;
+    const sub = subtitleRef.current;
+    const baseFontStack = "Arial, sans-serif";
+    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>`;
+      }
+
+      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;
+      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],
+        ]),
+    };
+
+    if (window?.elementSdk?.init) {
+      try {
+        window.elementSdk.init(element);
+      } catch (e) {}
+    }
+  }, []);
+
+  const goToDepartments = (e) => {
+    e && e.preventDefault && e.preventDefault();
+    const el = document.getElementById("departments");
+    if (el) {
+      el.scrollIntoView({ behavior: "smooth", block: "start" });
+    } else {
+      window.scrollTo({ top: 0, behavior: "smooth" });
+    }
+  };
+
+  const OrangeActionButton = ({ onClick, children }) => {
+    return (
+      <StyledWrapper>
+        <button className="button" onClick={onClick} aria-label="تعرف على أقسامنا">
+          {children}
+          <svg className="icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
+            <path fillRule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm4.28 10.28a.75.75 0 000-1.06l-3-3a.75.75 0 10-1.06 1.06l1.72 1.72H8.25a.75.75 0 000 1.5h5.69l-1.72 1.72a.75.75 0 101.06 1.06l3-3z" clipRule="evenodd" />
+          </svg>
+        </button>
+      </StyledWrapper>
+    );
+  };
 
   return (
-    <Element name="home" ref={homeRef}>
-      <div className="fixed inset-0 -z-10 overflow-hidden">
-        <div className="absolute inset-0 bg-gradient-to-b from-[#080613] via-[#12143b] to-[#080613]">
-          <StaticStars />
+    <div dir="rtl" className="h-screen w-full overflow-hidden" style={{ background: "var(--ehb-background, #000000)" }}>
+      <style>{` 
+        :root { --ehb-primary: #e67e22; --ehb-background: #000000; --ehb-surface: #95a5a6; --ehb-action: #34495e }
+
+        .hero-section{position:relative;width:100%;height:100%;overflow:hidden}
+        .hero-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom, rgba(0,0,0,0.65), rgba(0,0,0,0.35));z-index:3}
+        .hero-layout{position:relative;z-index:10;height:100%;display:flex;align-items:center;justify-content:space-between;padding:40px;gap:2rem;direction:ltr;flex-direction:row}
+        .hero-left{flex:1;display:flex;align-items:center;justify-content:flex-start;padding:20px;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);
+          opacity: 0;
+          animation: slideInLeft 1200ms cubic-bezier(.2,.9,.2,1) 200ms both;
+        }
+        @keyframes slideInLeft {
+          0% { transform: translateX(-140px) scale(0.96); opacity: 0; filter: blur(2px); }
+          65% { transform: translateX(18px) scale(1.02); opacity: 1; filter: blur(0); }
+          100% { transform: translateX(0) scale(1); opacity: 1; }
+        }
+
+        /* partner bubbles - pop slower and float slower */
+        .partner-logos{display:flex;gap:18px;margin-top:20px;align-items:flex-end;justify-content:flex-start}
+        .partner-bubble{
+          width:110px;height:110px;border-radius:9999px;background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 12px 36px rgba(0,0,0,0.45);backdrop-filter: blur(4px);transition:transform 420ms cubic-bezier(.2,.9,.2,1),box-shadow 420ms;
+          transform-origin:center;
+          transform: translateY(10px) scale(0.9);
+          opacity: 0;
+          will-change: transform, opacity;
+        }
+        .hero-section.is-mounted .partner-bubble{
+          animation:
+            popIn 900ms cubic-bezier(.2,.9,.2,1) both,
+            floatBubble 5s ease-in-out 1100ms infinite;
+        }
+        .partner-bubble img{max-width:72%;max-height:72%;object-fit:contain;filter:grayscale(0.06) saturate(0.95)}
+        .partner-bubble:hover{transform:translateY(-10px) scale(1.08);box-shadow:0 34px 72px rgba(0,0,0,0.55)}
+
+        @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%);
+          transform: translateX(-120%) translateZ(0) rotateX(6deg) skewY(-2deg);
+          animation: slideInStrip 1600ms cubic-bezier(.2,.9,.2,1) 600ms forwards;
+          will-change:transform,opacity;
+        }
+        @keyframes slideInStrip{
+          0%{opacity:0;transform:translateX(-120%) translateZ(0) rotateX(8deg) skewY(-4deg) scale(0.98)}
+          70%{transform:translateX(12px) translateZ(6px) rotateX(2deg) skewY(-1deg) scale(1.01);opacity:1}
+          100%{transform:translateX(0) translateZ(10px) rotateX(0deg) skewY(0deg) scale(1);opacity:1}
+        }
+
+        .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}
+          .partner-item img{max-height:30px}
+          .partner-strip-wrap{padding-left:20px;padding-right:20px;bottom:10px}
+        }
+        @media (max-width: 640px){
+          .partner-strip{gap:10px;padding:8px;border-radius:10px}
+          .partner-item img{max-height:24px}
+          .partner-logos{gap:12px}
+          .partner-bubble{width:84px;height:84px}
+        }
+
+        /* HERO TEXT: slide from right (slower) */
+        .hero-content{flex:1;z-index:15;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;padding:40px}
+        .hero-title{ opacity:1; transform: translateX(0) translateY(0) scale(1); will-change: transform, opacity; }
+        .hero-subtitle{ opacity:1; transform: translateX(0) translateY(0) scale(1); will-change: transform, opacity; }
+
+        .hero-section.is-mounted .hero-title{
+          opacity:0;
+          transform: translateX(120px) translateY(10px) scale(0.995);
+          animation: slideFromRight 1000ms cubic-bezier(.2,.9,.2,1) 260ms both;
+        }
+        .hero-section.is-mounted .hero-subtitle{
+          opacity:0;
+          transform: translateX(96px) translateY(6px) scale(0.995);
+          animation: slideFromRight 1000ms cubic-bezier(.2,.9,.2,1) 520ms both;
+        }
+        @keyframes slideFromRight {
+          0% { opacity:0; transform: translateX(120px) translateY(18px) scale(0.98); filter: blur(2px); }
+          65% { transform: translateX(-8px) translateY(-8px) scale(1.02); opacity:1; filter: blur(0); }
+          100% { opacity:1; transform: translateX(0) translateY(0) scale(1); }
+        }
+
+        .navy-glow{position:absolute;pointer-events:none;filter:blur(120px);z-index:4;opacity:1}
+        .navy-glow.bottom-left{left:0;bottom:0;width:80vh;height:80vh;background:radial-gradient(circle at 10% 90%, rgba(6,23,58,0.98), rgba(6,23,58,0.7), rgba(6,23,58,0.35) 40%, rgba(6,23,58,0) 70%)}
+        .navy-glow.top-right{right:0;top:0;width:70vh;height:70vh;background:radial-gradient(circle at 90% 10%, rgba(6,23,58,0.95), rgba(6,23,58,0.6), rgba(6,23,58,0.3) 40%, rgba(6,23,58,0) 70%)}
+        @media (max-width: 768px){
+          .hero-layout{flex-direction:column;align-items:center;text-align:center}
+          .hero-content{align-items:center}
+          .hero-title{font-size:calc(var(--base,16px) * 2.2) !important}
+        }
+
+        /* BUTTON: slower pop-in */
+        .button {
+          position: relative;
+          transition: all 0.3s ease-in-out;
+          box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
+          padding-block: 0.5rem;
+          padding-inline: 1.25rem;
+          background-color: var(--ehb-primary, #e67e22);
+          border-radius: 9999px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: #ffff;
+          gap: 10px;
+          font-weight: bold;
+          border: 3px solid #ffffff4d;
+          outline: none;
+          overflow: hidden;
+          font-size: 15px;
+          cursor: pointer;
+          transform: translateY(0) scale(1);
+          opacity: 1;
+        }
+
+        .hero-section.is-mounted .button{
+          transform: scale(0.6);
+          opacity: 0;
+          animation: popIn 900ms cubic-bezier(.2,.9,.2,1) 760ms both;
+          will-change: transform, opacity;
+        }
+
+        .icon { width: 24px; height: 24px; transition: all 0.3s ease-in-out; }
+        .button:hover { transform: scale(1.05); border-color: #fff9; }
+        .button:hover .icon { transform: translate(4px); }
+        .button:hover::before { animation: shine 1.5s ease-out infinite; }
+
+        .button::before {
+          content: "";
+          position: absolute;
+          width: 100px;
+          height: 100%;
+          background-image: linear-gradient(
+            120deg,
+            rgba(255, 255, 255, 0) 30%,
+            rgba(255, 255, 255, 0.8),
+            rgba(255, 255, 255, 0) 70%
+          );
+          top: 0;
+          left: -100px;
+          opacity: 0.6;
+        }
+
+        @keyframes popIn {
+          0% { transform: translateY(30px) scale(0.6); opacity: 0; filter: blur(2px); }
+          65% { transform: translateY(-10px) scale(1.06); opacity: 1; filter: blur(0); }
+          100% { transform: translateY(0) scale(1); opacity: 1; }
+        }
+
+        @keyframes shine {
+          0% { left: -100px; }
+          60% { left: 100%; }
+          to { left: 100%; }
+        }
+      `}</style>
+
+      <div className={`hero-section ${isMounted ? "is-mounted" : ""}`}>
+        <div className="navy-glow bottom-left" />
+        <div className="navy-glow top-right" />
+        <div className="hero-overlay" />
+        <div className="hero-layout">
+          <div className="hero-left">
+            <img src="src/assets/REXNT.png" alt="REXNT" />
+
+            <div className="partner-logos" aria-hidden>
+              <div className="partner-bubble" style={{ animationDelay: "0ms" }} aria-label="شريك TPS">
+                <img src="src/assets/TPS-logo.png" alt="TPS" />
+              </div>
+              <div className="partner-bubble" style={{ animationDelay: "180ms" }} aria-label="شريك NSC">
+                <img src="src/assets/NSC.png" alt="NSC" />
+              </div>
+              <div className="partner-bubble" style={{ animationDelay: "360ms" }} aria-label="شريك LOGO">
+                <img src="src/assets/LOGO.png" alt="LOGO" />
+              </div>
+            </div>
+          </div>
+
+          <div className="hero-content">
+            <h1 ref={mainTitleRef} className="hero-title text-white text-right" style={{ fontWeight: 800, marginBottom: 16, textShadow: "2px 2px 10px rgba(0,0,0,0.6)" }} />
+            <p ref={subtitleRef} className="hero-subtitle text-white text-right" style={{ maxWidth: 800, textShadow: "1px 1px 6px rgba(0,0,0,0.45)", lineHeight: 1.6 }} />
+            <div style={{ marginTop: 18 }}>
+              <OrangeActionButton onClick={goToDepartments}>تعرف على أقسامنا</OrangeActionButton>
+            </div>
+          </div>
         </div>
       </div>
 
-      <div className="relative min-h-screen w-full overflow-hidden" dir="rtl">
-        <div className="absolute inset-0 z-0">
-          <AnimatedStars />
-          
-          <motion.div
-            className="absolute inset-0"
-            animate={{
-              background: [
-                "radial-gradient(circle at 30% 50%, rgba(63, 68, 106, 0.2) 0%, transparent 50%)",
-                "radial-gradient(circle at 70% 50%, rgba(54, 57, 163, 0.3) 0%, transparent 50%)",
-                "radial-gradient(circle at 30% 50%, rgba(63, 68, 106, 0.2) 0%, transparent 50%)",
-              ],
-            }}
-            transition={{
-              duration: 20,
-              repeat: Infinity,
-              repeatType: "reverse",
-            }}
-          />
+      <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 className="absolute inset-0 overflow-hidden">
-          <motion.div
-            className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] rounded-full"
-            animate={{
-              background: [
-                "radial-gradient(circle, rgba(87, 97, 221, 0.15) 0%, transparent 70%)",
-                "radial-gradient(circle, rgba(54, 57, 163, 0.2) 0%, transparent 70%)",
-                "radial-gradient(circle, rgba(87, 97, 221, 0.15) 0%, transparent 70%)",
-              ],
-            }}
-            transition={{
-              duration: 10,
-              repeat: Infinity,
-              repeatType: "reverse",
-            }}
-          />
-        </div>
-
-        <div className="relative z-10 min-h-screen flex flex-col items-center justify-center px-4">
-          <AnimatePresence>
-            {showLogo && (
-              <motion.div
-                initial={{ opacity: 0, y: 50, scale: 0.9 }}
-                animate={{ opacity: 1, y: 0, scale: 1 }}
-                transition={{
-                  duration: 1.2,
-                  type: "spring",
-                  damping: 20,
-                }}
-                className="relative mb-2"
-              >
-                <div className="relative">
-                  <motion.img
-                    src={companyLogo}
-                    alt="Company Logo"
-                    className="w-auto max-w-[280px] md:max-w-[400px] lg:max-w-[400px] h-auto"
-                    whileHover={{ scale: 1.03 }}
-                    transition={{ type: "spring", stiffness: 300 }}
-                  />
-                  <motion.div
-                    className="absolute inset-0 -z-10 blur-2xl opacity-40"
-                    style={{
-                      background: "linear-gradient(135deg, #5761dd 0%, #3639a3 50%, #3f446a 100%)",
-                    }}
-                    animate={{
-                      scale: [1, 1.05, 1],
-                      opacity: [0.3, 0.5, 0.3],
-                    }}
-                    transition={{
-                      duration: 4,
-                      repeat: Infinity,
-                      repeatType: "reverse",
-                    }}
-                  />
-                </div>
-              </motion.div>
-            )}
-          </AnimatePresence>
-
-          <AnimatePresence>
-            {showTagline && (
-              <motion.div
-                initial={{ opacity: 0, y: 30 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{
-                  duration: 1,
-                  delay: 0.8,
-                }}
-                className="text-center max-w-4xl mx-auto"
-              >
-                <motion.div
-                  className="text-xl md:text-2xl lg:text-2xl font-bold text-white mb-4 leading-relaxed"
-                  animate={{
-                    opacity: [0.9, 1, 0.9],
-                  }}
-                  transition={{
-                    duration: 4,
-                    repeat: Infinity,
-                    repeatType: "reverse",
-                  }}
-                >
-                  <h2 className="mb-4 text-2xl md:text-3xl">
-                    شريكك الهندسي والتقني الرائد
-                  </h2>
-                  <p className="mb-3">
-                    في تنفيذ وإدارة المشاريع الصناعية والسكنية والنفطية
-                  </p>
-                  <p>
-                    والمساهمة في تطوير البنية التحتية والقطاعات الإنتاجية
-                    <span className="block mt-3 text-xl md:text-2xl">
-                      عبر حلول حديثة ومستدامة
-                    </span>
-                  </p>
-                </motion.div>
-                
-                <motion.div
-                  className="w-48 h-1 mx-auto bg-gradient-to-r from-transparent via-[#5761dd] via-[#3639a3] to-transparent mt-6"
-                  animate={{
-                    scaleX: [0.5, 1, 0.5],
-                  }}
-                  transition={{
-                    duration: 3,
-                    repeat: Infinity,
-                    repeatType: "reverse",
-                  }}
-                />
-              </motion.div>
-            )}
-          </AnimatePresence>
-        </div>
-
-        <motion.div
-          className="absolute inset-0 pointer-events-none"
-          style={{
-            background: `radial-gradient(circle at ${scrollProgress * 100}% ${50 + scrollProgress * 20}%, rgba(87, 97, 221, 0.1) 0%, transparent 50%)`,
-          }}
-        />
       </div>
-    </Element>
+
+      <Element name="departments" id="departments">
+        <Departments />
+      </Element>
+    </div>
   );
-};
+}
 
-export default Home;
\ No newline at end of file
+const StyledWrapper = styled.div`
+  .button {
+    position: relative;
+    transition: all 0.3s ease-in-out;
+    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
+    padding-block: 0.5rem;
+    padding-inline: 1.25rem;
+    background-color: var(--ehb-primary, #e67e22);
+    border-radius: 9999px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #ffff;
+    gap: 10px;
+    font-weight: bold;
+    border: 3px solid #ffffff4d;
+    outline: none;
+    overflow: hidden;
+    font-size: 15px;
+    cursor: pointer;
+  }
+
+  .icon { width: 24px; height: 24px; transition: all 0.3s ease-in-out; }
+
+  .button:hover { transform: scale(1.05); border-color: #fff9; }
+  .button:hover .icon { transform: translate(4px); }
+  .button:hover::before { animation: shine 1.5s ease-out infinite; }
+
+  .button::before {
+    content: "";
+    position: absolute;
+    width: 100px;
+    height: 100%;
+    background-image: linear-gradient(
+      120deg,
+      rgba(255, 255, 255, 0) 30%,
+      rgba(255, 255, 255, 0.8),
+      rgba(255, 255, 255, 0) 70%
+    );
+    top: 0;
+    left: -100px;
+    opacity: 0.6;
+  }
+
+  @keyframes shine {
+    0% { left: -100px; }
+    60% { left: 100%; }
+    to { left: 100%; }
+  }
+`;
diff --git a/src/assets/Images/d1.jpeg b/src/assets/Images/d1.jpeg
new file mode 100644
index 0000000..4e13167
Binary files /dev/null and b/src/assets/Images/d1.jpeg differ
diff --git a/src/assets/Images/d10.png b/src/assets/Images/d10.png
new file mode 100644
index 0000000..41f1fd7
Binary files /dev/null and b/src/assets/Images/d10.png differ
diff --git a/src/assets/Images/d11.png b/src/assets/Images/d11.png
new file mode 100644
index 0000000..0013ef2
Binary files /dev/null and b/src/assets/Images/d11.png differ
diff --git a/src/assets/Images/d12.jpeg b/src/assets/Images/d12.jpeg
new file mode 100644
index 0000000..7665b12
Binary files /dev/null and b/src/assets/Images/d12.jpeg differ
diff --git a/src/assets/Images/d13.jpeg b/src/assets/Images/d13.jpeg
new file mode 100644
index 0000000..02adc9c
Binary files /dev/null and b/src/assets/Images/d13.jpeg differ
diff --git a/src/assets/Images/d14.jpg b/src/assets/Images/d14.jpg
new file mode 100644
index 0000000..b0e58d9
Binary files /dev/null and b/src/assets/Images/d14.jpg differ
diff --git a/src/assets/Images/d15.jpg b/src/assets/Images/d15.jpg
new file mode 100644
index 0000000..6734ae6
Binary files /dev/null and b/src/assets/Images/d15.jpg differ
diff --git a/src/assets/Images/d16.jpg b/src/assets/Images/d16.jpg
new file mode 100644
index 0000000..849af36
Binary files /dev/null and b/src/assets/Images/d16.jpg differ
diff --git a/src/assets/Images/d17.png b/src/assets/Images/d17.png
new file mode 100644
index 0000000..bcbc289
Binary files /dev/null and b/src/assets/Images/d17.png differ
diff --git a/src/assets/Images/d18.jpg b/src/assets/Images/d18.jpg
new file mode 100644
index 0000000..118d749
Binary files /dev/null and b/src/assets/Images/d18.jpg differ
diff --git a/src/assets/Images/d19.jpeg b/src/assets/Images/d19.jpeg
new file mode 100644
index 0000000..734e887
Binary files /dev/null and b/src/assets/Images/d19.jpeg differ
diff --git a/src/assets/Images/d2.jpeg b/src/assets/Images/d2.jpeg
new file mode 100644
index 0000000..ca0ce39
Binary files /dev/null and b/src/assets/Images/d2.jpeg differ
diff --git a/src/assets/Images/d20.jpeg b/src/assets/Images/d20.jpeg
new file mode 100644
index 0000000..adb81fc
Binary files /dev/null and b/src/assets/Images/d20.jpeg differ
diff --git a/src/assets/Images/d21.jpeg b/src/assets/Images/d21.jpeg
new file mode 100644
index 0000000..81205b9
Binary files /dev/null and b/src/assets/Images/d21.jpeg differ
diff --git a/src/assets/Images/d22.jpg b/src/assets/Images/d22.jpg
new file mode 100644
index 0000000..274e75d
Binary files /dev/null and b/src/assets/Images/d22.jpg differ
diff --git a/src/assets/Images/d3.jpeg b/src/assets/Images/d3.jpeg
new file mode 100644
index 0000000..c864f47
Binary files /dev/null and b/src/assets/Images/d3.jpeg differ
diff --git a/src/assets/Images/d4.jpeg b/src/assets/Images/d4.jpeg
new file mode 100644
index 0000000..8ceba47
Binary files /dev/null and b/src/assets/Images/d4.jpeg differ
diff --git a/src/assets/Images/d5.jpeg b/src/assets/Images/d5.jpeg
new file mode 100644
index 0000000..6da8115
Binary files /dev/null and b/src/assets/Images/d5.jpeg differ
diff --git a/src/assets/Images/d6.jpeg b/src/assets/Images/d6.jpeg
new file mode 100644
index 0000000..ceae380
Binary files /dev/null and b/src/assets/Images/d6.jpeg differ
diff --git a/src/assets/Images/d7.jpeg b/src/assets/Images/d7.jpeg
new file mode 100644
index 0000000..f11b08d
Binary files /dev/null and b/src/assets/Images/d7.jpeg differ
diff --git a/src/assets/Images/d8.png b/src/assets/Images/d8.png
new file mode 100644
index 0000000..0f5fd2c
Binary files /dev/null and b/src/assets/Images/d8.png differ
diff --git a/src/assets/Images/d9.png b/src/assets/Images/d9.png
new file mode 100644
index 0000000..7abaf7b
Binary files /dev/null and b/src/assets/Images/d9.png differ
diff --git a/src/assets/LOGO.png b/src/assets/LOGO.png
new file mode 100644
index 0000000..42ea728
Binary files /dev/null and b/src/assets/LOGO.png differ
diff --git a/src/assets/NSC.png b/src/assets/NSC.png
new file mode 100644
index 0000000..c255ef3
Binary files /dev/null and b/src/assets/NSC.png differ
diff --git a/src/assets/TPS-logo.png b/src/assets/TPS-logo.png
new file mode 100644
index 0000000..cf7badf
Binary files /dev/null and b/src/assets/TPS-logo.png differ