diff --git a/.github/workflows/doc-check-linter.yml b/.github/workflows/doc-check-linter.yml
index b6f7c84..7651e10 100644
--- a/.github/workflows/doc-check-linter.yml
+++ b/.github/workflows/doc-check-linter.yml
@@ -59,7 +59,7 @@ jobs:
 
           if [ -n "${{ secrets.GPG_PUBLIC_KEY_1 }}" ]; then
             echo "${{ secrets.GPG_PUBLIC_KEY_1 }}" | gpg --import
-            echo "✅ Imported GPG_PUBLIC_KEY_1"
+            echo "✅ Imported GPG_PUBLIC_KEY_1 (Contributor Account)"
           fi
 
           if [ -n "${{ secrets.GPG_PUBLIC_KEY_2 }}" ]; then
@@ -67,21 +67,6 @@ jobs:
             echo "✅ Imported GPG_PUBLIC_KEY_2 (Contributor Account)"
           fi
 
-          if [ -n "${{ secrets.GPG_PUBLIC_KEY_3 }}" ]; then
-            echo "${{ secrets.GPG_PUBLIC_KEY_3 }}" | gpg --import
-            echo "✅ Imported GPG_PUBLIC_KEY_3 (Contributor Account)"
-          fi
-
-          if [ -n "${{ secrets.GPG_PUBLIC_KEY_4 }}" ]; then
-            echo "${{ secrets.GPG_PUBLIC_KEY_4 }}" | gpg --import
-            echo "✅ Imported GPG_PUBLIC_KEY_4 (Contributor Account)"
-          fi
-
-          if [ -n "${{ secrets.GPG_PUBLIC_KEY_5 }}" ]; then
-            echo "${{ secrets.GPG_PUBLIC_KEY_5 }}" | gpg --import
-            echo "✅ Imported GPG_PUBLIC_KEY_5 (Contributor Account)"
-          fi
-
       # ---------- Verify latest commit ----------
       - name: Verify commit signature
         # FIX: Only run strict verification if the PR is from the same repo (internal/trusted) or if it's a direct push
@@ -112,7 +97,7 @@ jobs:
             echo "🔑 Fingerprint: $FINGERPRINT"
 
             # Replaced the short ID with the full 40-character fingerprint
-            TRUSTED_KEYS="261CFF44C4FAFA769A4891463BAE437F39286F36 5CC01F41CD084AAC0593108DD432152833DA3244 A38379B51EB75EF1877A83ADBE677DAEFE33CB57 1606642895F688C9299B9E0AC97540DA6C9FA85C F5959E720D1C3DFACAD27E7588F6CD4E295C9062 97C68C42AB4DD4797FA5EB93E9A0198A7C7B3BD6"
+            TRUSTED_KEYS="261CFF44C4FAFA769A4891463BAE437F39286F36 DB132FC61BAE7350EA4F82D200BB565628B8821D 97C68C42AB4DD4797FA5EB93E9A0198A7C7B3BD6"
 
             if echo "$TRUSTED_KEYS" | grep -q "$FINGERPRINT"; then
               echo "✅ Trusted key"
diff --git a/css/global.css b/css/global.css
index 33be478..990884d 100644
--- a/css/global.css
+++ b/css/global.css
@@ -94,53 +94,71 @@ body.dark h3 {
 /* ===================================================
    ===== Common Navbar (Glassmorphic) =====
 =================================================== */
+/* ===== Navbar: Consistent Width on All Desktop Screens ===== */
 .navbar {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 0.5rem 2rem;
+    gap: 0px;
     position: fixed;
     top: 5px;
-    left: 20px;
-    right: 20px;
+    left: 50%;
+    right: auto;
+    width: calc(100% - 40px);
+    max-width: 1200px;
+    padding: 0.5rem 1rem;
+    box-sizing: border-box;
+    transform: translateX(-50%);
     z-index: 1000;
-    border-radius: 20px;
+    border-radius: 10px;
     transition: all 0.3s ease;
 }
 
-/* The styles that apply ONLY when scrolling down */
+/* ===== Brand / Logo Group ===== */
+.navbar>div:first-child {
+    margin-right: 0;
+    flex: 0 0 auto;
+}
 
-/* Light Mode Glass Effect */
-/* .glass-nav {
-    background: rgba(255, 255, 255, 0.75);
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
-    border: 1px solid rgba(255, 255, 255, 0.4);
-    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
-} */
+/* ===== Navigation Links ===== */
+.navbar .nav-links {
+    margin-left: auto;
+    margin-right: 0;
+    flex: 0 0 auto;
+}
 
+/* ===== Navbar: Initial State ===== */
 .glass-nav {
-    /* 1. Gives it a solid color */
-    /* background-color: #ffffff; */
     background-color: transparent;
-    /* 2. Increased blur to a heavy but stable range */
-    /* backdrop-filter: blur(40px); */
-    /* -webkit-backdrop-filter: blur(40px); */
-
-    /* 3. Subtle border and shadow to define the edges */
-    /* border: 1px solid rgba(255, 255, 255, 0.2); */
-    /* box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); */
-
-    /* 4. Performance boost for heavy filters */
-    /* will-change: backdrop-filter; */
-
     padding: 0.5rem 1rem;
+    transition: background 0.3s ease, backdrop-filter 0.3s ease,
+        border 0.3s ease, box-shadow 0.3s ease;
+}
+
+/* ===== Desktop Navbar: Scroll States ===== */
+/* ===== Shared Positioning for Both Scroll States ===== */
+nav.navbar.glass-nav.hero-scrolled,
+nav.navbar.glass-nav.scrolled {
+    left: 50%;
+    right: auto;
+    width: calc(100% - 40px);
+    max-width: 1200px;
+    margin: 0;
+    box-sizing: border-box;
+    transform: translateX(-50%);
+}
+
+/* ===== First Scroll: Inside Hero Section ===== */
+nav.navbar.glass-nav.hero-scrolled {
+    background: #000000ec;
+    border: 1px solid transparent;
+    box-shadow: none;
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
 }
 
-.glass-nav.scrolled {
-    top: 10px;
-    left: 120px;
-    right: 120px;
+/* ===== Second Scroll: Beyond Hero Section ===== */
+nav.navbar.glass-nav.scrolled {
     /* Ensures smooth scrolling accounts for the navbar height */
     background: rgba(255, 255, 255, 0.3);
     /* Lowered opacity (0.3) so the blur is more visible */
@@ -209,7 +227,7 @@ body.dark .glass-nav.scrolled .nav-links li a:hover {
 }
 
 .logo {
-    height: 40px;
+    height: 32px;
     width: auto;
     object-fit: contain;
     /* Comment to make logo transparent and blend with the navbar background */
@@ -219,7 +237,7 @@ body.dark .glass-nav.scrolled .nav-links li a:hover {
 }
 
 .brand-name {
-    font-size: 1.8rem;
+    font-size: 1.4rem;
     letter-spacing: 1px;
     text-transform: uppercase;
     font-family: 'Montserrat', sans-serif;
@@ -236,11 +254,6 @@ body.dark .glass-nav.scrolled .nav-links li a:hover {
     text-shadow: 1px 4px 8px rgba(0, 0, 0, 0.2);
 }
 
-.glass-nav.scrolled .brand-name-vimal {
-    transition: color 0.3s ease;
-    text-shadow: 1px 4px 8px rgba(0, 0, 0, 0.4);
-}
-
 /* Add a hover effect for extra flair */
 .brand-name:hover {
     color: #000;
@@ -254,10 +267,12 @@ body.dark .brand-name:hover {
     transform: translateY(-2px);
 }
 
+/* ===== Brand Text: Scrolled Glass Navbar ===== */
 .glass-nav.scrolled .brand-name-vimal {
     color: #000000;
     /* Darker text for better contrast */
     transition: color 0.3s ease;
+    text-shadow: 1px 4px 8px rgba(0, 0, 0, 0.4);
 }
 
 body.dark .glass-nav.scrolled .brand-name-vimal {
@@ -265,6 +280,7 @@ body.dark .glass-nav.scrolled .brand-name-vimal {
     /* Bright white for dark mode */
 }
 
+/* ===== Brand Text: Default White ===== */
 .brand-name-vimal {
     color: #ffffff;
     transition: color 0.3s ease;
@@ -278,20 +294,26 @@ body.dark .glass-nav.scrolled .brand-name-vimal {
     color: var(--color-primary);
 }
 
-/* Hamburger Menu Dropped in Desktop view */
-.hamburger {
-    display: none;
-}
-
-/* ===== Nav Links ===== */
+/* ===== Navigation Links ===== */
 .nav-links {
-    list-style: none;
     display: flex;
+    align-items: center;
     gap: 25px;
+    list-style: none;
+    margin-left: 180px;
+    padding: 0;
     font-family: "Outfit", sans-serif;
     font-size: 1.1rem;
     font-weight: 500;
-    /* margin-right: 10px; */
+}
+
+/* ===== Hamburger: Hidden on Desktop ===== */
+.navbar>div:last-child {
+    display: none;
+}
+
+.hamburger {
+    display: none;
 }
 
 .nav-links li a {
@@ -374,6 +396,39 @@ body.dark nav.scrolled .hamburger {
    769px – 1024px
 ========================================= */
 @media (min-width: 769px) and (max-width: 1024px) {
+
+    nav.navbar.glass-nav,
+    nav.navbar.glass-nav.hero-scrolled,
+    nav.navbar.glass-nav.scrolled {
+        left: 15px;
+        right: 15px;
+        width: auto;
+        max-width: none;
+        margin: 0;
+        padding: 0.5rem 1rem;
+        box-sizing: border-box;
+        transform: none;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 0;
+    }
+
+    .navbar>div:first-child {
+        margin-right: 0;
+        flex: 0 0 auto;
+    }
+
+    .navbar .brand {
+        flex-shrink: 0;
+    }
+
+    .navbar .nav-links {
+        margin-left: auto;
+        margin-right: 0;
+        flex: 0 1 auto;
+    }
+
     .hero-content {
         max-width: 750px;
         margin: auto;
@@ -400,27 +455,6 @@ body.dark nav.scrolled .hamburger {
         margin-top: 30px;
     }
 
-    /* ================================
-       NAVBAR
-    ================================ */
-    .navbar {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 0.5rem 1rem;
-        top: 10px;
-        left: 15px;
-        right: 15px;
-        border-radius: 12px;
-        transition: all 0.3s ease;
-    }
-
-    .navbar.scrolled {
-        /* top: 10px; */
-        left: 20px;
-        right: 20px;
-    }
-
     /* ================================
        BRAND
     ================================ */
@@ -444,7 +478,7 @@ body.dark nav.scrolled .hamburger {
         display: flex;
         gap: 6px;
         white-space: nowrap;
-        font-size: 1.8rem;
+        font-size: 1.4rem;
         transition: all 0.3s ease;
     }
 
@@ -545,53 +579,74 @@ body.dark nav.scrolled .hamburger {
    Up to 768px
 ========================================= */
 @media (max-width: 768px) {
-    .navbar {
-        display: flex;
-        justify-content: space-between;
-        padding: 0.1rem 0.5rem;
-        top: 5px;
+
+    nav.navbar.glass-nav,
+    nav.navbar.glass-nav.hero-scrolled,
+    nav.navbar.glass-nav.scrolled {
         left: 10px;
         right: 10px;
-        border-radius: 12px;
-        transition: all 0.3s ease;
+        width: auto;
+        max-width: none;
+        margin: 0;
+        padding: 0.35rem 0.75rem;
+        box-sizing: border-box;
+        transform: none;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 0;
     }
 
-    .navbar.scrolled {
-        top: 10px;
-        left: 15px;
-        right: 15px;
+    .navbar>div:first-child {
+        margin-right: 0;
+        flex: 0 0 auto;
     }
 
-    .brand {
+    .navbar .brand {
         display: flex;
         align-items: center;
+        flex-shrink: 0;
     }
 
-    .logo {
+    .navbar .logo {
         height: 30px;
         width: auto;
         object-fit: contain;
     }
 
-    .brand-name {
-        letter-spacing: 0.5px;
-        text-transform: uppercase;
-        font-display: block;
+
+    .navbar .brand-name {
         position: absolute;
-        /* Takes the text out of the normal flow */
         left: 50%;
-        /* Pushes the left edge to the exact middle */
         transform: translateX(-50%);
-        /* Pulls it back by half its own width for true centering */
-
-        /* Ensure the text is laid out nicely */
         display: flex;
-        gap: 5px;
-
+        gap: 4px;
         white-space: nowrap;
-        transition: all 0.3s ease;
-        font-size: 1.5rem;
+        font-size: 1.1rem;
+        letter-spacing: 0.5px;
+    }
+
+    .navbar .hamburger {
+        display: block;
+        flex: 0 0 auto;
+        margin-left: auto;
+    }
+
+    .navbar.scrolled {
+        top: 10px;
+        left: 15px;
+        right: 15px;
+    }
+
+    .brand {
+        display: flex;
+        align-items: center;
+    }
 
+    .logo {
+        height: 30px;
+        width: auto;
+        object-fit: contain;
     }
 
     /* Hamburger Menu */
diff --git a/js/global-dark-mode-particles.js b/js/global-dark-mode-particles.js
index c09ddfd..2fa96c0 100644
--- a/js/global-dark-mode-particles.js
+++ b/js/global-dark-mode-particles.js
@@ -202,32 +202,36 @@ function updateToggleIcon() {
 
 // --- 1. THE MASTER LOGO FUNCTION ---
 // This handles everything: Scroll position + Dark/Light mode
+
+/* ===== Navbar Scroll and Logo Controller ===== */
 function updateNavbarAndLogo() {
-  const navbar = document.querySelector("nav");
+  const navbar = document.querySelector(".navbar");
+  const hero = document.querySelector(".hero");
   const logo = document.getElementById("site-logo");
-  if (!navbar || !logo) return;
 
-  const isScrolled = window.scrollY > 50;
+  if (!navbar || !hero || !logo) return;
+
+  const scrollY = window.scrollY;
   const isDarkMode = document.body.classList.contains("dark");
 
-  // Handle Scroll Classes
-  if (isScrolled) {
-    navbar.classList.add("scrolled");
+  // State 1: At the top of the page
+  const isAtTop = scrollY <= 50;
 
-    // When Scrolled:
-    // Light mode = Solid white nav (needs black logo)
-    // Dark mode = Solid dark nav (needs white logo)
-    if (isDarkMode) {
-      logo.src = "/images/logo-white.png";
-    } else {
-      logo.src = "/images/logo-black.png";
-    }
-  } else {
-    navbar.classList.remove("scrolled");
+  // State 2: Scrolled, but still inside the hero section
+  const isHeroScrolled = !isAtTop && hero.getBoundingClientRect().bottom > 0;
 
-    // When at the Top:
-    // Nav is transparent, always use the white logo
+  // State 3: Scrolled beyond the hero section
+  const isPastHero = !isAtTop && hero.getBoundingClientRect().bottom <= 0;
+
+  // Apply the appropriate navbar state
+  navbar.classList.toggle("hero-scrolled", isHeroScrolled);
+  navbar.classList.toggle("scrolled", isPastHero);
+
+  // Keep the logo white until the hero section ends
+  if (!isPastHero || isDarkMode) {
     logo.src = "/images/logo-white.png";
+  } else {
+    logo.src = "/images/logo-black.png";
   }
 }
 
@@ -267,8 +271,9 @@ document.addEventListener("DOMContentLoaded", () => {
   updateNavbarAndLogo();
 
   // Listen for scrolling and update the logo/navbar dynamically
-  window.addEventListener("scroll", () => {
-    updateNavbarAndLogo();
+  // Update the navbar and logo while scrolling
+  window.addEventListener("scroll", updateNavbarAndLogo, {
+    passive: true,
   });
 
   // Checking if initParticles exists before calling it