Update mobile menu

shahealamit · web-flow · commit 230af3cac536 · 2026-01-11T21:53:37.000+05:30
diff --git a/index.html b/index.html
@@ -162,6 +162,58 @@
             .solar-system { transform: scale(0.65); height: 350px; } 
             .nexus-wrapper { transform: scale(0.75); }
         }
+        /* Fix extra blank space after hero (mobile) */
+#home {
+  overflow-x: hidden;
+}
+
+        /* ================= MOBILE HERO FIX ================= */
+@media (max-width: 768px) {
+
+    @media (max-width: 768px) {
+
+  #home h1 {
+    font-size: 2.2rem;
+    line-height: 1.2;
+    text-align: center;
+  }
+
+  #home h2 {
+    font-size: 1.4rem;
+    text-align: center;
+  }
+
+  #home p {
+    text-align: center;
+    font-size: 1rem;
+  }
+
+  #home .flex.gap-4 {
+    justify-content: center;
+  }
+
+}
+
+  /* Reduce hero animation size */
+  .solar-system {
+    transform: scale(0.6);
+    height: 300px;
+    margin-top: -40px;
+  }
+
+  /* Reduce orbit sizes */
+  .orbit-1 { width: 160px; height: 160px; }
+  .orbit-2 { width: 260px; height: 260px; }
+  .orbit-3 { width: 360px; height: 360px; }
+
+  /* Center animation properly */
+  #home .solar-system {
+    justify-content: center;
+    align-items: center;
+  }
+
+}
+
     </style>
 </head>
 <body class="bg-slate-950 text-slate-300">
@@ -194,7 +246,9 @@
     </nav>
 
    <!-- Hero  -->
-<section id="home" class="h-[85vh] flex items-center pt-24 relative overflow-hidden">
+<section id="home"
+  class="min-h-screen md:h-[85vh] flex items-center pt-28 md:pt-24 relative overflow-hidden">
+
 
     <!-- Background Video -->
     <div class="absolute inset-0 -z-20">
@@ -1011,4 +1065,3 @@ <h4 class="text-white font-semibold mb-6 flex items-center gap-2">
     </script>
 </body>
 </html>
-
