diff --git a/styles/main.css b/styles/main.css
index cfbf1794..85b209ae 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -149,49 +149,101 @@ html {
 
     /* ================== Mobile Styles ================== */
     @media (max-width: 768px) {
-      /* Navbar links hidden initially */
-      .navbar .container .navbar-nav {
-        display: none;
-        position: fixed;
-        top: 0;
-        left: 0;
+      /* Enhanced mobile navbar */
+      .navbar {
+        padding: 0.5rem 0;
+        min-height: 60px;
+      }
+      
+      .navbar-brand {
+        font-size: 1.5rem;
+        margin-left: 0;
+      }
+      
+      .navbar-toggler {
+        border: none;
+        padding: 0.25rem 0.5rem;
+        margin-right: 0;
+      }
+      
+      .navbar-toggler:focus {
+        box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.25);
+      }
+      
+      .navbar-toggler-icon {
+        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(37, 99, 235, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+        width: 1.5em;
+        height: 1.5em;
+      }
+      
+      /* Mobile navbar collapse */
+      .navbar-collapse {
+        background: rgba(255, 255, 255, 0.98);
+        backdrop-filter: blur(10px);
+        border-radius: 12px;
+        margin-top: 1rem;
+        padding: 1rem;
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+        border: 1px solid rgba(37, 99, 235, 0.1);
+      }
+      
+      .navbar-nav {
+        gap: 0.5rem;
+        padding: 0;
+        margin: 0;
+      }
+      
+      .nav-item {
         width: 100%;
-        height: 100vh;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        background-color: #ffffff;
-        z-index: 999;
+        margin: 0;
       }
-      .navbar .container .navbar-brand {
-        margin-left: 1rem;
+      
+      .nav-link {
+        padding: 0.75rem 1rem;
+        font-size: 1rem;
+        text-align: center;
+        width: 100%;
+        margin: 0.25rem 0;
+        border-radius: 8px;
+        transition: all 0.3s ease;
       }
-
-      /* Show menu when checkbox is checked */
-      #nav-toggle:checked ~ .navbar-nav {
-        display: flex;
+      
+      .nav-link:hover {
+        background: rgba(37, 99, 235, 0.1);
+        transform: none;
       }
-
-      /* Hamburger toggle visible on mobile */
-      .nav-toggle-label {
-        display: block;
-        cursor: pointer;
-        font-size: 1.8rem;
+      
+      .nav-link.active {
+        background: rgba(37, 99, 235, 0.15);
         color: #2563eb;
-        z-index: 1000;
+        font-weight: 600;
       }
-
-      /* Close icon hidden initially */
-      .close-icon {
-        display: none;
+    }
+    
+    /* Extra small devices (phones, 576px and down) */
+    @media (max-width: 576px) {
+      .navbar {
+        padding: 0.4rem 0;
+        min-height: 56px;
       }
-
-      /* Toggle hamburger and close icons */
-      #nav-toggle:checked + .nav-toggle-label .menu-icon {
-        display: none;
+      
+      .navbar-brand {
+        font-size: 1.3rem;
       }
-      #nav-toggle:checked + .nav-toggle-label .close-icon {
-        display: inline-block;
+      
+      .container {
+        padding: 0 1rem;
+      }
+      
+      .navbar-collapse {
+        margin-top: 0.5rem;
+        padding: 0.75rem;
+        border-radius: 8px;
+      }
+      
+      .nav-link {
+        padding: 0.6rem 0.8rem;
+        font-size: 0.95rem;
       }
     }
     /* ================== Navbar Styles End Here ================== */
@@ -202,6 +254,65 @@ html {
       background-color: #f8fafc;
       padding: 2rem 0;
     }
+    
+    /* Mobile hero section adjustments */
+    @media (max-width: 768px) {
+      .heroSection {
+        margin-top: 60px;
+        padding: 2rem 0;
+      }
+      
+      .heroSection-Container {
+        flex-direction: column;
+        text-align: center;
+      }
+      
+      .heroSection-Left {
+        margin-bottom: 2rem;
+      }
+      
+      .heroSection-Left h1 {
+        font-size: 2.5rem;
+        margin: 1rem 0;
+      }
+      
+      .heroSection-Left p {
+        font-size: 1rem;
+        text-align: center;
+      }
+      
+      .ctaBtn-Container {
+        justify-content: center;
+        flex-wrap: wrap;
+      }
+      
+      .heroSectionBtn,
+      .heroSectionBtnOutline {
+        padding: 0.75rem 2rem !important;
+        font-size: 1rem;
+        margin: 0.5rem;
+        display: inline-block;
+        width: auto;
+      }
+    }
+    
+    @media (max-width: 576px) {
+      .heroSection {
+        margin-top: 56px;
+        padding: 1.5rem 0;
+      }
+      
+      .heroSection-Left h1 {
+        font-size: 2rem;
+      }
+      
+      .heroSectionBtn,
+      .heroSectionBtnOutline {
+        padding: 0.6rem 1.5rem !important;
+        font-size: 0.9rem;
+        margin: 0.25rem;
+      }
+    }
 
     .heroSection-Container {
       display: flex;
@@ -338,9 +449,57 @@ html {
     /* ================== Hero Styles End Here ================== */
 
     /* ================== Challenge Styles Start Here ================== */
-    /**#challengeSection {
+    #challengeSection {
       padding: 2rem 0;
     }
+    
+    /* Mobile challenge section adjustments */
+    @media (max-width: 768px) {
+      #challengeSection {
+        padding: 2rem 0;
+      }
+      
+      .challengeContainer {
+        padding: 0 1rem;
+      }
+      
+      .challengeContainer .card {
+        margin: 1rem 0;
+        border-radius: 12px;
+      }
+      
+      .card-body {
+        padding: 1rem;
+      }
+      
+      .card-title {
+        font-size: 1.1rem;
+        margin-bottom: 0.75rem;
+      }
+      
+      .card-text {
+        font-size: 0.9rem;
+        line-height: 1.5;
+      }
+    }
+    
+    @media (max-width: 576px) {
+      #challengeSection {
+        padding: 1.5rem 0;
+      }
+      
+      .challengeContainer {
+        padding: 0 0.5rem;
+      }
+      
+      .challengeContainer .card {
+        margin: 0.75rem 0;
+      }
+      
+      .card-body {
+        padding: 0.75rem;
+      }
+    }
 
     .challengeContainer .card {
       box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
@@ -916,15 +1075,22 @@ html {
     /* Responsive */
     @media (max-width: 768px) {
       #aboutSection {
-        padding: 3rem 1rem;
+        padding: 2rem 1rem;
       }
 
       #aboutSection .secHeader {
         font-size: 1.8rem;
+        text-align: center;
+        margin-bottom: 2rem;
+      }
+
+      .aboutContainer {
+        text-align: center;
       }
 
       .aboutContainer .col-10 {
         font-size: 1rem;
+        padding: 0 1rem;
         line-height: 1.6;
       }
 
@@ -1299,6 +1465,71 @@ main .scroll_to_top {
   }
 }
 
+/* Enhanced mobile layout fixes */
+@media (max-width: 768px) {
+  /* General mobile layout improvements */
+  .container {
+    padding: 0 1rem;
+  }
+  
+  /* Section headers */
+  .secHeader {
+    font-size: 1.8rem;
+    text-align: center;
+    margin-bottom: 2rem;
+  }
+  
+  /* Card layouts */
+  .row {
+    margin: 0 -0.5rem;
+  }
+  
+  .col-md-4,
+  .col-md-6,
+  .col-md-8,
+  .col-md-10 {
+    padding: 0 0.5rem;
+    margin-bottom: 1rem;
+  }
+  
+  /* Button improvements */
+  .btn {
+    padding: 0.75rem 1.5rem;
+    font-size: 0.9rem;
+    margin: 0.25rem;
+  }
+  
+  /* Text improvements */
+  p {
+    font-size: 0.95rem;
+    line-height: 1.6;
+  }
+  
+  h1, h2, h3, h4, h5, h6 {
+    text-align: center;
+    margin-bottom: 1rem;
+  }
+}
+
+@media (max-width: 576px) {
+  .container {
+    padding: 0 0.75rem;
+  }
+  
+  .secHeader {
+    font-size: 1.5rem;
+  }
+  
+  .btn {
+    padding: 0.6rem 1.2rem;
+    font-size: 0.85rem;
+  }
+  
+  p {
+    font-size: 0.9rem;
+  }
+}
+
 @media (max-width: 576px) {
   .rankPosition,
   .rankPoints {