diff --git a/assets/images/kh3_logo.png b/assets/images/kh3_logo.png
index 4207181..f499e7e 100644
Binary files a/assets/images/kh3_logo.png and b/assets/images/kh3_logo.png differ
diff --git a/assets/images/kh3_logo1.png b/assets/images/kh3_logo1.png
index f499e7e..4207181 100644
Binary files a/assets/images/kh3_logo1.png and b/assets/images/kh3_logo1.png differ
diff --git a/index.html b/index.html
index b97d46f..daed5d9 100644
--- a/index.html
+++ b/index.html
@@ -372,8 +372,7 @@
             class="flex items-center gap-3 animate-logo-float hover:opacity-80 transition-opacity"
           >
             <img src="assets/images/kh3_logo.png" alt="KH3" class="w-16 h-16" />
-            <span
-              class="hidden sm:inline text-white text-2xl font-bold tracking-wider"
+            <span class="text-white text-2xl font-bold tracking-wider"
               >KH3</span
             >
           </a>
diff --git a/projects.html b/projects.html
index dceba4e..55132f7 100644
--- a/projects.html
+++ b/projects.html
@@ -34,7 +34,7 @@
               >KH3</span
             >
           </a>
-          </div>
+        </div>
 
         <!-- Navigation Links - Inverted C Layout -->
         <nav class="flex-1 relative">
@@ -349,12 +349,12 @@
                     >S</span
                   >
                 </a>
-        </div>
-        </div>
+              </div>
+            </div>
           </div>
         </nav>
-        </div>
       </div>
+    </div>
 
     <!-- Static Logo and Menu -->
     <div class="fixed top-6 left-8 z-40">
@@ -368,7 +368,7 @@
           >KH3</span
         >
       </a>
-          </div>
+    </div>
 
     <!-- Menu Toggle with Transparent Background -->
     <div class="fixed top-6 right-8 z-40">
@@ -386,21 +386,21 @@
           <span class="w-1 h-1 bg-white rounded-full"></span>
           <span class="w-1 h-1 bg-white rounded-full"></span>
           <span class="w-1 h-1 bg-white rounded-full"></span>
-            </div>
-          </div>
         </div>
+      </div>
+    </div>
 
     <!-- Main Content -->
     <main class="pt-20">
-      <!-- Hero Section -->
+      <!-- Hero Section (Left panel + vertical line + diamond markers, title with horizontal rule) -->
       <section class="relative bg-kh3-black hero-section">
         <div class="grid grid-cols-1 md:grid-cols-2 min-h-[90vh]">
           <!-- Left dark panel -->
-          <div class="relative bg-kh3-black flex items-center justify-center">
+          <div class="relative bg-kh3-black flex items-center">
             <!-- Vertical timeline with diamonds -->
             <div
-              class="absolute left-12 top-8 bottom-16 flex flex-col items-center opacity-0 animate-fade-in-up"
-              style="animation-delay: 1200ms; animation-fill-mode: forwards"
+              class="absolute left-12 top-8 bottom-16 flex flex-col items-center opacity-0"
+              style="animation: fadeInUp 800ms ease-out 1200ms forwards"
             >
               <div class="w-px flex-1 bg-neutral-800"></div>
               <div class="w-2.5 h-2.5 bg-white transform rotate-45"></div>
@@ -412,10 +412,10 @@
             </div>
 
             <!-- Title with horizontal ruler -->
-            <div class="pl-28 pr-6 w-full relative overflow-visible z-30">
+            <div class="pl-28 pr-6 w-full">
               <div
-                class="flex items-center gap-6 opacity-0 animate-fade-in-up"
-                style="animation-delay: 1600ms; animation-fill-mode: forwards"
+                class="flex items-center gap-6 opacity-0"
+                style="animation: fadeInUp 800ms ease-out 1600ms forwards"
               >
                 <div class="flex-1 h-px bg-white"></div>
                 <h1
@@ -429,13 +429,12 @@
           </div>
 
           <!-- Right image panel -->
-          <div class="relative overflow-hidden pt-20 z-10">
-            <!-- Current image -->
+          <div class="relative overflow-hidden">
             <img
               id="projectsCurrentImg"
               src="assets/images/room.png"
               alt="KH3 Projects"
-              class="w-full h-full object-cover opacity-0 absolute inset-0"
+              class="w-full h-full object-cover opacity-0"
               style="animation: diagMaskReveal 1500ms ease-out 300ms forwards"
             />
             <!-- Next image (for transitions) -->
@@ -448,8 +447,8 @@
             <!-- Down arrow prompt -->
             <button
               id="projectsScrollArrow"
-              class="flex absolute bottom-10 left-6 items-center flex-col text-white/80 hover:text-white transition-colors opacity-0 animate-fade-in-up"
-              style="animation-delay: 1900ms; animation-fill-mode: forwards"
+              class="flex absolute bottom-10 left-6 items-center flex-col text-white/80 hover:text-white transition-colors opacity-0"
+              style="animation: fadeInUp 800ms ease-out 1900ms forwards"
             >
               <span class="text-xs tracking-widest mb-2">SCROLL</span>
               <svg
@@ -482,7 +481,7 @@
                 class="category-filter px-6 py-3 text-white border border-white/30 rounded-full hover:bg-white hover:text-kh3-black transition-all duration-300 active"
                 data-category="all"
               >
-                ALL WHAT
+                ALL PROJECTS
               </button>
               <button
                 class="category-filter px-6 py-3 text-white border border-white/30 rounded-full hover:bg-white hover:text-kh3-black transition-all duration-300"
@@ -552,7 +551,7 @@
                 id="modalCategory"
                 class="text-kh3-red text-sm font-medium tracking-wider"
               ></p>
-          </div>
+            </div>
             <button
               id="closeModal"
               class="text-white/70 hover:text-white transition-colors duration-300"
@@ -571,7 +570,7 @@
                 ></path>
               </svg>
             </button>
-        </div>
+          </div>
 
           <!-- Modal Body -->
           <div class="flex flex-col lg:flex-row h-full">
@@ -593,8 +592,8 @@
                 >
                   <div id="imageDots" class="flex space-x-2">
                     <!-- Dots will be generated here -->
-          </div>
-        </div>
+                  </div>
+                </div>
 
                 <!-- Previous/Next Buttons -->
                 <button
@@ -640,9 +639,9 @@
                 >
                   <span id="imageCounter">1</span> /
                   <span id="totalImages">1</span>
-          </div>
-          </div>
-        </div>
+                </div>
+              </div>
+            </div>
 
             <!-- Project Details Section -->
             <div
@@ -661,7 +660,7 @@
                     id="modalDescription"
                     class="text-white/80 text-sm leading-relaxed"
                   ></p>
-      </div>
+                </div>
 
                 <!-- Project Details -->
                 <div>
diff --git a/services.html b/services.html
index 635ee3e..64df387 100644
--- a/services.html
+++ b/services.html
@@ -544,11 +544,11 @@
       <section class="relative bg-kh3-black hero-section">
         <div class="grid grid-cols-1 md:grid-cols-2 min-h-[90vh]">
           <!-- Left dark panel -->
-          <div class="relative bg-kh3-black flex items-center justify-center">
+          <div class="relative bg-kh3-black flex items-center">
             <!-- Vertical timeline with diamonds -->
             <div
-              class="absolute left-12 top-8 bottom-16 flex flex-col items-center opacity-0 animate-fade-in-up"
-              style="animation-delay: 1200ms; animation-fill-mode: forwards;"
+              class="absolute left-12 top-8 bottom-16 flex flex-col items-center opacity-0"
+              style="animation: fadeInUp 800ms ease-out 1200ms forwards"
             >
               <div class="w-px flex-1 bg-neutral-800"></div>
               <div class="w-2.5 h-2.5 bg-white transform rotate-45"></div>
@@ -560,10 +560,10 @@
             </div>
 
             <!-- Title with horizontal ruler -->
-            <div class="pl-28 pr-6 w-full relative overflow-visible z-30">
+            <div class="pl-28 pr-6 w-full">
               <div
-                class="flex items-center gap-6 opacity-0 animate-fade-in-up"
-                style="animation-delay: 1600ms; animation-fill-mode: forwards;"
+                class="flex items-center gap-6 opacity-0"
+                style="animation: fadeInUp 800ms ease-out 1600ms forwards"
               >
                 <div class="flex-1 h-px bg-white"></div>
                 <h1
@@ -577,13 +577,13 @@
           </div>
 
         <!-- Right image panel -->
-        <div class="relative overflow-hidden pt-32 z-10">
+        <div class="relative overflow-hidden">
           <!-- Current image -->
           <img
             id="servicesCurrentImg"
             src="assets/images/room.png"
             alt="KH3 Services"
-            class="w-full h-full object-cover opacity-0 absolute inset-0"
+            class="w-full h-full object-cover opacity-0"
             style="animation: diagMaskReveal 1500ms ease-out 300ms forwards"
           />
           <!-- Next image (for transitions) -->
diff --git a/styles/output.css b/styles/output.css
index d404a1d..544e0df 100644
--- a/styles/output.css
+++ b/styles/output.css
@@ -1428,6 +1428,10 @@ video {
   gap: 2rem;
 }
 
+.gap-2 {
+  gap: 0.5rem;
+}
+
 .space-x-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.5rem * var(--tw-space-x-reverse));
@@ -1689,6 +1693,11 @@ video {
   background-color: transparent;
 }
 
+.bg-red-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
+}
+
 .bg-opacity-20 {
   --tw-bg-opacity: 0.2;
 }
@@ -1983,6 +1992,10 @@ video {
   padding-right: 2rem;
 }
 
+.pl-8 {
+  padding-left: 2rem;
+}
+
 .text-center {
   text-align: center;
 }
@@ -2531,6 +2544,10 @@ video {
     top: 7rem;
   }
 
+  .md\:left-12 {
+    left: 3rem;
+  }
+
   .md\:ml-12 {
     margin-left: 3rem;
   }
@@ -2575,6 +2592,14 @@ video {
     width: 2rem;
   }
 
+  .md\:w-16 {
+    width: 4rem;
+  }
+
+  .md\:flex-1 {
+    flex: 1 1 0%;
+  }
+
   .md\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -2595,6 +2620,14 @@ video {
     align-items: center;
   }
 
+  .md\:justify-center {
+    justify-content: center;
+  }
+
+  .md\:gap-6 {
+    gap: 1.5rem;
+  }
+
   .md\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-x-reverse: 0;
     margin-right: calc(1rem * var(--tw-space-x-reverse));
@@ -2635,6 +2668,10 @@ video {
     padding-top: 2rem;
   }
 
+  .md\:pl-28 {
+    padding-left: 7rem;
+  }
+
   .md\:text-2xl {
     font-size: 1.5rem;
     line-height: 2rem;
@@ -2726,6 +2763,11 @@ video {
   .lg\:gap-24 {
     gap: 6rem;
   }
+
+  .lg\:text-6xl {
+    font-size: 3.75rem;
+    line-height: 1;
+  }
 }
 
 @media (min-width: 1280px) {
diff --git a/who.html b/who.html
index 1c4aba8..d3ab284 100644
--- a/who.html
+++ b/who.html
@@ -492,7 +492,7 @@
           </div>
 
           <!-- Team Members Grid -->
-          <div class="mt-20" style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem;">
+          <div class="mt-20 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 md:gap-6">
             <!-- Team Member 1 -->
             <div class="group relative team-card" data-card-index="0">
               <div