Modified Navbar

.vscode/settings.json

+{
+    "postman.settings.dotenv-detection-notification-visibility": false
+}
\ No newline at end of file

layout/Header.js

@@ -83,26 +83,35 @@ const Header = () => {
       title: "Digital Transformation",
       href: "/client-servicing/ba",
       items: [
-        { name: "ITeC App", href: "/client-servicing/ba" },
-        { name: "Digital Process Automation", href: "/client-servicing/ba" },
+        // { name: "ITeC App", href: "/client-servicing/ba" },
+        // { name: "Digital Process Automation", href: "/client-servicing/ba" },
       ],
     },
     {
       title: "Empowering Finance Consultants",
       href: "/client-servicing/ba",
-      items: [{ name: "CA/CPA firm services", href: "/client-servicing/ba" }],
+      items: [
+        // { name: "CA/CPA firm services", href: "/client-servicing/ba" }
+      ],
     },
     {
       title: "Bespoke Services",
       href: "/client-servicing/ba",
       items: [
-        { name: "Data analysis and reporting", href: "/client-servicing/ba" },
-        { name: "Admin and Backend Support Services", href: "/client-servicing/ba" },
-        { name: "PFM", href: "/client-servicing/ba" },
+        // { name: "Data analysis and reporting", href: "/client-servicing/ba" },
+        // { name: "Admin and Backend Support Services", href: "/client-servicing/ba" },
+        // { name: "PFM", href: "/client-servicing/ba" },
       ],
     },
   ]
 
+  // Group the last four services into one column
+  const megaMenuColumns = [
+    [clientServices[0]], // Virtual Finance Office
+    [clientServices[1]], // Advisory Services
+    [clientServices[2], clientServices[3], clientServices[4], clientServices[5]], // GCC as a Service, Digital Transformation, Empowering Finance Consultants, Bespoke Services
+  ];
+
   return (
     <>
      
@@ -113,7 +122,7 @@ const Header = () => {
         </div>
         <div id="navbar" className="navbar-area">
           <div className="zixon-nav">
-            <div className="container-fluid">
+            <div className="container-fluid" style={{ maxWidth: 1200, margin: '0 auto', padding: '0 32px' }}>
               <nav className="navbar navbar-expand-md navbar-light">
                 <Link href="/" className="navbar-brand">
                   <Image width={144} height={33} src="/images/logo.png" alt="logo" />
@@ -205,15 +214,26 @@ const Header = () => {
                         onMouseLeave={() => setClientServicingOpen(false)}
                       >
                         <div className="mega-menu-content">
-                          <div className="mega-grid client-servicing-grid">
-                            {clientServices.map((service, index) => (
-                              <div key={index} className="mega-column">
-                                <div className="service-header">
-                                  <Link href={service.href} className="mega-column-title" style={{ fontWeight: 'bold', fontFamily: 'inherit' }}>
+                          <div className="mega-grid client-servicing-grid" style={{ display: 'flex', gap: '32px', justifyContent: 'center' }}>
+                            {megaMenuColumns.map((column, colIdx) => (
+                              <div
+                                key={colIdx}
+                                className="mega-column"
+                                style={colIdx === 2
+                                  ? { minWidth: 260, gap: 8, display: 'flex', flexDirection: 'column' }
+                                  : { minWidth: 260, display: 'flex', flexDirection: 'column' }}
+                              >
+                                {column.map((service, idx) => (
+                                  <div
+                                    key={service.title}
+                                    className="service-header"
+                                    style={colIdx < 2 ? { display: 'block', marginBottom: 8 } : { marginBottom: 8 }}
+                                  >
+                                    <Link href={service.href} className="mega-column-title" style={{ fontWeight: 'bold', fontFamily: 'inherit', borderBottom: '2px solid #f5c542', paddingBottom: 4, display: 'inline-block', marginBottom: 8, fontSize: '1rem' }}>
                                       <strong>{service.title}</strong>
                                     </Link>
-                                </div>
-                                {service.items.length > 0 && (
+                                    {/* Only show subpoints for the first two columns */}
+                                    {colIdx < 2 && service.items.length > 0 && (
                                       <ul className="mega-column-list">
                                         {service.items.map((item, itemIndex) => (
                                           <li key={itemIndex}>
@@ -227,6 +247,8 @@ const Header = () => {
                                   </div>
                                 ))}
                               </div>
+                            ))}
+                          </div>
                         </div>
                       </div>
                     )}