- updated svg icon and nav bar mobile menu script

.webstudio/data.json

@@ -1,10 +1,10 @@
 {
   "build": {
-    "id": "32343132-f16a-4a8b-894e-d0841b1ffa60",
+    "id": "87183b77-b411-408d-9914-d4e288e16400",
     "projectId": "363652e3-9846-4534-acdf-9b2b3c66eec0",
-    "version": 3929,
+    "version": 4167,
-    "createdAt": "2025-12-07T16:35:06.553+00:00",
+    "createdAt": "2025-12-07T20:54:45.389+00:00",
-    "updatedAt": "2025-12-07T16:35:06.553+00:00",
+    "updatedAt": "2025-12-07T20:54:45.389+00:00",
     "pages": {
       "meta": {
         "siteName": "Inasa Healthcare",
@@ -30040,7 +30040,7 @@
           "instanceId": "N3hlq0SmUpZeMxia9yt6I",
           "name": "code",
           "type": "string",
-          "value": "<style>\n    .mobile-menu {\n        opacity: 0;\n        visibility: hidden;\n        transition: opacity 0.5s ease-in-out;\n        display: none; /* Initially hidden */\n    }\n\n    .mobile-menu.visible {\n        visibility: visible;\n        opacity: 1;\n        display: flex; /* Make it visible for the transition */\n    }\n</style>\n<script src=\"https://cdn.jsdelivr.net/npm/motion/dist/motion.js\"></script>\n<script>\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const { animate } = Motion;\n    const panel = document.getElementById(\"top\");\n    const btn   = document.getElementById(\"menu-toggle-btn\");\n    const verticalMenu   = document.getElementById(\"mobile-vertical-menu\");\n\n    let open = false;\n\n    btn.addEventListener(\"click\", () => {\n      animate(panel, { height: open ? \"15svh\" : \"100vh\" }, { duration: 0.6, easing: \"easeInOut\" });\n      if (open) {\n        \n      } else {\n        \n      }\n      animate(btn,   { rotate: open ? \"0deg\" : \"90deg\" }, { duration: 0.6, easing: \"easeInOut\" });\n      // animate(\n      //   verticalMenu,\n      //   {\n      //     display: open ? \"flex\" : \"none\",\n      //     visibility: open ? \"visible\" : \"hidden\",\n      //     { duration: 0.6, easing: \"easeInOut\" }\n      //   }\n      // );\n      if (open && verticalMenu.classList.contains('visible')) {\n        verticalMenu.classList.remove('visible')\n        verticalMenu.addEventListener('transitionend', function handler() {\n            animatedBox.style.display = 'none';\n            animatedBox.removeEventListener('transitionend', handler);\n        });\n      } else {\n        verticalMenu.classList.add('visible')\n\n        verticalMenu.style.display = 'flex';\n        // Force reflow to ensure display change takes effect before opacity transition\n        verticalMenu.offsetWidth; \n        verticalMenu.classList.add('visible');\n      }\n    \n      open = !open;\n    });\n  });\n</script>\n"
+          "value": "<style>\n    .mobile-menu {\n        opacity: 0;\n        visibility: hidden;\n        transition: opacity 0.5s ease-in-out;\n        display: none; /* Initially hidden */\n    }\n\n    .mobile-menu.visible {\n        visibility: visible;\n        opacity: 1;\n        display: flex; /* Make it visible for the transition */\n    }\n</style>\n<script src=\"https://cdn.jsdelivr.net/npm/motion/dist/motion.js\"></script>\n<script>\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const { animate } = Motion;\n    const panel = document.getElementById(\"top\");\n    const btn   = document.getElementById(\"menu-toggle-btn\");\n    const verticalMenu   = document.getElementById(\"mobile-vertical-menu\");\n    const verticalMenuIcon = document.getElementById(\"mobile-menu-icon\")\n  \n    let open = false;\n\n    btn.addEventListener(\"click\", () => {\n      animate(panel, { height: open ? \"15svh\" : \"100vh\" }, { duration: 0.6, easing: \"easeInOut\" });\n      if (open) {\n        verticalMenuIcon.getElementById(\"rect-2\").style.display = 'inline'\n      } else {\n        verticalMenuIcon.getElementById(\"rect-2\").style.display = 'none'\n      }\n      animate(btn,   { rotate: open ? \"0deg\" : \"90deg\" }, { duration: 0.6, easing: \"easeInOut\" });\n      if (open && verticalMenu.classList.contains('visible')) {\n        verticalMenu.classList.remove('visible')\n        verticalMenu.addEventListener('transitionend', function handler() {\n            verticalMenu.style.display = 'none';\n            verticalMenu.removeEventListener('transitionend', handler);\n        });\n      } else {\n        verticalMenu.classList.add('visible')\n\n        verticalMenu.style.display = 'flex';\n        // Force reflow to ensure display change takes effect before opacity transition\n        verticalMenu.offsetWidth; \n        verticalMenu.classList.add('visible');\n      }\n    \n      open = !open;\n    });\n  });\n</script>\n"
         }
       ],
       [
@@ -31252,6 +31252,36 @@
           "type": "string",
           "value": "mobile-menu-icon"
         }
+      ],
+      [
+        "KxnSt8TSLtznlu5Jzxdqj",
+        {
+          "id": "KxnSt8TSLtznlu5Jzxdqj",
+          "instanceId": "t-S7mtIoZ5s3u63KLx2ea",
+          "name": "id",
+          "type": "string",
+          "value": "rect-1"
+        }
+      ],
+      [
+        "GiEHNUqVUo3pqoRpjii7r",
+        {
+          "id": "GiEHNUqVUo3pqoRpjii7r",
+          "instanceId": "GobjFisjUkAjCSPR34mFQ",
+          "name": "id",
+          "type": "string",
+          "value": "rect-2"
+        }
+      ],
+      [
+        "b-2Z2xvyr2Y_5XFe2wNjH",
+        {
+          "id": "b-2Z2xvyr2Y_5XFe2wNjH",
+          "instanceId": "SMGhR2WuF4Qgvjz24BuxH",
+          "name": "id",
+          "type": "string",
+          "value": "rect-3"
+        }
       ]
     ],
     "dataSources": [

app/__generated__/$.tsx

@@ -10,7 +10,7 @@ import { Fragment as Fragment_1, Slot as Slot, HtmlEmbed as HtmlEmbed, Image as
 
       export const projectId = "363652e3-9846-4534-acdf-9b2b3c66eec0";
 
-      export const lastPublished = "2025-12-07T16:35:06.553Z";
+      export const lastPublished = "2025-12-07T20:54:45.389Z";
 
       export const siteName = "Inasa Healthcare";
 
@@ -117,6 +117,7 @@ width={"32"}
 height={"5"}
 rx={"3"}
 ry={"3"}
+id={"rect-1"}
 className={`w-element`} />
 <rect
 x={"0"}
@@ -126,6 +127,7 @@ width={"32"}
 height={"5"}
 rx={"3"}
 ry={"3"}
+id={"rect-2"}
 className={`w-element`} />
 <rect
 x={"0"}
@@ -135,6 +137,7 @@ width={"32"}
 height={"5"}
 rx={"3"}
 ry={"3"}
+id={"rect-3"}
 className={`w-element`} />
 </svg>
 </button>
@@ -178,7 +181,7 @@ className={`w-element`}>
 </div>
 <HtmlEmbed
 executeScriptOnCanvas={true}
-code={"<style>\n    .mobile-menu {\n        opacity: 0;\n        visibility: hidden;\n        transition: opacity 0.5s ease-in-out;\n        display: none; /* Initially hidden */\n    }\n\n    .mobile-menu.visible {\n        visibility: visible;\n        opacity: 1;\n        display: flex; /* Make it visible for the transition */\n    }\n</style>\n<script src=\"https://cdn.jsdelivr.net/npm/motion/dist/motion.js\"></script>\n<script>\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const { animate } = Motion;\n    const panel = document.getElementById(\"top\");\n    const btn   = document.getElementById(\"menu-toggle-btn\");\n    const verticalMenu   = document.getElementById(\"mobile-vertical-menu\");\n\n    let open = false;\n\n    btn.addEventListener(\"click\", () => {\n      animate(panel, { height: open ? \"15svh\" : \"100vh\" }, { duration: 0.6, easing: \"easeInOut\" });\n      if (open) {\n        \n      } else {\n        \n      }\n      animate(btn,   { rotate: open ? \"0deg\" : \"90deg\" }, { duration: 0.6, easing: \"easeInOut\" });\n      // animate(\n      //   verticalMenu,\n      //   {\n      //     display: open ? \"flex\" : \"none\",\n      //     visibility: open ? \"visible\" : \"hidden\",\n      //     { duration: 0.6, easing: \"easeInOut\" }\n      //   }\n      // );\n      if (open && verticalMenu.classList.contains('visible')) {\n        verticalMenu.classList.remove('visible')\n        verticalMenu.addEventListener('transitionend', function handler() {\n            animatedBox.style.display = 'none';\n            animatedBox.removeEventListener('transitionend', handler);\n        });\n      } else {\n        verticalMenu.classList.add('visible')\n\n        verticalMenu.style.display = 'flex';\n        // Force reflow to ensure display change takes effect before opacity transition\n        verticalMenu.offsetWidth; \n        verticalMenu.classList.add('visible');\n      }\n    \n      open = !open;\n    });\n  });\n</script>\n"}
+code={"<style>\n    .mobile-menu {\n        opacity: 0;\n        visibility: hidden;\n        transition: opacity 0.5s ease-in-out;\n        display: none; /* Initially hidden */\n    }\n\n    .mobile-menu.visible {\n        visibility: visible;\n        opacity: 1;\n        display: flex; /* Make it visible for the transition */\n    }\n</style>\n<script src=\"https://cdn.jsdelivr.net/npm/motion/dist/motion.js\"></script>\n<script>\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const { animate } = Motion;\n    const panel = document.getElementById(\"top\");\n    const btn   = document.getElementById(\"menu-toggle-btn\");\n    const verticalMenu   = document.getElementById(\"mobile-vertical-menu\");\n    const verticalMenuIcon = document.getElementById(\"mobile-menu-icon\")\n  \n    let open = false;\n\n    btn.addEventListener(\"click\", () => {\n      animate(panel, { height: open ? \"15svh\" : \"100vh\" }, { duration: 0.6, easing: \"easeInOut\" });\n      if (open) {\n        verticalMenuIcon.getElementById(\"rect-2\").style.display = 'inline'\n      } else {\n        verticalMenuIcon.getElementById(\"rect-2\").style.display = 'none'\n      }\n      animate(btn,   { rotate: open ? \"0deg\" : \"90deg\" }, { duration: 0.6, easing: \"easeInOut\" });\n      if (open && verticalMenu.classList.contains('visible')) {\n        verticalMenu.classList.remove('visible')\n        verticalMenu.addEventListener('transitionend', function handler() {\n            verticalMenu.style.display = 'none';\n            verticalMenu.removeEventListener('transitionend', handler);\n        });\n      } else {\n        verticalMenu.classList.add('visible')\n\n        verticalMenu.style.display = 'flex';\n        // Force reflow to ensure display change takes effect before opacity transition\n        verticalMenu.offsetWidth; \n        verticalMenu.classList.add('visible');\n      }\n    \n      open = !open;\n    });\n  });\n</script>\n"}
 clientOnly={true}
 className={`w-html-embed`} />
 </div>

app/__generated__/[about]._index.tsx

@@ -10,7 +10,7 @@ import { Link as Link, Body as Body } from "@webstudio-is/sdk-components-react-r
 
       export const projectId = "363652e3-9846-4534-acdf-9b2b3c66eec0";
 
-      export const lastPublished = "2025-12-07T16:35:06.553Z";
+      export const lastPublished = "2025-12-07T20:54:45.389Z";
 
       export const siteName = "Inasa Healthcare";
 
@@ -117,6 +117,7 @@ width={"32"}
 height={"5"}
 rx={"3"}
 ry={"3"}
+id={"rect-1"}
 className={`w-element`} />
 <rect
 x={"0"}
@@ -126,6 +127,7 @@ width={"32"}
 height={"5"}
 rx={"3"}
 ry={"3"}
+id={"rect-2"}
 className={`w-element`} />
 <rect
 x={"0"}
@@ -135,6 +137,7 @@ width={"32"}
 height={"5"}
 rx={"3"}
 ry={"3"}
+id={"rect-3"}
 className={`w-element`} />
 </svg>
 </button>
@@ -178,7 +181,7 @@ className={`w-element`}>
 </div>
 <HtmlEmbed
 executeScriptOnCanvas={true}
-code={"<style>\n    .mobile-menu {\n        opacity: 0;\n        visibility: hidden;\n        transition: opacity 0.5s ease-in-out;\n        display: none; /* Initially hidden */\n    }\n\n    .mobile-menu.visible {\n        visibility: visible;\n        opacity: 1;\n        display: flex; /* Make it visible for the transition */\n    }\n</style>\n<script src=\"https://cdn.jsdelivr.net/npm/motion/dist/motion.js\"></script>\n<script>\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const { animate } = Motion;\n    const panel = document.getElementById(\"top\");\n    const btn   = document.getElementById(\"menu-toggle-btn\");\n    const verticalMenu   = document.getElementById(\"mobile-vertical-menu\");\n\n    let open = false;\n\n    btn.addEventListener(\"click\", () => {\n      animate(panel, { height: open ? \"15svh\" : \"100vh\" }, { duration: 0.6, easing: \"easeInOut\" });\n      if (open) {\n        \n      } else {\n        \n      }\n      animate(btn,   { rotate: open ? \"0deg\" : \"90deg\" }, { duration: 0.6, easing: \"easeInOut\" });\n      // animate(\n      //   verticalMenu,\n      //   {\n      //     display: open ? \"flex\" : \"none\",\n      //     visibility: open ? \"visible\" : \"hidden\",\n      //     { duration: 0.6, easing: \"easeInOut\" }\n      //   }\n      // );\n      if (open && verticalMenu.classList.contains('visible')) {\n        verticalMenu.classList.remove('visible')\n        verticalMenu.addEventListener('transitionend', function handler() {\n            animatedBox.style.display = 'none';\n            animatedBox.removeEventListener('transitionend', handler);\n        });\n      } else {\n        verticalMenu.classList.add('visible')\n\n        verticalMenu.style.display = 'flex';\n        // Force reflow to ensure display change takes effect before opacity transition\n        verticalMenu.offsetWidth; \n        verticalMenu.classList.add('visible');\n      }\n    \n      open = !open;\n    });\n  });\n</script>\n"}
+code={"<style>\n    .mobile-menu {\n        opacity: 0;\n        visibility: hidden;\n        transition: opacity 0.5s ease-in-out;\n        display: none; /* Initially hidden */\n    }\n\n    .mobile-menu.visible {\n        visibility: visible;\n        opacity: 1;\n        display: flex; /* Make it visible for the transition */\n    }\n</style>\n<script src=\"https://cdn.jsdelivr.net/npm/motion/dist/motion.js\"></script>\n<script>\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const { animate } = Motion;\n    const panel = document.getElementById(\"top\");\n    const btn   = document.getElementById(\"menu-toggle-btn\");\n    const verticalMenu   = document.getElementById(\"mobile-vertical-menu\");\n    const verticalMenuIcon = document.getElementById(\"mobile-menu-icon\")\n  \n    let open = false;\n\n    btn.addEventListener(\"click\", () => {\n      animate(panel, { height: open ? \"15svh\" : \"100vh\" }, { duration: 0.6, easing: \"easeInOut\" });\n      if (open) {\n        verticalMenuIcon.getElementById(\"rect-2\").style.display = 'inline'\n      } else {\n        verticalMenuIcon.getElementById(\"rect-2\").style.display = 'none'\n      }\n      animate(btn,   { rotate: open ? \"0deg\" : \"90deg\" }, { duration: 0.6, easing: \"easeInOut\" });\n      if (open && verticalMenu.classList.contains('visible')) {\n        verticalMenu.classList.remove('visible')\n        verticalMenu.addEventListener('transitionend', function handler() {\n            verticalMenu.style.display = 'none';\n            verticalMenu.removeEventListener('transitionend', handler);\n        });\n      } else {\n        verticalMenu.classList.add('visible')\n\n        verticalMenu.style.display = 'flex';\n        // Force reflow to ensure display change takes effect before opacity transition\n        verticalMenu.offsetWidth; \n        verticalMenu.classList.add('visible');\n      }\n    \n      open = !open;\n    });\n  });\n</script>\n"}
 clientOnly={true}
 className={`w-html-embed`} />
 </div>

app/__generated__/[contact]._index.tsx

@@ -10,7 +10,7 @@ import { Link as Link, Body as Body, RemixForm as RemixForm } from "@webstudio-i
 
       export const projectId = "363652e3-9846-4534-acdf-9b2b3c66eec0";
 
-      export const lastPublished = "2025-12-07T16:35:06.553Z";
+      export const lastPublished = "2025-12-07T20:54:45.389Z";
 
       export const siteName = "Inasa Healthcare";
 
@@ -117,6 +117,7 @@ width={"32"}
 height={"5"}
 rx={"3"}
 ry={"3"}
+id={"rect-1"}
 className={`w-element`} />
 <rect
 x={"0"}
@@ -126,6 +127,7 @@ width={"32"}
 height={"5"}
 rx={"3"}
 ry={"3"}
+id={"rect-2"}
 className={`w-element`} />
 <rect
 x={"0"}
@@ -135,6 +137,7 @@ width={"32"}
 height={"5"}
 rx={"3"}
 ry={"3"}
+id={"rect-3"}
 className={`w-element`} />
 </svg>
 </button>
@@ -178,7 +181,7 @@ className={`w-element`}>
 </div>
 <HtmlEmbed
 executeScriptOnCanvas={true}
-code={"<style>\n    .mobile-menu {\n        opacity: 0;\n        visibility: hidden;\n        transition: opacity 0.5s ease-in-out;\n        display: none; /* Initially hidden */\n    }\n\n    .mobile-menu.visible {\n        visibility: visible;\n        opacity: 1;\n        display: flex; /* Make it visible for the transition */\n    }\n</style>\n<script src=\"https://cdn.jsdelivr.net/npm/motion/dist/motion.js\"></script>\n<script>\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const { animate } = Motion;\n    const panel = document.getElementById(\"top\");\n    const btn   = document.getElementById(\"menu-toggle-btn\");\n    const verticalMenu   = document.getElementById(\"mobile-vertical-menu\");\n\n    let open = false;\n\n    btn.addEventListener(\"click\", () => {\n      animate(panel, { height: open ? \"15svh\" : \"100vh\" }, { duration: 0.6, easing: \"easeInOut\" });\n      if (open) {\n        \n      } else {\n        \n      }\n      animate(btn,   { rotate: open ? \"0deg\" : \"90deg\" }, { duration: 0.6, easing: \"easeInOut\" });\n      // animate(\n      //   verticalMenu,\n      //   {\n      //     display: open ? \"flex\" : \"none\",\n      //     visibility: open ? \"visible\" : \"hidden\",\n      //     { duration: 0.6, easing: \"easeInOut\" }\n      //   }\n      // );\n      if (open && verticalMenu.classList.contains('visible')) {\n        verticalMenu.classList.remove('visible')\n        verticalMenu.addEventListener('transitionend', function handler() {\n            animatedBox.style.display = 'none';\n            animatedBox.removeEventListener('transitionend', handler);\n        });\n      } else {\n        verticalMenu.classList.add('visible')\n\n        verticalMenu.style.display = 'flex';\n        // Force reflow to ensure display change takes effect before opacity transition\n        verticalMenu.offsetWidth; \n        verticalMenu.classList.add('visible');\n      }\n    \n      open = !open;\n    });\n  });\n</script>\n"}
+code={"<style>\n    .mobile-menu {\n        opacity: 0;\n        visibility: hidden;\n        transition: opacity 0.5s ease-in-out;\n        display: none; /* Initially hidden */\n    }\n\n    .mobile-menu.visible {\n        visibility: visible;\n        opacity: 1;\n        display: flex; /* Make it visible for the transition */\n    }\n</style>\n<script src=\"https://cdn.jsdelivr.net/npm/motion/dist/motion.js\"></script>\n<script>\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const { animate } = Motion;\n    const panel = document.getElementById(\"top\");\n    const btn   = document.getElementById(\"menu-toggle-btn\");\n    const verticalMenu   = document.getElementById(\"mobile-vertical-menu\");\n    const verticalMenuIcon = document.getElementById(\"mobile-menu-icon\")\n  \n    let open = false;\n\n    btn.addEventListener(\"click\", () => {\n      animate(panel, { height: open ? \"15svh\" : \"100vh\" }, { duration: 0.6, easing: \"easeInOut\" });\n      if (open) {\n        verticalMenuIcon.getElementById(\"rect-2\").style.display = 'inline'\n      } else {\n        verticalMenuIcon.getElementById(\"rect-2\").style.display = 'none'\n      }\n      animate(btn,   { rotate: open ? \"0deg\" : \"90deg\" }, { duration: 0.6, easing: \"easeInOut\" });\n      if (open && verticalMenu.classList.contains('visible')) {\n        verticalMenu.classList.remove('visible')\n        verticalMenu.addEventListener('transitionend', function handler() {\n            verticalMenu.style.display = 'none';\n            verticalMenu.removeEventListener('transitionend', handler);\n        });\n      } else {\n        verticalMenu.classList.add('visible')\n\n        verticalMenu.style.display = 'flex';\n        // Force reflow to ensure display change takes effect before opacity transition\n        verticalMenu.offsetWidth; \n        verticalMenu.classList.add('visible');\n      }\n    \n      open = !open;\n    });\n  });\n</script>\n"}
 clientOnly={true}
 className={`w-html-embed`} />
 </div>

app/__generated__/[insurance]._index.tsx

@@ -10,7 +10,7 @@ import { Link as Link, Body as Body } from "@webstudio-is/sdk-components-react-r
 
       export const projectId = "363652e3-9846-4534-acdf-9b2b3c66eec0";
 
-      export const lastPublished = "2025-12-07T16:35:06.553Z";
+      export const lastPublished = "2025-12-07T20:54:45.389Z";
 
       export const siteName = "Inasa Healthcare";
 
@@ -117,6 +117,7 @@ width={"32"}
 height={"5"}
 rx={"3"}
 ry={"3"}
+id={"rect-1"}
 className={`w-element`} />
 <rect
 x={"0"}
@@ -126,6 +127,7 @@ width={"32"}
 height={"5"}
 rx={"3"}
 ry={"3"}
+id={"rect-2"}
 className={`w-element`} />
 <rect
 x={"0"}
@@ -135,6 +137,7 @@ width={"32"}
 height={"5"}
 rx={"3"}
 ry={"3"}
+id={"rect-3"}
 className={`w-element`} />
 </svg>
 </button>
@@ -178,7 +181,7 @@ className={`w-element`}>
 </div>
 <HtmlEmbed
 executeScriptOnCanvas={true}
-code={"<style>\n    .mobile-menu {\n        opacity: 0;\n        visibility: hidden;\n        transition: opacity 0.5s ease-in-out;\n        display: none; /* Initially hidden */\n    }\n\n    .mobile-menu.visible {\n        visibility: visible;\n        opacity: 1;\n        display: flex; /* Make it visible for the transition */\n    }\n</style>\n<script src=\"https://cdn.jsdelivr.net/npm/motion/dist/motion.js\"></script>\n<script>\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const { animate } = Motion;\n    const panel = document.getElementById(\"top\");\n    const btn   = document.getElementById(\"menu-toggle-btn\");\n    const verticalMenu   = document.getElementById(\"mobile-vertical-menu\");\n\n    let open = false;\n\n    btn.addEventListener(\"click\", () => {\n      animate(panel, { height: open ? \"15svh\" : \"100vh\" }, { duration: 0.6, easing: \"easeInOut\" });\n      if (open) {\n        \n      } else {\n        \n      }\n      animate(btn,   { rotate: open ? \"0deg\" : \"90deg\" }, { duration: 0.6, easing: \"easeInOut\" });\n      // animate(\n      //   verticalMenu,\n      //   {\n      //     display: open ? \"flex\" : \"none\",\n      //     visibility: open ? \"visible\" : \"hidden\",\n      //     { duration: 0.6, easing: \"easeInOut\" }\n      //   }\n      // );\n      if (open && verticalMenu.classList.contains('visible')) {\n        verticalMenu.classList.remove('visible')\n        verticalMenu.addEventListener('transitionend', function handler() {\n            animatedBox.style.display = 'none';\n            animatedBox.removeEventListener('transitionend', handler);\n        });\n      } else {\n        verticalMenu.classList.add('visible')\n\n        verticalMenu.style.display = 'flex';\n        // Force reflow to ensure display change takes effect before opacity transition\n        verticalMenu.offsetWidth; \n        verticalMenu.classList.add('visible');\n      }\n    \n      open = !open;\n    });\n  });\n</script>\n"}
+code={"<style>\n    .mobile-menu {\n        opacity: 0;\n        visibility: hidden;\n        transition: opacity 0.5s ease-in-out;\n        display: none; /* Initially hidden */\n    }\n\n    .mobile-menu.visible {\n        visibility: visible;\n        opacity: 1;\n        display: flex; /* Make it visible for the transition */\n    }\n</style>\n<script src=\"https://cdn.jsdelivr.net/npm/motion/dist/motion.js\"></script>\n<script>\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const { animate } = Motion;\n    const panel = document.getElementById(\"top\");\n    const btn   = document.getElementById(\"menu-toggle-btn\");\n    const verticalMenu   = document.getElementById(\"mobile-vertical-menu\");\n    const verticalMenuIcon = document.getElementById(\"mobile-menu-icon\")\n  \n    let open = false;\n\n    btn.addEventListener(\"click\", () => {\n      animate(panel, { height: open ? \"15svh\" : \"100vh\" }, { duration: 0.6, easing: \"easeInOut\" });\n      if (open) {\n        verticalMenuIcon.getElementById(\"rect-2\").style.display = 'inline'\n      } else {\n        verticalMenuIcon.getElementById(\"rect-2\").style.display = 'none'\n      }\n      animate(btn,   { rotate: open ? \"0deg\" : \"90deg\" }, { duration: 0.6, easing: \"easeInOut\" });\n      if (open && verticalMenu.classList.contains('visible')) {\n        verticalMenu.classList.remove('visible')\n        verticalMenu.addEventListener('transitionend', function handler() {\n            verticalMenu.style.display = 'none';\n            verticalMenu.removeEventListener('transitionend', handler);\n        });\n      } else {\n        verticalMenu.classList.add('visible')\n\n        verticalMenu.style.display = 'flex';\n        // Force reflow to ensure display change takes effect before opacity transition\n        verticalMenu.offsetWidth; \n        verticalMenu.classList.add('visible');\n      }\n    \n      open = !open;\n    });\n  });\n</script>\n"}
 clientOnly={true}
 className={`w-html-embed`} />
 </div>

app/__generated__/[services]._index.tsx

@@ -11,7 +11,7 @@ import { Body as Body, Link as Link } from "@webstudio-is/sdk-components-react-r
 
       export const projectId = "363652e3-9846-4534-acdf-9b2b3c66eec0";
 
-      export const lastPublished = "2025-12-07T16:35:06.553Z";
+      export const lastPublished = "2025-12-07T20:54:45.389Z";
 
       export const siteName = "Inasa Healthcare";
 
@@ -118,6 +118,7 @@ width={"32"}
 height={"5"}
 rx={"3"}
 ry={"3"}
+id={"rect-1"}
 className={`w-element`} />
 <rect
 x={"0"}
@@ -127,6 +128,7 @@ width={"32"}
 height={"5"}
 rx={"3"}
 ry={"3"}
+id={"rect-2"}
 className={`w-element`} />
 <rect
 x={"0"}
@@ -136,6 +138,7 @@ width={"32"}
 height={"5"}
 rx={"3"}
 ry={"3"}
+id={"rect-3"}
 className={`w-element`} />
 </svg>
 </button>
@@ -179,7 +182,7 @@ className={`w-element`}>
 </div>
 <HtmlEmbed
 executeScriptOnCanvas={true}
-code={"<style>\n    .mobile-menu {\n        opacity: 0;\n        visibility: hidden;\n        transition: opacity 0.5s ease-in-out;\n        display: none; /* Initially hidden */\n    }\n\n    .mobile-menu.visible {\n        visibility: visible;\n        opacity: 1;\n        display: flex; /* Make it visible for the transition */\n    }\n</style>\n<script src=\"https://cdn.jsdelivr.net/npm/motion/dist/motion.js\"></script>\n<script>\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const { animate } = Motion;\n    const panel = document.getElementById(\"top\");\n    const btn   = document.getElementById(\"menu-toggle-btn\");\n    const verticalMenu   = document.getElementById(\"mobile-vertical-menu\");\n\n    let open = false;\n\n    btn.addEventListener(\"click\", () => {\n      animate(panel, { height: open ? \"15svh\" : \"100vh\" }, { duration: 0.6, easing: \"easeInOut\" });\n      if (open) {\n        \n      } else {\n        \n      }\n      animate(btn,   { rotate: open ? \"0deg\" : \"90deg\" }, { duration: 0.6, easing: \"easeInOut\" });\n      // animate(\n      //   verticalMenu,\n      //   {\n      //     display: open ? \"flex\" : \"none\",\n      //     visibility: open ? \"visible\" : \"hidden\",\n      //     { duration: 0.6, easing: \"easeInOut\" }\n      //   }\n      // );\n      if (open && verticalMenu.classList.contains('visible')) {\n        verticalMenu.classList.remove('visible')\n        verticalMenu.addEventListener('transitionend', function handler() {\n            animatedBox.style.display = 'none';\n            animatedBox.removeEventListener('transitionend', handler);\n        });\n      } else {\n        verticalMenu.classList.add('visible')\n\n        verticalMenu.style.display = 'flex';\n        // Force reflow to ensure display change takes effect before opacity transition\n        verticalMenu.offsetWidth; \n        verticalMenu.classList.add('visible');\n      }\n    \n      open = !open;\n    });\n  });\n</script>\n"}
+code={"<style>\n    .mobile-menu {\n        opacity: 0;\n        visibility: hidden;\n        transition: opacity 0.5s ease-in-out;\n        display: none; /* Initially hidden */\n    }\n\n    .mobile-menu.visible {\n        visibility: visible;\n        opacity: 1;\n        display: flex; /* Make it visible for the transition */\n    }\n</style>\n<script src=\"https://cdn.jsdelivr.net/npm/motion/dist/motion.js\"></script>\n<script>\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const { animate } = Motion;\n    const panel = document.getElementById(\"top\");\n    const btn   = document.getElementById(\"menu-toggle-btn\");\n    const verticalMenu   = document.getElementById(\"mobile-vertical-menu\");\n    const verticalMenuIcon = document.getElementById(\"mobile-menu-icon\")\n  \n    let open = false;\n\n    btn.addEventListener(\"click\", () => {\n      animate(panel, { height: open ? \"15svh\" : \"100vh\" }, { duration: 0.6, easing: \"easeInOut\" });\n      if (open) {\n        verticalMenuIcon.getElementById(\"rect-2\").style.display = 'inline'\n      } else {\n        verticalMenuIcon.getElementById(\"rect-2\").style.display = 'none'\n      }\n      animate(btn,   { rotate: open ? \"0deg\" : \"90deg\" }, { duration: 0.6, easing: \"easeInOut\" });\n      if (open && verticalMenu.classList.contains('visible')) {\n        verticalMenu.classList.remove('visible')\n        verticalMenu.addEventListener('transitionend', function handler() {\n            verticalMenu.style.display = 'none';\n            verticalMenu.removeEventListener('transitionend', handler);\n        });\n      } else {\n        verticalMenu.classList.add('visible')\n\n        verticalMenu.style.display = 'flex';\n        // Force reflow to ensure display change takes effect before opacity transition\n        verticalMenu.offsetWidth; \n        verticalMenu.classList.add('visible');\n      }\n    \n      open = !open;\n    });\n  });\n</script>\n"}
 clientOnly={true}
 className={`w-html-embed`} />
 </div>

app/__generated__/_index.tsx

@@ -11,7 +11,7 @@ import { Dialog as Dialog, DialogTrigger as DialogTrigger, DialogOverlay as Dial
 
       export const projectId = "363652e3-9846-4534-acdf-9b2b3c66eec0";
 
-      export const lastPublished = "2025-12-07T16:35:06.553Z";
+      export const lastPublished = "2025-12-07T20:54:45.389Z";
 
       export const siteName = "Inasa Healthcare";
 
@@ -139,6 +139,7 @@ width={"32"}
 height={"5"}
 rx={"3"}
 ry={"3"}
+id={"rect-1"}
 className={`w-element`} />
 <rect
 x={"0"}
@@ -148,6 +149,7 @@ width={"32"}
 height={"5"}
 rx={"3"}
 ry={"3"}
+id={"rect-2"}
 className={`w-element`} />
 <rect
 x={"0"}
@@ -157,6 +159,7 @@ width={"32"}
 height={"5"}
 rx={"3"}
 ry={"3"}
+id={"rect-3"}
 className={`w-element`} />
 </svg>
 </button>
@@ -200,7 +203,7 @@ className={`w-element`}>
 </div>
 <HtmlEmbed
 executeScriptOnCanvas={true}
-code={"<style>\n    .mobile-menu {\n        opacity: 0;\n        visibility: hidden;\n        transition: opacity 0.5s ease-in-out;\n        display: none; /* Initially hidden */\n    }\n\n    .mobile-menu.visible {\n        visibility: visible;\n        opacity: 1;\n        display: flex; /* Make it visible for the transition */\n    }\n</style>\n<script src=\"https://cdn.jsdelivr.net/npm/motion/dist/motion.js\"></script>\n<script>\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const { animate } = Motion;\n    const panel = document.getElementById(\"top\");\n    const btn   = document.getElementById(\"menu-toggle-btn\");\n    const verticalMenu   = document.getElementById(\"mobile-vertical-menu\");\n\n    let open = false;\n\n    btn.addEventListener(\"click\", () => {\n      animate(panel, { height: open ? \"15svh\" : \"100vh\" }, { duration: 0.6, easing: \"easeInOut\" });\n      if (open) {\n        \n      } else {\n        \n      }\n      animate(btn,   { rotate: open ? \"0deg\" : \"90deg\" }, { duration: 0.6, easing: \"easeInOut\" });\n      // animate(\n      //   verticalMenu,\n      //   {\n      //     display: open ? \"flex\" : \"none\",\n      //     visibility: open ? \"visible\" : \"hidden\",\n      //     { duration: 0.6, easing: \"easeInOut\" }\n      //   }\n      // );\n      if (open && verticalMenu.classList.contains('visible')) {\n        verticalMenu.classList.remove('visible')\n        verticalMenu.addEventListener('transitionend', function handler() {\n            animatedBox.style.display = 'none';\n            animatedBox.removeEventListener('transitionend', handler);\n        });\n      } else {\n        verticalMenu.classList.add('visible')\n\n        verticalMenu.style.display = 'flex';\n        // Force reflow to ensure display change takes effect before opacity transition\n        verticalMenu.offsetWidth; \n        verticalMenu.classList.add('visible');\n      }\n    \n      open = !open;\n    });\n  });\n</script>\n"}
+code={"<style>\n    .mobile-menu {\n        opacity: 0;\n        visibility: hidden;\n        transition: opacity 0.5s ease-in-out;\n        display: none; /* Initially hidden */\n    }\n\n    .mobile-menu.visible {\n        visibility: visible;\n        opacity: 1;\n        display: flex; /* Make it visible for the transition */\n    }\n</style>\n<script src=\"https://cdn.jsdelivr.net/npm/motion/dist/motion.js\"></script>\n<script>\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const { animate } = Motion;\n    const panel = document.getElementById(\"top\");\n    const btn   = document.getElementById(\"menu-toggle-btn\");\n    const verticalMenu   = document.getElementById(\"mobile-vertical-menu\");\n    const verticalMenuIcon = document.getElementById(\"mobile-menu-icon\")\n  \n    let open = false;\n\n    btn.addEventListener(\"click\", () => {\n      animate(panel, { height: open ? \"15svh\" : \"100vh\" }, { duration: 0.6, easing: \"easeInOut\" });\n      if (open) {\n        verticalMenuIcon.getElementById(\"rect-2\").style.display = 'inline'\n      } else {\n        verticalMenuIcon.getElementById(\"rect-2\").style.display = 'none'\n      }\n      animate(btn,   { rotate: open ? \"0deg\" : \"90deg\" }, { duration: 0.6, easing: \"easeInOut\" });\n      if (open && verticalMenu.classList.contains('visible')) {\n        verticalMenu.classList.remove('visible')\n        verticalMenu.addEventListener('transitionend', function handler() {\n            verticalMenu.style.display = 'none';\n            verticalMenu.removeEventListener('transitionend', handler);\n        });\n      } else {\n        verticalMenu.classList.add('visible')\n\n        verticalMenu.style.display = 'flex';\n        // Force reflow to ensure display change takes effect before opacity transition\n        verticalMenu.offsetWidth; \n        verticalMenu.classList.add('visible');\n      }\n    \n      open = !open;\n    });\n  });\n</script>\n"}
 clientOnly={true}
 className={`w-html-embed`} />
 </div>