diff --git a/styles.css b/styles.css
index 105bc0b..1ef2e7b 100644
--- a/styles.css
+++ b/styles.css
@@ -45,7 +45,7 @@ header {
     position: fixed;
     width: 100%;
     top: 0;
-    z-index: 1000;
+    /* z-index: 1; */
     box-shadow: var(--shadow);
 }
 
@@ -65,6 +65,7 @@ nav {
     color: white;
 }
 
+
 .nav-links {
     display: flex;
     list-style: none;
@@ -279,25 +280,42 @@ footer {
 /* Responsive Design */
 @media (max-width: 768px) {
     .nav-links {
-        display: none;
+
         position: absolute;
-        top: 100%;
-        left: 0;
-        width: 100%;
+        top: -300px;
+        right: 0;
         background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+        width: 100%;
         flex-direction: column;
-        padding: 2rem;
-        gap: 1rem;
+        gap: 1.5rem;
+        padding: 2rem 0;
+        transition: transform 1s ease, top 0.4s ease;
+        transform: translateY(-100%);
     }
 
     .nav-links.active {
-        display: flex;
+        top: 60px;
+        transform: translateY(0);
     }
 
     .mobile-menu {
         display: block;
     }
 
+    nav .nav-links a {
+        font-size: 1.2rem;
+        padding: 0.5rem 0;
+    }
+
+    .logo, header{
+  z-index:1000;
+}
+
+.nav-links {
+  z-index:-1;
+}
+
+
     .hero h1 {
         font-size: 2.5rem;
     }