Enhance Navbar responsiveness and theming

- Refactor `MobileNav` with theme context support and improved animations.
- Adjust `DesktopNav` background behavior for better clarity.
- Update `Hero` image style with scaling for visual impact.

components/Navbar/DesktopNav.tsx

@@ -40,9 +40,11 @@ const Nav = ({openNav}: Props) => {
 
     return (
         <div
-            className={`fixed ${navBg ? "shadow-md" : "fixed"} w-full transition-all duration-300 ease-in-out ${navHeight} z-[1000]`}
+            className={`fixed w-full transition-all duration-300 ease-in-out ${navHeight} z-[1000] ${
+                navBg ? "shadow-md" : ""
+            }`}
             style={{
-                backgroundColor: navBg ? "var(--nav-bg)" : "var(--primary-bg)",
+                backgroundColor: navBg ? "var(--nav-bg)" : "transparent", // <-- changed
                 color: "var(--primary-text)",
             }}
         >