diff --git a/package-lock.json b/package-lock.json
index 8bd7fb4..30c2908 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -95,39 +95,6 @@
         "node": ">=6.0.0"
       }
     },
-    "node_modules/@anthropic-ai/sdk": {
-      "version": "0.27.3",
-      "resolved": "https://registry.npmjs.org/@anthropic-ai/sdk/-/sdk-0.27.3.tgz",
-      "integrity": "sha512-IjLt0gd3L4jlOfilxVXTifn42FnVffMgDC04RJK1KDZpmkBWLv0XC92MVVmkxrFZNS/7l3xWgP/I3nqtX1sQHw==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@types/node": "^18.11.18",
-        "@types/node-fetch": "^2.6.4",
-        "abort-controller": "^3.0.0",
-        "agentkeepalive": "^4.2.1",
-        "form-data-encoder": "1.7.2",
-        "formdata-node": "^4.3.2",
-        "node-fetch": "^2.6.7"
-      }
-    },
-    "node_modules/@anthropic-ai/sdk/node_modules/@types/node": {
-      "version": "18.19.122",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.122.tgz",
-      "integrity": "sha512-yzegtT82dwTNEe/9y+CM8cgb42WrUfMMCg2QqSddzO1J6uPmBD7qKCZ7dOHZP2Yrpm/kb0eqdNMn2MUyEiqBmA==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "undici-types": "~5.26.4"
-      }
-    },
-    "node_modules/@anthropic-ai/sdk/node_modules/undici-types": {
-      "version": "5.26.5",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
-      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
-      "license": "MIT",
-      "peer": true
-    },
     "node_modules/@aws-crypto/crc32": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@aws-crypto/crc32/-/crc32-5.2.0.tgz",
@@ -1341,59 +1308,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@browserbasehq/sdk": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/@browserbasehq/sdk/-/sdk-2.6.0.tgz",
-      "integrity": "sha512-83iXP5D7xMm8Wyn66TUaUrgoByCmAJuoMoZQI3sGg3JAiMlTfnCIMqyVBoNSaItaPIkaCnrsj6LiusmXV2X9YA==",
-      "license": "Apache-2.0",
-      "peer": true,
-      "dependencies": {
-        "@types/node": "^18.11.18",
-        "@types/node-fetch": "^2.6.4",
-        "abort-controller": "^3.0.0",
-        "agentkeepalive": "^4.2.1",
-        "form-data-encoder": "1.7.2",
-        "formdata-node": "^4.3.2",
-        "node-fetch": "^2.6.7"
-      }
-    },
-    "node_modules/@browserbasehq/sdk/node_modules/@types/node": {
-      "version": "18.19.122",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.122.tgz",
-      "integrity": "sha512-yzegtT82dwTNEe/9y+CM8cgb42WrUfMMCg2QqSddzO1J6uPmBD7qKCZ7dOHZP2Yrpm/kb0eqdNMn2MUyEiqBmA==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "undici-types": "~5.26.4"
-      }
-    },
-    "node_modules/@browserbasehq/sdk/node_modules/undici-types": {
-      "version": "5.26.5",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
-      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
-      "license": "MIT",
-      "peer": true
-    },
-    "node_modules/@browserbasehq/stagehand": {
-      "version": "1.14.0",
-      "resolved": "https://registry.npmjs.org/@browserbasehq/stagehand/-/stagehand-1.14.0.tgz",
-      "integrity": "sha512-Hi/EzgMFWz+FKyepxHTrqfTPjpsuBS4zRy3e9sbMpBgLPv+9c0R+YZEvS7Bw4mTS66QtvvURRT6zgDGFotthVQ==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@anthropic-ai/sdk": "^0.27.3",
-        "@browserbasehq/sdk": "^2.0.0",
-        "ws": "^8.18.0",
-        "zod-to-json-schema": "^3.23.5"
-      },
-      "peerDependencies": {
-        "@playwright/test": "^1.42.1",
-        "deepmerge": "^4.3.1",
-        "dotenv": "^16.4.5",
-        "openai": "^4.62.1",
-        "zod": "^3.23.8"
-      }
-    },
     "node_modules/@cfworker/json-schema": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/@cfworker/json-schema/-/json-schema-4.1.1.tgz",
@@ -1680,38 +1594,6 @@
         "url": "https://github.com/sponsors/nzakas"
       }
     },
-    "node_modules/@ibm-cloud/watsonx-ai": {
-      "version": "1.6.10",
-      "resolved": "https://registry.npmjs.org/@ibm-cloud/watsonx-ai/-/watsonx-ai-1.6.10.tgz",
-      "integrity": "sha512-aZV50/s8VZc7w0t/qcaBw3RLT3WDsAeZUJlP8EbG/csZJF3a8F7alihbGOM4lJFM7R4Z81Lucz3nfHi2KR7J4Q==",
-      "license": "Apache-2.0",
-      "peer": true,
-      "dependencies": {
-        "@types/node": "^18.0.0",
-        "extend": "3.0.2",
-        "ibm-cloud-sdk-core": "^5.3.2"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
-    },
-    "node_modules/@ibm-cloud/watsonx-ai/node_modules/@types/node": {
-      "version": "18.19.122",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.122.tgz",
-      "integrity": "sha512-yzegtT82dwTNEe/9y+CM8cgb42WrUfMMCg2QqSddzO1J6uPmBD7qKCZ7dOHZP2Yrpm/kb0eqdNMn2MUyEiqBmA==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "undici-types": "~5.26.4"
-      }
-    },
-    "node_modules/@ibm-cloud/watsonx-ai/node_modules/undici-types": {
-      "version": "5.26.5",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
-      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
-      "license": "MIT",
-      "peer": true
-    },
     "node_modules/@img/sharp-darwin-arm64": {
       "version": "0.34.3",
       "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.3.tgz",
@@ -3195,22 +3077,6 @@
         "node": ">=12.4.0"
       }
     },
-    "node_modules/@playwright/test": {
-      "version": "1.54.2",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.54.2.tgz",
-      "integrity": "sha512-A+znathYxPf+72riFd1r1ovOLqsIIB0jKIoPjyK2kqEIe30/6jF6BC7QNluHuwUmsD2tv1XZVugN8GqfTMOxsA==",
-      "license": "Apache-2.0",
-      "peer": true,
-      "dependencies": {
-        "playwright": "1.54.2"
-      },
-      "bin": {
-        "playwright": "cli.js"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/@protobufjs/aspromise": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz",
@@ -4615,13 +4481,6 @@
         "js-tiktoken": "^1.0.14"
       }
     },
-    "node_modules/@tokenizer/token": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/@tokenizer/token/-/token-0.3.0.tgz",
-      "integrity": "sha512-OvjF+z51L3ov0OyAU0duzsYuvO01PH7x4t6DJx+guahgTnBHkhJdG7soQeTSFLWN3efnHyibZ4Z8l2EuWwJN3A==",
-      "license": "MIT",
-      "peer": true
-    },
     "node_modules/@tybys/wasm-util": {
       "version": "0.10.0",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.0.tgz",
@@ -4726,17 +4585,6 @@
         "undici-types": "~6.21.0"
       }
     },
-    "node_modules/@types/node-fetch": {
-      "version": "2.6.13",
-      "resolved": "https://registry.npmjs.org/@types/node-fetch/-/node-fetch-2.6.13.tgz",
-      "integrity": "sha512-QGpRVpzSaUs30JBSGPjOg4Uveu384erbHBoT1zeONvyCfwQxIkUshLAOqN/k9EjGviPRmWTTe6aH2qySWKTVSw==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@types/node": "*",
-        "form-data": "^4.0.4"
-      }
-    },
     "node_modules/@types/nodemailer": {
       "version": "6.4.18",
       "resolved": "https://registry.npmjs.org/@types/nodemailer/-/nodemailer-6.4.18.tgz",
@@ -4760,6 +4608,7 @@
       "version": "19.1.9",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.9.tgz",
       "integrity": "sha512-WmdoynAX8Stew/36uTSVMcLJJ1KRh6L3IZRx1PZ7qJtBqT3dYTgyDTx8H1qoRghErydW7xw9mSJ3wS//tCRpFA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.0.2"
@@ -4781,13 +4630,6 @@
       "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==",
       "license": "MIT"
     },
-    "node_modules/@types/tough-cookie": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.5.tgz",
-      "integrity": "sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==",
-      "license": "MIT",
-      "peer": true
-    },
     "node_modules/@types/unist": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
@@ -5451,19 +5293,6 @@
         }
       }
     },
-    "node_modules/abort-controller": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
-      "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "event-target-shim": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=6.5"
-      }
-    },
     "node_modules/abort-controller-x": {
       "version": "0.4.3",
       "resolved": "https://registry.npmjs.org/abort-controller-x/-/abort-controller-x-0.4.3.tgz",
@@ -5502,19 +5331,6 @@
         "node": ">= 14"
       }
     },
-    "node_modules/agentkeepalive": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/agentkeepalive/-/agentkeepalive-4.6.0.tgz",
-      "integrity": "sha512-kja8j7PjmncONqaTsB8fQ+wE2mSU2DJ9D4XKoJ5PFWIdRMa6SLSN1ff4mOr4jCbfRSsxR4keIiySJU0N9T5hIQ==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "humanize-ms": "^1.2.1"
-      },
-      "engines": {
-        "node": ">= 8.0.0"
-      }
-    },
     "node_modules/ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -5899,31 +5715,6 @@
         "node": ">=16.20.1"
       }
     },
-    "node_modules/buffer": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
-      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "base64-js": "^1.3.1",
-        "ieee754": "^1.2.1"
-      }
-    },
     "node_modules/buffer-equal-constant-time": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
@@ -6368,16 +6159,6 @@
       "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",
-      "peer": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/define-data-property": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
@@ -6474,19 +6255,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/dotenv": {
-      "version": "16.6.1",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.6.1.tgz",
-      "integrity": "sha512-uBq4egWHTcTt33a72vpSG0z3HnPuIl6NqYcTrKEg2azoEyl2hpW0zqlxysq2pK9HlDIHyHyakeYaYnSAwd8bow==",
-      "license": "BSD-2-Clause",
-      "peer": true,
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://dotenvx.com"
-      }
-    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -7174,32 +6942,12 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/event-target-shim": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
-      "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==",
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/eventemitter3": {
       "version": "4.0.7",
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
       "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
       "license": "MIT"
     },
-    "node_modules/events": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
-      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": ">=0.8.x"
-      }
-    },
     "node_modules/expr-eval": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/expr-eval/-/expr-eval-2.0.2.tgz",
@@ -7304,24 +7052,6 @@
         "node": ">=16.0.0"
       }
     },
-    "node_modules/file-type": {
-      "version": "16.5.4",
-      "resolved": "https://registry.npmjs.org/file-type/-/file-type-16.5.4.tgz",
-      "integrity": "sha512-/yFHK0aGjFEgDJjEKP0pWCplsPFPhwyfwevf/pVxiN0tmE4L9LmwWxWukdJSHdoCli4VgQLehjJtwQBnqmsKcw==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "readable-web-to-node-stream": "^3.0.0",
-        "strtok3": "^6.2.4",
-        "token-types": "^4.1.1"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sindresorhus/file-type?sponsor=1"
-      }
-    },
     "node_modules/fill-range": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
@@ -7434,27 +7164,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/form-data-encoder": {
-      "version": "1.7.2",
-      "resolved": "https://registry.npmjs.org/form-data-encoder/-/form-data-encoder-1.7.2.tgz",
-      "integrity": "sha512-qfqtYan3rxrnCk1VYaA4H+Ms9xdpPqvLZa6xmMgFvhO32x7/3J/ExcTd6qpxM0vH2GdMI+poehyBZvqfMTto8A==",
-      "license": "MIT",
-      "peer": true
-    },
-    "node_modules/formdata-node": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/formdata-node/-/formdata-node-4.4.1.tgz",
-      "integrity": "sha512-0iirZp3uVDjVGt9p49aTaqjk84TrglENEDuqfdlZQ1roC9CWlPk6Avf8EEnZNcAqPonwkG35x4n3ww/1THYAeQ==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "node-domexception": "1.0.0",
-        "web-streams-polyfill": "4.0.0-beta.3"
-      },
-      "engines": {
-        "node": ">= 12.20"
-      }
-    },
     "node_modules/framer-motion": {
       "version": "12.23.12",
       "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.12.tgz",
@@ -8028,16 +7737,6 @@
         "node": ">= 14"
       }
     },
-    "node_modules/humanize-ms": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/humanize-ms/-/humanize-ms-1.2.1.tgz",
-      "integrity": "sha512-Fl70vYtsAFb/C06PTS9dZBo7ihau+Tu/DNCk/OyHhea07S+aeMWpFFkUaXRa8fI+ScZbEI8dfSxwY7gxZ9SAVQ==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "ms": "^2.0.0"
-      }
-    },
     "node_modules/i18next": {
       "version": "25.3.2",
       "resolved": "https://registry.npmjs.org/i18next/-/i18next-25.3.2.tgz",
@@ -8087,76 +7786,11 @@
         "cross-fetch": "4.0.0"
       }
     },
-    "node_modules/ibm-cloud-sdk-core": {
-      "version": "5.4.2",
-      "resolved": "https://registry.npmjs.org/ibm-cloud-sdk-core/-/ibm-cloud-sdk-core-5.4.2.tgz",
-      "integrity": "sha512-5VFkKYU/vSIWFJTVt392XEdPmiEwUJqhxjn1MRO3lfELyU2FB+yYi8brbmXUgq+D1acHR1fpS7tIJ6IlnrR9Cg==",
-      "license": "Apache-2.0",
-      "peer": true,
-      "dependencies": {
-        "@types/debug": "^4.1.12",
-        "@types/node": "^18.19.80",
-        "@types/tough-cookie": "^4.0.0",
-        "axios": "^1.11.0",
-        "camelcase": "^6.3.0",
-        "debug": "^4.3.4",
-        "dotenv": "^16.4.5",
-        "extend": "3.0.2",
-        "file-type": "16.5.4",
-        "form-data": "^4.0.4",
-        "isstream": "0.1.2",
-        "jsonwebtoken": "^9.0.2",
-        "mime-types": "2.1.35",
-        "retry-axios": "^2.6.0",
-        "tough-cookie": "^4.1.3"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/ibm-cloud-sdk-core/node_modules/@types/node": {
-      "version": "18.19.122",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.122.tgz",
-      "integrity": "sha512-yzegtT82dwTNEe/9y+CM8cgb42WrUfMMCg2QqSddzO1J6uPmBD7qKCZ7dOHZP2Yrpm/kb0eqdNMn2MUyEiqBmA==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "undici-types": "~5.26.4"
-      }
-    },
-    "node_modules/ibm-cloud-sdk-core/node_modules/undici-types": {
-      "version": "5.26.5",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
-      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
-      "license": "MIT",
-      "peer": true
-    },
-    "node_modules/ieee754": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
-      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "BSD-3-Clause",
-      "peer": true
-    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
       "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 4"
@@ -8697,13 +8331,6 @@
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/isstream": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
-      "integrity": "sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g==",
-      "license": "MIT",
-      "peer": true
-    },
     "node_modules/iterator.prototype": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.5.tgz",
@@ -10750,27 +10377,6 @@
         "ts-error": "^1.0.6"
       }
     },
-    "node_modules/node-domexception": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
-      "integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==",
-      "deprecated": "Use your platform's native DOMException instead",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/jimmywarting"
-        },
-        {
-          "type": "github",
-          "url": "https://paypal.me/jimmywarting"
-        }
-      ],
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": ">=10.5.0"
-      }
-    },
     "node_modules/node-fetch": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
@@ -10923,54 +10529,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/openai": {
-      "version": "4.104.0",
-      "resolved": "https://registry.npmjs.org/openai/-/openai-4.104.0.tgz",
-      "integrity": "sha512-p99EFNsA/yX6UhVO93f5kJsDRLAg+CTA2RBqdHK4RtK8u5IJw32Hyb2dTGKbnnFmnuoBv5r7Z2CURI9sGZpSuA==",
-      "license": "Apache-2.0",
-      "peer": true,
-      "dependencies": {
-        "@types/node": "^18.11.18",
-        "@types/node-fetch": "^2.6.4",
-        "abort-controller": "^3.0.0",
-        "agentkeepalive": "^4.2.1",
-        "form-data-encoder": "1.7.2",
-        "formdata-node": "^4.3.2",
-        "node-fetch": "^2.6.7"
-      },
-      "bin": {
-        "openai": "bin/cli"
-      },
-      "peerDependencies": {
-        "ws": "^8.18.0",
-        "zod": "^3.23.8"
-      },
-      "peerDependenciesMeta": {
-        "ws": {
-          "optional": true
-        },
-        "zod": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/openai/node_modules/@types/node": {
-      "version": "18.19.122",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.122.tgz",
-      "integrity": "sha512-yzegtT82dwTNEe/9y+CM8cgb42WrUfMMCg2QqSddzO1J6uPmBD7qKCZ7dOHZP2Yrpm/kb0eqdNMn2MUyEiqBmA==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "undici-types": "~5.26.4"
-      }
-    },
-    "node_modules/openai/node_modules/undici-types": {
-      "version": "5.26.5",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
-      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
-      "license": "MIT",
-      "peer": true
-    },
     "node_modules/openapi-types": {
       "version": "12.1.3",
       "resolved": "https://registry.npmjs.org/openapi-types/-/openapi-types-12.1.3.tgz",
@@ -11180,20 +10738,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/peek-readable": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/peek-readable/-/peek-readable-4.1.0.tgz",
-      "integrity": "sha512-ZI3LnwUv5nOGbQzD9c2iDG6toheuXSZP5esSHBjopsXH4dg19soufvpUGA3uohi5anFtGb2lhAVdHzH6R/Evvg==",
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/Borewit"
-      }
-    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -11213,38 +10757,6 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
-    "node_modules/playwright": {
-      "version": "1.54.2",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.54.2.tgz",
-      "integrity": "sha512-Hu/BMoA1NAdRUuulyvQC0pEqZ4vQbGfn8f7wPXcnqQmM+zct9UliKxsIkLNmz/ku7LElUNqmaiv1TG/aL5ACsw==",
-      "license": "Apache-2.0",
-      "peer": true,
-      "dependencies": {
-        "playwright-core": "1.54.2"
-      },
-      "bin": {
-        "playwright": "cli.js"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "optionalDependencies": {
-        "fsevents": "2.3.2"
-      }
-    },
-    "node_modules/playwright-core": {
-      "version": "1.54.2",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.54.2.tgz",
-      "integrity": "sha512-n5r4HFbMmWsB4twG7tJLDN9gmBUeSPcsBZiWSE4DnYz9mJMAFqr2ID7+eGC9kpEnxExJ1epttwR59LEWCk8mtA==",
-      "license": "Apache-2.0",
-      "peer": true,
-      "bin": {
-        "playwright-core": "cli.js"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/pngjs": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
@@ -11316,16 +10828,6 @@
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/process": {
-      "version": "0.11.10",
-      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
-      "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": ">= 0.6.0"
-      }
-    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -11378,19 +10880,6 @@
       "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
       "license": "MIT"
     },
-    "node_modules/psl": {
-      "version": "1.15.0",
-      "resolved": "https://registry.npmjs.org/psl/-/psl-1.15.0.tgz",
-      "integrity": "sha512-JZd3gMVBAVQkSs6HdNZo9Sdo0LNcQeMNP3CozBJb3JYC/QUYZTnKxP+f8oWRX4rHP5EurWxqAHTSwUCjlNKa1w==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "punycode": "^2.3.1"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/lupomontero"
-      }
-    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -11544,13 +11033,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/querystringify": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
-      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==",
-      "license": "MIT",
-      "peer": true
-    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -11670,40 +11152,6 @@
         "react": ">=18"
       }
     },
-    "node_modules/readable-stream": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-4.7.0.tgz",
-      "integrity": "sha512-oIGGmcpTLwPga8Bn6/Z75SVaH1z5dUut2ibSyAMVhmUggWpmDn2dapB0n7f8nwaSiRtepAsfJyfXIO5DCVAODg==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "abort-controller": "^3.0.0",
-        "buffer": "^6.0.3",
-        "events": "^3.3.0",
-        "process": "^0.11.10",
-        "string_decoder": "^1.3.0"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      }
-    },
-    "node_modules/readable-web-to-node-stream": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/readable-web-to-node-stream/-/readable-web-to-node-stream-3.0.4.tgz",
-      "integrity": "sha512-9nX56alTf5bwXQ3ZDipHJhusu9NTQJ/CVPtb/XHAJCXihZeitfJvIRS4GqQ/mfIoOE3IelHMrpayVrosdHBuLw==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "readable-stream": "^4.7.0"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/Borewit"
-      }
-    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
@@ -11861,13 +11309,6 @@
       "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
       "license": "ISC"
     },
-    "node_modules/requires-port": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
-      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
-      "license": "MIT",
-      "peer": true
-    },
     "node_modules/resolve": {
       "version": "1.22.10",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
@@ -11918,19 +11359,6 @@
         "node": ">= 4"
       }
     },
-    "node_modules/retry-axios": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/retry-axios/-/retry-axios-2.6.0.tgz",
-      "integrity": "sha512-pOLi+Gdll3JekwuFjXO3fTq+L9lzMQGcSq7M5gIjExcl3Gu1hd4XXuf5o3+LuSBsaULQH7DiNbsqPd1chVpQGQ==",
-      "license": "Apache-2.0",
-      "peer": true,
-      "engines": {
-        "node": ">=10.7.0"
-      },
-      "peerDependencies": {
-        "axios": "*"
-      }
-    },
     "node_modules/reusify": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
@@ -12327,16 +11755,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/string_decoder": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
-      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "safe-buffer": "~5.2.0"
-      }
-    },
     "node_modules/string-width": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
@@ -12531,24 +11949,6 @@
       ],
       "license": "MIT"
     },
-    "node_modules/strtok3": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/strtok3/-/strtok3-6.3.0.tgz",
-      "integrity": "sha512-fZtbhtvI9I48xDSywd/somNqgUHl2L2cstmXCCif0itOf96jeW18MBSyrLuNicYQVkvpOxkZtkzujiTJ9LW5Jw==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@tokenizer/token": "^0.3.0",
-        "peek-readable": "^4.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/Borewit"
-      }
-    },
     "node_modules/style-to-js": {
       "version": "1.1.17",
       "resolved": "https://registry.npmjs.org/style-to-js/-/style-to-js-1.1.17.tgz",
@@ -12629,6 +12029,7 @@
       "version": "4.1.11",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.11.tgz",
       "integrity": "sha512-2E9TBm6MDD/xKYe+dvJZAmg3yxIEDNRc0jwlNyDg/4Fil2QcSLjFKGVff0lAf1jjeaArlG/M75Ey/EYr/OJtBA==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/tapable": {
@@ -12717,40 +12118,6 @@
         "node": ">=8.0"
       }
     },
-    "node_modules/token-types": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/token-types/-/token-types-4.2.1.tgz",
-      "integrity": "sha512-6udB24Q737UD/SDsKAHI9FCRP7Bqc9D/MQUV02ORQg5iskjtLJlZJNdN4kKtcdtwCeWIwIHDGaUsTsCCAa8sFQ==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@tokenizer/token": "^0.3.0",
-        "ieee754": "^1.2.1"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/Borewit"
-      }
-    },
-    "node_modules/tough-cookie": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.4.tgz",
-      "integrity": "sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==",
-      "license": "BSD-3-Clause",
-      "peer": true,
-      "dependencies": {
-        "psl": "^1.1.33",
-        "punycode": "^2.1.1",
-        "universalify": "^0.2.0",
-        "url-parse": "^1.5.3"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/tr46": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
@@ -12920,7 +12287,7 @@
       "version": "5.9.2",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.2.tgz",
       "integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==",
-      "devOptional": true,
+      "dev": true,
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
@@ -13056,16 +12423,6 @@
         "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/universalify": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
-      "integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==",
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": ">= 4.0.0"
-      }
-    },
     "node_modules/unrs-resolver": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/unrs-resolver/-/unrs-resolver-1.11.1.tgz",
@@ -13111,17 +12468,6 @@
         "punycode": "^2.1.0"
       }
     },
-    "node_modules/url-parse": {
-      "version": "1.5.10",
-      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
-      "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "querystringify": "^2.1.1",
-        "requires-port": "^1.0.0"
-      }
-    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -13234,16 +12580,6 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/web-streams-polyfill": {
-      "version": "4.0.0-beta.3",
-      "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-4.0.0-beta.3.tgz",
-      "integrity": "sha512-QW95TCTaHmsYfHDybGMwO5IJIM93I/6vTRk+daHTWFPhwh+C8Cg7j7XyKrwrj8Ib6vYXe0ocYNrmzY4xAAN6ug==",
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": ">= 14"
-      }
-    },
     "node_modules/webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
@@ -13398,28 +12734,6 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
-    "node_modules/ws": {
-      "version": "8.18.3",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
-      "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": ">=10.0.0"
-      },
-      "peerDependencies": {
-        "bufferutil": "^4.0.1",
-        "utf-8-validate": ">=5.0.2"
-      },
-      "peerDependenciesMeta": {
-        "bufferutil": {
-          "optional": true
-        },
-        "utf-8-validate": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
diff --git a/src/app/admin/login/page.tsx b/src/app/admin/login/page.tsx
index f51e166..ab17fb4 100644
--- a/src/app/admin/login/page.tsx
+++ b/src/app/admin/login/page.tsx
@@ -1,12 +1,12 @@
 "use client";
 
-import React, { useState, useEffect } from 'react';
-import Link from 'next/link';
-import { useRouter } from 'next/navigation';
-import { ThemeToggle } from '@/components/ThemeToggle';
-import { useAdminAuth } from '@/lib/auth/AdminAuthContext';
-import * as LucideIcons from 'lucide-react';
-import { LotusIcon } from '@/components/Icons/LotusIcon';
+import React, { useState, useEffect } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { ThemeToggle } from "@/components/ThemeToggle";
+import { useAdminAuth } from "@/lib/auth/AdminAuthContext";
+import * as LucideIcons from "lucide-react";
+import { LotusIcon } from "@/components/Icons/LotusIcon";
 
 // Sri Lankan Background Component - Same as Agent Login
 const AdminBackground = () => {
@@ -14,26 +14,41 @@ const AdminBackground = () => {
     <div className="fixed inset-0 pointer-events-none z-0 overflow-hidden">
       {/* Main background image */}
       <div className="absolute inset-0 bg-gradient-to-br from-background via-background to-background/95">
-        <div 
+        <div
           className="absolute inset-0 opacity-75 dark:opacity-20 bg-center bg-no-repeat bg-cover transition-opacity duration-1000"
           style={{
             backgroundImage: 'url("/Admin.png")',
-            backgroundPosition: 'center 20%',
-            filter: 'saturate(1.2) brightness(1.1)',
+            backgroundPosition: "center 20%",
+            filter: "saturate(1.2) brightness(1.1)",
           }}
         ></div>
         {/* Overlay gradients for better text readability */}
         <div className="absolute inset-0 bg-gradient-to-b from-background/20 via-transparent to-background/40 dark:from-background/40 dark:via-transparent dark:to-background/60"></div>
       </div>
-      
+
       {/* Enhanced admin-inspired accent patterns */}
       <div className="absolute top-0 left-0 w-full h-full">
-        <div className="absolute top-1/4 right-1/4 w-64 h-64 bg-[#8D153A]/8 dark:bg-[#8D153A]/4 rounded-full blur-3xl animate-pulse" style={{animationDuration: '8s'}}></div>
-        <div className="absolute bottom-1/4 left-1/4 w-80 h-80 bg-[#FF5722]/8 dark:bg-[#FF5722]/4 rounded-full blur-3xl animate-pulse" style={{animationDuration: '12s', animationDelay: '4s'}}></div>
-        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-[#FFC72C]/6 dark:bg-[#FFC72C]/3 rounded-full blur-3xl animate-pulse" style={{animationDuration: '10s', animationDelay: '2s'}}></div>
+        <div
+          className="absolute top-1/4 right-1/4 w-64 h-64 bg-[#8D153A]/8 dark:bg-[#8D153A]/4 rounded-full blur-3xl animate-pulse"
+          style={{ animationDuration: "8s" }}
+        ></div>
+        <div
+          className="absolute bottom-1/4 left-1/4 w-80 h-80 bg-[#FF5722]/8 dark:bg-[#FF5722]/4 rounded-full blur-3xl animate-pulse"
+          style={{ animationDuration: "12s", animationDelay: "4s" }}
+        ></div>
+        <div
+          className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-[#FFC72C]/6 dark:bg-[#FFC72C]/3 rounded-full blur-3xl animate-pulse"
+          style={{ animationDuration: "10s", animationDelay: "2s" }}
+        ></div>
         {/* Additional subtle accents */}
-        <div className="absolute top-3/4 right-1/3 w-48 h-48 bg-[#008060]/6 dark:bg-[#008060]/3 rounded-full blur-2xl animate-pulse" style={{animationDuration: '14s', animationDelay: '1s'}}></div>
-        <div className="absolute top-1/6 left-1/5 w-56 h-56 bg-[#8D153A]/5 dark:bg-[#8D153A]/2 rounded-full blur-3xl animate-pulse" style={{animationDuration: '16s', animationDelay: '6s'}}></div>
+        <div
+          className="absolute top-3/4 right-1/3 w-48 h-48 bg-[#008060]/6 dark:bg-[#008060]/3 rounded-full blur-2xl animate-pulse"
+          style={{ animationDuration: "14s", animationDelay: "1s" }}
+        ></div>
+        <div
+          className="absolute top-1/6 left-1/5 w-56 h-56 bg-[#8D153A]/5 dark:bg-[#8D153A]/2 rounded-full blur-3xl animate-pulse"
+          style={{ animationDuration: "16s", animationDelay: "6s" }}
+        ></div>
       </div>
     </div>
   );
@@ -42,20 +57,22 @@ const AdminBackground = () => {
 // --- ADMIN LOGIN PAGE COMPONENT ---
 export default function AdminLogin() {
   const [formData, setFormData] = useState({
-    email: '',
-    password: ''
+    email: "",
+    password: "",
   });
   const [showPassword, setShowPassword] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
-  const [errors, setErrors] = useState<{email?: string; password?: string}>({});
-  
+  const [errors, setErrors] = useState<{ email?: string; password?: string }>(
+    {}
+  );
+
   const router = useRouter();
   const { login, isAuthenticated, admin } = useAdminAuth();
 
   // Redirect if already authenticated
   useEffect(() => {
     if (isAuthenticated && admin) {
-      router.push('/admin/dashboard');
+      router.push("/admin/dashboard");
     }
   }, [isAuthenticated, admin, router]);
 
@@ -65,18 +82,18 @@ export default function AdminLogin() {
     setErrors({});
 
     // Basic validation
-    const newErrors: {email?: string; password?: string} = {};
-    
+    const newErrors: { email?: string; password?: string } = {};
+
     if (!formData.email.trim()) {
-      newErrors.email = 'Email is required';
+      newErrors.email = "Email is required";
     } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
-      newErrors.email = 'Invalid email format';
+      newErrors.email = "Invalid email format";
     }
-    
+
     if (!formData.password) {
-      newErrors.password = 'Password is required';
+      newErrors.password = "Password is required";
     } else if (formData.password.length < 6) {
-      newErrors.password = 'Password must be at least 6 characters';
+      newErrors.password = "Password must be at least 6 characters";
     }
 
     if (Object.keys(newErrors).length > 0) {
@@ -88,18 +105,19 @@ export default function AdminLogin() {
     // Call admin login
     try {
       const result = await login(formData.email, formData.password);
-      
+
       if (result.success) {
-        router.push('/admin/dashboard');
+        router.push("/admin/dashboard");
       } else {
-        setErrors({ 
-          password: result.message || 'Login failed. Please check your credentials.' 
+        setErrors({
+          password:
+            result.message || "Login failed. Please check your credentials.",
         });
       }
     } catch (error) {
-      console.error('Login error:', error);
-      setErrors({ 
-        password: 'Login failed. Please try again.' 
+      console.error("Login error:", error);
+      setErrors({
+        password: "Login failed. Please try again.",
       });
     } finally {
       setIsLoading(false);
@@ -108,16 +126,16 @@ export default function AdminLogin() {
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;
-    setFormData(prev => ({
+    setFormData((prev) => ({
       ...prev,
-      [name]: value
+      [name]: value,
     }));
-    
+
     // Clear errors when user starts typing
     if (errors[name as keyof typeof errors]) {
-      setErrors(prev => ({
+      setErrors((prev) => ({
         ...prev,
-        [name]: undefined
+        [name]: undefined,
       }));
     }
   };
@@ -135,19 +153,23 @@ export default function AdminLogin() {
               <LotusIcon className="w-11 h-11 absolute transition-transform duration-300 group-hover:rotate-12" />
             </div>
             <div className="flex flex-col">
-              <span className="text-xl md:text-2xl font-bold bg-gradient-to-r from-[#8D153A] to-[#FF5722] bg-clip-text text-transparent leading-none">GovLink</span>
-              <span className="text-xs text-muted-foreground/70 font-medium leading-none">Admin Portal</span>
+              <span className="text-xl md:text-2xl font-bold bg-gradient-to-r from-[#8D153A] to-[#FF5722] bg-clip-text text-transparent leading-none">
+                GovLink
+              </span>
+              <span className="text-xs text-muted-foreground/70 font-medium leading-none">
+                Admin Portal
+              </span>
             </div>
           </Link>
 
           <div className="flex items-center gap-3 sm:gap-4">
-            <Link 
-              href="/" 
+            <Link
+              href="/"
               className="text-sm sm:text-base text-muted-foreground hover:text-foreground transition-colors duration-300 hover:scale-105 font-medium"
             >
               ← Back to Home
             </Link>
-            
+
             <div className="w-px h-6 bg-border/50"></div>
             <ThemeToggle />
           </div>
@@ -161,21 +183,28 @@ export default function AdminLogin() {
           <div className="text-center mb-8 sm:mb-10 animate-fade-in-up">
             <div className="inline-flex items-center gap-2 bg-card/90 dark:bg-card/95 backdrop-blur-md px-4 py-2 rounded-full border border-border/50 mb-4 sm:mb-6 modern-card">
               <div className="w-2 h-2 bg-gradient-to-r from-[#8D153A] to-[#FF5722] rounded-full animate-pulse"></div>
-              <span className="text-xs sm:text-sm font-medium text-foreground">Government Access</span>
+              <span className="text-xs sm:text-sm font-medium text-foreground">
+                Government Access
+              </span>
             </div>
-            
+
             <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold mb-3 sm:mb-4 leading-tight">
-              <span className="text-foreground">Admin</span>{' '}
-              <span className="bg-gradient-to-r from-[#8D153A] to-[#FF5722] bg-clip-text text-transparent">Portal</span>
+              <span className="text-foreground">Admin</span>{" "}
+              <span className="bg-gradient-to-r from-[#8D153A] to-[#FF5722] bg-clip-text text-transparent">
+                Portal
+              </span>
             </h2>
-            
+
             <p className="text-sm sm:text-base md:text-lg text-muted-foreground leading-relaxed">
               Secure access for authorized government administrators
             </p>
           </div>
 
           {/* Form Container - Same as Agent Login cards */}
-          <div className="bg-card/90 dark:bg-card/95 backdrop-blur-md rounded-2xl border border-border/50 hover:border-[#8D153A]/70 hover:shadow-2xl transition-all duration-500 animate-fade-in-up modern-card p-6 sm:p-8 shadow-glow" style={{animationDelay: '0.2s'}}>
+          <div
+            className="bg-card/90 dark:bg-card/95 backdrop-blur-md rounded-2xl border border-border/50 hover:border-[#8D153A]/70 hover:shadow-2xl transition-all duration-500 animate-fade-in-up modern-card p-6 sm:p-8 shadow-glow"
+            style={{ animationDelay: "0.2s" }}
+          >
             {/* Security Badge */}
             <div className="flex items-center justify-center gap-2 mb-6 p-3 bg-gradient-to-r from-[#8D153A]/10 to-[#FF5722]/10 border border-[#8D153A]/20 rounded-xl">
               <LucideIcons.Shield className="text-[#8D153A] w-5 h-5" />
@@ -184,100 +213,109 @@ export default function AdminLogin() {
               </span>
             </div>
 
-          {/* Login Form */}
-          <form onSubmit={handleSubmit} className="space-y-5">
-            {/* Email Field */}
-            <div>
-              <label htmlFor="email" className="block text-sm font-medium mb-2">
-                Email Address
-              </label>
-              <div className="relative">
-                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none z-10">
-                  <LucideIcons.Mail className="h-5 w-5 text-muted-foreground/80 hover:text-[#8D153A] transition-colors" />
+            {/* Login Form */}
+            <form onSubmit={handleSubmit} className="space-y-5">
+              {/* Email Field */}
+              <div>
+                <label
+                  htmlFor="email"
+                  className="block text-sm font-medium mb-2"
+                >
+                  Email Address
+                </label>
+                <div className="relative">
+                  <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none z-10">
+                    <LucideIcons.Mail className="h-5 w-5 text-muted-foreground/80 hover:text-[#8D153A] transition-colors" />
+                  </div>
+                  <input
+                    id="email"
+                    name="email"
+                    type="email"
+                    value={formData.email}
+                    onChange={handleInputChange}
+                    className={`w-full pl-10 pr-4 py-3 bg-card/60 dark:bg-card/40 backdrop-blur-sm border rounded-xl focus:ring-2 focus:ring-[#8D153A]/20 focus:border-[#8D153A]/50 transition-all duration-300 modern-card ${
+                      errors.email ? "border-destructive" : "border-border/50"
+                    }`}
+                    placeholder="Enter your email address"
+                    disabled={isLoading}
+                  />
                 </div>
-                <input
-                  id="email"
-                  name="email"
-                  type="email"
-                  value={formData.email}
-                  onChange={handleInputChange}
-                  className={`w-full pl-10 pr-4 py-3 bg-card/60 dark:bg-card/40 backdrop-blur-sm border rounded-xl focus:ring-2 focus:ring-[#8D153A]/20 focus:border-[#8D153A]/50 transition-all duration-300 modern-card ${
-                    errors.email ? 'border-destructive' : 'border-border/50'
-                  }`}
-                  placeholder="Enter your email address"
-                  disabled={isLoading}
-                />
+                {errors.email && (
+                  <p className="mt-2 text-sm text-destructive">
+                    {errors.email}
+                  </p>
+                )}
               </div>
-              {errors.email && (
-                <p className="mt-2 text-sm text-destructive">
-                  {errors.email}
-                </p>
-              )}
-            </div>
 
-            {/* Password Field */}
-            <div>
-              <label htmlFor="password" className="block text-sm font-medium mb-2">
-                Password
-              </label>
-              <div className="relative">
-                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none z-10">
-                  <LucideIcons.Lock className="h-5 w-5 text-muted-foreground/80 hover:text-[#8D153A] transition-colors" />
+              {/* Password Field */}
+              <div>
+                <label
+                  htmlFor="password"
+                  className="block text-sm font-medium mb-2"
+                >
+                  Password
+                </label>
+                <div className="relative">
+                  <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none z-10">
+                    <LucideIcons.Lock className="h-5 w-5 text-muted-foreground/80 hover:text-[#8D153A] transition-colors" />
+                  </div>
+                  <input
+                    id="password"
+                    name="password"
+                    type={showPassword ? "text" : "password"}
+                    value={formData.password}
+                    onChange={handleInputChange}
+                    className={`w-full pl-10 pr-12 py-3 bg-card/60 dark:bg-card/40 backdrop-blur-sm border rounded-xl focus:ring-2 focus:ring-[#8D153A]/20 focus:border-[#8D153A]/50 transition-all duration-300 modern-card ${
+                      errors.password
+                        ? "border-destructive"
+                        : "border-border/50"
+                    }`}
+                    placeholder="Enter your password"
+                    disabled={isLoading}
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowPassword(!showPassword)}
+                    className="absolute inset-y-0 right-0 pr-3 flex items-center hover:text-[#8D153A] transition-colors duration-300 z-10"
+                    disabled={isLoading}
+                  >
+                    {showPassword ? (
+                      <LucideIcons.EyeOff className="h-5 w-5 text-muted-foreground/80 hover:text-[#8D153A] transition-colors" />
+                    ) : (
+                      <LucideIcons.Eye className="h-5 w-5 text-muted-foreground/80 hover:text-[#8D153A] transition-colors" />
+                    )}
+                  </button>
                 </div>
-                <input
-                  id="password"
-                  name="password"
-                  type={showPassword ? 'text' : 'password'}
-                  value={formData.password}
-                  onChange={handleInputChange}
-                  className={`w-full pl-10 pr-12 py-3 bg-card/60 dark:bg-card/40 backdrop-blur-sm border rounded-xl focus:ring-2 focus:ring-[#8D153A]/20 focus:border-[#8D153A]/50 transition-all duration-300 modern-card ${
-                    errors.password ? 'border-destructive' : 'border-border/50'
-                  }`}
-                  placeholder="Enter your password"
-                  disabled={isLoading}
-                />
+                {errors.password && (
+                  <p className="mt-2 text-sm text-destructive">
+                    {errors.password}
+                  </p>
+                )}
+              </div>
+
+              {/* Login Button */}
+              <div>
                 <button
-                  type="button"
-                  onClick={() => setShowPassword(!showPassword)}
-                  className="absolute inset-y-0 right-0 pr-3 flex items-center hover:text-[#8D153A] transition-colors duration-300 z-10"
+                  type="submit"
                   disabled={isLoading}
+                  className="w-full bg-gradient-to-r from-[#8D153A] via-[#FF5722] to-[#FFC72C] hover:from-[#FF5722] hover:via-[#8D153A] hover:to-[#FFC72C] text-white font-semibold py-4 px-6 rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 hover:scale-[1.02] disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100 border-2 border-[#8D153A]/20 hover:border-[#8D153A]/40"
+                  style={{
+                    boxShadow:
+                      "0 4px 14px 0 rgba(141, 21, 58, 0.3), 0 8px 32px rgba(255, 87, 34, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1)",
+                    textShadow: "0 1px 2px rgba(0, 0, 0, 0.3)",
+                  }}
                 >
-                  {showPassword ? (
-                    <LucideIcons.EyeOff className="h-5 w-5 text-muted-foreground/80 hover:text-[#8D153A] transition-colors" />
+                  {isLoading ? (
+                    <div className="flex items-center justify-center gap-2">
+                      <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
+                      Signing In...
+                    </div>
                   ) : (
-                    <LucideIcons.Eye className="h-5 w-5 text-muted-foreground/80 hover:text-[#8D153A] transition-colors" />
+                    "Sign In to Admin Portal"
                   )}
                 </button>
               </div>
-              {errors.password && (
-                <p className="mt-2 text-sm text-destructive">
-                  {errors.password}
-                </p>
-              )}
-            </div>
-
-            {/* Login Button */}
-            <div>
-              <button
-                type="submit"
-                disabled={isLoading}
-                className="w-full bg-gradient-to-r from-[#8D153A] via-[#FF5722] to-[#FFC72C] hover:from-[#FF5722] hover:via-[#8D153A] hover:to-[#FFC72C] text-white font-semibold py-4 px-6 rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 hover:scale-[1.02] disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100 border-2 border-[#8D153A]/20 hover:border-[#8D153A]/40"
-                style={{
-                  boxShadow: '0 4px 14px 0 rgba(141, 21, 58, 0.3), 0 8px 32px rgba(255, 87, 34, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1)',
-                  textShadow: '0 1px 2px rgba(0, 0, 0, 0.3)'
-                }}
-              >
-                {isLoading ? (
-                  <div className="flex items-center justify-center gap-2">
-                    <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
-                    Signing In...
-                  </div>
-                ) : (
-                  'Sign In to Admin Portal'
-                )}
-              </button>
-            </div>
-          </form>
+            </form>
 
             {/* Footer */}
             <div className="mt-6 text-center">
@@ -290,7 +328,8 @@ export default function AdminLogin() {
           {/* Additional Security Notice - Outside the card */}
           <div className="mt-6 text-center">
             <p className="text-xs text-muted-foreground bg-card/50 backdrop-blur-sm px-4 py-2 rounded-xl border border-border/30">
-              This is a secure government portal. All activities are monitored and logged.
+              This is a secure government portal. All activities are monitored
+              and logged.
             </p>
           </div>
         </div>
@@ -306,9 +345,11 @@ export default function AdminLogin() {
               </p>
             </div>
             <div className="flex items-center gap-4">
-              <span className="text-xs text-muted-foreground">Need technical assistance?</span>
-              <Link 
-                href="/contact" 
+              <span className="text-xs text-muted-foreground">
+                Need technical assistance?
+              </span>
+              <Link
+                href="/contact"
                 className="text-xs text-[#8D153A] hover:text-[#8D153A]/80 transition-colors font-medium"
               >
                 Contact IT Support
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 101025c..38e783c 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,14 +1,23 @@
 // app/page.tsx
 "use client";
-import React, { useState, useEffect } from 'react';
-import Image from 'next/image';
-import { ArrowRight, FileText, Calendar, Info, Check, Phone, Mail, MapPin } from 'lucide-react';
-import { Header } from '@/components/Header';
-import { useTranslation } from '@/lib/i18n/hooks/useTranslation';
-import { LotusIcon } from '@/components/Icons/LotusIcon';
+import React, { useState, useEffect } from "react";
+import Image from "next/image";
+import {
+  ArrowRight,
+  FileText,
+  Calendar,
+  Info,
+  Check,
+  Phone,
+  Mail,
+  MapPin,
+} from "lucide-react";
+import { Header } from "@/components/Header";
+import { useTranslation } from "@/lib/i18n/hooks/useTranslation";
+import { LotusIcon } from "@/components/Icons/LotusIcon";
 
 // Types for translations (legacy compatibility)
-type Language = 'en' | 'si' | 'ta';
+type Language = "en" | "si" | "ta";
 
 interface HomeTranslations {
   // Hero Section
@@ -23,7 +32,7 @@ interface HomeTranslations {
     available: string;
     endorsed: string;
   };
-  
+
   // Features Section
   featuresTitle1: string;
   featuresTitle2: string;
@@ -45,7 +54,7 @@ interface HomeTranslations {
       benefits: string[];
     };
   };
-  
+
   // About Section
   aboutTitle1: string;
   aboutTitle2: string;
@@ -80,7 +89,7 @@ interface HomeTranslations {
     title: string;
     description: string;
   };
-  
+
   // Contact Section
   contactTitle1: string;
   contactTitle2: string;
@@ -123,7 +132,7 @@ interface HomeTranslations {
       };
     };
   };
-  
+
   // Footer
   footer: {
     description: string;
@@ -152,64 +161,90 @@ const translations: Record<Language, HomeTranslations> = {
     // Hero Section
     heroTitle1: "Simplifying Government",
     heroTitle2: "for Every Sri Lankan",
-    heroSubtitle: "Ask questions, find services, and access government information instantly.",
+    heroSubtitle:
+      "Ask questions, find services, and access government information instantly.",
     heroDescription: "Your direct link to public services in Sri Lanka.",
     searchPlaceholders: [
       "How do I renew my passport?",
       "Where can I register my business?",
       "How to apply for a driving license?",
-      "What documents do I need for marriage registration?"
+      "What documents do I need for marriage registration?",
+    ],
+    searchSuggestions: [
+      "🛂 Passport Renewal",
+      "🏢 Business Registration",
+      "💍 Marriage Certificate",
+      "🚗 Driving License",
     ],
-    searchSuggestions: ["🛂 Passport Renewal", "🏢 Business Registration", "💍 Marriage Certificate", "🚗 Driving License"],
     trustIndicators: {
       trusted: "Trusted by 50K+ Citizens",
       available: "24/7 Available",
-      endorsed: "Government Endorsed"
+      endorsed: "Government Endorsed",
     },
-    
+
     // Features Section
     featuresTitle1: "Everything You Need,",
     featuresTitle2: "All in One Place",
-    featuresDescription: "GovLink is designed to make your interaction with government services seamless and efficient.",
+    featuresDescription:
+      "GovLink is designed to make your interaction with government services seamless and efficient.",
     features: {
       documents: {
         title: "Access Forms & Documents",
-        description: "Instantly find and download official government forms for passports, licenses, and more.",
-        benefits: ["📥 Instant Downloads", "🕒 24/7 Availability", "📁 Multiple Formats"]
+        description:
+          "Instantly find and download official government forms for passports, licenses, and more.",
+        benefits: [
+          "📥 Instant Downloads",
+          "🕒 24/7 Availability",
+          "📁 Multiple Formats",
+        ],
       },
       information: {
         title: "Get Instant Information",
-        description: "Ask any question about public services and get clear, step-by-step guidance.",
-        benefits: ["⚡ Real-time Answers", "📋 Step-by-step Guides", "🌐 Multi-language Support"]
+        description:
+          "Ask any question about public services and get clear, step-by-step guidance.",
+        benefits: [
+          "⚡ Real-time Answers",
+          "📋 Step-by-step Guides",
+          "🌐 Multi-language Support",
+        ],
       },
       appointments: {
         title: "Schedule Appointments",
-        description: "Find available slots and book appointments with government departments online.",
-        benefits: ["📅 Online Booking", "📱 SMS Reminders", "🔄 Easy Rescheduling"]
-      }
+        description:
+          "Find available slots and book appointments with government departments online.",
+        benefits: [
+          "📅 Online Booking",
+          "📱 SMS Reminders",
+          "🔄 Easy Rescheduling",
+        ],
+      },
     },
-    
+
     // About Section
     aboutTitle1: "Bridging the Gap Between",
     aboutTitle2: "Citizens & Government",
-    aboutDescription: "Making government services accessible, transparent, and efficient for every Sri Lankan citizen. Our platform revolutionizes how citizens interact with government departments, eliminating bureaucratic hurdles and streamlining essential processes.",
+    aboutDescription:
+      "Making government services accessible, transparent, and efficient for every Sri Lankan citizen. Our platform revolutionizes how citizens interact with government departments, eliminating bureaucratic hurdles and streamlining essential processes.",
     aboutFeatures: {
       simplified: {
         title: "Simplified Access",
-        description: "One unified platform for all government services. No more visiting multiple departments or websites. Everything you need is accessible from a single dashboard."
+        description:
+          "One unified platform for all government services. No more visiting multiple departments or websites. Everything you need is accessible from a single dashboard.",
       },
       availability: {
         title: "24/7 Availability",
-        description: "Access government services anytime, anywhere. Our digital platform never closes, ensuring you can complete tasks at your convenience, even outside office hours."
+        description:
+          "Access government services anytime, anywhere. Our digital platform never closes, ensuring you can complete tasks at your convenience, even outside office hours.",
       },
       transparent: {
         title: "Transparent Process",
-        description: "Clear step-by-step guidance with real-time tracking. Know exactly what documents you need, how long processes take, and track your application status every step of the way."
-      }
+        description:
+          "Clear step-by-step guidance with real-time tracking. Know exactly what documents you need, how long processes take, and track your application status every step of the way.",
+      },
     },
     aboutButtons: {
       learnMore: "Learn More About Us",
-      mission: "Our Mission & Vision"
+      mission: "Our Mission & Vision",
     },
     aboutStats: {
       citizens: "Citizens Served",
@@ -217,140 +252,174 @@ const translations: Record<Language, HomeTranslations> = {
       departments: "Departments",
       uptime: "Uptime",
       users: "Users",
-      support: "Support"
+      support: "Support",
     },
     aboutTrust: {
       title: "Trusted by Government",
-      description: "Officially endorsed by the Ministry of Public Administration and recognized as the primary digital gateway for citizen services in Sri Lanka."
+      description:
+        "Officially endorsed by the Ministry of Public Administration and recognized as the primary digital gateway for citizen services in Sri Lanka.",
     },
-    
+
     // Contact Section
     contactTitle1: "Need Help?",
     contactTitle2: "We're Here for You",
-    contactDescription: "Have questions about government services? Our support team is ready to assist you.",
+    contactDescription:
+      "Have questions about government services? Our support team is ready to assist you.",
     contactMethods: {
       phone: {
         title: "📞 Call Us",
         number: "+94 11 234 5678",
-        hours: "Mon - Fri, 8AM - 6PM"
+        hours: "Mon - Fri, 8AM - 6PM",
       },
       email: {
         title: "📧 Email Us",
         address: "support@govlink.lk",
-        availability: "24/7 Support"
+        availability: "24/7 Support",
       },
       location: {
         title: "📍 Visit Us",
         address: "Colombo, Sri Lanka",
-        description: "Government Services Hub"
-      }
+        description: "Government Services Hub",
+      },
     },
     faq: {
       title: "Frequently Asked Questions",
       questions: {
         forms: {
           question: "How do I access government forms?",
-          answer: "Simply search for the form you need or browse our services section. All forms are available for instant download."
+          answer:
+            "Simply search for the form you need or browse our services section. All forms are available for instant download.",
         },
         official: {
           question: "Is GovLink an official platform?",
-          answer: "Yes, GovLink is officially endorsed by the Government of Sri Lanka for digital service delivery."
+          answer:
+            "Yes, GovLink is officially endorsed by the Government of Sri Lanka for digital service delivery.",
         },
         tracking: {
           question: "Can I track my application status?",
-          answer: "Absolutely! Use your application reference number to track the progress of your submissions."
+          answer:
+            "Absolutely! Use your application reference number to track the progress of your submissions.",
         },
         support: {
           question: "What if I need technical support?",
-          answer: "Our technical support team is available 24/7 via phone, email, or live chat to assist you."
-        }
-      }
+          answer:
+            "Our technical support team is available 24/7 via phone, email, or live chat to assist you.",
+        },
+      },
     },
-    
+
     // Footer
     footer: {
-      description: "🇱🇰 Simplifying government services for every Sri Lankan. Access information, download forms, and complete procedures with ease through our modern digital platform.",
+      description:
+        "🇱🇰 Simplifying government services for every Sri Lankan. Access information, download forms, and complete procedures with ease through our modern digital platform.",
       quickLinks: {
         services: "🛡️ Services",
         about: "🏛️ About Us",
         contact: "📞 Contact",
-        help: "❓ Help Center"
+        help: "❓ Help Center",
       },
       legal: {
         privacy: "🔒 Privacy Policy",
         terms: "📋 Terms of Service",
         cookies: "🍪 Cookie Policy",
-        accessibility: "♿ Accessibility"
+        accessibility: "♿ Accessibility",
       },
       status: "All systems operational",
-      copyright: "GovLink Sri Lanka. An initiative to streamline public services.",
+      copyright:
+        "GovLink Sri Lanka. An initiative to streamline public services.",
       crafted: "Crafted with",
-      forSriLanka: "🇱🇰 Sri Lanka"
-    }
+      forSriLanka: "🇱🇰 Sri Lanka",
+    },
   },
-  
+
   si: {
     // Hero Section
     heroTitle1: "රජයේ සේවා සරල කිරීම",
     heroTitle2: "සෑම ශ්‍රී ලාංකිකයා වෙනුවෙන්",
-    heroSubtitle: "ප්‍රශ්න ඇසීම, සේවා සොයාගැනීම, සහ රජයේ තොරතුරු ක්ෂණිකව ලබාගැනීම.",
+    heroSubtitle:
+      "ප්‍රශ්න ඇසීම, සේවා සොයාගැනීම, සහ රජයේ තොරතුරු ක්ෂණිකව ලබාගැනීම.",
     heroDescription: "ශ්‍රී ලංකාවේ පොදු සේවා වෙත ඔබේ සෘජු සම්බන්ධතාවය.",
     searchPlaceholders: [
       "මගේ ගමන් බලපත්‍රය අලුත් කරන්නේ කොහොමද?",
       "මගේ ව්‍යාපාරය ලියාපදිංචි කරන්නේ කොහේද?",
       "රියදුරු බලපත්‍රයක් ලබාගන්නේ කොහොමද?",
-      "විවාහ ලියාපදිංචිය සඳහා මොනවා ලේඛන අවශ්‍යද?"
+      "විවාහ ලියාපදිංචිය සඳහා මොනවා ලේඛන අවශ්‍යද?",
+    ],
+    searchSuggestions: [
+      "🛂 ගමන් බලපත්‍ර අලුත් කිරීම",
+      "🏢 ව්‍යාපාර ලියාපදිංචිය",
+      "💍 විවාහ සහතිකය",
+      "🚗 රියදුරු බලපත්‍රය",
     ],
-    searchSuggestions: ["🛂 ගමන් බලපත්‍ර අලුත් කිරීම", "🏢 ව්‍යාපාර ලියාපදිංචිය", "💍 විවාහ සහතිකය", "🚗 රියදුරු බලපත්‍රය"],
     trustIndicators: {
       trusted: "50K+ පුරවැසියන්ගේ විශ්වාසය",
       available: "24/7 ලබාගත හැකි",
-      endorsed: "රජයේ අනුමැතිය"
+      endorsed: "රජයේ අනුමැතිය",
     },
-    
+
     // Features Section
     featuresTitle1: "ඔබට අවශ්‍ය සියල්ල,",
     featuresTitle2: "එක තැනකම",
-    featuresDescription: "GovLink නිර්මාණය කර ඇත්තේ රජයේ සේවා සමග ඔබේ අන්තර්ක්‍රියාව සුමට හා කාර්යක්ෂම කිරීමට ය.",
+    featuresDescription:
+      "GovLink නිර්මාණය කර ඇත්තේ රජයේ සේවා සමග ඔබේ අන්තර්ක්‍රියාව සුමට හා කාර්යක්ෂම කිරීමට ය.",
     features: {
       documents: {
         title: "ආකෘති පත්‍ර සහ ලේඛන වෙත ප්‍රවේශය",
-        description: "ගමන් බලපත්‍ර, බලපත්‍ර සහ තවත් බොහෝ දේ සඳහා නිල රජයේ ආකෘති පත්‍ර ක්ෂණිකව සොයා බාගන්න.",
-        benefits: ["📥 ක්ෂණික බාගත කිරීම්", "🕒 24/7 ලබාගත හැකි", "📁 විවිධ ආකෘති"]
+        description:
+          "ගමන් බලපත්‍ර, බලපත්‍ර සහ තවත් බොහෝ දේ සඳහා නිල රජයේ ආකෘති පත්‍ර ක්ෂණිකව සොයා බාගන්න.",
+        benefits: [
+          "📥 ක්ෂණික බාගත කිරීම්",
+          "🕒 24/7 ලබාගත හැකි",
+          "📁 විවිධ ආකෘති",
+        ],
       },
       information: {
         title: "ක්ෂණික තොරතුරු ලබාගන්න",
-        description: "පොදු සේවා ගැන ඕනෑම ප්‍රශ්නයක් අසා පැහැදිලි, පියවරින් පියවර මඟපෙන්වීම ලබාගන්න.",
-        benefits: ["⚡ තත්‍ය කාලීන පිළිතුරු", "📋 පියවරින් පියවර මාර්ගෝපදේශන", "🌐 බහුභාෂා සහාය"]
+        description:
+          "පොදු සේවා ගැන ඕනෑම ප්‍රශ්නයක් අසා පැහැදිලි, පියවරින් පියවර මඟපෙන්වීම ලබාගන්න.",
+        benefits: [
+          "⚡ තත්‍ය කාලීන පිළිතුරු",
+          "📋 පියවරින් පියවර මාර්ගෝපදේශන",
+          "🌐 බහුභාෂා සහාය",
+        ],
       },
       appointments: {
         title: "හමුවීම් කාලසටහන් කරන්න",
-        description: "රජයේ දෙපාර්තමේන්තු සමග අන්තර්ජාලය හරහා ලබාගත හැකි වේලාවන් සොයා හමුවීම් වෙන්කරවාගන්න.",
-        benefits: ["📅 අන්තර්ජාල වෙන්කිරීම්", "📱 SMS මතක්කරුවන්", "🔄 පහසු නැවත සකස් කිරීම"]
-      }
+        description:
+          "රජයේ දෙපාර්තමේන්තු සමග අන්තර්ජාලය හරහා ලබාගත හැකි වේලාවන් සොයා හමුවීම් වෙන්කරවාගන්න.",
+        benefits: [
+          "📅 අන්තර්ජාල වෙන්කිරීම්",
+          "📱 SMS මතක්කරුවන්",
+          "🔄 පහසු නැවත සකස් කිරීම",
+        ],
+      },
     },
-    
+
     // About Section
     aboutTitle1: "අතර පරතරය වසා දැමීම",
     aboutTitle2: "පුරවැසියන් සහ රජය",
-    aboutDescription: "සෑම ශ්‍රී ලාංකික පුරවැසියකු සඳහාම රජයේ සේවා ප්‍රවේශ විය හැකි, විනිවිද පෙනෙන සහ කාර්යක්ෂම කිරීම. අපගේ වේදිකාව පුරවැසියන් රජයේ දෙපාර්තමේන්තු සමග අන්තර්ක්‍රියා කරන ආකාරය විප්ලවීය වෙනසක් ඇති කරයි.",
+    aboutDescription:
+      "සෑම ශ්‍රී ලාංකික පුරවැසියකු සඳහාම රජයේ සේවා ප්‍රවේශ විය හැකි, විනිවිද පෙනෙන සහ කාර්යක්ෂම කිරීම. අපගේ වේදිකාව පුරවැසියන් රජයේ දෙපාර්තමේන්තු සමග අන්තර්ක්‍රියා කරන ආකාරය විප්ලවීය වෙනසක් ඇති කරයි.",
     aboutFeatures: {
       simplified: {
         title: "සරල කළ ප්‍රවේශය",
-        description: "සියළුම රජයේ සේවා සඳහා එක ඒකාබද්ධ වේදිකාවක්. තවදුරටත් බහුවිධ දෙපාර්තමේන්තු හෝ වෙබ් අඩවි වෙත යාමක් නැත. ඔබට අවශ්‍ය සියල්ල එකම උපකරණ පුවරුවකින් ප්‍රවේශ කළ හැකිය."
+        description:
+          "සියළුම රජයේ සේවා සඳහා එක ඒකාබද්ධ වේදිකාවක්. තවදුරටත් බහුවිධ දෙපාර්තමේන්තු හෝ වෙබ් අඩවි වෙත යාමක් නැත. ඔබට අවශ්‍ය සියල්ල එකම උපකරණ පුවරුවකින් ප්‍රවේශ කළ හැකිය.",
       },
       availability: {
         title: "24/7 ලබාගත හැකිබව",
-        description: "ඕනෑම වේලාවක, ඕනෑම තැනක රජයේ සේවා වෙත ප්‍රවේශ වන්න. අපගේ ඩිජිටල් වේදිකාව කිසි විටක වසා නොදමයි, කාර්යාල කාලයෙන් පිටත පවා ඔබට පහසුවෙන් කාර්යයන් සම්පූර්ණ කළ හැකිය."
+        description:
+          "ඕනෑම වේලාවක, ඕනෑම තැනක රජයේ සේවා වෙත ප්‍රවේශ වන්න. අපගේ ඩිජිටල් වේදිකාව කිසි විටක වසා නොදමයි, කාර්යාල කාලයෙන් පිටත පවා ඔබට පහසුවෙන් කාර්යයන් සම්පූර්ණ කළ හැකිය.",
       },
       transparent: {
         title: "විනිවිද පෙනෙන ක්‍රියාවලිය",
-        description: "තත්‍ය කාලීන ලුහුබැඳීම සමඟ පැහැදිලි පියවරින් පියවර මඟපෙන්වීම. ඔබට අවශ්‍ය ලේඛන මොනවාද, ක්‍රියාවලි කොපමණ කාලයක් ගතවේද, සහ ඔබේ අයදුම්පත්‍රයේ තත්ත්වය සෑම පියවරකදීම ලුහුබැඳීම."
-      }
+        description:
+          "තත්‍ය කාලීන ලුහුබැඳීම සමඟ පැහැදිලි පියවරින් පියවර මඟපෙන්වීම. ඔබට අවශ්‍ය ලේඛන මොනවාද, ක්‍රියාවලි කොපමණ කාලයක් ගතවේද, සහ ඔබේ අයදුම්පත්‍රයේ තත්ත්වය සෑම පියවරකදීම ලුහුබැඳීම.",
+      },
     },
     aboutButtons: {
       learnMore: "අප ගැන වැඩි දැනගන්න",
-      mission: "අපගේ මෙහෙයුම සහ දැක්ම"
+      mission: "අපගේ මෙහෙයුම සහ දැක්ම",
     },
     aboutStats: {
       citizens: "සේවාලත් පුරවැසියන්",
@@ -358,140 +427,173 @@ const translations: Record<Language, HomeTranslations> = {
       departments: "දෙපාර්තමේන්තු",
       uptime: "ක්‍රියාකාරිත්වය",
       users: "පරිශීලකයන්",
-      support: "සහාය"
+      support: "සහාය",
     },
     aboutTrust: {
       title: "රජයේ විශ්වාසය",
-      description: "මහජන පරිපාලන අමාත්‍යංශයේ නිල අනුමැතිය සහ ශ්‍රී ලංකාවේ පුරවැසි සේවා සඳහා මූලික ඩිජිටල් ගේට්වේ ලෙස පිළිගැනීම."
+      description:
+        "මහජන පරිපාලන අමාත්‍යංශයේ නිල අනුමැතිය සහ ශ්‍රී ලංකාවේ පුරවැසි සේවා සඳහා මූලික ඩිජිටල් ගේට්වේ ලෙස පිළිගැනීම.",
     },
-    
+
     // Contact Section
     contactTitle1: "උදව්වක් අවශ්‍යද?",
     contactTitle2: "අපි ඔබ වෙනුවෙන් මෙහි සිටිමු",
-    contactDescription: "රජයේ සේවා ගැන ප්‍රශ්න තිබේද? අපගේ සහාය කණ්ඩායම ඔබට සහාය වීමට සූදානම්.",
+    contactDescription:
+      "රජයේ සේවා ගැන ප්‍රශ්න තිබේද? අපගේ සහාය කණ්ඩායම ඔබට සහාය වීමට සූදානම්.",
     contactMethods: {
       phone: {
         title: "📞 අපට ඇමතුම් දෙන්න",
         number: "+94 11 234 5678",
-        hours: "සඳුදා - සිකුරාදා, උදෑසන 8 - සවස 6"
+        hours: "සඳුදා - සිකුරාදා, උදෑසන 8 - සවස 6",
       },
       email: {
         title: "📧 අපට ඊමේල් කරන්න",
         address: "support@govlink.lk",
-        availability: "24/7 සහාය"
+        availability: "24/7 සහාය",
       },
       location: {
         title: "📍 අප වෙත පැමිණෙන්න",
         address: "කොළඹ, ශ්‍රී ලංකාව",
-        description: "රජයේ සේවා මධ්‍යස්ථානය"
-      }
+        description: "රජයේ සේවා මධ්‍යස්ථානය",
+      },
     },
     faq: {
       title: "නිතර අසන ප්‍රශ්න",
       questions: {
         forms: {
           question: "රජයේ ආකෘති පත්‍ර වෙත ප්‍රවේශ වන්නේ කොහොමද?",
-          answer: "ඔබට අවශ්‍ය ආකෘතිය සඳහා සෙවීම හෝ අපගේ සේවා අංශය පිරික්සීම පමණි. සියළුම ආකෘති ක්ෂණික බාගත කිරීම සඳහා ලබාගත හැකිය."
+          answer:
+            "ඔබට අවශ්‍ය ආකෘතිය සඳහා සෙවීම හෝ අපගේ සේවා අංශය පිරික්සීම පමණි. සියළුම ආකෘති ක්ෂණික බාගත කිරීම සඳහා ලබාගත හැකිය.",
         },
         official: {
           question: "GovLink නිල වේදිකාවක්ද?",
-          answer: "ඔව්, GovLink ඩිජිටල් සේවා සැපයීම සඳහා ශ්‍රී ලංකා රජයේ නිල අනුමැතිය ලබා ඇත."
+          answer:
+            "ඔව්, GovLink ඩිජිටල් සේවා සැපයීම සඳහා ශ්‍රී ලංකා රජයේ නිල අනුමැතිය ලබා ඇත.",
         },
         tracking: {
           question: "මගේ අයදුම්පත්‍රයේ තත්ත්වය ලුහුබැඳීමට හැකිද?",
-          answer: "අනිවාර්යයෙන්! ඔබේ අයදුම් සිටුවම්වල ප්‍රගතිය ලුහුබැඳීම සඳහා ඔබේ අයදුම්පත්‍ර යොමු අංකය භාවිතා කරන්න."
+          answer:
+            "අනිවාර්යයෙන්! ඔබේ අයදුම් සිටුවම්වල ප්‍රගතිය ලුහුබැඳීම සඳහා ඔබේ අයදුම්පත්‍ර යොමු අංකය භාවිතා කරන්න.",
         },
         support: {
           question: "මට තාක්ෂණික සහාය අවශ්‍ය නම් කුමක් කළ යුතුද?",
-          answer: "අපගේ තාක්ෂණික සහාය කණ්ඩායම දුරකථනය, ඊමේල් හෝ සජීවි චැට් හරහා 24/7 ඔබට සහාය වීමට ලැබී ඇත."
-        }
-      }
+          answer:
+            "අපගේ තාක්ෂණික සහාය කණ්ඩායම දුරකථනය, ඊමේල් හෝ සජීවි චැට් හරහා 24/7 ඔබට සහාය වීමට ලැබී ඇත.",
+        },
+      },
     },
-    
+
     // Footer
     footer: {
-      description: "🇱🇰 සෑම ශ්‍රී ලාංකිකයකු සඳහාම රජයේ සේවා සරල කිරීම. අපගේ නවීන ඩිජිටල් වේදිකාව හරහා පහසුවෙන් තොරතුරු ප්‍රවේශ කිරීම, ආකෘති බාගත කිරීම සහ ක්‍රියාවලි සම්පූර්ණ කිරීම.",
+      description:
+        "🇱🇰 සෑම ශ්‍රී ලාංකිකයකු සඳහාම රජයේ සේවා සරල කිරීම. අපගේ නවීන ඩිජිටල් වේදිකාව හරහා පහසුවෙන් තොරතුරු ප්‍රවේශ කිරීම, ආකෘති බාගත කිරීම සහ ක්‍රියාවලි සම්පූර්ණ කිරීම.",
       quickLinks: {
         services: "🛡️ සේවා",
         about: "🏛️ අප ගැන",
         contact: "📞 සම්බන්ධවීම",
-        help: "❓ උදව් මධ්‍යස්ථානය"
+        help: "❓ උදව් මධ්‍යස්ථානය",
       },
       legal: {
         privacy: "🔒 පෞද්ගලිකත්ව ප්‍රතිපත්තිය",
         terms: "📋 සේවා කොන්දේසි",
         cookies: "🍪 කුකී ප්‍රතිපත්තිය",
-        accessibility: "♿ ප්‍රවේශ්‍යතාව"
+        accessibility: "♿ ප්‍රවේශ්‍යතාව",
       },
       status: "සියළුම පද්ධති ක්‍රියාත්මකයි",
       copyright: "GovLink ශ්‍රී ලංකාව. පොදු සේවා සරල කිරීමේ මුලපිරීමක්.",
       crafted: "සකස් කරන ලද්දේ",
-      forSriLanka: "🇱🇰 ශ්‍රී ලංකාව"
-    }
+      forSriLanka: "🇱🇰 ශ්‍රී ලංකාව",
+    },
   },
-  
+
   ta: {
     // Hero Section
     heroTitle1: "அரசாங்க சேவைகளை எளிமைப்படுத்துதல்",
     heroTitle2: "ஒவ்வோர் இலங்கையருக்கும்",
-    heroSubtitle: "கேள்விகளைக் கேளுங்கள், சேவைகளைக் கண்டறியுங்கள், மற்றும் அரசாங்க தகவல்களை உடனடியாகப் பெறுங்கள்.",
+    heroSubtitle:
+      "கேள்விகளைக் கேளுங்கள், சேவைகளைக் கண்டறியுங்கள், மற்றும் அரசாங்க தகவல்களை உடனடியாகப் பெறுங்கள்.",
     heroDescription: "இலங்கையில் பொதுச் சேவைகளுக்கான உங்கள் நேரடித் தொடர்பு.",
     searchPlaceholders: [
       "எனது கடவுச்சீட்டை எவ்வாறு புதுப்பிப்பது?",
       "எனது வணிகத்தை எங்கே பதிவு செய்வது?",
       "ஓட்டுநர் உரிமத்திற்கு எவ்வாறு விண்ணப்பிப்பது?",
-      "திருமணப் பதிவிற்கு என்ன ஆவணங்கள் தேவை?"
+      "திருமணப் பதிவிற்கு என்ன ஆவணங்கள் தேவை?",
+    ],
+    searchSuggestions: [
+      "🛂 கடவுச்சீட்டு புதுப்பித்தல்",
+      "🏢 வணிகப் பதிவு",
+      "💍 திருமணச் சான்றிதழ்",
+      "🚗 ஓட்டுநர் உரிமம்",
     ],
-    searchSuggestions: ["🛂 கடவுச்சீட்டு புதுப்பித்தல்", "🏢 வணிகப் பதிவு", "💍 திருமணச் சான்றிதழ்", "🚗 ஓட்டுநர் உரிமம்"],
     trustIndicators: {
       trusted: "50K+ குடிமக்களின் நம்பிக்கை",
       available: "24/7 சேவை",
-      endorsed: "அரசாங்கத்தால் அங்கீகரிக்கப்பட்டது"
+      endorsed: "அரசாங்கத்தால் அங்கீகரிக்கப்பட்டது",
     },
-    
+
     // Features Section
     featuresTitle1: "உங்களுக்குத் தேவையான அனைத்தும்,",
     featuresTitle2: "ஒரே இடத்தில்",
-    featuresDescription: "அரசாங்கச் சேவைகளுடனான உங்கள் தொடர்புகளை தடையற்றதாகவும் வினைத்திறனாகவும் மாற்ற GovLink வடிவமைக்கப்பட்டுள்ளது.",
+    featuresDescription:
+      "அரசாங்கச் சேவைகளுடனான உங்கள் தொடர்புகளை தடையற்றதாகவும் வினைத்திறனாகவும் மாற்ற GovLink வடிவமைக்கப்பட்டுள்ளது.",
     features: {
       documents: {
         title: "படிவங்கள் மற்றும் ஆவணங்களை அணுகவும்",
-        description: "கடவுச்சீட்டுக்கள், உரிமங்கள் மற்றும் பலவற்றிற்கான அதிகாரப்பூர்வ அரசாங்கப் படிவங்களை உடனடியாகக் கண்டறிந்து பதிவிறக்கம் செய்யுங்கள்.",
-        benefits: ["📥 உடனடிப் பதிவிறக்கங்கள்", "🕒 24/7 சேவை", "📁 பல வடிவங்கள்"]
+        description:
+          "கடவுச்சீட்டுக்கள், உரிமங்கள் மற்றும் பலவற்றிற்கான அதிகாரப்பூர்வ அரசாங்கப் படிவங்களை உடனடியாகக் கண்டறிந்து பதிவிறக்கம் செய்யுங்கள்.",
+        benefits: [
+          "📥 உடனடிப் பதிவிறக்கங்கள்",
+          "🕒 24/7 சேவை",
+          "📁 பல வடிவங்கள்",
+        ],
       },
       information: {
         title: "உடனடித் தகவல்களைப் பெறுங்கள்",
-        description: "பொதுச் சேவைகள் பற்றிய எந்தவொரு கேள்வியையும் கேட்டு, தெளிவான, படிப்படியான வழிகாட்டுதலைப் பெறுங்கள்.",
-        benefits: ["⚡ நிகழ்நேர பதில்கள்", "📋 படிப்படியான வழிகாட்டிகள்", "🌐 பல மொழி ஆதரவு"]
+        description:
+          "பொதுச் சேவைகள் பற்றிய எந்தவொரு கேள்வியையும் கேட்டு, தெளிவான, படிப்படியான வழிகாட்டுதலைப் பெறுங்கள்.",
+        benefits: [
+          "⚡ நிகழ்நேர பதில்கள்",
+          "📋 படிப்படியான வழிகாட்டிகள்",
+          "🌐 பல மொழி ஆதரவு",
+        ],
       },
       appointments: {
         title: "சந்திப்புகளை திட்டமிடுங்கள்",
-        description: "கிடைக்கக்கூடிய நேரங்களை கண்டறிந்து, அரசாங்கத் துறைகளுடன் இணையத்தில் சந்திப்புகளை முன்பதிவு செய்யுங்கள்.",
-        benefits: ["📅 இணைய முன்பதிவு", "📱 SMS நினைவூட்டல்கள்", "🔄 எளிய மறுதிட்டமிடல்"]
-      }
+        description:
+          "கிடைக்கக்கூடிய நேரங்களை கண்டறிந்து, அரசாங்கத் துறைகளுடன் இணையத்தில் சந்திப்புகளை முன்பதிவு செய்யுங்கள்.",
+        benefits: [
+          "📅 இணைய முன்பதிவு",
+          "📱 SMS நினைவூட்டல்கள்",
+          "🔄 எளிய மறுதிட்டமிடல்",
+        ],
+      },
     },
-    
+
     // About Section
     aboutTitle1: "இடைவெளியைக் குறைத்தல்",
     aboutTitle2: "குடிமக்கள் மற்றும் அரசாங்கத்திடையில்",
-    aboutDescription: "ஒவ்வொரு இலங்கைக் குடிமகனுக்கும் அரசாங்கச் சேவைகளை அணுகக்கூடியதாக, வெளிப்படையாகவும், வினைத்திறனாகவும் மாற்றுதல். எங்கள் தளம் குடிமக்கள் அரசாங்கத் துறைகளுடன் தொடர்புகொள்ளும் விதத்தில் புரட்சிகரமானது.",
+    aboutDescription:
+      "ஒவ்வொரு இலங்கைக் குடிமகனுக்கும் அரசாங்கச் சேவைகளை அணுகக்கூடியதாக, வெளிப்படையாகவும், வினைத்திறனாகவும் மாற்றுதல். எங்கள் தளம் குடிமக்கள் அரசாங்கத் துறைகளுடன் தொடர்புகொள்ளும் விதத்தில் புரட்சிகரமானது.",
     aboutFeatures: {
       simplified: {
         title: "எளிமைப்படுத்தப்பட்ட அணுகல்",
-        description: "அனைத்து அரசாங்கச் சேவைகளுக்கும் ஒரு ஒருங்கிணைந்த தளம். இனி பல துறைகள் அல்லது இணையதளங்களுக்குச் செல்ல வேண்டாம். உங்களுக்குத் தேவையான அனைத்தும் ஒரே தரவுப் பலகை மூலம் அணுகக்கூடியது."
+        description:
+          "அனைத்து அரசாங்கச் சேவைகளுக்கும் ஒரு ஒருங்கிணைந்த தளம். இனி பல துறைகள் அல்லது இணையதளங்களுக்குச் செல்ல வேண்டாம். உங்களுக்குத் தேவையான அனைத்தும் ஒரே தரவுப் பலகை மூலம் அணுகக்கூடியது.",
       },
       availability: {
         title: "24/7 சேவை",
-        description: "எந்த நேரத்திலும், எங்கிருந்தும் அரசாங்கச் சேவைகளை அணுகுங்கள். எங்கள் டிஜிட்டல் தளம் ஒருபோதும் மூடுவதில்லை, அலுவலக நேரங்களுக்கு வெளியேயும் உங்கள் வசதிக்கேற்ப பணிகளை முடிக்க முடியும்."
+        description:
+          "எந்த நேரத்திலும், எங்கிருந்தும் அரசாங்கச் சேவைகளை அணுகுங்கள். எங்கள் டிஜிட்டல் தளம் ஒருபோதும் மூடுவதில்லை, அலுவலக நேரங்களுக்கு வெளியேயும் உங்கள் வசதிக்கேற்ப பணிகளை முடிக்க முடியும்.",
       },
       transparent: {
         title: "வெளிப்படையான செயல்முறை",
-        description: "நிகழ்நேரக் கண்காணிப்புடன் தெளிவான படிப்படியான வழிகாட்டுதல். உங்களுக்குத் தேவையான ஆவணங்கள் என்னென்ன, செயல்முறைகள் எவ்வளவு நேரம் எடுக்கும், மற்றும் ஒவ்வொரு படியிலும் உங்கள் விண்ணப்ப நிலையைக் கண்காணிக்கவும்."
-      }
+        description:
+          "நிகழ்நேரக் கண்காணிப்புடன் தெளிவான படிப்படியான வழிகாட்டுதல். உங்களுக்குத் தேவையான ஆவணங்கள் என்னென்ன, செயல்முறைகள் எவ்வளவு நேரம் எடுக்கும், மற்றும் ஒவ்வொரு படியிலும் உங்கள் விண்ணப்ப நிலையைக் கண்காணிக்கவும்.",
+      },
     },
     aboutButtons: {
       learnMore: "எங்களைப் பற்றி மேலும் அறிக",
-      mission: "எங்கள் பணிக்கூற்று மற்றும் தொலைநோக்கு"
+      mission: "எங்கள் பணிக்கூற்று மற்றும் தொலைநோக்கு",
     },
     aboutStats: {
       citizens: "சேவை வழங்கப்பட்ட குடிமக்கள்",
@@ -499,77 +601,85 @@ const translations: Record<Language, HomeTranslations> = {
       departments: "துறைகள்",
       uptime: "இயக்க நேரம்",
       users: "பயனர்கள்",
-      support: "ஆதரவு"
+      support: "ஆதரவு",
     },
     aboutTrust: {
       title: "அரசாங்கத்தின் நம்பிக்கை",
-      description: "பொது நிர்வாக அமைச்சகத்தின் அதிகாரப்பூர்வ ஒப்புதல் மற்றும் இலங்கையில் குடிமக்கள் சேவைகளுக்கான முதன்மை டிஜிட்டல் நுழைவாயிலாக அங்கீகரிக்கப்பட்டது."
+      description:
+        "பொது நிர்வாக அமைச்சகத்தின் அதிகாரப்பூர்வ ஒப்புதல் மற்றும் இலங்கையில் குடிமக்கள் சேவைகளுக்கான முதன்மை டிஜிட்டல் நுழைவாயிலாக அங்கீகரிக்கப்பட்டது.",
     },
-    
+
     // Contact Section
     contactTitle1: "உதவி தேவையா?",
     contactTitle2: "நாங்கள் உங்களுக்காக இங்கே இருக்கிறோம்",
-    contactDescription: "அரசாங்கச் சேவைகள் பற்றி கேள்விகள் உள்ளதா? எங்கள் ஆதரவு குழு உங்களுக்கு உதவத் தயாராக உள்ளது.",
+    contactDescription:
+      "அரசாங்கச் சேவைகள் பற்றி கேள்விகள் உள்ளதா? எங்கள் ஆதரவு குழு உங்களுக்கு உதவத் தயாராக உள்ளது.",
     contactMethods: {
       phone: {
         title: "📞 எங்களை அழைக்கவும்",
         number: "+94 11 234 5678",
-        hours: "திங்கள் - வெள்ளி, காலை 8 - மாலை 6"
+        hours: "திங்கள் - வெள்ளி, காலை 8 - மாலை 6",
       },
       email: {
         title: "📧 எங்களுக்கு மின்னஞ்சல் அனுப்பவும்",
         address: "support@govlink.lk",
-        availability: "24/7 ஆதரவு"
+        availability: "24/7 ஆதரவு",
       },
       location: {
         title: "📍 எங்களைச் சந்திக்கவும்",
         address: "கொழும்பு, இலங்கை",
-        description: "அரசாங்கச் சேவைகள் மையம்"
-      }
+        description: "அரசாங்கச் சேவைகள் மையம்",
+      },
     },
     faq: {
       title: "அடிக்கடி கேட்கப்படும் கேள்விகள்",
       questions: {
         forms: {
           question: "அரசாங்கப் படிவங்களை எவ்வாறு அணுகுவது?",
-          answer: "உங்களுக்குத் தேவையான படிவத்தைத் தேடவும் அல்லது எங்கள் சேவைகள் பிரிவைப் பார்க்கவும். அனைத்துப் படிவங்களும் உடனடிப் பதிவிறக்கத்திற்குக் கிடைக்கின்றன."
+          answer:
+            "உங்களுக்குத் தேவையான படிவத்தைத் தேடவும் அல்லது எங்கள் சேவைகள் பிரிவைப் பார்க்கவும். அனைத்துப் படிவங்களும் உடனடிப் பதிவிறக்கத்திற்குக் கிடைக்கின்றன.",
         },
         official: {
           question: "GovLink அதிகாரப்பூர்வ தளமா?",
-          answer: "ஆம், GovLink டிஜிட்டல் சேவை வழங்கலுக்காக இலங்கை அரசாங்கத்தால் அதிகாரப்பூர்வமாக ஒப்புதல் அளிக்கப்பட்டுள்ளது."
+          answer:
+            "ஆம், GovLink டிஜிட்டல் சேவை வழங்கலுக்காக இலங்கை அரசாங்கத்தால் அதிகாரப்பூர்வமாக ஒப்புதல் அளிக்கப்பட்டுள்ளது.",
         },
         tracking: {
           question: "எனது விண்ணப்ப நிலையைக் கண்காணிக்க முடியுமா?",
-          answer: "நிச்சயமாக! உங்கள் சமர்பிப்புகளின் முன்னேற்றத்தைக் கண்காணிக்க உங்கள் விண்ணப்பக் குறிப்பு எண்ணைப் பயன்படுத்துங்கள்."
+          answer:
+            "நிச்சயமாக! உங்கள் சமர்பிப்புகளின் முன்னேற்றத்தைக் கண்காணிக்க உங்கள் விண்ணப்பக் குறிப்பு எண்ணைப் பயன்படுத்துங்கள்.",
         },
         support: {
           question: "எனக்குத் தொழில்நுட்ப ஆதரவு தேவைப்பட்டால் என்ன செய்வது?",
-          answer: "எங்கள் தொழில்நுட்ப ஆதரவுக் குழு தொலைபேசி, மின்னஞ்சல் அல்லது நேரடி காணொலி அழைப்பு மூலம் 24/7 உங்களுக்கு உதவி கிடைக்கிறது."
-        }
-      }
+          answer:
+            "எங்கள் தொழில்நுட்ப ஆதரவுக் குழு தொலைபேசி, மின்னஞ்சல் அல்லது நேரடி காணொலி அழைப்பு மூலம் 24/7 உங்களுக்கு உதவி கிடைக்கிறது.",
+        },
+      },
     },
-    
+
     // Footer
     footer: {
-      description: "🇱🇰 ஒவ்வொரு இலங்கையருக்கும் அரசாங்கச் சேவைகளை எளிமைப்படுத்துதல். எங்கள் நவீன டிஜிட்டல் தளத்தின் மூலம் எளிதாகத் தகவல்களை அணுகவும், படிவங்களைப் பதிவிறக்கம் செய்யவும், மற்றும் நடைமுறைகளை முடிக்கவும்.",
+      description:
+        "🇱🇰 ஒவ்வொரு இலங்கையருக்கும் அரசாங்கச் சேவைகளை எளிமைப்படுத்துதல். எங்கள் நவீன டிஜிட்டல் தளத்தின் மூலம் எளிதாகத் தகவல்களை அணுகவும், படிவங்களைப் பதிவிறக்கம் செய்யவும், மற்றும் நடைமுறைகளை முடிக்கவும்.",
       quickLinks: {
         services: "🛡️ சேவைகள்",
         about: "🏛️ எங்களைப் பற்றி",
         contact: "📞 தொடர்பு",
-        help: "❓ உதவி மையம்"
+        help: "❓ உதவி மையம்",
       },
       legal: {
         privacy: "🔒 தனியுரிமைக் கொள்கை",
         terms: "📋 சேவை விதிமுறைகள்",
         cookies: "🍪 Cookie கொள்கை",
-        accessibility: "♿ அணுகல்தன்மை"
+        accessibility: "♿ அணுகல்தன்மை",
       },
       status: "அனைத்து அமைப்புகளும் செயல்பாட்டில் உள்ளன",
-      copyright: "GovLink இலங்கை. பொதுச் சேவைகளை எளிமைப்படுத்துவதற்கான முயற்சி.",
+      copyright:
+        "GovLink இலங்கை. பொதுச் சேவைகளை எளிமைப்படுத்துவதற்கான முயற்சி.",
       crafted: "அன்புடன் உருவாக்கப்பட்டது",
-      forSriLanka: "🇱🇰 இலங்கை"
-    }
-  }
+      forSriLanka: "🇱🇰 இலங்கை",
+    },
+  },
 };
 
 // --- ELEGANT SRI LANKAN BACKGROUND COMPONENT ---
@@ -578,26 +688,41 @@ const SriLankanBackground = () => {
     <div className="fixed inset-0 pointer-events-none z-0 overflow-hidden">
       {/* Main background image */}
       <div className="absolute inset-0 bg-gradient-to-br from-background via-background to-background/95">
-        <div 
+        <div
           className="absolute inset-0 opacity-55 dark:opacity-15 bg-center bg-no-repeat bg-cover transition-opacity duration-1000"
           style={{
             backgroundImage: 'url("/2.png")',
-            backgroundPosition: 'center 20%',
-            filter: 'saturate(1.2) brightness(1.1)',
+            backgroundPosition: "center 20%",
+            filter: "saturate(1.2) brightness(1.1)",
           }}
         ></div>
         {/* Overlay gradients for better text readability */}
         <div className="absolute inset-0 bg-gradient-to-b from-background/20 via-transparent to-background/40 dark:from-background/40 dark:via-transparent dark:to-background/60"></div>
       </div>
-      
+
       {/* Enhanced lotus-inspired accent patterns */}
       <div className="absolute top-0 left-0 w-full h-full">
-        <div className="absolute top-1/4 right-1/4 w-64 h-64 bg-[#FFC72C]/8 dark:bg-[#FFC72C]/4 rounded-full blur-3xl animate-pulse" style={{animationDuration: '8s'}}></div>
-        <div className="absolute bottom-1/4 left-1/4 w-80 h-80 bg-[#8D153A]/8 dark:bg-[#8D153A]/4 rounded-full blur-3xl animate-pulse" style={{animationDuration: '12s', animationDelay: '4s'}}></div>
-        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-[#FF5722]/6 dark:bg-[#FF5722]/3 rounded-full blur-3xl animate-pulse" style={{animationDuration: '10s', animationDelay: '2s'}}></div>
+        <div
+          className="absolute top-1/4 right-1/4 w-64 h-64 bg-[#FFC72C]/8 dark:bg-[#FFC72C]/4 rounded-full blur-3xl animate-pulse"
+          style={{ animationDuration: "8s" }}
+        ></div>
+        <div
+          className="absolute bottom-1/4 left-1/4 w-80 h-80 bg-[#8D153A]/8 dark:bg-[#8D153A]/4 rounded-full blur-3xl animate-pulse"
+          style={{ animationDuration: "12s", animationDelay: "4s" }}
+        ></div>
+        <div
+          className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-[#FF5722]/6 dark:bg-[#FF5722]/3 rounded-full blur-3xl animate-pulse"
+          style={{ animationDuration: "10s", animationDelay: "2s" }}
+        ></div>
         {/* Additional subtle accents */}
-        <div className="absolute top-3/4 right-1/3 w-48 h-48 bg-[#FFA726]/6 dark:bg-[#FFA726]/3 rounded-full blur-2xl animate-pulse" style={{animationDuration: '14s', animationDelay: '1s'}}></div>
-        <div className="absolute top-1/6 left-1/5 w-56 h-56 bg-[#FF9800]/5 dark:bg-[#FF9800]/2 rounded-full blur-3xl animate-pulse" style={{animationDuration: '16s', animationDelay: '6s'}}></div>
+        <div
+          className="absolute top-3/4 right-1/3 w-48 h-48 bg-[#FFA726]/6 dark:bg-[#FFA726]/3 rounded-full blur-2xl animate-pulse"
+          style={{ animationDuration: "14s", animationDelay: "1s" }}
+        ></div>
+        <div
+          className="absolute top-1/6 left-1/5 w-56 h-56 bg-[#FF9800]/5 dark:bg-[#FF9800]/2 rounded-full blur-3xl animate-pulse"
+          style={{ animationDuration: "16s", animationDelay: "6s" }}
+        ></div>
       </div>
     </div>
   );
@@ -616,16 +741,11 @@ const InfoIcon = Info;
 
 const CheckIcon = Check;
 
-
 // --- MOBILE-OPTIMIZED HERO SECTION ---
-const Hero = ({ 
-  language
-}: { 
-  language: Language; 
-}) => {
-  const [searchText, setSearchText] = useState('');
+const Hero = ({ language }: { language: Language }) => {
+  const [searchText, setSearchText] = useState("");
   const t = translations[language];
-  
+
   const [currentPlaceholder, setCurrentPlaceholder] = useState(0);
 
   useEffect(() => {
@@ -637,17 +757,19 @@ const Hero = ({
 
   // Allow Shift+Enter to insert newline, Enter (without Shift) will submit the form
   const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    if (e.key === 'Enter' && e.shiftKey) {
+    if (e.key === "Enter" && e.shiftKey) {
       // Insert newline without submitting the form
       e.stopPropagation();
       // Let the default newline behavior happen
       return;
     }
-    if (e.key === 'Enter') {
+    if (e.key === "Enter") {
       // Prevent adding a newline so the form can submit cleanly
       e.preventDefault();
       // Find the closest form and submit it
-      const form = (e.currentTarget as HTMLTextAreaElement).closest('form') as HTMLFormElement | null;
+      const form = (e.currentTarget as HTMLTextAreaElement).closest(
+        "form"
+      ) as HTMLFormElement | null;
       if (form) form.requestSubmit();
     }
   };
@@ -658,22 +780,47 @@ const Hero = ({
         <div className="max-w-5xl mx-auto text-center">
           {/* Compact Hero Content */}
           <div className="mb-4 sm:mb-6 lg:mb-8 animate-fade-in-up">
-            <h1 className={`${language === 'en' ? 'text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl' : language === 'si' ? 'text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl' : 'text-xl sm:text-2xl md:text-3xl lg:text-4xl xl:text-5xl'} font-bold leading-tight mb-3 sm:mb-4 lg:mb-6`}>
-              <span className="block text-foreground mb-1 sm:mb-2">{t.heroTitle1}</span>
-              <span className="block text-gradient animate-title-wave">{t.heroTitle2}</span>
+            <h1
+              className={`${
+                language === "en"
+                  ? "text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl"
+                  : language === "si"
+                  ? "text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl"
+                  : "text-xl sm:text-2xl md:text-3xl lg:text-4xl xl:text-5xl"
+              } font-bold leading-tight mb-3 sm:mb-4 lg:mb-6`}
+            >
+              <span className="block text-foreground mb-1 sm:mb-2">
+                {t.heroTitle1}
+              </span>
+              <span className="block text-gradient animate-title-wave">
+                {t.heroTitle2}
+              </span>
             </h1>
             <div className="w-12 sm:w-16 md:w-20 lg:w-24 h-0.5 bg-gradient-to-r from-[#FFC72C] via-[#FF5722] to-[#8D153A] mx-auto rounded-full shadow-lg"></div>
           </div>
-          
+
           {/* Compact Subtitle */}
-          <p className="text-sm sm:text-base md:text-lg text-muted-foreground mb-4 sm:mb-6 lg:mb-8 max-w-3xl mx-auto leading-relaxed animate-fade-in-up font-light px-4 sm:px-0" style={{animationDelay: '0.2s'}}>
-            {t.heroSubtitle}<br className="hidden sm:block" />
-            <span className="text-foreground/80 font-medium">{t.heroDescription}</span>
+          <p
+            className="text-sm sm:text-base md:text-lg text-muted-foreground mb-4 sm:mb-6 lg:mb-8 max-w-3xl mx-auto leading-relaxed animate-fade-in-up font-light px-4 sm:px-0"
+            style={{ animationDelay: "0.2s" }}
+          >
+            {t.heroSubtitle}
+            <br className="hidden sm:block" />
+            <span className="text-foreground/80 font-medium">
+              {t.heroDescription}
+            </span>
           </p>
-          
+
           {/* Compact Search Interface */}
-          <div className="max-w-3xl mx-auto animate-fade-in-up px-4 sm:px-0" style={{animationDelay: '0.4s'}}>
-            <form action="/ragbot" method="GET" className="relative group mb-4 sm:mb-6">
+          <div
+            className="max-w-3xl mx-auto animate-fade-in-up px-4 sm:px-0"
+            style={{ animationDelay: "0.4s" }}
+          >
+            <form
+              action="/ragbot"
+              method="GET"
+              className="relative group mb-4 sm:mb-6"
+            >
               <div className="relative bg-card/90 dark:bg-card/95 backdrop-blur-md border-2 border-border/50 hover:border-[#FFC72C]/70 rounded-xl p-1.5 transition-all duration-500 hover:shadow-2xl shadow-lg modern-card">
                 <textarea
                   name="q"
@@ -685,25 +832,30 @@ const Hero = ({
                   rows={1}
                   onInput={(e) => {
                     const target = e.target as HTMLTextAreaElement;
-                    target.style.height = 'auto';
-                    target.style.height = `${Math.max(target.scrollHeight, 45)}px`;
+                    target.style.height = "auto";
+                    target.style.height = `${Math.max(
+                      target.scrollHeight,
+                      45
+                    )}px`;
                   }}
                 />
-                <button 
-                  type="submit" 
+                <button
+                  type="submit"
                   className="absolute right-2 sm:right-3 top-1/2 -translate-y-1/2 p-2.5 sm:p-3 bg-gradient-to-r from-[#FFC72C] via-[#FF5722] to-[#8D153A] hover:from-[#FF5722] hover:via-[#8D153A] hover:to-[#FFC72C] rounded-lg transition-all duration-300 hover:scale-110 shadow-xl group hover:shadow-2xl"
                 >
                   <ArrowRightIcon className="h-3.5 w-3.5 sm:h-4 sm:w-4 text-white group-hover:translate-x-1 transition-transform duration-300" />
                 </button>
               </div>
-              
+
               {/* Compact Suggestions */}
               <div className="mt-3 sm:mt-4 flex flex-wrap gap-1.5 sm:gap-2 justify-center">
                 {t.searchSuggestions.map((suggestion, index) => (
                   <button
                     key={index}
                     type="button"
-                    onClick={() => setSearchText(suggestion.split(' ').slice(1).join(' '))}
+                    onClick={() =>
+                      setSearchText(suggestion.split(" ").slice(1).join(" "))
+                    }
                     className="px-3 py-1.5 sm:px-4 sm:py-2 bg-card/80 hover:bg-accent/80 border border-border/50 hover:border-[#FFC72C]/60 rounded-full text-xs sm:text-sm font-medium transition-all duration-300 hover:scale-105 shadow-md hover:shadow-lg backdrop-blur-sm modern-card"
                   >
                     {suggestion}
@@ -711,9 +863,12 @@ const Hero = ({
                 ))}
               </div>
             </form>
-            
+
             {/* Compact Trust Indicators */}
-            <div className="flex flex-col sm:flex-row items-center justify-center gap-1.5 sm:gap-2 lg:gap-4 animate-fade-in-up" style={{animationDelay: '0.6s'}}>
+            <div
+              className="flex flex-col sm:flex-row items-center justify-center gap-1.5 sm:gap-2 lg:gap-4 animate-fade-in-up"
+              style={{ animationDelay: "0.6s" }}
+            >
               <div className="flex items-center gap-1.5 sm:gap-2 text-muted-foreground text-xs">
                 <div className="w-1.5 h-1.5 bg-green-500 rounded-full animate-pulse"></div>
                 <span>{t.trustIndicators.trusted}</span>
@@ -737,71 +892,86 @@ const Hero = ({
 // --- MOBILE-OPTIMIZED FEATURES SECTION ---
 const Features = ({ language }: { language: Language }) => {
   const t = translations[language];
-  
+
   const featuresList = [
-    { 
-      icon: <DocumentIcon />, 
-      title: t.features.documents.title, 
+    {
+      icon: <DocumentIcon />,
+      title: t.features.documents.title,
       description: t.features.documents.description,
       color: "#FF5722",
-      benefits: t.features.documents.benefits
+      benefits: t.features.documents.benefits,
     },
-    { 
-      icon: <InfoIcon />, 
-      title: t.features.information.title, 
+    {
+      icon: <InfoIcon />,
+      title: t.features.information.title,
       description: t.features.information.description,
       color: "#008060",
-      benefits: t.features.information.benefits
+      benefits: t.features.information.benefits,
     },
-    { 
-      icon: <CalendarIcon />, 
-      title: t.features.appointments.title, 
+    {
+      icon: <CalendarIcon />,
+      title: t.features.appointments.title,
       description: t.features.appointments.description,
       color: "#FFC72C",
-      benefits: t.features.appointments.benefits
+      benefits: t.features.appointments.benefits,
     },
   ];
-  
+
   return (
-    <section id="services" className="py-4 sm:py-8 lg:py-12 -mt-4 sm:-mt-8 lg:mt-0 relative">
+    <section
+      id="services"
+      className="py-4 sm:py-8 lg:py-12 -mt-4 sm:-mt-8 lg:mt-0 relative"
+    >
       <div className="container mx-auto px-4 sm:px-6 relative z-10">
         {/* Compact Section Header */}
         <div className="text-center mb-6 sm:mb-8 lg:mb-10 animate-fade-in-up">
           <div className="inline-flex items-center gap-2 bg-card/90 dark:bg-card/95 backdrop-blur-md px-4 py-2 rounded-full border border-border/50 mb-3 sm:mb-4 modern-card">
             <LotusIcon className="w-4 h-4" />
-            <span className="text-xs sm:text-sm font-medium text-foreground">Our Services</span>
+            <span className="text-xs sm:text-sm font-medium text-foreground">
+              Our Services
+            </span>
           </div>
           <h2 className="text-xl sm:text-2xl md:text-3xl lg:text-4xl xl:text-5xl font-bold mb-2 sm:mb-3 lg:mb-4 leading-tight">
-            <span className="block text-foreground mb-1">{t.featuresTitle1}</span>
+            <span className="block text-foreground mb-1">
+              {t.featuresTitle1}
+            </span>
             <span className="block text-gradient">{t.featuresTitle2}</span>
           </h2>
           <p className="text-sm sm:text-base md:text-lg text-muted-foreground max-w-2xl mx-auto leading-relaxed">
             {t.featuresDescription}
           </p>
-        </div>        
-        
+        </div>
+
         {/* Enhanced Feature Cards with Fixed Alignment */}
         <div className="grid grid-cols-1 md:grid-cols-3 gap-3 sm:gap-4 lg:gap-6">
           {featuresList.map((feature, index) => (
-            <div 
-              key={index} 
+            <div
+              key={index}
               className="group relative bg-card/90 dark:bg-card/95 backdrop-blur-md rounded-xl border border-border/50 hover:border-[#FFC72C]/70 hover:shadow-2xl transition-all duration-500 animate-fade-in-up modern-card hover-lift flex flex-col h-full"
-              style={{animationDelay: `${index * 0.15}s`}}
+              style={{ animationDelay: `${index * 0.15}s` }}
             >
               {/* Card Content Container */}
               <div className="p-3 sm:p-6 lg:p-8 flex flex-col h-full min-h-[280px] sm:min-h-[400px] lg:min-h-[450px]">
                 {/* Enhanced Icon Container */}
-                <div className="relative flex items-center justify-center w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl mb-2 sm:mb-4 lg:mb-6 transition-all duration-500 group-hover:scale-110 group-hover:rotate-6"
-                     style={{
-                       background: `linear-gradient(135deg, ${feature.color}20, ${feature.color}10)`,
-                       border: `2px solid ${feature.color}30`
-                     }}>
-                  <div className="text-xl sm:text-2xl lg:text-3xl transition-transform duration-300 group-hover:scale-110" style={{color: feature.color}}>
+                <div
+                  className="relative flex items-center justify-center w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl mb-2 sm:mb-4 lg:mb-6 transition-all duration-500 group-hover:scale-110 group-hover:rotate-6"
+                  style={{
+                    background: `linear-gradient(135deg, ${feature.color}20, ${feature.color}10)`,
+                    border: `2px solid ${feature.color}30`,
+                  }}
+                >
+                  <div
+                    className="text-xl sm:text-2xl lg:text-3xl transition-transform duration-300 group-hover:scale-110"
+                    style={{ color: feature.color }}
+                  >
                     {feature.icon}
                   </div>
-                  <div className="absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"
-                       style={{background: `radial-gradient(circle, ${feature.color}15, transparent 70%)`}}>
-                  </div>
+                  <div
+                    className="absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"
+                    style={{
+                      background: `radial-gradient(circle, ${feature.color}15, transparent 70%)`,
+                    }}
+                  ></div>
                 </div>
 
                 {/* Content - Flexible height containers */}
@@ -823,17 +993,22 @@ const Features = ({ language }: { language: Language }) => {
                   {/* Enhanced Benefits - Fixed at bottom */}
                   <div className="space-y-1.5 sm:space-y-2 lg:space-y-3 mt-auto">
                     {feature.benefits.map((benefit, benefitIndex) => (
-                      <div key={benefitIndex} className="flex items-start gap-2 sm:gap-3 text-xs sm:text-sm group/benefit hover:translate-x-1 transition-transform duration-200">
+                      <div
+                        key={benefitIndex}
+                        className="flex items-start gap-2 sm:gap-3 text-xs sm:text-sm group/benefit hover:translate-x-1 transition-transform duration-200"
+                      >
                         <div className="w-5 h-5 sm:w-6 sm:h-6 rounded-full bg-gradient-to-r from-[#FFC72C] to-[#FF5722] flex items-center justify-center text-white text-xs font-bold shadow-md flex-shrink-0 mt-0.5">
                           ✓
                         </div>
-                        <span className="text-muted-foreground group-hover/benefit:text-foreground transition-colors duration-200 leading-relaxed break-words hyphens-auto flex-1">{benefit}</span>
+                        <span className="text-muted-foreground group-hover/benefit:text-foreground transition-colors duration-200 leading-relaxed break-words hyphens-auto flex-1">
+                          {benefit}
+                        </span>
                       </div>
                     ))}
                   </div>
                 </div>
               </div>
-              
+
               {/* Hover Gradient Overlay */}
               <div className="absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none">
                 <div className="absolute inset-0 bg-gradient-to-br from-[#FFC72C]/5 via-transparent to-[#FF5722]/5 rounded-xl"></div>
@@ -849,7 +1024,9 @@ const Features = ({ language }: { language: Language }) => {
 // --- BALANCED ABOUT SECTION ---
 const About = ({ language }: { language: Language }) => {
   const t = translations[language];
-  
+  const [showLearnMore, setShowLearnMore] = useState(false);
+  const [showMission, setShowMission] = useState(false);
+
   return (
     <section id="about" className="py-16 sm:py-20 relative">
       <div className="container mx-auto px-4 sm:px-6 relative z-10">
@@ -857,441 +1034,1148 @@ const About = ({ language }: { language: Language }) => {
         <div className="text-center mb-8 animate-fade-in-up">
           <div className="inline-flex items-center gap-2 bg-card/90 dark:bg-card/95 backdrop-blur-md px-4 py-2 rounded-full border border-border/50 mb-4 modern-card">
             <LotusIcon className="w-4 h-4" />
-            <span className="text-xs sm:text-sm font-medium text-foreground">About GovLink</span>
+            <span className="text-xs sm:text-sm font-medium text-foreground">
+              About GovLink
+            </span>
           </div>
         </div>
-      
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-stretch">
-        {/* Enhanced Left Content with Better Vertical Distribution */}
-        <div className="animate-fade-in-up flex flex-col justify-between min-h-[600px] lg:min-h-[700px]">
-          {/* Top Section */}
-          <div>
-            <h2 className="text-2xl sm:text-3xl lg:text-4xl font-bold mb-6 lg:mb-8 leading-tight">
-              <span className="block text-foreground">{t.aboutTitle1}</span>
-              <span className="block text-gradient">{t.aboutTitle2}</span>
-            </h2>
-            
-            <p className="text-base sm:text-lg text-muted-foreground mb-8 lg:mb-12 leading-relaxed">
-              {t.aboutDescription}
-            </p>
-          </div>
-          
-          {/* Middle Section - Features */}
-          <div className="space-y-6 lg:space-y-8 mb-8 lg:mb-12">
-            <div className="flex items-start gap-4">
-              <div className="w-6 h-6 bg-gradient-to-r from-[#FFC72C] to-[#FF5722] rounded-full flex items-center justify-center flex-shrink-0 mt-1">
-                <CheckIcon className="w-4 h-4 text-white" />
+
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-stretch">
+          {/* Enhanced Left Content with Better Vertical Distribution */}
+          <div className="animate-fade-in-up flex flex-col justify-between min-h-[600px] lg:min-h-[700px]">
+            {/* Top Section */}
+            <div>
+              <h2 className="text-2xl sm:text-3xl lg:text-4xl font-bold mb-6 lg:mb-8 leading-tight">
+                <span className="block text-foreground">{t.aboutTitle1}</span>
+                <span className="block text-gradient">{t.aboutTitle2}</span>
+              </h2>
+
+              <p className="text-base sm:text-lg text-muted-foreground mb-8 lg:mb-12 leading-relaxed">
+                {t.aboutDescription}
+              </p>
+            </div>
+
+            {/* Middle Section - Features */}
+            <div className="space-y-6 lg:space-y-8 mb-8 lg:mb-12">
+              <div className="flex items-start gap-4">
+                <div className="w-6 h-6 bg-gradient-to-r from-[#FFC72C] to-[#FF5722] rounded-full flex items-center justify-center flex-shrink-0 mt-1">
+                  <CheckIcon className="w-4 h-4 text-white" />
+                </div>
+                <div>
+                  <span className="font-semibold text-base lg:text-lg block mb-2">
+                    {t.aboutFeatures.simplified.title}
+                  </span>
+                  <p className="text-muted-foreground text-sm lg:text-base leading-relaxed">
+                    {t.aboutFeatures.simplified.description}
+                  </p>
+                </div>
               </div>
-              <div>
-                <span className="font-semibold text-base lg:text-lg block mb-2">{t.aboutFeatures.simplified.title}</span>
-                <p className="text-muted-foreground text-sm lg:text-base leading-relaxed">
-                  {t.aboutFeatures.simplified.description}
-                </p>
+
+              <div className="flex items-start gap-4">
+                <div className="w-6 h-6 bg-gradient-to-r from-[#008060] to-[#FFC72C] rounded-full flex items-center justify-center flex-shrink-0 mt-1">
+                  <CheckIcon className="w-4 h-4 text-white" />
+                </div>
+                <div>
+                  <span className="font-semibold text-base lg:text-lg block mb-2">
+                    {t.aboutFeatures.availability.title}
+                  </span>
+                  <p className="text-muted-foreground text-sm lg:text-base leading-relaxed">
+                    {t.aboutFeatures.availability.description}
+                  </p>
+                </div>
               </div>
+
+              <div className="flex items-start gap-4">
+                <div className="w-6 h-6 bg-gradient-to-r from-[#FF5722] to-[#8D153A] rounded-full flex items-center justify-center flex-shrink-0 mt-1">
+                  <CheckIcon className="w-4 h-4 text-white" />
+                </div>
+                <div>
+                  <span className="font-semibold text-base lg:text-lg block mb-2">
+                    {t.aboutFeatures.transparent.title}
+                  </span>
+                  <p className="text-muted-foreground text-sm lg:text-base leading-relaxed">
+                    {t.aboutFeatures.transparent.description}
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            {/* Bottom Section - Action Buttons */}
+            <div className="flex flex-col sm:flex-row gap-4">
+              <button
+                onClick={() => setShowLearnMore(true)}
+                className="bg-gradient-to-r from-[#FFC72C] via-[#FF5722] to-[#8D153A] hover:from-[#FF5722] hover:via-[#8D153A] hover:to-[#FFC72C] text-white px-6 py-3.5 rounded-xl font-semibold text-sm lg:text-base transition-all duration-300 hover:scale-105 shadow-lg"
+              >
+                {t.aboutButtons.learnMore}
+              </button>
+              <button
+                onClick={() => setShowMission(true)}
+                className="border-2 border-[#008060] text-[#008060] hover:bg-[#008060] hover:text-white px-6 py-3.5 rounded-xl font-semibold text-sm lg:text-base transition-all duration-300 hover:scale-105"
+              >
+                {t.aboutButtons.mission}
+              </button>
+            </div>
+          </div>
+
+          {/* Enhanced Right Side with Better Proportions */}
+          <div
+            className="animate-fade-in-up flex flex-col min-h-[600px] lg:min-h-[700px]"
+            style={{ animationDelay: "0.2s" }}
+          >
+            {/* Hero Image - Increased height for balance */}
+            <div className="mb-8 lg:mb-10 flex-1 flex items-center justify-center">
+              <Image
+                src="/4.png"
+                alt="GovLink Support Team"
+                width={400}
+                height={400}
+                className="w-full h-auto opacity-100 dark:opacity-60 max-w-md mx-auto lg:max-w-full block rounded-xl shadow-lg"
+                style={{
+                  filter: "saturate(1.1) brightness(1.05)",
+                  maxHeight: "400px",
+                  objectFit: "contain",
+                }}
+              />
             </div>
-            
-            <div className="flex items-start gap-4">
-              <div className="w-6 h-6 bg-gradient-to-r from-[#008060] to-[#FFC72C] rounded-full flex items-center justify-center flex-shrink-0 mt-1">
-                <CheckIcon className="w-4 h-4 text-white" />
+
+            {/* Stats Grid with Better Spacing and Flexible Heights */}
+            <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-6">
+              <div className="text-center p-3 sm:p-4 lg:p-5 bg-card/90 dark:bg-card/95 backdrop-blur-md rounded-xl border border-border/50 modern-card hover:shadow-lg transition-all duration-300 flex flex-col justify-center min-h-[100px] sm:min-h-[110px] lg:min-h-[130px]">
+                <div className="text-lg sm:text-xl lg:text-xl font-bold text-gradient mb-2 flex-shrink-0">
+                  50K+
+                </div>
+                <div className="text-muted-foreground text-xs sm:text-xs lg:text-sm leading-tight break-words hyphens-auto px-1">
+                  {t.aboutStats.citizens}
+                </div>
               </div>
-              <div>
-                <span className="font-semibold text-base lg:text-lg block mb-2">{t.aboutFeatures.availability.title}</span>
-                <p className="text-muted-foreground text-sm lg:text-base leading-relaxed">
-                  {t.aboutFeatures.availability.description}
-                </p>
+
+              <div className="text-center p-3 sm:p-4 lg:p-5 bg-card/90 dark:bg-card/95 backdrop-blur-md rounded-xl border border-border/50 modern-card hover:shadow-lg transition-all duration-300 flex flex-col justify-center min-h-[100px] sm:min-h-[110px] lg:min-h-[130px]">
+                <div className="text-lg sm:text-xl lg:text-xl font-bold text-gradient mb-2 flex-shrink-0">
+                  200+
+                </div>
+                <div className="text-muted-foreground text-xs sm:text-xs lg:text-sm leading-tight break-words hyphens-auto px-1">
+                  {t.aboutStats.forms}
+                </div>
               </div>
-            </div>
-            
-            <div className="flex items-start gap-4">
-              <div className="w-6 h-6 bg-gradient-to-r from-[#FF5722] to-[#8D153A] rounded-full flex items-center justify-center flex-shrink-0 mt-1">
-                <CheckIcon className="w-4 h-4 text-white" />
+
+              <div className="text-center p-3 sm:p-4 lg:p-5 bg-card/90 dark:bg-card/95 backdrop-blur-md rounded-xl border border-border/50 modern-card hover:shadow-lg transition-all duration-300 flex flex-col justify-center min-h-[100px] sm:min-h-[110px] lg:min-h-[130px]">
+                <div className="text-lg sm:text-xl lg:text-xl font-bold text-gradient mb-2 flex-shrink-0">
+                  25
+                </div>
+                <div className="text-muted-foreground text-xs sm:text-xs lg:text-sm leading-tight break-words hyphens-auto px-1">
+                  {t.aboutStats.departments}
+                </div>
               </div>
-              <div>
-                <span className="font-semibold text-base lg:text-lg block mb-2">{t.aboutFeatures.transparent.title}</span>
-                <p className="text-muted-foreground text-sm lg:text-base leading-relaxed">
-                  {t.aboutFeatures.transparent.description}
-                </p>
+
+              <div className="text-center p-3 sm:p-4 lg:p-5 bg-card/90 dark:bg-card/95 backdrop-blur-md rounded-xl border border-border/50 modern-card hover:shadow-lg transition-all duration-300 flex flex-col justify-center min-h-[100px] sm:min-h-[110px] lg:min-h-[130px]">
+                <div className="text-lg sm:text-xl lg:text-xl font-bold text-gradient mb-2 flex-shrink-0">
+                  99.8%
+                </div>
+                <div className="text-muted-foreground text-xs sm:text-xs lg:text-sm leading-tight break-words hyphens-auto px-1">
+                  {t.aboutStats.uptime}
+                </div>
               </div>
             </div>
           </div>
-          
-          {/* Bottom Section - Action Buttons */}
-          <div className="flex flex-col sm:flex-row gap-4">
-            <button className="bg-gradient-to-r from-[#FFC72C] via-[#FF5722] to-[#8D153A] hover:from-[#FF5722] hover:via-[#8D153A] hover:to-[#FFC72C] text-white px-6 py-3.5 rounded-xl font-semibold text-sm lg:text-base transition-all duration-300 hover:scale-105 shadow-lg">
-              {t.aboutButtons.learnMore}
-            </button>
-            <button className="border-2 border-[#008060] text-[#008060] hover:bg-[#008060] hover:text-white px-6 py-3.5 rounded-xl font-semibold text-sm lg:text-base transition-all duration-300 hover:scale-105">
-              {t.aboutButtons.mission}
-            </button>
-          </div>
         </div>
-        
-        {/* Enhanced Right Side with Better Proportions */}
-        <div className="animate-fade-in-up flex flex-col min-h-[600px] lg:min-h-[700px]" style={{animationDelay: '0.2s'}}>
-          {/* Hero Image - Increased height for balance */}
-          <div className="mb-8 lg:mb-10 flex-1 flex items-center justify-center">
-            <Image 
-              src="/4.png" 
-              alt="GovLink Support Team" 
-              width={400}
-              height={400}
-              className="w-full h-auto opacity-100 dark:opacity-60 max-w-md mx-auto lg:max-w-full block rounded-xl shadow-lg"
-              style={{
-                filter: 'saturate(1.1) brightness(1.05)',
-                maxHeight: '400px',
-                objectFit: 'contain'
-              }}
-            />
-          </div>
-          
-          {/* Stats Grid with Better Spacing and Flexible Heights */}
-          <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-6">
-            <div className="text-center p-3 sm:p-4 lg:p-5 bg-card/90 dark:bg-card/95 backdrop-blur-md rounded-xl border border-border/50 modern-card hover:shadow-lg transition-all duration-300 flex flex-col justify-center min-h-[100px] sm:min-h-[110px] lg:min-h-[130px]">
-              <div className="text-lg sm:text-xl lg:text-xl font-bold text-gradient mb-2 flex-shrink-0">50K+</div>
-              <div className="text-muted-foreground text-xs sm:text-xs lg:text-sm leading-tight break-words hyphens-auto px-1">{t.aboutStats.citizens}</div>
-            </div>
-            
-            <div className="text-center p-3 sm:p-4 lg:p-5 bg-card/90 dark:bg-card/95 backdrop-blur-md rounded-xl border border-border/50 modern-card hover:shadow-lg transition-all duration-300 flex flex-col justify-center min-h-[100px] sm:min-h-[110px] lg:min-h-[130px]">
-              <div className="text-lg sm:text-xl lg:text-xl font-bold text-gradient mb-2 flex-shrink-0">200+</div>
-              <div className="text-muted-foreground text-xs sm:text-xs lg:text-sm leading-tight break-words hyphens-auto px-1">{t.aboutStats.forms}</div>
-            </div>
-            
-            <div className="text-center p-3 sm:p-4 lg:p-5 bg-card/90 dark:bg-card/95 backdrop-blur-md rounded-xl border border-border/50 modern-card hover:shadow-lg transition-all duration-300 flex flex-col justify-center min-h-[100px] sm:min-h-[110px] lg:min-h-[130px]">
-              <div className="text-lg sm:text-xl lg:text-xl font-bold text-gradient mb-2 flex-shrink-0">25</div>
-              <div className="text-muted-foreground text-xs sm:text-xs lg:text-sm leading-tight break-words hyphens-auto px-1">{t.aboutStats.departments}</div>
-            </div>
-            
-            <div className="text-center p-3 sm:p-4 lg:p-5 bg-card/90 dark:bg-card/95 backdrop-blur-md rounded-xl border border-border/50 modern-card hover:shadow-lg transition-all duration-300 flex flex-col justify-center min-h-[100px] sm:min-h-[110px] lg:min-h-[130px]">
-              <div className="text-lg sm:text-xl lg:text-xl font-bold text-gradient mb-2 flex-shrink-0">99.8%</div>
-              <div className="text-muted-foreground text-xs sm:text-xs lg:text-sm leading-tight break-words hyphens-auto px-1">{t.aboutStats.uptime}</div>
+      </div>
+
+      {/* Learn More Modal */}
+      {showLearnMore && (
+        <div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
+          <div className="bg-card/95 backdrop-blur-md rounded-2xl border border-border/50 max-w-4xl w-full max-h-[90vh] overflow-y-auto shadow-2xl">
+            <div className="p-6 sm:p-8">
+              <div className="flex items-center justify-between mb-6">
+                <h3 className="text-2xl sm:text-3xl font-bold text-gradient">
+                  About GovLink Sri Lanka
+                </h3>
+                <button
+                  onClick={() => setShowLearnMore(false)}
+                  className="p-2 hover:bg-accent rounded-lg transition-colors duration-200"
+                >
+                  <svg
+                    className="w-6 h-6"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M6 18L18 6M6 6l12 12"
+                    />
+                  </svg>
+                </button>
+              </div>
+
+              <div className="space-y-6">
+                <div>
+                  <h4 className="text-xl font-semibold mb-3 text-foreground">
+                    Our Story
+                  </h4>
+                  <p className="text-muted-foreground leading-relaxed mb-4">
+                    GovLink was founded in 2022 with a simple yet powerful
+                    vision: to make government services accessible, transparent,
+                    and efficient for every Sri Lankan citizen. Born from the
+                    frustration of lengthy bureaucratic processes and the need
+                    for digital transformation in public service delivery.
+                  </p>
+                  <p className="text-muted-foreground leading-relaxed">
+                    Our team of dedicated developers, public administration
+                    experts, and user experience designers came together to
+                    create a platform that bridges the gap between citizens and
+                    government services, making essential processes simple and
+                    straightforward.
+                  </p>
+                </div>
+
+                <div>
+                  <h4 className="text-xl font-semibold mb-3 text-foreground">
+                    What Makes Us Different
+                  </h4>
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div className="p-4 bg-background/50 rounded-lg border border-border/30">
+                      <div className="flex items-center gap-3 mb-2">
+                        <div className="w-8 h-8 bg-gradient-to-r from-[#FFC72C] to-[#FF5722] rounded-full flex items-center justify-center">
+                          <svg
+                            className="w-4 h-4 text-white"
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              strokeWidth={2}
+                              d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+                            />
+                          </svg>
+                        </div>
+                        <h5 className="font-semibold">
+                          Citizen-Centric Design
+                        </h5>
+                      </div>
+                      <p className="text-sm text-muted-foreground">
+                        Every feature is designed with the user in mind,
+                        ensuring intuitive navigation and clear information
+                        presentation.
+                      </p>
+                    </div>
+
+                    <div className="p-4 bg-background/50 rounded-lg border border-border/30">
+                      <div className="flex items-center gap-3 mb-2">
+                        <div className="w-8 h-8 bg-gradient-to-r from-[#008060] to-[#FFC72C] rounded-full flex items-center justify-center">
+                          <svg
+                            className="w-4 h-4 text-white"
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              strokeWidth={2}
+                              d="M13 10V3L4 14h7v7l9-11h-7z"
+                            />
+                          </svg>
+                        </div>
+                        <h5 className="font-semibold">Lightning Fast</h5>
+                      </div>
+                      <p className="text-sm text-muted-foreground">
+                        Advanced technology stack ensures quick response times
+                        and seamless user experience across all devices.
+                      </p>
+                    </div>
+
+                    <div className="p-4 bg-background/50 rounded-lg border border-border/30">
+                      <div className="flex items-center gap-3 mb-2">
+                        <div className="w-8 h-8 bg-gradient-to-r from-[#FF5722] to-[#8D153A] rounded-full flex items-center justify-center">
+                          <svg
+                            className="w-4 h-4 text-white"
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              strokeWidth={2}
+                              d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
+                            />
+                          </svg>
+                        </div>
+                        <h5 className="font-semibold">Secure & Trusted</h5>
+                      </div>
+                      <p className="text-sm text-muted-foreground">
+                        Bank-level security protocols protect your personal
+                        information and ensure safe transactions.
+                      </p>
+                    </div>
+
+                    <div className="p-4 bg-background/50 rounded-lg border border-border/30">
+                      <div className="flex items-center gap-3 mb-2">
+                        <div className="w-8 h-8 bg-gradient-to-r from-[#8D153A] to-[#FFC72C] rounded-full flex items-center justify-center">
+                          <svg
+                            className="w-4 h-4 text-white"
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              strokeWidth={2}
+                              d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9v-9m0-9v9"
+                            />
+                          </svg>
+                        </div>
+                        <h5 className="font-semibold">
+                          Multi-Language Support
+                        </h5>
+                      </div>
+                      <p className="text-sm text-muted-foreground">
+                        Available in English, Sinhala, and Tamil to serve all
+                        Sri Lankan communities effectively.
+                      </p>
+                    </div>
+                  </div>
+                </div>
+
+                <div>
+                  <h4 className="text-xl font-semibold mb-3 text-foreground">
+                    Our Impact
+                  </h4>
+                  <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                    <div className="text-center p-4 bg-gradient-to-r from-[#FFC72C]/10 to-[#FF5722]/10 rounded-lg border border-border/30">
+                      <div className="text-2xl font-bold text-gradient mb-1">
+                        50,000+
+                      </div>
+                      <div className="text-sm text-muted-foreground">
+                        Citizens Served
+                      </div>
+                    </div>
+                    <div className="text-center p-4 bg-gradient-to-r from-[#008060]/10 to-[#FFC72C]/10 rounded-lg border border-border/30">
+                      <div className="text-2xl font-bold text-gradient mb-1">
+                        200+
+                      </div>
+                      <div className="text-sm text-muted-foreground">
+                        Government Forms
+                      </div>
+                    </div>
+                    <div className="text-center p-4 bg-gradient-to-r from-[#FF5722]/10 to-[#8D153A]/10 rounded-lg border border-border/30">
+                      <div className="text-2xl font-bold text-gradient mb-1">
+                        25
+                      </div>
+                      <div className="text-sm text-muted-foreground">
+                        Departments Connected
+                      </div>
+                    </div>
+                    <div className="text-center p-4 bg-gradient-to-r from-[#8D153A]/10 to-[#FFC72C]/10 rounded-lg border border-border/30">
+                      <div className="text-2xl font-bold text-gradient mb-1">
+                        99.8%
+                      </div>
+                      <div className="text-sm text-muted-foreground">
+                        System Uptime
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <div>
+                  <h4 className="text-xl font-semibold mb-3 text-foreground">
+                    Awards & Recognition
+                  </h4>
+                  <div className="space-y-3">
+                    <div className="flex items-center gap-3 p-3 bg-background/50 rounded-lg border border-border/30">
+                      <div className="w-8 h-8 bg-gradient-to-r from-[#FFC72C] to-[#FF5722] rounded-full flex items-center justify-center">
+                        🏆
+                      </div>
+                      <div>
+                        <div className="font-semibold text-sm">
+                          Best Digital Government Initiative 2023
+                        </div>
+                        <div className="text-xs text-muted-foreground">
+                          Ministry of Technology
+                        </div>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-3 p-3 bg-background/50 rounded-lg border border-border/30">
+                      <div className="w-8 h-8 bg-gradient-to-r from-[#008060] to-[#FFC72C] rounded-full flex items-center justify-center">
+                        🌟
+                      </div>
+                      <div>
+                        <div className="font-semibold text-sm">
+                          Excellence in Public Service Delivery
+                        </div>
+                        <div className="text-xs text-muted-foreground">
+                          Asian Development Bank
+                        </div>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-3 p-3 bg-background/50 rounded-lg border border-border/30">
+                      <div className="w-8 h-8 bg-gradient-to-r from-[#FF5722] to-[#8D153A] rounded-full flex items-center justify-center">
+                        🎯
+                      </div>
+                      <div>
+                        <div className="font-semibold text-sm">
+                          Innovation in Citizen Services 2024
+                        </div>
+                        <div className="text-xs text-muted-foreground">
+                          UN Digital Government Awards
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
-          
-          {/* Additional Info Section for Balance */}
-          <div className="mt-8 lg:mt-10 p-4 lg:p-6 bg-gradient-to-r from-primary/5 via-accent/5 to-secondary/5 rounded-xl border border-border/30">
-            <h4 className="font-semibold text-base lg:text-lg text-foreground mb-2">{t.aboutTrust.title}</h4>
-            <p className="text-muted-foreground text-sm lg:text-base leading-relaxed">
-              {t.aboutTrust.description}
-            </p>
+        </div>
+      )}
+
+      {/* Mission & Vision Modal */}
+      {showMission && (
+        <div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
+          <div className="bg-card/95 backdrop-blur-md rounded-2xl border border-border/50 max-w-4xl w-full max-h-[90vh] overflow-y-auto shadow-2xl">
+            <div className="p-6 sm:p-8">
+              <div className="flex items-center justify-between mb-6">
+                <h3 className="text-2xl sm:text-3xl font-bold text-gradient">
+                  Our Mission & Vision
+                </h3>
+                <button
+                  onClick={() => setShowMission(false)}
+                  className="p-2 hover:bg-accent rounded-lg transition-colors duration-200"
+                >
+                  <svg
+                    className="w-6 h-6"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M6 18L18 6M6 6l12 12"
+                    />
+                  </svg>
+                </button>
+              </div>
+
+              <div className="space-y-8">
+                <div>
+                  <div className="flex items-center gap-3 mb-4">
+                    <div className="w-12 h-12 bg-gradient-to-r from-[#FFC72C] to-[#FF5722] rounded-xl flex items-center justify-center">
+                      <svg
+                        className="w-6 h-6 text-white"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M13 10V3L4 14h7v7l9-11h-7z"
+                        />
+                      </svg>
+                    </div>
+                    <h4 className="text-2xl font-semibold text-foreground">
+                      Our Mission
+                    </h4>
+                  </div>
+                  <div className="pl-15 space-y-4">
+                    <p className="text-muted-foreground leading-relaxed text-lg">
+                      To revolutionize the way Sri Lankan citizens interact with
+                      government services by providing a unified, accessible,
+                      and transparent digital platform that eliminates
+                      bureaucratic barriers and empowers every citizen with the
+                      tools they need to access public services efficiently.
+                    </p>
+                    <div className="bg-gradient-to-r from-[#FFC72C]/10 via-[#FF5722]/10 to-[#8D153A]/10 p-6 rounded-xl border border-border/30">
+                      <h5 className="font-semibold mb-3 text-foreground">
+                        Core Commitments:
+                      </h5>
+                      <div className="space-y-2">
+                        <div className="flex items-start gap-3">
+                          <div className="w-5 h-5 bg-gradient-to-r from-[#FFC72C] to-[#FF5722] rounded-full flex items-center justify-center text-white text-xs font-bold flex-shrink-0 mt-0.5">
+                            ✓
+                          </div>
+                          <span className="text-muted-foreground text-sm">
+                            Simplify access to government services for all
+                            citizens
+                          </span>
+                        </div>
+                        <div className="flex items-start gap-3">
+                          <div className="w-5 h-5 bg-gradient-to-r from-[#008060] to-[#FFC72C] rounded-full flex items-center justify-center text-white text-xs font-bold flex-shrink-0 mt-0.5">
+                            ✓
+                          </div>
+                          <span className="text-muted-foreground text-sm">
+                            Ensure equal access regardless of location,
+                            language, or technical expertise
+                          </span>
+                        </div>
+                        <div className="flex items-start gap-3">
+                          <div className="w-5 h-5 bg-gradient-to-r from-[#FF5722] to-[#8D153A] rounded-full flex items-center justify-center text-white text-xs font-bold flex-shrink-0 mt-0.5">
+                            ✓
+                          </div>
+                          <span className="text-muted-foreground text-sm">
+                            Maintain the highest standards of security and
+                            privacy
+                          </span>
+                        </div>
+                        <div className="flex items-start gap-3">
+                          <div className="w-5 h-5 bg-gradient-to-r from-[#8D153A] to-[#FFC72C] rounded-full flex items-center justify-center text-white text-xs font-bold flex-shrink-0 mt-0.5">
+                            ✓
+                          </div>
+                          <span className="text-muted-foreground text-sm">
+                            Continuously innovate to improve service delivery
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <div>
+                  <div className="flex items-center gap-3 mb-4">
+                    <div className="w-12 h-12 bg-gradient-to-r from-[#008060] to-[#FFC72C] rounded-xl flex items-center justify-center">
+                      <svg
+                        className="w-6 h-6 text-white"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                        />
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+                        />
+                      </svg>
+                    </div>
+                    <h4 className="text-2xl font-semibold text-foreground">
+                      Our Vision
+                    </h4>
+                  </div>
+                  <div className="pl-15 space-y-4">
+                    <p className="text-muted-foreground leading-relaxed text-lg">
+                      To become the leading digital government platform in South
+                      Asia, setting the standard for citizen-centric public
+                      service delivery and inspiring digital transformation
+                      across the region.
+                    </p>
+                    <div className="bg-gradient-to-r from-[#008060]/10 via-[#FFC72C]/10 to-[#FF5722]/10 p-6 rounded-xl border border-border/30">
+                      <h5 className="font-semibold mb-3 text-foreground">
+                        By 2030, we envision:
+                      </h5>
+                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                        <div className="space-y-3">
+                          <div className="flex items-start gap-3">
+                            <div className="w-6 h-6 bg-gradient-to-r from-[#FFC72C] to-[#FF5722] rounded-full flex items-center justify-center text-white text-xs font-bold flex-shrink-0 mt-1">
+                              🌟
+                            </div>
+                            <div>
+                              <div className="font-semibold text-sm mb-1">
+                                100% Digital Coverage
+                              </div>
+                              <div className="text-xs text-muted-foreground">
+                                All government services accessible digitally
+                              </div>
+                            </div>
+                          </div>
+                          <div className="flex items-start gap-3">
+                            <div className="w-6 h-6 bg-gradient-to-r from-[#008060] to-[#FFC72C] rounded-full flex items-center justify-center text-white text-xs font-bold flex-shrink-0 mt-1">
+                              🎯
+                            </div>
+                            <div>
+                              <div className="font-semibold text-sm mb-1">
+                                Zero Paperwork
+                              </div>
+                              <div className="text-xs text-muted-foreground">
+                                Completely paperless government processes
+                              </div>
+                            </div>
+                          </div>
+                          <div className="flex items-start gap-3">
+                            <div className="w-6 h-6 bg-gradient-to-r from-[#FF5722] to-[#8D153A] rounded-full flex items-center justify-center text-white text-xs font-bold flex-shrink-0 mt-1">
+                              ⚡
+                            </div>
+                            <div>
+                              <div className="font-semibold text-sm mb-1">
+                                Instant Processing
+                              </div>
+                              <div className="text-xs text-muted-foreground">
+                                Real-time service delivery for all requests
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div className="space-y-3">
+                          <div className="flex items-start gap-3">
+                            <div className="w-6 h-6 bg-gradient-to-r from-[#8D153A] to-[#FFC72C] rounded-full flex items-center justify-center text-white text-xs font-bold flex-shrink-0 mt-1">
+                              🌍
+                            </div>
+                            <div>
+                              <div className="font-semibold text-sm mb-1">
+                                Regional Leadership
+                              </div>
+                              <div className="text-xs text-muted-foreground">
+                                Benchmark for digital governance in South Asia
+                              </div>
+                            </div>
+                          </div>
+                          <div className="flex items-start gap-3">
+                            <div className="w-6 h-6 bg-gradient-to-r from-[#FFC72C] to-[#008060] rounded-full flex items-center justify-center text-white text-xs font-bold flex-shrink-0 mt-1">
+                              🤝
+                            </div>
+                            <div>
+                              <div className="font-semibold text-sm mb-1">
+                                Complete Integration
+                              </div>
+                              <div className="text-xs text-muted-foreground">
+                                Seamless inter-department connectivity
+                              </div>
+                            </div>
+                          </div>
+                          <div className="flex items-start gap-3">
+                            <div className="w-6 h-6 bg-gradient-to-r from-[#008060] to-[#FF5722] rounded-full flex items-center justify-center text-white text-xs font-bold flex-shrink-0 mt-1">
+                              💡
+                            </div>
+                            <div>
+                              <div className="font-semibold text-sm mb-1">
+                                AI-Powered Services
+                              </div>
+                              <div className="text-xs text-muted-foreground">
+                                Intelligent automation for enhanced UX
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <div>
+                  <div className="flex items-center gap-3 mb-4">
+                    <div className="w-12 h-12 bg-gradient-to-r from-[#FF5722] to-[#8D153A] rounded-xl flex items-center justify-center">
+                      <svg
+                        className="w-6 h-6 text-white"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
+                        />
+                      </svg>
+                    </div>
+                    <h4 className="text-2xl font-semibold text-foreground">
+                      Our Values
+                    </h4>
+                  </div>
+                  <div className="pl-15">
+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                      <div className="p-4 bg-background/50 rounded-lg border border-border/30">
+                        <div className="text-center mb-3">
+                          <div className="w-10 h-10 bg-gradient-to-r from-[#FFC72C] to-[#FF5722] rounded-full flex items-center justify-center mx-auto mb-2">
+                            <span className="text-white text-lg">🎯</span>
+                          </div>
+                          <h5 className="font-semibold text-sm">
+                            Transparency
+                          </h5>
+                        </div>
+                        <p className="text-xs text-muted-foreground text-center leading-relaxed">
+                          Open, honest communication and clear processes that
+                          citizens can trust and understand.
+                        </p>
+                      </div>
+
+                      <div className="p-4 bg-background/50 rounded-lg border border-border/30">
+                        <div className="text-center mb-3">
+                          <div className="w-10 h-10 bg-gradient-to-r from-[#008060] to-[#FFC72C] rounded-full flex items-center justify-center mx-auto mb-2">
+                            <span className="text-white text-lg">⚡</span>
+                          </div>
+                          <h5 className="font-semibold text-sm">Excellence</h5>
+                        </div>
+                        <p className="text-xs text-muted-foreground text-center leading-relaxed">
+                          Commitment to the highest quality standards in every
+                          service we deliver to citizens.
+                        </p>
+                      </div>
+
+                      <div className="p-4 bg-background/50 rounded-lg border border-border/30">
+                        <div className="text-center mb-3">
+                          <div className="w-10 h-10 bg-gradient-to-r from-[#FF5722] to-[#8D153A] rounded-full flex items-center justify-center mx-auto mb-2">
+                            <span className="text-white text-lg">🤝</span>
+                          </div>
+                          <h5 className="font-semibold text-sm">Inclusivity</h5>
+                        </div>
+                        <p className="text-xs text-muted-foreground text-center leading-relaxed">
+                          Ensuring equal access and opportunity for all Sri
+                          Lankans, regardless of background.
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
-      </div>
-    </div>
-  </section>
+      )}
+    </section>
   );
 };
 
 // --- CONTACT SECTION ---
 const Contact = ({ language }: { language: Language }) => {
   const t = translations[language];
-  
+
   return (
-  <section id="contact" className="py-16 sm:py-20 relative">
-    <div className="container mx-auto px-4 sm:px-6 relative z-10">
-      <div className="max-w-6xl mx-auto">
-        {/* Enhanced Section Header */}
-        <div className="text-center mb-12 animate-fade-in-up">
-          <div className="inline-flex items-center gap-2 bg-card/90 dark:bg-card/95 backdrop-blur-md px-4 py-2 rounded-full border border-border/50 mb-4 modern-card">
-            <LotusIcon className="w-4 h-4" />
-            <span className="text-xs sm:text-sm font-medium text-foreground">Get in Touch</span>
-          </div>
-          
-          <h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold mb-4 sm:mb-6 leading-tight">
-            <span className="block text-foreground mb-1">{t.contactTitle1}</span>
-            <span className="block text-gradient">{t.contactTitle2}</span>
-          </h2>
-          
-          <p className="text-base sm:text-lg md:text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
-            {t.contactDescription}
-          </p>
-        </div>
-        
-        {/* Enhanced Contact Grid */}
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 sm:gap-6 lg:gap-8 mb-12">
-          {/* Phone */}
-          <div className="group text-center p-6 sm:p-8 bg-card/90 dark:bg-card/95 backdrop-blur-md rounded-xl border border-border/50 hover:border-[#FFC72C]/70 hover:shadow-2xl transition-all duration-500 modern-card hover-lift">
-            <div className="w-14 h-14 sm:w-16 sm:h-16 bg-gradient-to-r from-[#FFC72C] via-[#FF5722] to-[#8D153A] rounded-xl flex items-center justify-center mx-auto mb-4 transition-transform duration-300 group-hover:scale-110 group-hover:rotate-6 shadow-lg">
-              <Phone className="w-5 h-5 sm:w-6 sm:h-6 text-white" />
+    <section id="contact" className="py-16 sm:py-20 relative">
+      <div className="container mx-auto px-4 sm:px-6 relative z-10">
+        <div className="max-w-6xl mx-auto">
+          {/* Enhanced Section Header */}
+          <div className="text-center mb-12 animate-fade-in-up">
+            <div className="inline-flex items-center gap-2 bg-card/90 dark:bg-card/95 backdrop-blur-md px-4 py-2 rounded-full border border-border/50 mb-4 modern-card">
+              <LotusIcon className="w-4 h-4" />
+              <span className="text-xs sm:text-sm font-medium text-foreground">
+                Get in Touch
+              </span>
             </div>
-            <h3 className="font-semibold mb-2 group-hover:text-[#FFC72C] transition-colors duration-300">{t.contactMethods.phone.title}</h3>
-            <p className="text-muted-foreground mb-2 font-mono text-sm sm:text-base">{t.contactMethods.phone.number}</p>
-            <p className="text-xs sm:text-sm text-muted-foreground">{t.contactMethods.phone.hours}</p>
+
+            <h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold mb-4 sm:mb-6 leading-tight">
+              <span className="block text-foreground mb-1">
+                {t.contactTitle1}
+              </span>
+              <span className="block text-gradient">{t.contactTitle2}</span>
+            </h2>
+
+            <p className="text-base sm:text-lg md:text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
+              {t.contactDescription}
+            </p>
           </div>
-          
-          {/* Email */}
-          <div className="group text-center p-6 sm:p-8 bg-card/90 dark:bg-card/95 backdrop-blur-md rounded-xl border border-border/50 hover:border-[#008060]/70 hover:shadow-2xl transition-all duration-500 modern-card hover-lift">
-            <div className="w-14 h-14 sm:w-16 sm:h-16 bg-gradient-to-r from-[#008060] via-[#FFC72C] to-[#FF5722] rounded-xl flex items-center justify-center mx-auto mb-4 transition-transform duration-300 group-hover:scale-110 group-hover:rotate-6 shadow-lg">
-              <Mail className="w-5 h-5 sm:w-6 sm:h-6 text-white" />
+
+          {/* Enhanced Contact Grid */}
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 sm:gap-6 lg:gap-8 mb-12">
+            {/* Phone */}
+            <div className="group text-center p-6 sm:p-8 bg-card/90 dark:bg-card/95 backdrop-blur-md rounded-xl border border-border/50 hover:border-[#FFC72C]/70 hover:shadow-2xl transition-all duration-500 modern-card hover-lift">
+              <div className="w-14 h-14 sm:w-16 sm:h-16 bg-gradient-to-r from-[#FFC72C] via-[#FF5722] to-[#8D153A] rounded-xl flex items-center justify-center mx-auto mb-4 transition-transform duration-300 group-hover:scale-110 group-hover:rotate-6 shadow-lg">
+                <Phone className="w-5 h-5 sm:w-6 sm:h-6 text-white" />
+              </div>
+              <h3 className="font-semibold mb-2 group-hover:text-[#FFC72C] transition-colors duration-300">
+                {t.contactMethods.phone.title}
+              </h3>
+              <p className="text-muted-foreground mb-2 font-mono text-sm sm:text-base">
+                {t.contactMethods.phone.number}
+              </p>
+              <p className="text-xs sm:text-sm text-muted-foreground">
+                {t.contactMethods.phone.hours}
+              </p>
             </div>
-            <h3 className="font-semibold mb-2 group-hover:text-[#008060] transition-colors duration-300">{t.contactMethods.email.title}</h3>
-            <p className="text-muted-foreground mb-2 font-mono text-sm sm:text-base">{t.contactMethods.email.address}</p>
-            <p className="text-xs sm:text-sm text-muted-foreground">{t.contactMethods.email.availability}</p>
-          </div>
-          
-          {/* Location */}
-          <div className="group text-center p-6 sm:p-8 bg-card/90 dark:bg-card/95 backdrop-blur-md rounded-xl border border-border/50 hover:border-[#FF5722]/70 hover:shadow-2xl transition-all duration-500 modern-card hover-lift">
-            <div className="w-14 h-14 sm:w-16 sm:h-16 bg-gradient-to-r from-[#FF5722] via-[#8D153A] to-[#FFC72C] rounded-xl flex items-center justify-center mx-auto mb-4 transition-transform duration-300 group-hover:scale-110 group-hover:rotate-6 shadow-lg">
-              <MapPin className="w-5 h-5 sm:w-6 sm:h-6 text-white" />
+
+            {/* Email */}
+            <div className="group text-center p-6 sm:p-8 bg-card/90 dark:bg-card/95 backdrop-blur-md rounded-xl border border-border/50 hover:border-[#008060]/70 hover:shadow-2xl transition-all duration-500 modern-card hover-lift">
+              <div className="w-14 h-14 sm:w-16 sm:h-16 bg-gradient-to-r from-[#008060] via-[#FFC72C] to-[#FF5722] rounded-xl flex items-center justify-center mx-auto mb-4 transition-transform duration-300 group-hover:scale-110 group-hover:rotate-6 shadow-lg">
+                <Mail className="w-5 h-5 sm:w-6 sm:h-6 text-white" />
+              </div>
+              <h3 className="font-semibold mb-2 group-hover:text-[#008060] transition-colors duration-300">
+                {t.contactMethods.email.title}
+              </h3>
+              <p className="text-muted-foreground mb-2 font-mono text-sm sm:text-base">
+                {t.contactMethods.email.address}
+              </p>
+              <p className="text-xs sm:text-sm text-muted-foreground">
+                {t.contactMethods.email.availability}
+              </p>
             </div>
-            <h3 className="font-semibold mb-2 group-hover:text-[#FF5722] transition-colors duration-300">{t.contactMethods.location.title}</h3>
-            <p className="text-muted-foreground mb-2 text-sm sm:text-base">{t.contactMethods.location.address}</p>
-            <p className="text-xs sm:text-sm text-muted-foreground">{t.contactMethods.location.description}</p>
-          </div>
-        </div>
-        
-        {/* Enhanced FAQ Section */}
-        <div className="bg-card/90 dark:bg-card/95 backdrop-blur-md rounded-2xl p-6 sm:p-8 border border-border/50 modern-card">
-          <div className="text-center mb-8">
-            <div className="inline-flex items-center gap-2 bg-gradient-to-r from-[#FFC72C]/10 via-[#FF5722]/10 to-[#8D153A]/10 px-4 py-2 rounded-full border border-border/30 mb-4">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-[#FF5722]">
-                <circle cx="12" cy="12" r="10"/>
-                <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/>
-                <path d="M12 17h.01"/>
-              </svg>
-              <span className="text-xs sm:text-sm font-medium text-foreground">FAQ</span>
+
+            {/* Location */}
+            <div className="group text-center p-6 sm:p-8 bg-card/90 dark:bg-card/95 backdrop-blur-md rounded-xl border border-border/50 hover:border-[#FF5722]/70 hover:shadow-2xl transition-all duration-500 modern-card hover-lift">
+              <div className="w-14 h-14 sm:w-16 sm:h-16 bg-gradient-to-r from-[#FF5722] via-[#8D153A] to-[#FFC72C] rounded-xl flex items-center justify-center mx-auto mb-4 transition-transform duration-300 group-hover:scale-110 group-hover:rotate-6 shadow-lg">
+                <MapPin className="w-5 h-5 sm:w-6 sm:h-6 text-white" />
+              </div>
+              <h3 className="font-semibold mb-2 group-hover:text-[#FF5722] transition-colors duration-300">
+                {t.contactMethods.location.title}
+              </h3>
+              <p className="text-muted-foreground mb-2 text-sm sm:text-base">
+                {t.contactMethods.location.address}
+              </p>
+              <p className="text-xs sm:text-sm text-muted-foreground">
+                {t.contactMethods.location.description}
+              </p>
             </div>
-            <h3 className="text-xl sm:text-2xl font-bold text-gradient">{t.faq.title}</h3>
           </div>
-          
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6">
-            <div className="group p-4 sm:p-6 bg-background/50 dark:bg-background/30 rounded-xl border border-border/30 hover:border-[#FFC72C]/50 transition-all duration-300 hover:shadow-lg">
-              <div className="flex items-start gap-3 mb-3">
-                <div className="w-6 h-6 bg-gradient-to-r from-[#FFC72C] to-[#FF5722] rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
-                  <span className="text-white text-xs font-bold">Q</span>
-                </div>
-                <h4 className="font-semibold text-sm sm:text-base group-hover:text-[#FFC72C] transition-colors duration-300">{t.faq.questions.forms.question}</h4>
-              </div>
-              <div className="flex items-start gap-3">
-                <div className="w-6 h-6 bg-gradient-to-r from-[#008060] to-[#FFC72C] rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
-                  <span className="text-white text-xs font-bold">A</span>
-                </div>
-                <p className="text-muted-foreground text-sm leading-relaxed">{t.faq.questions.forms.answer}</p>
+
+          {/* Enhanced FAQ Section */}
+          <div className="bg-card/90 dark:bg-card/95 backdrop-blur-md rounded-2xl p-6 sm:p-8 border border-border/50 modern-card">
+            <div className="text-center mb-8">
+              <div className="inline-flex items-center gap-2 bg-gradient-to-r from-[#FFC72C]/10 via-[#FF5722]/10 to-[#8D153A]/10 px-4 py-2 rounded-full border border-border/30 mb-4">
+                <svg
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  className="text-[#FF5722]"
+                >
+                  <circle cx="12" cy="12" r="10" />
+                  <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
+                  <path d="M12 17h.01" />
+                </svg>
+                <span className="text-xs sm:text-sm font-medium text-foreground">
+                  FAQ
+                </span>
               </div>
+              <h3 className="text-xl sm:text-2xl font-bold text-gradient">
+                {t.faq.title}
+              </h3>
             </div>
-            
-            <div className="group p-4 sm:p-6 bg-background/50 dark:bg-background/30 rounded-xl border border-border/30 hover:border-[#008060]/50 transition-all duration-300 hover:shadow-lg">
-              <div className="flex items-start gap-3 mb-3">
-                <div className="w-6 h-6 bg-gradient-to-r from-[#FFC72C] to-[#FF5722] rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
-                  <span className="text-white text-xs font-bold">Q</span>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6">
+              <div className="group p-4 sm:p-6 bg-background/50 dark:bg-background/30 rounded-xl border border-border/30 hover:border-[#FFC72C]/50 transition-all duration-300 hover:shadow-lg">
+                <div className="flex items-start gap-3 mb-3">
+                  <div className="w-6 h-6 bg-gradient-to-r from-[#FFC72C] to-[#FF5722] rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
+                    <span className="text-white text-xs font-bold">Q</span>
+                  </div>
+                  <h4 className="font-semibold text-sm sm:text-base group-hover:text-[#FFC72C] transition-colors duration-300">
+                    {t.faq.questions.forms.question}
+                  </h4>
                 </div>
-                <h4 className="font-semibold text-sm sm:text-base group-hover:text-[#008060] transition-colors duration-300">{t.faq.questions.official.question}</h4>
-              </div>
-              <div className="flex items-start gap-3">
-                <div className="w-6 h-6 bg-gradient-to-r from-[#008060] to-[#FFC72C] rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
-                  <span className="text-white text-xs font-bold">A</span>
+                <div className="flex items-start gap-3">
+                  <div className="w-6 h-6 bg-gradient-to-r from-[#008060] to-[#FFC72C] rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
+                    <span className="text-white text-xs font-bold">A</span>
+                  </div>
+                  <p className="text-muted-foreground text-sm leading-relaxed">
+                    {t.faq.questions.forms.answer}
+                  </p>
                 </div>
-                <p className="text-muted-foreground text-sm leading-relaxed">{t.faq.questions.official.answer}</p>
               </div>
-            </div>
-            
-            <div className="group p-4 sm:p-6 bg-background/50 dark:bg-background/30 rounded-xl border border-border/30 hover:border-[#FF5722]/50 transition-all duration-300 hover:shadow-lg">
-              <div className="flex items-start gap-3 mb-3">
-                <div className="w-6 h-6 bg-gradient-to-r from-[#FFC72C] to-[#FF5722] rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
-                  <span className="text-white text-xs font-bold">Q</span>
+
+              <div className="group p-4 sm:p-6 bg-background/50 dark:bg-background/30 rounded-xl border border-border/30 hover:border-[#008060]/50 transition-all duration-300 hover:shadow-lg">
+                <div className="flex items-start gap-3 mb-3">
+                  <div className="w-6 h-6 bg-gradient-to-r from-[#FFC72C] to-[#FF5722] rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
+                    <span className="text-white text-xs font-bold">Q</span>
+                  </div>
+                  <h4 className="font-semibold text-sm sm:text-base group-hover:text-[#008060] transition-colors duration-300">
+                    {t.faq.questions.official.question}
+                  </h4>
                 </div>
-                <h4 className="font-semibold text-sm sm:text-base group-hover:text-[#FF5722] transition-colors duration-300">{t.faq.questions.tracking.question}</h4>
-              </div>
-              <div className="flex items-start gap-3">
-                <div className="w-6 h-6 bg-gradient-to-r from-[#008060] to-[#FFC72C] rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
-                  <span className="text-white text-xs font-bold">A</span>
+                <div className="flex items-start gap-3">
+                  <div className="w-6 h-6 bg-gradient-to-r from-[#008060] to-[#FFC72C] rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
+                    <span className="text-white text-xs font-bold">A</span>
+                  </div>
+                  <p className="text-muted-foreground text-sm leading-relaxed">
+                    {t.faq.questions.official.answer}
+                  </p>
                 </div>
-                <p className="text-muted-foreground text-sm leading-relaxed">{t.faq.questions.tracking.answer}</p>
               </div>
-            </div>
-            
-            <div className="group p-4 sm:p-6 bg-background/50 dark:bg-background/30 rounded-xl border border-border/30 hover:border-[#8D153A]/50 transition-all duration-300 hover:shadow-lg">
-              <div className="flex items-start gap-3 mb-3">
-                <div className="w-6 h-6 bg-gradient-to-r from-[#FFC72C] to-[#FF5722] rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
-                  <span className="text-white text-xs font-bold">Q</span>
+
+              <div className="group p-4 sm:p-6 bg-background/50 dark:bg-background/30 rounded-xl border border-border/30 hover:border-[#FF5722]/50 transition-all duration-300 hover:shadow-lg">
+                <div className="flex items-start gap-3 mb-3">
+                  <div className="w-6 h-6 bg-gradient-to-r from-[#FFC72C] to-[#FF5722] rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
+                    <span className="text-white text-xs font-bold">Q</span>
+                  </div>
+                  <h4 className="font-semibold text-sm sm:text-base group-hover:text-[#FF5722] transition-colors duration-300">
+                    {t.faq.questions.tracking.question}
+                  </h4>
+                </div>
+                <div className="flex items-start gap-3">
+                  <div className="w-6 h-6 bg-gradient-to-r from-[#008060] to-[#FFC72C] rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
+                    <span className="text-white text-xs font-bold">A</span>
+                  </div>
+                  <p className="text-muted-foreground text-sm leading-relaxed">
+                    {t.faq.questions.tracking.answer}
+                  </p>
                 </div>
-                <h4 className="font-semibold text-sm sm:text-base group-hover:text-[#8D153A] transition-colors duration-300">{t.faq.questions.support.question}</h4>
               </div>
-              <div className="flex items-start gap-3">
-                <div className="w-6 h-6 bg-gradient-to-r from-[#008060] to-[#FFC72C] rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
-                  <span className="text-white text-xs font-bold">A</span>
+
+              <div className="group p-4 sm:p-6 bg-background/50 dark:bg-background/30 rounded-xl border border-border/30 hover:border-[#8D153A]/50 transition-all duration-300 hover:shadow-lg">
+                <div className="flex items-start gap-3 mb-3">
+                  <div className="w-6 h-6 bg-gradient-to-r from-[#FFC72C] to-[#FF5722] rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
+                    <span className="text-white text-xs font-bold">Q</span>
+                  </div>
+                  <h4 className="font-semibold text-sm sm:text-base group-hover:text-[#8D153A] transition-colors duration-300">
+                    {t.faq.questions.support.question}
+                  </h4>
+                </div>
+                <div className="flex items-start gap-3">
+                  <div className="w-6 h-6 bg-gradient-to-r from-[#008060] to-[#FFC72C] rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
+                    <span className="text-white text-xs font-bold">A</span>
+                  </div>
+                  <p className="text-muted-foreground text-sm leading-relaxed">
+                    {t.faq.questions.support.answer}
+                  </p>
                 </div>
-                <p className="text-muted-foreground text-sm leading-relaxed">{t.faq.questions.support.answer}</p>
               </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-  </section>
+    </section>
   );
 };
 
 // --- ENHANCED PREMIUM FOOTER WITH ADAPTIVE BACKGROUND ---
 const Footer = ({ language }: { language: Language }) => {
   const t = translations[language];
-  
+
   return (
-  <footer className="relative py-16 sm:py-20 mt-20">
-    {/* Adaptive Background Layers */}
-    <div className="absolute inset-0">
-      {/* Base gradient - subtle and theme-aware */}
-      <div className="absolute inset-0 bg-gradient-to-t from-muted/20 via-muted/10 to-transparent"></div>
-      
-      {/* Secondary gradient for depth */}
-      <div className="absolute inset-0 bg-gradient-to-br from-accent/15 via-transparent to-accent/10"></div>
-      
-      {/* Subtle accent dots - only visible on hover areas */}
-      <div className="absolute top-1/4 right-1/4 w-32 h-32 bg-primary/5 dark:bg-primary/3 rounded-full blur-3xl opacity-50"></div>
-      <div className="absolute bottom-1/4 left-1/4 w-40 h-40 bg-secondary/10 dark:bg-secondary/5 rounded-full blur-3xl opacity-40"></div>
-    </div>
-    
-    <div className="container mx-auto px-4 sm:px-6 relative z-10">
-      {/* Main Footer Content */}
-      <div className="grid grid-cols-1 md:grid-cols-4 gap-8 lg:gap-12 mb-12">
-        {/* Enhanced Brand Section */}
-        <div className="md:col-span-2">
-          <div className="flex items-center space-x-4 mb-6">
-            <div className="relative">
-              <LotusIcon className="w-14 h-14 sm:w-16 sm:h-16 transition-transform duration-300 hover:scale-110" />
-              <div className="absolute inset-0 bg-gradient-to-r from-primary/10 to-accent/10 rounded-full blur-xl animate-pulse opacity-50" style={{animationDuration: '4s'}}></div>
-            </div>
-            <div>
-              <h3 className="text-2xl sm:text-3xl font-bold text-gradient mb-1">GovLink</h3>
-              <p className="text-xs sm:text-sm text-muted-foreground font-medium">Sri Lanka • ශ්‍රී ලංකා • இலங்கை</p>
-              <div className="flex items-center gap-2 mt-1">
-                <div className="w-1.5 h-1.5 bg-green-500 rounded-full animate-pulse"></div>
-                <span className="text-xs text-green-600 dark:text-green-400">Online & Serving</span>
+    <footer className="relative py-16 sm:py-20 mt-20">
+      {/* Adaptive Background Layers */}
+      <div className="absolute inset-0">
+        {/* Base gradient - subtle and theme-aware */}
+        <div className="absolute inset-0 bg-gradient-to-t from-muted/20 via-muted/10 to-transparent"></div>
+
+        {/* Secondary gradient for depth */}
+        <div className="absolute inset-0 bg-gradient-to-br from-accent/15 via-transparent to-accent/10"></div>
+
+        {/* Subtle accent dots - only visible on hover areas */}
+        <div className="absolute top-1/4 right-1/4 w-32 h-32 bg-primary/5 dark:bg-primary/3 rounded-full blur-3xl opacity-50"></div>
+        <div className="absolute bottom-1/4 left-1/4 w-40 h-40 bg-secondary/10 dark:bg-secondary/5 rounded-full blur-3xl opacity-40"></div>
+      </div>
+
+      <div className="container mx-auto px-4 sm:px-6 relative z-10">
+        {/* Main Footer Content */}
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-8 lg:gap-12 mb-12">
+          {/* Enhanced Brand Section */}
+          <div className="md:col-span-2">
+            <div className="flex items-center space-x-4 mb-6">
+              <div className="relative">
+                <LotusIcon className="w-14 h-14 sm:w-16 sm:h-16 transition-transform duration-300 hover:scale-110" />
+                <div
+                  className="absolute inset-0 bg-gradient-to-r from-primary/10 to-accent/10 rounded-full blur-xl animate-pulse opacity-50"
+                  style={{ animationDuration: "4s" }}
+                ></div>
+              </div>
+              <div>
+                <h3 className="text-2xl sm:text-3xl font-bold text-gradient mb-1">
+                  GovLink
+                </h3>
+                <p className="text-xs sm:text-sm text-muted-foreground font-medium">
+                  Sri Lanka • ශ්‍රී ලංකා • இலங்கை
+                </p>
+                <div className="flex items-center gap-2 mt-1">
+                  <div className="w-1.5 h-1.5 bg-green-500 rounded-full animate-pulse"></div>
+                  <span className="text-xs text-green-600 dark:text-green-400">
+                    Online & Serving
+                  </span>
+                </div>
               </div>
             </div>
-          </div>
-          <p className="text-muted-foreground leading-relaxed mb-6 max-w-md text-sm sm:text-base">
-            {t.footer.description}
-          </p>
-          
-          {/* Enhanced Social Links */}
-          <div className="flex gap-3 mb-6">
-            <button className="group w-11 h-11 rounded-xl bg-card/80 dark:bg-card/60 border border-border/50 hover:border-[#1877F2]/50 hover:bg-[#1877F2]/10 flex items-center justify-center transition-all duration-300 hover:scale-110 modern-card" aria-label="Follow on Facebook">
-              <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" className="text-muted-foreground group-hover:text-[#1877F2] transition-colors duration-300">
-                <path d="M22 12.06C22 6.5 17.52 2 12 2S2 6.5 2 12.06C2 17.08 5.66 21.21 10.44 22v-7.03H7.9v-2.91h2.54V9.41c0-2.5 1.49-3.88 3.77-3.88 1.09 0 2.23.2 2.23.2v2.46h-1.26c-1.24 0-1.63.77-1.63 1.56v1.87h2.77l-.44 2.91h-2.33V22C18.34 21.21 22 17.08 22 12.06z"/>
-              </svg>
-            </button>
-            <button className="group w-11 h-11 rounded-xl bg-card/80 dark:bg-card/60 border border-border/50 hover:border-[#1DA1F2]/50 hover:bg-[#1DA1F2]/10 flex items-center justify-center transition-all duration-300 hover:scale-110 modern-card" aria-label="Follow on X">
-              <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" className="text-muted-foreground group-hover:text-[#1DA1F2] transition-colors duration-300">
-                <path d="M18.244 2H21l-6.5 7.43L22 22h-6.828l-4.78-6.24L4.8 22H2l7.02-8.02L2 2h6.914l4.33 5.77L18.244 2Zm-1.196 18h1.884L7.07 4H5.092l11.956 16Z"/>
-              </svg>
-            </button>
-            <button className="group w-11 h-11 rounded-xl bg-card/80 dark:bg-card/60 border border-border/50 hover:border-[#0A66C2]/50 hover:bg-[#0A66C2]/10 flex items-center justify-center transition-all duration-300 hover:scale-110 modern-card" aria-label="Connect on LinkedIn">
-              <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" className="text-muted-foreground group-hover:text-[#0A66C2] transition-colors duration-300">
-                <path d="M20.447 20.452H17.2v-5.569c0-1.328-.027-3.036-1.85-3.036-1.853 0-2.136 1.445-2.136 2.94v5.665H9.07V9h3.116v1.561h.045c.435-.824 1.498-1.692 3.083-1.692 3.298 0 3.906 2.171 3.906 4.995v6.588zM5.337 7.433a1.81 1.81 0 1 1 0-3.62 1.81 1.81 0 0 1 0 3.62zM6.96 20.452H3.71V9h3.25v11.452z"/>
-              </svg>
-            </button>
-          </div>
-          
-          {/* Quick Stats with Flexible Heights */}
-          <div className="grid grid-cols-3 gap-3 sm:gap-4">
-            <div className="text-center p-2 sm:p-3 bg-card/60 dark:bg-card/40 rounded-lg border border-border/30 backdrop-blur-sm min-h-[60px] sm:min-h-[70px] flex flex-col justify-center">
-              <div className="text-sm sm:text-base font-bold text-gradient mb-1 flex-shrink-0">50K+</div>
-              <div className="text-xs text-muted-foreground leading-tight break-words hyphens-auto">{t.aboutStats.users}</div>
-            </div>
-            <div className="text-center p-2 sm:p-3 bg-card/60 dark:bg-card/40 rounded-lg border border-border/30 backdrop-blur-sm min-h-[60px] sm:min-h-[70px] flex flex-col justify-center">
-              <div className="text-sm sm:text-base font-bold text-gradient mb-1 flex-shrink-0">99.8%</div>
-              <div className="text-xs text-muted-foreground leading-tight break-words hyphens-auto">{t.aboutStats.uptime}</div>
+            <p className="text-muted-foreground leading-relaxed mb-6 max-w-md text-sm sm:text-base">
+              {t.footer.description}
+            </p>
+
+            {/* Enhanced Social Links */}
+            <div className="flex gap-3 mb-6">
+              <button
+                className="group w-11 h-11 rounded-xl bg-card/80 dark:bg-card/60 border border-border/50 hover:border-[#1877F2]/50 hover:bg-[#1877F2]/10 flex items-center justify-center transition-all duration-300 hover:scale-110 modern-card"
+                aria-label="Follow on Facebook"
+              >
+                <svg
+                  width="18"
+                  height="18"
+                  viewBox="0 0 24 24"
+                  fill="currentColor"
+                  className="text-muted-foreground group-hover:text-[#1877F2] transition-colors duration-300"
+                >
+                  <path d="M22 12.06C22 6.5 17.52 2 12 2S2 6.5 2 12.06C2 17.08 5.66 21.21 10.44 22v-7.03H7.9v-2.91h2.54V9.41c0-2.5 1.49-3.88 3.77-3.88 1.09 0 2.23.2 2.23.2v2.46h-1.26c-1.24 0-1.63.77-1.63 1.56v1.87h2.77l-.44 2.91h-2.33V22C18.34 21.21 22 17.08 22 12.06z" />
+                </svg>
+              </button>
+              <button
+                className="group w-11 h-11 rounded-xl bg-card/80 dark:bg-card/60 border border-border/50 hover:border-[#1DA1F2]/50 hover:bg-[#1DA1F2]/10 flex items-center justify-center transition-all duration-300 hover:scale-110 modern-card"
+                aria-label="Follow on X"
+              >
+                <svg
+                  width="18"
+                  height="18"
+                  viewBox="0 0 24 24"
+                  fill="currentColor"
+                  className="text-muted-foreground group-hover:text-[#1DA1F2] transition-colors duration-300"
+                >
+                  <path d="M18.244 2H21l-6.5 7.43L22 22h-6.828l-4.78-6.24L4.8 22H2l7.02-8.02L2 2h6.914l4.33 5.77L18.244 2Zm-1.196 18h1.884L7.07 4H5.092l11.956 16Z" />
+                </svg>
+              </button>
+              <button
+                className="group w-11 h-11 rounded-xl bg-card/80 dark:bg-card/60 border border-border/50 hover:border-[#0A66C2]/50 hover:bg-[#0A66C2]/10 flex items-center justify-center transition-all duration-300 hover:scale-110 modern-card"
+                aria-label="Connect on LinkedIn"
+              >
+                <svg
+                  width="18"
+                  height="18"
+                  viewBox="0 0 24 24"
+                  fill="currentColor"
+                  className="text-muted-foreground group-hover:text-[#0A66C2] transition-colors duration-300"
+                >
+                  <path d="M20.447 20.452H17.2v-5.569c0-1.328-.027-3.036-1.85-3.036-1.853 0-2.136 1.445-2.136 2.94v5.665H9.07V9h3.116v1.561h.045c.435-.824 1.498-1.692 3.083-1.692 3.298 0 3.906 2.171 3.906 4.995v6.588zM5.337 7.433a1.81 1.81 0 1 1 0-3.62 1.81 1.81 0 0 1 0 3.62zM6.96 20.452H3.71V9h3.25v11.452z" />
+                </svg>
+              </button>
             </div>
-            <div className="text-center p-2 sm:p-3 bg-card/60 dark:bg-card/40 rounded-lg border border-border/30 backdrop-blur-sm min-h-[60px] sm:min-h-[70px] flex flex-col justify-center">
-              <div className="text-sm sm:text-base font-bold text-gradient mb-1 flex-shrink-0">24/7</div>
-              <div className="text-xs text-muted-foreground leading-tight break-words hyphens-auto">{t.aboutStats.support}</div>
+
+            {/* Quick Stats with Flexible Heights */}
+            <div className="grid grid-cols-3 gap-3 sm:gap-4">
+              <div className="text-center p-2 sm:p-3 bg-card/60 dark:bg-card/40 rounded-lg border border-border/30 backdrop-blur-sm min-h-[60px] sm:min-h-[70px] flex flex-col justify-center">
+                <div className="text-sm sm:text-base font-bold text-gradient mb-1 flex-shrink-0">
+                  50K+
+                </div>
+                <div className="text-xs text-muted-foreground leading-tight break-words hyphens-auto">
+                  {t.aboutStats.users}
+                </div>
+              </div>
+              <div className="text-center p-2 sm:p-3 bg-card/60 dark:bg-card/40 rounded-lg border border-border/30 backdrop-blur-sm min-h-[60px] sm:min-h-[70px] flex flex-col justify-center">
+                <div className="text-sm sm:text-base font-bold text-gradient mb-1 flex-shrink-0">
+                  99.8%
+                </div>
+                <div className="text-xs text-muted-foreground leading-tight break-words hyphens-auto">
+                  {t.aboutStats.uptime}
+                </div>
+              </div>
+              <div className="text-center p-2 sm:p-3 bg-card/60 dark:bg-card/40 rounded-lg border border-border/30 backdrop-blur-sm min-h-[60px] sm:min-h-[70px] flex flex-col justify-center">
+                <div className="text-sm sm:text-base font-bold text-gradient mb-1 flex-shrink-0">
+                  24/7
+                </div>
+                <div className="text-xs text-muted-foreground leading-tight break-words hyphens-auto">
+                  {t.aboutStats.support}
+                </div>
+              </div>
             </div>
           </div>
-        </div>
 
-        {/* Enhanced Quick Links */}
-        <div>
-          <h4 className="font-semibold mb-4 text-foreground flex items-center gap-2">
-            <div className="w-1 h-4 bg-gradient-to-b from-primary to-accent rounded-full"></div>
-            Quick Links
-          </h4>
-          <div className="space-y-2">
-            <a href="#services" className="group flex items-center gap-2 text-muted-foreground hover:text-primary transition-all duration-300 text-sm py-1">
-              <div className="w-1.5 h-1.5 bg-current rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
-              <span>{t.footer.quickLinks.services}</span>
-            </a>
-            <a href="#about" className="group flex items-center gap-2 text-muted-foreground hover:text-primary transition-all duration-300 text-sm py-1">
-              <div className="w-1.5 h-1.5 bg-current rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
-              <span>{t.footer.quickLinks.about}</span>
-            </a>
-            <a href="#contact" className="group flex items-center gap-2 text-muted-foreground hover:text-primary transition-all duration-300 text-sm py-1">
-              <div className="w-1.5 h-1.5 bg-current rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
-              <span>{t.footer.quickLinks.contact}</span>
-            </a>
-            <a href="#" className="group flex items-center gap-2 text-muted-foreground hover:text-primary transition-all duration-300 text-sm py-1">
-              <div className="w-1.5 h-1.5 bg-current rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
-              <span>{t.footer.quickLinks.help}</span>
-            </a>
+          {/* Enhanced Quick Links */}
+          <div>
+            <h4 className="font-semibold mb-4 text-foreground flex items-center gap-2">
+              <div className="w-1 h-4 bg-gradient-to-b from-primary to-accent rounded-full"></div>
+              Quick Links
+            </h4>
+            <div className="space-y-2">
+              <a
+                href="#services"
+                className="group flex items-center gap-2 text-muted-foreground hover:text-primary transition-all duration-300 text-sm py-1"
+              >
+                <div className="w-1.5 h-1.5 bg-current rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+                <span>{t.footer.quickLinks.services}</span>
+              </a>
+              <a
+                href="#about"
+                className="group flex items-center gap-2 text-muted-foreground hover:text-primary transition-all duration-300 text-sm py-1"
+              >
+                <div className="w-1.5 h-1.5 bg-current rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+                <span>{t.footer.quickLinks.about}</span>
+              </a>
+              <a
+                href="#contact"
+                className="group flex items-center gap-2 text-muted-foreground hover:text-primary transition-all duration-300 text-sm py-1"
+              >
+                <div className="w-1.5 h-1.5 bg-current rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+                <span>{t.footer.quickLinks.contact}</span>
+              </a>
+              <a
+                href="#"
+                className="group flex items-center gap-2 text-muted-foreground hover:text-primary transition-all duration-300 text-sm py-1"
+              >
+                <div className="w-1.5 h-1.5 bg-current rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+                <span>{t.footer.quickLinks.help}</span>
+              </a>
+            </div>
           </div>
-        </div>
 
-        {/* Enhanced Legal Links */}
-        <div>
-          <h4 className="font-semibold mb-4 text-foreground flex items-center gap-2">
-            <div className="w-1 h-4 bg-gradient-to-b from-accent to-secondary rounded-full"></div>
-            Legal & Policy
-          </h4>
-          <div className="space-y-2">
-            <a href="#" className="group flex items-center gap-2 text-muted-foreground hover:text-primary transition-all duration-300 text-sm py-1">
-              <div className="w-1.5 h-1.5 bg-current rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
-              <span>{t.footer.legal.privacy}</span>
-            </a>
-            <a href="#" className="group flex items-center gap-2 text-muted-foreground hover:text-primary transition-all duration-300 text-sm py-1">
-              <div className="w-1.5 h-1.5 bg-current rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
-              <span>{t.footer.legal.terms}</span>
-            </a>
-            <a href="#" className="group flex items-center gap-2 text-muted-foreground hover:text-primary transition-all duration-300 text-sm py-1">
-              <div className="w-1.5 h-1.5 bg-current rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
-              <span>{t.footer.legal.cookies}</span>
-            </a>
-            <a href="#" className="group flex items-center gap-2 text-muted-foreground hover:text-primary transition-all duration-300 text-sm py-1">
-              <div className="w-1.5 h-1.5 bg-current rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
-              <span>{t.footer.legal.accessibility}</span>
-            </a>
+          {/* Enhanced Legal Links */}
+          <div>
+            <h4 className="font-semibold mb-4 text-foreground flex items-center gap-2">
+              <div className="w-1 h-4 bg-gradient-to-b from-accent to-secondary rounded-full"></div>
+              Legal & Policy
+            </h4>
+            <div className="space-y-2">
+              <a
+                href="#"
+                className="group flex items-center gap-2 text-muted-foreground hover:text-primary transition-all duration-300 text-sm py-1"
+              >
+                <div className="w-1.5 h-1.5 bg-current rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+                <span>{t.footer.legal.privacy}</span>
+              </a>
+              <a
+                href="#"
+                className="group flex items-center gap-2 text-muted-foreground hover:text-primary transition-all duration-300 text-sm py-1"
+              >
+                <div className="w-1.5 h-1.5 bg-current rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+                <span>{t.footer.legal.terms}</span>
+              </a>
+              <a
+                href="#"
+                className="group flex items-center gap-2 text-muted-foreground hover:text-primary transition-all duration-300 text-sm py-1"
+              >
+                <div className="w-1.5 h-1.5 bg-current rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+                <span>{t.footer.legal.cookies}</span>
+              </a>
+              <a
+                href="#"
+                className="group flex items-center gap-2 text-muted-foreground hover:text-primary transition-all duration-300 text-sm py-1"
+              >
+                <div className="w-1.5 h-1.5 bg-current rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+                <span>{t.footer.legal.accessibility}</span>
+              </a>
+            </div>
           </div>
         </div>
-      </div>
 
-      {/* Enhanced Footer Bottom */}
-      <div className="pt-8 border-t border-border/50">
-        <div className="flex flex-col md:flex-row justify-between items-center gap-4">
-          <div className="flex flex-col sm:flex-row items-center gap-4">
-            <p className="text-muted-foreground text-xs sm:text-sm text-center sm:text-left">
-              © {new Date().getFullYear()} {t.footer.copyright}
-            </p>
-            <div className="flex items-center gap-4 text-xs text-muted-foreground">
-              <span className="flex items-center gap-1">
-                <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
-                {t.footer.status}
+        {/* Enhanced Footer Bottom */}
+        <div className="pt-8 border-t border-border/50">
+          <div className="flex flex-col md:flex-row justify-between items-center gap-4">
+            <div className="flex flex-col sm:flex-row items-center gap-4">
+              <p className="text-muted-foreground text-xs sm:text-sm text-center sm:text-left">
+                © {new Date().getFullYear()} {t.footer.copyright}
+              </p>
+              <div className="flex items-center gap-4 text-xs text-muted-foreground">
+                <span className="flex items-center gap-1">
+                  <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
+                  {t.footer.status}
+                </span>
+              </div>
+            </div>
+            <div className="flex items-center gap-2 text-xs sm:text-sm">
+              <span className="text-muted-foreground">{t.footer.crafted}</span>
+              <span className="text-red-500 animate-pulse text-base">♥</span>
+              <span className="text-muted-foreground">for</span>
+              <span className="font-semibold text-gradient">
+                {t.footer.forSriLanka}
               </span>
             </div>
           </div>
-          <div className="flex items-center gap-2 text-xs sm:text-sm">
-            <span className="text-muted-foreground">{t.footer.crafted}</span>
-            <span className="text-red-500 animate-pulse text-base">♥</span>
-            <span className="text-muted-foreground">for</span>
-            <span className="font-semibold text-gradient">{t.footer.forSriLanka}</span>
-          </div>
         </div>
       </div>
-    </div>
-  </footer>
+    </footer>
   );
 };
 
 // --- MAIN PAGE COMPONENT ---
 export default function Home() {
-  const { currentLanguage } = useTranslation('home');
+  const { currentLanguage } = useTranslation("home");
 
   return (
     <div className="bg-background text-foreground min-h-screen relative theme-transition-slow">
       {/* Sri Lankan Background */}
       <SriLankanBackground />
-      
+
       {/* Content */}
       <div className="relative z-10 theme-transition-fast">
-  <Header />
-  <main className="theme-transition-fast pt-16 sm:pt-20">
+        <Header />
+        <main className="theme-transition-fast pt-16 sm:pt-20">
           <Hero language={currentLanguage as Language} />
           <Features language={currentLanguage as Language} />
           <About language={currentLanguage as Language} />
@@ -1301,4 +2185,4 @@ export default function Home() {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/agent/auth/AgentAuthLayout.tsx b/src/components/agent/auth/AgentAuthLayout.tsx
index 9a1984e..2021d16 100644
--- a/src/components/agent/auth/AgentAuthLayout.tsx
+++ b/src/components/agent/auth/AgentAuthLayout.tsx
@@ -215,9 +215,12 @@ const AgentAuthLayout: React.FC<AgentAuthLayoutProps> = ({
           <div className="text-center mt-6 sm:mt-8 animate-fade-in-up" style={{animationDelay: '0.4s'}}>
             <p className="text-xs sm:text-sm text-muted-foreground">
               {t.technicalAssistance}{' '}
-              <button className="text-[#FFC72C] hover:text-[#FF5722] transition-all duration-300 underline font-medium hover:scale-105">
+              <Link 
+                href="/user/chat/bot" 
+                className="text-[#FFC72C] hover:text-[#FF5722] transition-all duration-300 underline font-medium hover:scale-105 inline-block"
+              >
                 {t.contactItSupport}
-              </button>
+              </Link>
             </p>
           </div>
         </div>
diff --git a/src/components/user/auth/UserAuthLayout.tsx b/src/components/user/auth/UserAuthLayout.tsx
index 28d4001..cbaf0ae 100644
--- a/src/components/user/auth/UserAuthLayout.tsx
+++ b/src/components/user/auth/UserAuthLayout.tsx
@@ -215,9 +215,12 @@ const UserAuthLayout: React.FC<UserAuthLayoutProps> = ({
           <div className="text-center mt-6 sm:mt-8 animate-fade-in-up" style={{animationDelay: '0.4s'}}>
             <p className="text-xs sm:text-sm text-muted-foreground">
               {t.technicalAssistance}{' '}
-              <button className="text-[#FFC72C] hover:text-[#FF5722] transition-all duration-300 underline font-medium hover:scale-105">
+              <Link 
+                href="/user/chat/bot" 
+                className="text-[#FFC72C] hover:text-[#FF5722] transition-all duration-300 underline font-medium hover:scale-105 inline-block"
+              >
                 {t.contactSupport}
-              </button>
+              </Link>
             </p>
           </div>
         </div>