fix: mobile menu now renders in front of hero banner video on mobile

- Moved mobile drawer (and AnimatePresence) out of <nav> into sibling in React fragment so its z-index is evaluated at root stacking context (was previously confined inside nav's z context).
- Raised mobile menu container to z-[9999], sliding panel to z-[10000].
- Bumped LanguageSwitcher backdrop/dropdown to z-[9998]/z-[9999] for when opened from inside mobile menu.
- Lowered hero video to z-0 and gradient to z-5 (true background).
- Nav back to z-[50] (still above normal content).
- This ensures the full mobile menu (hamburger + drawer + language dropdown when clicked inside it) always stacks above the mobile_banner video and is fully visible.

components/Navbar.tsx

@@ -53,8 +53,9 @@ export default function Navbar({ variant = "default" }: NavbarProps) {
   const closeMenu = () => setIsOpen(false);
 
   return (
+    <>
     <nav 
-      className="fixed top-0 left-0 right-0 z-[999] h-[64px] border-b border-[#c99a2e]/20 bg-[#fbf7ef] shadow-sm backdrop-blur-xl"
+      className="fixed top-0 left-0 right-0 z-[50] h-[64px] border-b border-[#c99a2e]/20 bg-[#fbf7ef] shadow-sm backdrop-blur-xl"
     >
       <div className="max-w-7xl mx-auto px-6 flex items-center justify-between h-full">
         {/* Top subtle gold line for extra frame separation */}
@@ -177,11 +178,12 @@ export default function Navbar({ variant = "default" }: NavbarProps) {
           </button>
         </div>
       </div>
+    </nav>
 
       {/* Modern Mobile Menu Drawer (slide-in, animated, high-contrast, touch-friendly) - high z to always appear in front of hero banner video etc. */}
       <AnimatePresence>
         {isOpen && (
-          <div className="md:hidden fixed inset-0 z-[1000]">
+          <div className="md:hidden fixed inset-0 z-[9999]">
             {/* Backdrop */}
             <motion.div
               className="absolute inset-0 bg-[#101724]/70 backdrop-blur-md"
@@ -194,7 +196,7 @@ export default function Navbar({ variant = "default" }: NavbarProps) {
 
             {/* Sliding Panel - modern, full-bleed on small phones, elegant on larger */}
             <motion.div
-              className="absolute right-0 top-0 bottom-0 w-[82%] max-w-[340px] bg-[#fbf7ef] shadow-2xl border-l border-[#c99a2e]/10 flex flex-col overflow-y-auto z-[1001]"
+              className="absolute right-0 top-0 bottom-0 w-[82%] max-w-[340px] bg-[#fbf7ef] shadow-2xl border-l border-[#c99a2e]/10 flex flex-col overflow-y-auto z-[10000]"
               initial={{ x: '100%' }}
               animate={{ x: 0 }}
               exit={{ x: '100%' }}
@@ -281,6 +283,6 @@ export default function Navbar({ variant = "default" }: NavbarProps) {
           </div>
         )}
       </AnimatePresence>
-    </nav>
+    </>
   );
 }