Update public/styles.css

public/styles.css

@@ -128,7 +128,7 @@ body::before {
     border: none;
     cursor: pointer;
     padding: 0;
-    z-index: 1001;
+    z-index: 1002;
     position: relative;
 }
 
@@ -193,6 +193,28 @@ body::before {
     box-shadow: 0 6px 20px rgba(255, 168, 168, 0.4) !important;
 }
 
+.nav-overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 999;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.nav-overlay.active {
+    display: block;
+    opacity: 1;
+}
+
+body.menu-open {
+    overflow: hidden;
+}
+
 /* Mobile Navigation */
 @media (max-width: 768px) {
     .nav-toggle {
@@ -201,20 +223,21 @@ body::before {
 
     .nav-menu {
         position: fixed;
-        top: 70px;
+        top: 0;
         right: -100%;
         width: 280px;
-        height: calc(100vh - 70px);
+        height: 100vh;
         background: rgba(44, 62, 80, 0.98);
         backdrop-filter: blur(20px);
         flex-direction: column;
-        padding: 2rem;
+        padding: 5rem 2rem 2rem;
         gap: 0.5rem;
-        box-shadow: -5px 0 20px rgba(0, 0, 0, 0.3);
+        box-shadow: -5px 0 20px rgba(0, 0, 0, 0.5);
         transition: right 0.3s ease;
         overflow-y: auto;
         border-left: 1px solid rgba(255, 255, 255, 0.1);
         align-items: stretch;
+        z-index: 1001;
     }
 
     .nav-menu.active {
@@ -232,6 +255,10 @@ body::before {
         margin-top: 1rem;
         justify-content: center;
     }
+
+    .nav-container {
+        padding: 0 var(--spacing-md);
+    }
 }
 
 /* ===== HERO SECTION ===== */