fix: unify indentation and improve layout consistency in index.html and projects.html

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
+            <span class="text-white text-2xl font-bold tracking-wider"
-              class="hidden sm:inline text-white text-2xl font-bold tracking-wider"
               >KH3</span
             >
           </a>

projects.html

@@ -392,15 +392,15 @@
 
     <!-- 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"
+              class="absolute left-12 top-8 bottom-16 flex flex-col items-center opacity-0"
-              style="animation-delay: 1200ms; animation-fill-mode: forwards"
+              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"
+                class="flex items-center gap-6 opacity-0"
-                style="animation-delay: 1600ms; animation-fill-mode: forwards"
+                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">
+          <div class="relative overflow-hidden">
-            <!-- Current image -->
             <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"
+              class="flex absolute bottom-10 left-6 items-center flex-col text-white/80 hover:text-white transition-colors opacity-0"
-              style="animation-delay: 1900ms; animation-fill-mode: forwards"
+              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"

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"
+              class="absolute left-12 top-8 bottom-16 flex flex-col items-center opacity-0"
-              style="animation-delay: 1200ms; animation-fill-mode: forwards;"
+              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"
+                class="flex items-center gap-6 opacity-0"
-                style="animation-delay: 1600ms; animation-fill-mode: forwards;"
+                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) -->

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) {

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