diff --git a/about.html b/about.html
index 4fc66e1..d040b5b 100644
--- a/about.html
+++ b/about.html
@@ -11,10 +11,7 @@
     />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@600;800&display=swap"
-      rel="stylesheet"
-    />
+
     <link
       href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap"
       rel="stylesheet"
@@ -29,9 +26,9 @@
       <div class="p-8 flex flex-col h-full">
         <!-- Logo -->
         <div class="flex items-center gap-3 mb-12">
-          <img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-12" />
+            <img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-12" />
           <span class="text-white text-2xl font-bold tracking-wider">KH3</span>
-        </div>
+          </div>
 
         <!-- Navigation Links - Inverted C Layout -->
         <nav class="flex-1 relative">
@@ -43,8 +40,8 @@
                 <a
                   href="index.html"
                   class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat"
-                >
-                  <span
+          >
+            <span
                     class="inline-block opacity-0 animate-fade-in-left"
                     style="
                       animation-delay: 0.05s;
@@ -53,7 +50,7 @@
                     "
                     >H</span
                   >
-                  <span
+            <span
                     class="inline-block opacity-0 animate-fade-in-left"
                     style="
                       animation-delay: 0.075s;
@@ -83,8 +80,8 @@
                 </a>
 
                 <!-- ABOUT US - Slightly right -->
-                <a
-                  href="about.html"
+            <a
+              href="about.html"
                   class="block text-white text-lg font-medium border-b border-white pb-1 ml-6 font-montserrat"
                 >
                   <span
@@ -162,8 +159,8 @@
                 </a>
 
                 <!-- SERVICES - More right -->
-                <a
-                  href="services.html"
+            <a
+              href="services.html"
                   class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-12 font-montserrat"
                 >
                   <span
@@ -400,7 +397,7 @@
 
                 <!-- PARTNERS - Back to left -->
                 <a
-                  href="brands.html"
+                  href="partners.html"
                   class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat"
                 >
                   <span
@@ -478,44 +475,45 @@
                 </a>
               </div>
             </div>
-          </div>
-        </nav>
+      </div>
+    </nav>
       </div>
     </div>
 
-    <!-- Header -->
-    <header
-      class="fixed top-0 left-0 right-0 z-40 bg-kh3-black/90 backdrop-blur-sm"
-    >
-      <div
-        class="container mx-auto px-8 py-4 flex justify-between items-center"
-      >
-        <!-- Logo -->
-        <a href="index.html" class="flex items-center gap-3">
-          <img
-            src="assets/images/kh3_logo_dark.png"
-            alt="KH3"
-            class="w-12 h-12"
-          />
-          <span class="text-white text-xl font-bold tracking-wider">KH3</span>
-        </a>
+    <!-- Static Logo and Menu -->
+    <div class="fixed top-6 left-8 z-40">
+          <div class="flex items-center gap-3">
+        <img
+          src="assets/images/kh3_logo_dark.png"
+          alt="KH3"
+          class="w-12 h-12"
+        />
+        <span
+          class="text-white text-2xl font-bold tracking-wider drop-shadow-lg"
+              >KH3</span
+            >
+          </div>
+    </div>
 
-        <!-- Menu Grid -->
-        <div class="cursor-pointer" id="menuToggle">
-          <div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGrid">
-            <span class="w-1 h-1 bg-white"></span>
-            <span class="w-1 h-1 bg-white"></span>
-            <span class="w-1 h-1 bg-white"></span>
-            <span class="w-1 h-1 bg-white"></span>
-            <span class="w-1 h-1 bg-white"></span>
-            <span class="w-1 h-1 bg-white"></span>
-            <span class="w-1 h-1 bg-white"></span>
-            <span class="w-1 h-1 bg-white"></span>
-            <span class="w-1 h-1 bg-white"></span>
+    <!-- Menu Toggle with Transparent Background -->
+    <div class="fixed top-6 right-8 z-40">
+      <div
+        class="cursor-pointer bg-black/30 backdrop-blur-sm rounded-lg p-3"
+        id="menuToggle"
+      >
+        <div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGrid">
+              <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>
+              <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>
+              <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>
-    </header>
 
     <!-- Main Content -->
     <main class="pt-20">
@@ -536,7 +534,7 @@
               <div class="w-px flex-1 bg-neutral-800"></div>
               <div class="w-2.5 h-2.5 bg-white transform rotate-45"></div>
               <div class="w-px flex-1 bg-neutral-800"></div>
-            </div>
+      </div>
 
             <!-- Title with horizontal ruler -->
             <div class="pl-28 pr-6 w-full">
@@ -544,15 +542,15 @@
                 class="flex items-center gap-6 opacity-0"
                 style="animation: fadeInUp 800ms ease-out 1600ms forwards"
               >
-                <div class="flex-1 h-px bg-neutral-700"></div>
+                <div class="flex-1 h-px bg-white"></div>
                 <h1
                   class="whitespace-nowrap text-4xl md:text-6xl tracking-[0.2em] font-bold"
                 >
                   ABOUT US
                 </h1>
-                <div class="flex-1 h-px bg-neutral-700"></div>
-              </div>
-            </div>
+                <div class="flex-1 h-px bg-white"></div>
+        </div>
+      </div>
           </div>
 
           <!-- Right image panel -->
@@ -590,108 +588,459 @@
         </div>
       </section>
 
-      <!-- About Section -->
-      <section class="py-20 bg-white text-kh3-black">
+      <!-- Dream Design Deliver Section -->
+      <section class="py-20 bg-kh3-black text-white relative">
         <div class="container mx-auto px-8 max-w-6xl">
           <div class="text-center">
-            <h2
-              class="text-4xl font-bold mb-12 opacity-0"
+            <!-- Elegant horizontal layout -->
+            <div
+              class="flex flex-col md:flex-row items-center justify-center space-y-4 md:space-y-0 md:space-x-8 opacity-0"
               style="animation: fadeInUp 1s ease-out 0.8s forwards"
             >
-              OUR STORY
-            </h2>
-            <div class="text-lg leading-relaxed space-y-6 max-w-4xl mx-auto">
-              <p
-                class="opacity-0"
-                style="animation: fadeInUp 1s ease-out 1s forwards"
-              >
-                BASED IN ACCRA, GHANA, KH3 WAS ESTABLISHED IN
-                <span class="text-kh3-red font-semibold">2014</span> TO CATER
-                FOR THE CONSTRUCTION PROJECT MANAGEMENT NEEDS OF COMMERCIAL
-                CLIENTS. WITH A GROWING REPUTATION FOR QUALITY, ATTENTION TO
-                DETAIL AND THE UPMOST
-                <span class="text-kh3-red font-semibold">PROFESSIONALISM</span>,
-                KH3 EXPANDED INTO COMPREHENSIVE DESIGN AND FIT-OUT SERVICES.
-              </p>
+              <!-- DREAM -->
+              <div class="flex items-center space-x-3">
+                <h2
+                  class="text-3xl md:text-4xl font-bold tracking-wider text-white"
+                >
+                  DREAM
+                </h2>
+                <div class="w-2 h-2 bg-kh3-red rounded-full"></div>
+              </div>
+
+              <!-- DESIGN -->
+              <div class="flex items-center space-x-3">
+                <h2
+                  class="text-3xl md:text-4xl font-bold tracking-wider text-white"
+                >
+                  DESIGN
+                </h2>
+                <div class="w-2 h-2 bg-kh3-red rounded-full"></div>
+              </div>
+
+              <!-- DELIVER -->
+              <div class="flex items-center space-x-3">
+                <h2
+                  class="text-3xl md:text-4xl font-bold tracking-wider text-white"
+                >
+                  DELIVER
+                </h2>
+              </div>
+            </div>
+
+            <!-- Subtle underline -->
+            <div
+              class="w-24 h-px bg-kh3-grey mx-auto mt-8 opacity-0"
+              style="animation: fadeInUp 1s ease-out 1.2s forwards"
+      ></div>
+          </div>
+        </div>
+    </section>
+
+      <!-- Introduction Section -->
+      <section class="py-32 bg-white text-kh3-black">
+        <div class="container mx-auto px-8 max-w-5xl">
+          <div class="text-center">
+            <div class="text-xl leading-relaxed space-y-8 max-w-4xl mx-auto">
               <p
                 class="opacity-0"
                 style="animation: fadeInUp 1s ease-out 1.2s forwards"
               >
-                THIS MEANT MORE CONTROL OVER THE END-TO-END PROCESS, MAINTAINING
-                <span class="text-kh3-red font-semibold">HIGH STANDARDS</span>
-                FROM START TO FINISH AND ENSURING THAT THE ORIGINAL
-                SPECIFICATION COULD BE MET AND EXCEEDED. TODAY, KH3 WORKS WITH A
-                BROAD SPECTRUM OF CLIENTS, EXPANDING INTO NEW MARKETS WHILST
-                HANDLING THE ENTIRE PROCESS FROM DESIGN TO THE FINAL FINISH.
+                KH3 is Ghana's leading Construction Project Management Firm with
+                a focus on Interior Design and Fit-out. Founded in
+                <span class="text-kh3-red font-semibold">2014</span> by a highly
+                motivated team, KH3 is committed to being the standard of
+                business excellence in Africa.
+              </p>
+              <p
+                class="opacity-0"
+                style="animation: fadeInUp 1s ease-out 1.4s forwards"
+              >
+                Our turnkey approach provides our clients with a single point of
+                contact. This liberates them to refocus on their core business.
+                Results: Exceptional projects completed within budget and on
+                time!
+              </p>
+              <p
+                class="opacity-0"
+                style="animation: fadeInUp 1s ease-out 1.6s forwards"
+              >
+                Our forward thinking, highly sort after network of
+                professionals, artisans, suppliers and subcontractors, makeup
+                the power house that is the KH3 team.
+              </p>
+              <p
+                class="opacity-0"
+                style="animation: fadeInUp 1s ease-out 1.8s forwards"
+              >
+                Guided by our core values of Beauty, Integrity, Loyalty,
+                Diligence, Excellence, Resilience and Studiousness, our team has
+                executed over 20,000 square meters of office space for
+                international and national brands such as
+                <span class="text-kh3-red font-semibold">Google</span>,
+                <span class="text-kh3-red font-semibold">Align</span>,
+                <span class="text-kh3-red font-semibold">DBG</span> and
+                <span class="text-kh3-red font-semibold"
+                  >Enterprise Group Limited</span
+                >.
               </p>
             </div>
           </div>
-        </div>
+            </div>
       </section>
 
-      <!-- Values Section -->
-      <section class="py-20 bg-neutral-100 text-kh3-black">
-        <div class="container mx-auto px-8 max-w-6xl">
-          <div class="text-center mb-16">
+      <!-- Mission & Vision Section -->
+      <section class="py-32 bg-kh3-grey text-kh3-black">
+        <div class="container mx-auto px-8 max-w-7xl">
+          <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-24">
+            <!-- Mission Card -->
+            <div class="relative group">
+              <!-- Decorative elements -->
+              <div
+                class="absolute -top-4 -left-4 w-8 h-8 bg-kh3-red opacity-0 group-hover:opacity-100 transition-opacity duration-300"
+              ></div>
+              <div
+                class="absolute -bottom-4 -right-4 w-8 h-8 bg-kh3-red opacity-0 group-hover:opacity-100 transition-opacity duration-300"
+              ></div>
+
+              <div
+                class="relative bg-kh3-black p-12 rounded-2xl shadow-2xl hover:shadow-3xl transition-all duration-500 transform hover:-translate-y-3 hover:scale-105 overflow-hidden group animate-logo-float"
+              >
+                <!-- Glossy overlay -->
+                <div
+                  class="absolute inset-0 bg-gradient-to-br from-white/5 via-transparent to-black/20 rounded-2xl"
+                ></div>
+
+                <!-- Animated border glow -->
+                <div
+                  class="absolute inset-0 rounded-2xl bg-gradient-to-r from-kh3-red/20 via-transparent to-kh3-red/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500"
+                ></div>
+
+                <!-- Floating particles -->
+                <div
+                  class="absolute top-4 right-4 w-2 h-2 bg-kh3-red/60 rounded-full animate-pulse"
+                ></div>
+                <div
+                  class="absolute bottom-6 left-6 w-1 h-1 bg-kh3-red/40 rounded-full animate-ping"
+                ></div>
+
+                <div class="relative text-center">
+                  <!-- Icon/Number with glow -->
+                  <div
+                    class="w-16 h-16 bg-gradient-to-br from-kh3-red to-red-700 rounded-full flex items-center justify-center mx-auto mb-8 shadow-lg group-hover:shadow-red-500/50 transition-all duration-300 transform group-hover:scale-110"
+                  >
+                    <span class="text-white text-2xl font-bold drop-shadow-lg"
+                      >01</span
+                    >
+            </div>
+
+                  <!-- Title with text glow -->
+                  <h2
+                    class="text-4xl md:text-5xl font-bold mb-8 text-white drop-shadow-lg group-hover:text-shadow-lg transition-all duration-300"
+                  >
+                    MISSION
+                  </h2>
+
+                  <!-- Animated divider -->
+                  <div
+                    class="w-20 h-1 bg-gradient-to-r from-transparent via-kh3-red to-transparent mx-auto mb-8 group-hover:w-32 transition-all duration-500"
+                  ></div>
+
+                  <!-- Content with hover effect -->
+                  <p
+                    class="text-xl md:text-2xl font-semibold text-kh3-red leading-relaxed group-hover:text-red-400 transition-all duration-300"
+                  >
+                    Out of the ordinary the Extraordinary that inspires the
+                    world.
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <!-- Vision Card -->
+            <div class="relative group">
+              <!-- Decorative elements -->
+              <div
+                class="absolute -top-4 -left-4 w-8 h-8 bg-kh3-red opacity-0 group-hover:opacity-100 transition-opacity duration-300"
+              ></div>
+              <div
+                class="absolute -bottom-4 -right-4 w-8 h-8 bg-kh3-red opacity-0 group-hover:opacity-100 transition-opacity duration-300"
+              ></div>
+
+              <div
+                class="relative bg-kh3-black p-12 rounded-2xl shadow-2xl hover:shadow-3xl transition-all duration-500 transform hover:-translate-y-3 hover:scale-105 overflow-hidden group animate-logo-float"
+              >
+                <!-- Glossy overlay -->
+                <div
+                  class="absolute inset-0 bg-gradient-to-br from-white/5 via-transparent to-black/20 rounded-2xl"
+                ></div>
+
+                <!-- Animated border glow -->
+                <div
+                  class="absolute inset-0 rounded-2xl bg-gradient-to-r from-kh3-red/20 via-transparent to-kh3-red/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500"
+                ></div>
+
+                <!-- Floating particles -->
+                <div
+                  class="absolute top-6 left-4 w-1.5 h-1.5 bg-kh3-red/50 rounded-full animate-pulse"
+                ></div>
+                <div
+                  class="absolute bottom-4 right-6 w-1 h-1 bg-kh3-red/30 rounded-full animate-ping"
+                ></div>
+
+                <div class="relative text-center">
+                  <!-- Icon/Number with glow -->
+                  <div
+                    class="w-16 h-16 bg-gradient-to-br from-kh3-red to-red-700 rounded-full flex items-center justify-center mx-auto mb-8 shadow-lg group-hover:shadow-red-500/50 transition-all duration-300 transform group-hover:scale-110"
+                  >
+                    <span class="text-white text-2xl font-bold drop-shadow-lg"
+                      >02</span
+                    >
+                  </div>
+
+                  <!-- Title with text glow -->
+                  <h2
+                    class="text-4xl md:text-5xl font-bold mb-8 text-white drop-shadow-lg group-hover:text-shadow-lg transition-all duration-300"
+                  >
+                    VISION
+                  </h2>
+
+                  <!-- Animated divider -->
+                  <div
+                    class="w-20 h-1 bg-gradient-to-r from-transparent via-kh3-red to-transparent mx-auto mb-8 group-hover:w-32 transition-all duration-500"
+                  ></div>
+
+                  <!-- Content with hover effect -->
+                  <p
+                    class="text-xl md:text-2xl font-semibold text-kh3-red leading-relaxed group-hover:text-red-400 transition-all duration-300"
+                  >
+                    We will be the standard of global business excellence in
+                    Africa.
+                  </p>
+                </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Values Section -->
+      <section class="py-32 bg-white text-kh3-black">
+      <div class="container mx-auto px-8 max-w-6xl">
+          <div class="text-center mb-20">
             <h2
-              class="text-4xl font-bold mb-6 opacity-0"
-              style="animation: fadeInUp 1s ease-out 1.4s forwards"
+              class="text-5xl md:text-7xl font-bold mb-16 opacity-0"
+              style="animation: fadeInUp 1s ease-out 2.4s forwards"
             >
-              OUR VALUES
+              VALUES
             </h2>
-            <p
-              class="text-lg text-neutral-600 max-w-2xl mx-auto opacity-0"
-              style="animation: fadeInUp 1s ease-out 1.6s forwards"
+          </div>
+
+          <!-- Row 1: 3 columns -->
+          <div class="grid grid-cols-1 md:grid-cols-3 gap-16 mb-16">
+            <div
+              class="text-center opacity-0"
+              style="animation: fadeInUp 1s ease-out 2.6s forwards"
             >
-              The principles that guide everything we do
+              <div
+                class="w-20 h-20 bg-kh3-red mx-auto mb-8 transform rotate-45"
+              ></div>
+              <h3 class="text-2xl font-semibold mb-6">Beauty</h3>
+              <p class="text-lg text-neutral-600 leading-relaxed">
+                We treat all stake holders with politeness, dignity and civility
+                that equals the outward beauty of our environment and the
+                environments we create.
             </p>
           </div>
 
-          <div class="grid grid-cols-1 md:grid-cols-3 gap-12">
             <div
               class="text-center opacity-0"
-              style="animation: fadeInUp 1s ease-out 1.8s forwards"
+              style="animation: fadeInUp 1s ease-out 2.8s forwards"
             >
               <div
-                class="w-16 h-16 bg-kh3-red mx-auto mb-6 transform rotate-45"
+                class="w-20 h-20 bg-kh3-red mx-auto mb-8 transform rotate-45"
               ></div>
-              <h3 class="text-xl font-semibold mb-4">QUALITY</h3>
-              <p class="text-neutral-600">
-                We maintain the highest standards in every project, ensuring
-                excellence from conception to completion.
+              <h3 class="text-2xl font-semibold mb-6">Integrity</h3>
+              <p class="text-lg text-neutral-600 leading-relaxed">
+                We stay true to our word. We will do what we say we will do, and
+                deliver on our promises. If forfeiting on our word is beyond our
+                human control; we will communicate this transparently and in
+                good time.
+            </p>
+          </div>
+
+            <div
+              class="text-center opacity-0"
+              style="animation: fadeInUp 1s ease-out 3s forwards"
+            >
+              <div
+                class="w-20 h-20 bg-kh3-red mx-auto mb-8 transform rotate-45"
+              ></div>
+              <h3 class="text-2xl font-semibold mb-6">Loyalty</h3>
+              <p class="text-lg text-neutral-600 leading-relaxed">
+                We our faithful to our mission and vision and that of our
+                stakeholders and the organizations they represent.
+            </p>
+          </div>
+          </div>
+
+          <!-- Row 2: 1 column (middle) -->
+          <div class="flex justify-center mb-16">
+            <div
+              class="text-center opacity-0 max-w-md"
+              style="animation: fadeInUp 1s ease-out 3.2s forwards"
+            >
+              <div
+                class="w-20 h-20 bg-kh3-red mx-auto mb-8 transform rotate-45"
+              ></div>
+              <h3 class="text-2xl font-semibold mb-6">Studiousness</h3>
+              <p class="text-lg text-neutral-600 leading-relaxed">
+                We are committed to learning and advancing our services,
+                products, and tools to best serve our stakeholders.
+            </p>
+          </div>
+        </div>
+
+          <!-- Row 3: 3 columns -->
+          <div class="grid grid-cols-1 md:grid-cols-3 gap-16">
+            <div
+              class="text-center opacity-0"
+              style="animation: fadeInUp 1s ease-out 3.4s forwards"
+            >
+              <div
+                class="w-20 h-20 bg-kh3-red mx-auto mb-8 transform rotate-45"
+              ></div>
+              <h3 class="text-2xl font-semibold mb-6">Diligence</h3>
+              <p class="text-lg text-neutral-600 leading-relaxed">
+                We give our utmost attention to all our projects. We do this in
+                earnest and with precision.
+              </p>
+      </div>
+
+          <div
+              class="text-center opacity-0"
+              style="animation: fadeInUp 1s ease-out 3.6s forwards"
+          >
+            <div
+                class="w-20 h-20 bg-kh3-red mx-auto mb-8 transform rotate-45"
+              ></div>
+              <h3 class="text-2xl font-semibold mb-6">Excellence</h3>
+              <p class="text-lg text-neutral-600 leading-relaxed">
+                We are committed to delivering exceptional results in every area
+                of our operations.
               </p>
             </div>
 
             <div
               class="text-center opacity-0"
-              style="animation: fadeInUp 1s ease-out 2s forwards"
+              style="animation: fadeInUp 1s ease-out 3.8s forwards"
             >
               <div
-                class="w-16 h-16 bg-kh3-red mx-auto mb-6 transform rotate-45"
+                class="w-20 h-20 bg-kh3-red mx-auto mb-8 transform rotate-45"
               ></div>
-              <h3 class="text-xl font-semibold mb-4">PROFESSIONALISM</h3>
-              <p class="text-neutral-600">
-                Our team approaches every project with dedication, expertise,
-                and unwavering commitment to our clients.
-              </p>
-            </div>
-
-            <div
-              class="text-center opacity-0"
-              style="animation: fadeInUp 1s ease-out 2.2s forwards"
-            >
-              <div
-                class="w-16 h-16 bg-kh3-red mx-auto mb-6 transform rotate-45"
-              ></div>
-              <h3 class="text-xl font-semibold mb-4">INNOVATION</h3>
-              <p class="text-neutral-600">
-                We continuously evolve our methods and embrace new technologies
-                to deliver cutting-edge solutions.
+              <h3 class="text-2xl font-semibold mb-6">Resilience</h3>
+              <p class="text-lg text-neutral-600 leading-relaxed">
+                In the face of daunting challenges, setbacks and failures; we
+                learn and document lessons, bounce back and persist in the
+                pursuit of goals, targets, objectives and deadlines. We do this
+                with focused optimism.
               </p>
             </div>
           </div>
         </div>
       </section>
+
+      <!-- Team Section -->
+      <section class="py-32 bg-kh3-black text-white">
+        <div class="container mx-auto px-8 max-w-7xl">
+          <div class="text-center mb-20">
+            <!-- Main Title -->
+            <h2 class="text-6xl md:text-8xl font-bold mb-8">
+              <span class="text-white">KH3</span>
+              <span class="text-kh3-red">TEAM</span>
+            </h2>
+
+            <!-- Subtitle with line -->
+            <div class="flex items-center justify-center mb-8">
+              <div class="w-16 h-px bg-white"></div>
+              <span class="text-white text-xl font-medium mx-4 tracking-wider"
+                >MEET THE KH3 TEAM</span
+              >
+              <div class="w-16 h-px bg-white"></div>
+            </div>
+
+            <!-- Description -->
+            <p
+              class="text-xl md:text-2xl text-white/80 max-w-4xl mx-auto leading-relaxed tracking-wide"
+            >
+              WE'RE AN EVER-EXPANDING FAMILY OF DESIGN AND CONSTRUCTION
+              CRAFTSMEN AND PROJECT MANAGEMENT EXPERTS WHO BELIEVE IN DELIVERING
+              HIGH QUALITY SOLUTIONS.
+            </p>
+          </div>
+
+          <!-- Team Members Grid -->
+          <div
+            class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12 mt-20"
+          >
+            <!-- Team Member 1 -->
+            <div class="group relative">
+            <div
+                class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-300"
+            >
+                <div
+                  class="w-48 h-64 bg-gradient-to-br from-kh3-red/20 to-kh3-grey/40 rounded-lg mx-auto mb-6 flex items-center justify-center"
+                >
+                  <span class="text-4xl text-white/60">👤</span>
+            </div>
+                <div class="text-center">
+                  <h3 class="text-2xl font-bold text-white mb-2">
+                    Team Member
+                  </h3>
+                  <p class="text-kh3-red font-medium">Project Manager</p>
+          </div>
+              </div>
+            </div>
+
+            <!-- Team Member 2 -->
+            <div class="group relative">
+          <div
+                class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-300"
+          >
+            <div
+                  class="w-48 h-64 bg-gradient-to-br from-kh3-red/20 to-kh3-grey/40 rounded-lg mx-auto mb-6 flex items-center justify-center"
+            >
+                  <span class="text-4xl text-white/60">👤</span>
+            </div>
+                <div class="text-center">
+                  <h3 class="text-2xl font-bold text-white mb-2">
+                    Team Member
+                  </h3>
+                  <p class="text-kh3-red font-medium">Design Specialist</p>
+          </div>
+        </div>
+      </div>
+
+            <!-- Team Member 3 -->
+            <div class="group relative">
+              <div
+                class="bg-kh3-grey/20 p-8 rounded-lg hover:bg-kh3-grey/30 transition-all duration-300"
+              >
+                <div
+                  class="w-48 h-64 bg-gradient-to-br from-kh3-red/20 to-kh3-grey/40 rounded-lg mx-auto mb-6 flex items-center justify-center"
+                >
+                  <span class="text-4xl text-white/60">👤</span>
+                </div>
+                <div class="text-center">
+                  <h3 class="text-2xl font-bold text-white mb-2">
+                    Team Member
+                  </h3>
+                  <p class="text-kh3-red font-medium">Construction Lead</p>
+                </div>
+              </div>
+            </div>
+          </div>
+      </div>
+    </section>
     </main>
 
     <!-- Footer -->
@@ -705,8 +1054,8 @@
                 alt="KH3"
                 class="w-12 h-12"
               />
-              <span class="text-2xl font-bold tracking-wider">KH3</span>
-            </div>
+            <span class="text-2xl font-bold tracking-wider">KH3</span>
+          </div>
             <p class="text-neutral-300 leading-relaxed">
               Building inspiring spaces through innovative construction and
               design solutions.
@@ -718,21 +1067,21 @@
               <li>
                 <a
                   href="index.html"
-                  class="text-neutral-300 hover:text-white transition-colors"
+              class="text-neutral-300 hover:text-white transition-colors"
                   >Home</a
-                >
+            >
               </li>
               <li>
-                <a
+            <a
                   href="about.html"
-                  class="text-neutral-300 hover:text-white transition-colors"
+              class="text-neutral-300 hover:text-white transition-colors"
                   >About Us</a
-                >
+            >
               </li>
               <li>
-                <a
+            <a
                   href="projects.html"
-                  class="text-neutral-300 hover:text-white transition-colors"
+              class="text-neutral-300 hover:text-white transition-colors"
                   >Projects</a
                 >
               </li>
diff --git a/assets/images/contact.png b/assets/images/contact.png
new file mode 100644
index 0000000..c9b0e1c
Binary files /dev/null and b/assets/images/contact.png differ
diff --git a/contact.html b/contact.html
index 695c298..ad864d1 100644
--- a/contact.html
+++ b/contact.html
@@ -25,22 +25,22 @@
       class="fixed left-0 top-0 h-full w-1/3 bg-kh3-black z-50 hidden shadow-2xl"
       id="navMenu"
     >
-      <div class="p-8 pt-12 flex flex-col h-full">
+      <div class="p-8 flex flex-col h-full">
         <!-- Logo -->
         <div class="flex items-center gap-3 mb-12">
-          <img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-12" />
+            <img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-12" />
           <span class="text-white text-2xl font-bold tracking-wider">KH3</span>
         </div>
 
         <!-- Navigation Links - Inverted C Layout -->
         <nav class="flex-1 relative">
-          <div class="absolute inset-0 flex items-start">
+          <div class="absolute inset-0 flex items-center">
             <div class="relative ml-8">
               <!-- Navigation items in inverted C shape -->
               <div class="space-y-6">
                 <!-- HOME - Top -->
-                <a
-                  href="index.html"
+            <a
+              href="index.html"
                   class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat"
                 >
                   <span
@@ -82,8 +82,8 @@
                 </a>
 
                 <!-- ABOUT US - Slightly right -->
-                <a
-                  href="about.html"
+            <a
+              href="about.html"
                   class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-6 font-montserrat"
                 >
                   <span
@@ -161,8 +161,8 @@
                 </a>
 
                 <!-- SERVICES - More right -->
-                <a
-                  href="services.html"
+            <a
+              href="services.html"
                   class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-12 font-montserrat"
                 >
                   <span
@@ -399,7 +399,7 @@
 
                 <!-- PARTNERS - Back to left -->
                 <a
-                  href="brands.html"
+                  href="partners.html"
                   class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat"
                 >
                   <span
@@ -482,20 +482,24 @@
       </div>
     </div>
 
-    <!-- Header -->
-    <header
-      class="fixed top-0 left-0 right-0 z-40 bg-kh3-black/80 backdrop-blur-sm"
-    >
-      <div class="container mx-auto px-8">
-        <div class="flex justify-between items-center py-6">
+    <!-- Static Logo and Menu -->
+    <div class="fixed top-8 left-8 z-40">
           <div class="flex items-center gap-3">
-            <img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-12" />
-            <span class="text-white text-2xl font-bold tracking-wider"
+        <img
+          src="assets/images/kh3_logo_dark.png"
+          alt="KH3"
+          class="w-12 h-12"
+        />
+        <span class="text-white text-2xl font-bold tracking-wider drop-shadow-lg"
               >KH3</span
             >
           </div>
+    </div>
+
+    <!-- Menu Toggle -->
+    <div class="fixed top-8 right-8 z-40">
           <div class="cursor-pointer" id="menuToggle">
-            <div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGrid">
+        <div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGrid">
               <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>
@@ -508,84 +512,148 @@
             </div>
           </div>
         </div>
-      </div>
-    </header>
 
     <!-- Hero Section -->
     <section class="relative h-screen flex items-center justify-center">
-      <div
-        class="absolute inset-0 bg-gradient-to-br from-kh3-black/80 to-kh3-black/60"
+      <!-- Background Image -->
+      <div class="absolute inset-0">
+        <img
+          src="assets/images/contact.png"
+          alt="Office Background"
+          class="w-full h-full object-cover"
+        />
+        <div class="absolute inset-0 bg-black/40"></div>
+      </div>
+
+      <!-- Main Content -->
+      <div class="relative z-10 text-center w-full">
+        <div class="flex items-center gap-8 mb-6 max-w-6xl mx-auto">
+          <div
+            class="flex-1 h-1 bg-white opacity-0"
+            style="
+              min-width: 100px;
+              animation: fadeInLeft 1s ease-out 0.3s forwards;
+            "
+          ></div>
+          <h1
+            class="text-6xl md:text-8xl font-bold whitespace-nowrap px-8 opacity-0"
+            style="animation: maskRevealCenter 1.2s ease-out 0.6s forwards"
+          >
+            CONTACT US
+          </h1>
+          <div
+            class="flex-1 h-1 bg-white opacity-0"
+            style="
+              min-width: 100px;
+              animation: fadeInRight 1s ease-out 0.3s forwards;
+            "
       ></div>
-      <div class="relative z-10 text-center">
-        <h1 class="text-6xl md:text-8xl font-bold mb-6 masked-reveal">
-          CONTACT US
-        </h1>
-        <div class="text-xl md:text-2xl text-neutral-300 tracking-widest">
+        </div>
+        <div
+          class="text-xl md:text-2xl text-white tracking-widest opacity-0"
+          style="animation: fadeInUp 1s ease-out 0.9s forwards"
+        >
           LET'S DISCUSS YOUR PROJECT
         </div>
       </div>
-      <div
-        class="absolute inset-0 bg-gradient-to-b from-transparent to-kh3-black"
-      ></div>
     </section>
 
     <!-- Contact Section -->
-    <section class="py-20 bg-white text-kh3-black">
-      <div class="container mx-auto px-8 max-w-6xl">
-        <div class="grid grid-cols-1 lg:grid-cols-2 gap-16">
-          <div class="space-y-8">
-            <h2 class="text-4xl font-bold">GET IN TOUCH</h2>
-            <p class="text-lg leading-relaxed text-neutral-600">
+    <section class="relative min-h-screen flex items-center">
+           <!-- Background Image with Overlay -->
+     <div class="absolute inset-0">
+       <img
+         src="assets/images/contact.png"
+         alt="Office Background"
+         class="w-full h-full object-cover transform scale-y-[-1]"
+       />
+       <div class="absolute inset-0 bg-black/60"></div>
+     </div>
+
+      <!-- Content Container -->
+      <div class="relative z-10 w-full">
+        <div class="container mx-auto px-8 max-w-7xl">
+          <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
+            <!-- Left Column - Contact Information -->
+            <div class="text-white space-y-8">
+                            <!-- Title -->
+              <h2
+                class="text-5xl md:text-6xl font-bold text-white opacity-0 hover:scale-105 transition-transform duration-300"
+                style="animation: titleBounce 3s ease-out 2.7s forwards"
+              >
+                GET IN TOUCH
+              </h2>
+
+              <!-- Description -->
+              <p
+                class="text-lg leading-relaxed text-white/80 opacity-0 hover:text-white transition-colors duration-500"
+                style="animation: fadeInUp 1s ease-out 3.1s forwards"
+              >
               Ready to start your next project? We'd love to hear from you. Fill
               out the form and we'll get back to you within 24 hours.
             </p>
 
-            <div class="space-y-8">
-              <div class="flex items-start space-x-4">
-                <div class="text-3xl">📍</div>
+              <!-- Contact Details -->
+              <div class="space-y-6">
+                <div
+                  class="flex items-start space-x-4 opacity-0"
+                  style="animation: fadeInUp 1s ease-out 3.3s forwards"
+                >
+                  <div class="text-kh3-red text-2xl">📍</div>
                 <div>
-                  <h3 class="text-xl font-semibold mb-2">Address</h3>
-                  <p class="text-neutral-600">Accra, Ghana<br />Main Office</p>
-                </div>
-              </div>
-
-              <div class="flex items-start space-x-4">
-                <div class="text-3xl">📞</div>
-                <div>
-                  <h3 class="text-xl font-semibold mb-2">Phone</h3>
-                  <p class="text-neutral-600">
-                    +233 20 123 4567<br />+233 24 123 4567
+                    <h3 class="text-xl font-semibold mb-2 text-white">Address</h3>
+                    <p class="text-white/80">
+                      29 Labone Crescent, Accra<br />Accra - Ghana
                   </p>
                 </div>
               </div>
 
-              <div class="flex items-start space-x-4">
-                <div class="text-3xl">✉️</div>
+                <div
+                  class="flex items-start space-x-4 opacity-0"
+                  style="animation: fadeInUp 1s ease-out 3.5s forwards"
+                >
+                  <div class="text-kh3-red text-2xl">📞</div>
                 <div>
-                  <h3 class="text-xl font-semibold mb-2">Email</h3>
-                  <p class="text-neutral-600">
-                    info@kh3.com<br />projects@kh3.com
-                  </p>
+                    <h3 class="text-xl font-semibold mb-2 text-white">Phone</h3>
+                    <p class="text-white/80">+233 30 396 9970</p>
+                  </div>
+                </div>
+
+                <div
+                  class="flex items-start space-x-4 opacity-0"
+                  style="animation: fadeInUp 1s ease-out 3.7s forwards"
+                >
+                  <div class="text-kh3-red text-2xl">✉️</div>
+                  <div>
+                    <h3 class="text-xl font-semibold mb-2 text-white">Email</h3>
+                    <p class="text-white/80">Info@KH3group.com</p>
                 </div>
               </div>
 
-              <div class="flex items-start space-x-4">
-                <div class="text-3xl">🕒</div>
+                <div
+                  class="flex items-start space-x-4 opacity-0"
+                  style="animation: fadeInUp 1s ease-out 3.9s forwards"
+                >
+                  <div class="text-kh3-red text-2xl">🕒</div>
                 <div>
-                  <h3 class="text-xl font-semibold mb-2">Business Hours</h3>
-                  <p class="text-neutral-600">
-                    Monday - Friday<br />8:00 AM - 6:00 PM
+                    <h3 class="text-xl font-semibold mb-2 text-white">Business Hours</h3>
+                    <p class="text-white/80">
+                      Monday - Friday<br />9:00 AM - 6:00 PM
                   </p>
                 </div>
               </div>
             </div>
           </div>
 
-          <div class="bg-neutral-50 p-8 rounded-lg">
+                      <!-- Right Column - Contact Form -->
+          <div
+            class="bg-white p-8 rounded-lg shadow-xl opacity-0"
+            style="animation: fadeInUp 1s ease-out 2.9s forwards"
+          >
             <form class="space-y-6" id="contactForm">
               <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                 <div>
-                  <label for="name" class="block text-sm font-semibold mb-2"
+                  <label for="name" class="block text-sm font-semibold mb-2 text-gray-800"
                     >Full Name *</label
                   >
                   <input
@@ -593,12 +661,12 @@
                     id="name"
                     name="name"
                     required
-                    class="w-full px-4 py-3 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent"
+                    class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent text-gray-900"
                   />
                 </div>
 
                 <div>
-                  <label for="email" class="block text-sm font-semibold mb-2"
+                  <label for="email" class="block text-sm font-semibold mb-2 text-gray-800"
                     >Email Address *</label
                   >
                   <input
@@ -606,42 +674,42 @@
                     id="email"
                     name="email"
                     required
-                    class="w-full px-4 py-3 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent"
+                    class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent text-gray-900"
                   />
                 </div>
 
                 <div>
-                  <label for="phone" class="block text-sm font-semibold mb-2"
+                  <label for="phone" class="block text-sm font-semibold mb-2 text-gray-800"
                     >Phone Number</label
                   >
                   <input
                     type="tel"
                     id="phone"
                     name="phone"
-                    class="w-full px-4 py-3 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent"
+                    class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent text-gray-900"
                   />
                 </div>
 
                 <div>
-                  <label for="company" class="block text-sm font-semibold mb-2"
+                  <label for="company" class="block text-sm font-semibold mb-2 text-gray-800"
                     >Company</label
                   >
                   <input
                     type="text"
                     id="company"
                     name="company"
-                    class="w-full px-4 py-3 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent"
+                    class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent text-gray-900"
                   />
                 </div>
 
                 <div>
-                  <label for="service" class="block text-sm font-semibold mb-2"
+                  <label for="service" class="block text-sm font-semibold mb-2 text-gray-800"
                     >Service Interest</label
                   >
                   <select
                     id="service"
                     name="service"
-                    class="w-full px-4 py-3 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent"
+                    class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent text-gray-900"
                   >
                     <option value="">Select a service</option>
                     <option value="design">Interior Design</option>
@@ -654,13 +722,13 @@
                 </div>
 
                 <div>
-                  <label for="budget" class="block text-sm font-semibold mb-2"
+                  <label for="budget" class="block text-sm font-semibold mb-2 text-gray-800"
                     >Project Budget</label
                   >
                   <select
                     id="budget"
                     name="budget"
-                    class="w-full px-4 py-3 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent"
+                    class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent text-gray-900"
                   >
                     <option value="">Select budget range</option>
                     <option value="under-100k">Under 100K GHS</option>
@@ -672,7 +740,7 @@
               </div>
 
               <div>
-                <label for="message" class="block text-sm font-semibold mb-2"
+                <label for="message" class="block text-sm font-semibold mb-2 text-gray-800"
                   >Project Details *</label
                 >
                 <textarea
@@ -680,43 +748,90 @@
                   name="message"
                   rows="6"
                   required
-                  placeholder="Tell us about your project, requirements, timeline, and any specific needs..."
-                  class="w-full px-4 py-3 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent resize-none"
+                  placeholder="Tell us about your project, requirements, and any specific needs..."
+                  class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent resize-none text-gray-900"
                 ></textarea>
               </div>
 
               <button
                 type="submit"
-                class="w-full bg-kh3-red text-white py-4 px-8 rounded-md hover:bg-kh3-red/90 transition-colors duration-300 flex items-center justify-center space-x-2"
+                class="w-full bg-kh3-red text-white py-4 px-8 rounded-md hover:bg-kh3-red/90 transition-colors duration-300 flex items-center justify-center space-x-2 font-semibold"
               >
                 <span>Send Message</span>
-                <span>→</span>
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+                </svg>
               </button>
             </form>
           </div>
         </div>
       </div>
+
+      <!-- Scroll Down Prompt -->
+      <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2">
+        <button
+          id="contactScrollArrow"
+          class="flex items-center flex-col text-white/80 hover:text-white transition-colors opacity-0"
+          style="animation: fadeInUp 800ms ease-out 4.5s forwards"
+        >
+          <span class="text-xs tracking-widest mb-2">SCROLL</span>
+          <svg
+            class="w-5 h-5 animate-arrowPulse"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M19 9l-7 7-7-7"
+            />
+          </svg>
+          <div class="w-px h-8 bg-white/70"></div>
+        </button>
+      </div>
     </section>
 
     <!-- Map Section -->
     <section class="py-20 bg-kh3-black text-white">
       <div class="container mx-auto px-8 max-w-6xl">
-        <h2 class="text-4xl font-bold text-center mb-16">FIND US</h2>
-        <div class="bg-neutral-800 rounded-lg p-12 text-center">
+        <h2
+          class="text-4xl font-bold text-center mb-16 opacity-0"
+          style="animation: fadeInUp 1s ease-out 2.4s forwards"
+        >
+          FIND US
+        </h2>
+        <div class="bg-kh3-grey/20 rounded-lg p-12 text-center">
           <div class="max-w-5xl mx-auto">
-            <h3 class="text-2xl font-bold mb-4">Accra, Ghana</h3>
-            <p class="text-neutral-300 leading-relaxed mb-6">
+            <h3
+              class="text-2xl font-bold mb-4 opacity-0"
+              style="animation: fadeInUp 1s ease-out 2.6s forwards"
+            >
+              Accra, Ghana
+            </h3>
+            <p
+              class="text-kh3-grey leading-relaxed mb-6 opacity-0"
+              style="animation: fadeInUp 1s ease-out 2.8s forwards"
+            >
               Our main office is located in the heart of Accra, easily
               accessible from all major areas.
             </p>
-            <div class="text-kh3-red font-semibold">
-              <span>📍 5.5600° N, 0.2057° W</span>
+            <div
+              class="text-kh3-red font-semibold opacity-0"
+              style="animation: fadeInUp 1s ease-out 3s forwards"
+            >
+              <span>📍 29 Labone Crescent, Accra, Ghana</span>
             </div>
 
             <!-- Embedded Map -->
             <div
-              class="mt-10 w-full overflow-hidden rounded-lg"
-              style="aspect-ratio: 4 / 3"
+              class="mt-10 w-full overflow-hidden rounded-lg opacity-0"
+              style="
+                aspect-ratio: 4 / 3;
+                animation: fadeInUp 1s ease-out 3.2s forwards;
+              "
             >
               <iframe
                 title="KH3 Office Location Map"
@@ -742,7 +857,11 @@
           class="flex flex-col md:flex-row justify-between items-center space-y-6 md:space-y-0"
         >
           <div class="flex items-center gap-3">
-            <img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-12" />
+            <img
+              src="assets/images/kh3_logo_dark.png"
+              alt="KH3"
+              class="w-12 h-12"
+            />
             <span class="text-2xl font-bold tracking-wider">KH3</span>
           </div>
           <div class="flex space-x-8">
@@ -779,6 +898,93 @@
           transform: translateY(0);
         }
       }
+      @keyframes fadeInUp {
+        from {
+          opacity: 0;
+          transform: translateY(20px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+      @keyframes fadeInLeft {
+        from {
+          opacity: 0;
+          transform: translateX(-20px);
+        }
+        to {
+          opacity: 0.5;
+          transform: translateX(0);
+        }
+      }
+      @keyframes fadeInRight {
+        from {
+          opacity: 0;
+          transform: translateX(20px);
+        }
+        to {
+          opacity: 0.5;
+          transform: translateX(0);
+        }
+      }
+      @keyframes arrowPulse {
+        0% {
+          transform: translateY(0);
+        }
+        50% {
+          transform: translateY(4px);
+        }
+        100% {
+          transform: translateY(0);
+        }
+      }
+      .animate-arrowPulse {
+        animation: arrowPulse 1.2s ease-in-out infinite;
+      }
+      @keyframes titleBounce {
+        0% {
+          opacity: 0;
+          transform: translateY(-50px) scale(0.5);
+        }
+        20% {
+          opacity: 1;
+          transform: translateY(20px) scale(1.1);
+        }
+        40% {
+          transform: translateY(-10px) scale(0.95);
+        }
+        60% {
+          transform: translateY(5px) scale(1.02);
+        }
+        80% {
+          transform: translateY(-2px) scale(0.98);
+        }
+        100% {
+          opacity: 1;
+          transform: translateY(0) scale(1);
+        }
+      }
+      @keyframes fadeInScale {
+        from {
+          opacity: 0;
+          transform: scale(0.9);
+        }
+        to {
+          opacity: 1;
+          transform: scale(1);
+        }
+      }
+      @keyframes maskRevealCenter {
+        0% {
+          clip-path: inset(0 50% 0 50%);
+          opacity: 0;
+        }
+        100% {
+          clip-path: inset(0 0 0 0);
+          opacity: 1;
+        }
+      }
       @keyframes maskReveal {
         0% {
           clip-path: inset(0 100% 0 0);
@@ -905,7 +1111,7 @@
         }
       });
 
-      // Auto-scroll to contact section after 2 seconds with custom smooth animation
+      // Auto-scroll to contact section after 2.5 seconds with custom smooth animation
       setTimeout(() => {
         const contactSection = document.querySelector("section:nth-of-type(2)"); // Contact Section
         if (contactSection) {
@@ -938,7 +1144,7 @@
 
           requestAnimationFrame(animation);
         }
-      }, 2000);
+      }, 2500);
     </script>
   </body>
 </html>
diff --git a/index.html b/index.html
index 8af4b99..0e29ea0 100644
--- a/index.html
+++ b/index.html
@@ -11,10 +11,7 @@
     />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@600;800&display=swap"
-      rel="stylesheet"
-    />
+
     <link
       href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap"
       rel="stylesheet"
@@ -29,7 +26,7 @@
       <div class="p-8 flex flex-col h-full">
         <!-- Logo -->
         <div class="flex items-center gap-3 mb-12">
-          <img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-12" />
+            <img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-12" />
           <span class="text-white text-2xl font-bold tracking-wider">KH3</span>
         </div>
 
@@ -40,8 +37,8 @@
               <!-- Navigation items in inverted C shape -->
               <div class="space-y-6">
                 <!-- HOME - Top -->
-                <a
-                  href="index.html"
+          <a
+            href="index.html"
                   class="block text-white text-lg font-medium border-b border-white pb-1 ml-0 font-montserrat"
                 >
                   <span
@@ -83,8 +80,8 @@
                 </a>
 
                 <!-- ABOUT US - Slightly right -->
-                <a
-                  href="about.html"
+          <a
+            href="about.html"
                   class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-6 font-montserrat"
                 >
                   <span
@@ -162,8 +159,8 @@
                 </a>
 
                 <!-- SERVICES - More right -->
-                <a
-                  href="services.html"
+          <a
+            href="services.html"
                   class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-12 font-montserrat"
                 >
                   <span
@@ -320,8 +317,8 @@
                 </a>
 
                 <!-- CONTACTS - More right -->
-                <a
-                  href="contact.html"
+          <a
+            href="contact.html"
                   class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-12 font-montserrat"
                 >
                   <span
@@ -400,7 +397,7 @@
 
                 <!-- PARTNERS - Back to left -->
                 <a
-                  href="brands.html"
+                  href="partners.html"
                   class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat"
                 >
                   <span
@@ -580,7 +577,7 @@
                     >DESIGN</span
                   >
                 </div>
-              </div>
+            </div>
 
               <!-- DELIVER -->
               <div class="flex items-center gap-6">
diff --git a/partners.html b/partners.html
new file mode 100644
index 0000000..b311837
--- /dev/null
+++ b/partners.html
@@ -0,0 +1,578 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Partners - KH3</title>
+    <link rel="stylesheet" href="styles/main.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body class="bg-kh3-black text-white font-montserrat">
+    <!-- Navigation Menu -->
+    <div
+      id="navMenu"
+      class="fixed left-0 top-0 h-full w-1/3 bg-kh3-black z-50 hidden shadow-2xl"
+    >
+      <div class="p-8 flex flex-col h-full">
+        <!-- Logo -->
+        <div class="flex items-center gap-3 mb-12">
+          <img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-12" />
+          <span class="text-white text-2xl font-bold tracking-wider">KH3</span>
+        </div>
+
+        <!-- Navigation Links - Inverted C Layout -->
+        <nav class="flex-1 relative">
+          <div class="absolute inset-0 flex items-center">
+            <div class="relative ml-8">
+              <!-- Navigation items in inverted C shape -->
+              <div class="space-y-6">
+        <!-- HOME -->
+        <a
+          href="index.html"
+          class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat"
+        >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.05s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >H</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.075s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >O</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.1s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >M</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.125s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >E</span
+          >
+        </a>
+
+        <!-- ABOUT US -->
+        <a
+          href="about.html"
+          class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-6 font-montserrat"
+        >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.15s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >A</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.175s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >B</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.2s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >O</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.225s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >U</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.25s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >T</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.275s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >&nbsp;</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.3s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >U</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.325s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >S</span
+          >
+        </a>
+
+        <!-- SERVICES -->
+        <a
+          href="services.html"
+          class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-12 font-montserrat"
+        >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.35s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >S</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.375s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >E</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.4s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >R</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.425s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >V</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.45s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >I</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.475s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >C</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.5s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >E</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.525s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >S</span
+          >
+        </a>
+
+        <!-- PROJECTS -->
+        <a
+          href="projects.html"
+          class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-20 font-montserrat"
+        >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.55s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >P</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.575s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >R</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.6s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >O</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.625s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >J</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.65s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >E</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.675s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >C</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.7s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >T</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.725s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >S</span
+          >
+        </a>
+
+        <!-- CONTACTS -->
+        <a
+          href="contact.html"
+          class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-20 font-montserrat"
+        >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.75s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >C</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.775s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >O</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.8s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >N</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.825s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >T</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.85s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >A</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.875s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >C</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.9s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >T</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.925s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >S</span
+          >
+        </a>
+
+        <!-- PARTNERS - Active -->
+        <a
+          href="partners.html"
+          class="block text-white text-lg font-medium border-b border-white pb-1 ml-20 font-montserrat"
+        >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.95s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >P</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.975s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >A</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 1s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >R</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 1.025s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >T</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 1.05s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >N</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 1.075s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >E</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 1.1s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >R</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 1.125s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >S</span
+          >
+        </a>
+      </div>
+    </nav>
+
+        <!-- Menu Grid -->
+        <div
+          class="fixed bottom-12 left-12 z-50 opacity-0 animate-fade-in-left"
+          style="animation-delay: 0.4s; animation-fill-mode: forwards"
+        >
+          <div class="cursor-pointer" id="menuToggle">
+            <div
+              class="grid grid-cols-3 gap-1 w-6 h-6 animate-logo-float"
+              id="menuGrid"
+            >
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+            </div>
+          </div>
+        </div>
+
+    <!-- Main Content -->
+    <main class="pt-20">
+      <!-- Hero Section -->
+      <section class="min-h-screen flex items-center justify-center">
+        <div class="text-center">
+          <h1 class="text-6xl md:text-8xl font-bold mb-8 tracking-wider">
+            PARTNERS
+          </h1>
+          <div class="w-32 h-px bg-kh3-red mx-auto mb-8"></div>
+          <p class="text-2xl md:text-3xl text-neutral-300 mb-12 tracking-wide">
+            COMING SOON
+          </p>
+          <p class="text-lg text-neutral-400 max-w-2xl mx-auto leading-relaxed">
+            We're working on something amazing. Our network of trusted partners
+            and collaborations will be available soon.
+          </p>
+        </div>
+      </section>
+    </main>
+
+    <script src="js/main.js"></script>
+    <script>
+      // Menu toggle functionality
+      const menuToggle = document.getElementById("menuToggle");
+      const navMenu = document.getElementById("navMenu");
+      const menuGrid = document.getElementById("menuGrid");
+
+      if (menuToggle && navMenu && menuGrid) {
+        let isMenuOpen = false;
+
+        menuToggle.addEventListener("click", () => {
+          if (isMenuOpen) {
+            // Close menu
+            navMenu.classList.add("hidden");
+            menuGrid.innerHTML = `
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+            `;
+            isMenuOpen = false;
+          } else {
+            // Open menu
+            navMenu.classList.remove("hidden");
+            menuGrid.innerHTML = `
+              <div class="absolute inset-0 flex items-center justify-center">
+                <svg class="w-5 h-5 text-kh3-red" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                </svg>
+              </div>
+            `;
+            isMenuOpen = true;
+          }
+        });
+
+        // Close menu when clicking outside
+        document.addEventListener("click", (e) => {
+          if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
+            navMenu.classList.add("hidden");
+            menuGrid.innerHTML = `
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+            `;
+            isMenuOpen = false;
+          }
+        });
+      }
+    </script>
+  </body>
+</html>
diff --git a/projects.html b/projects.html
index 6ad1426..cecce83 100644
--- a/projects.html
+++ b/projects.html
@@ -3,192 +3,576 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Projects - KH3 | Building Inspiring Spaces</title>
-    <meta
-      name="description"
-      content="Explore KH3's portfolio of construction and project management projects across Ghana. Corporate, Education, Hospitality, and Retail projects."
-    />
-    <link rel="stylesheet" href="css/style.css" />
-    <link rel="stylesheet" href="css/animations.css" />
+    <title>Projects - KH3</title>
+    <link rel="stylesheet" href="styles/main.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
       href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap"
       rel="stylesheet"
     />
   </head>
-  <body class="dark-gothic-mode">
-    <!-- Navigation Menu Overlay -->
-    <nav class="nav-overlay" id="navOverlay">
-      <div class="nav-content">
-        <div class="nav-header">
-          <div class="logo">
-            <img src="images/kh3_logo.png" alt="KH3" class="logo-image" />
-            <span class="logo-text">KH3</span>
-          </div>
-          <button class="nav-close" id="navClose">
-            <span></span>
-            <span></span>
-          </button>
-        </div>
-        <div class="nav-links">
-          <a href="index.html">Home</a>
-          <a href="about.html">About</a>
-          <a href="projects.html" aria-current="page">Projects</a>
-          <a href="services.html">Services</a>
-          <a href="approach.html">Approach</a>
-          <a href="careers.html">Careers</a>
-          <a href="news.html">News</a>
-          <a href="brands.html">Brands</a>
-          <a href="contact.html">Contact</a>
-        </div>
-        <div class="nav-footer">
-          <div class="contact-info">
-            <p>Accra, Ghana</p>
-            <p>+233 20 123 4567</p>
-            <p>info@kh3.com</p>
-          </div>
+  <body class="bg-kh3-black text-white font-montserrat">
+    <!-- Navigation Menu -->
+    <div
+      id="navMenu"
+      class="fixed left-0 top-0 h-full w-1/3 bg-kh3-black z-50 hidden shadow-2xl"
+    >
+      <div class="p-8 flex flex-col h-full">
+        <!-- Logo -->
+        <div class="flex items-center gap-3 mb-12">
+          <img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-12" />
+          <span class="text-white text-2xl font-bold tracking-wider">KH3</span>
         </div>
+
+        <!-- Navigation Links - Inverted C Layout -->
+        <nav class="flex-1 relative">
+          <div class="absolute inset-0 flex items-center">
+            <div class="relative ml-8">
+              <!-- Navigation items in inverted C shape -->
+              <div class="space-y-6">
+        <!-- HOME -->
+        <a
+          href="index.html"
+          class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat"
+        >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.05s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >H</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.075s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >O</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.1s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >M</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.125s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >E</span
+          >
+        </a>
+
+        <!-- ABOUT US -->
+        <a
+          href="about.html"
+          class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-6 font-montserrat"
+        >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.15s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >A</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.175s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >B</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.2s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >O</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.225s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >U</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.25s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >T</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.275s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >&nbsp;</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.3s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >U</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.325s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >S</span
+          >
+        </a>
+
+        <!-- SERVICES -->
+        <a
+          href="services.html"
+          class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-12 font-montserrat"
+        >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.35s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >S</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.375s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >E</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.4s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >R</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.425s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >V</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.45s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >I</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.475s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >C</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.5s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >E</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.525s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >S</span
+          >
+        </a>
+
+        <!-- PROJECTS - Active -->
+        <a
+          href="projects.html"
+          class="block text-white text-lg font-medium border-b border-white pb-1 ml-20 font-montserrat"
+        >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.55s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >P</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.575s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >R</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.6s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >O</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.625s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >J</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.65s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >E</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.675s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >C</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.7s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >T</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.725s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >S</span
+          >
+        </a>
+
+        <!-- CONTACTS -->
+        <a
+          href="contact.html"
+          class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-20 font-montserrat"
+        >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.75s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >C</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.775s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >O</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.8s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >N</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.825s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >T</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.85s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >A</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.875s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >C</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.9s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >T</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.925s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >S</span
+          >
+        </a>
+
+        <!-- PARTNERS -->
+        <a
+          href="partners.html"
+          class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-20 font-montserrat"
+        >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.95s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >P</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 0.975s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >A</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 1s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >R</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 1.025s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >T</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 1.05s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >N</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 1.075s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >E</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 1.1s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >R</span
+          >
+          <span
+            class="inline-block opacity-0 animate-fade-in-left"
+            style="
+              animation-delay: 1.125s;
+              animation-fill-mode: forwards;
+              animation-duration: 0.15s;
+            "
+            >S</span
+          >
+        </a>
       </div>
     </nav>
 
-    <!-- Page Header -->
-    <header class="page-header">
-      <div class="container">
-        <div class="header-content">
-          <div class="logo">
-            <img src="images/kh3_logo.png" alt="KH3" class="logo-image" />
-            <span class="logo-text">KH3</span>
-          </div>
-          <div class="menu-toggle" id="menuToggle">
-            <div class="grid-icon">
-              <span></span>
-              <span></span>
-              <span></span>
-              <span></span>
-              <span></span>
-              <span></span>
-              <span></span>
-              <span></span>
-              <span></span>
+        <!-- Menu Grid -->
+        <div
+          class="fixed bottom-12 left-12 z-50 opacity-0 animate-fade-in-left"
+          style="animation-delay: 0.4s; animation-fill-mode: forwards"
+        >
+          <div class="cursor-pointer" id="menuToggle">
+            <div
+              class="grid grid-cols-3 gap-1 w-6 h-6 animate-logo-float"
+              id="menuGrid"
+            >
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
             </div>
           </div>
         </div>
-      </div>
-    </header>
 
     <!-- Main Content -->
-    <main>
+    <main class="pt-20">
       <!-- Hero Section -->
-      <section class="hero-section">
-        <div class="container">
-          <div class="hero-content">
-            <h1 class="hero-title">Our Projects</h1>
-            <p class="hero-subtitle">
-              Discover our portfolio of construction and project management
-              excellence across Ghana
-            </p>
-          </div>
-        </div>
-      </section>
-
-      <!-- Projects Filter Section -->
-      <section class="projects-filter-section">
-        <div class="container">
-          <div class="filter-container">
-            <div
-              class="filter-group"
-              role="tablist"
-              aria-label="Project categories"
-            >
-              <button
-                class="pill"
-                data-filter="All"
-                aria-pressed="true"
-                role="tab"
-              >
-                All Projects
-              </button>
-              <button
-                class="pill"
-                data-filter="Corporate"
-                aria-pressed="false"
-                role="tab"
-              >
-                Corporate
-              </button>
-              <button
-                class="pill"
-                data-filter="Education"
-                aria-pressed="false"
-                role="tab"
-              >
-                Education
-              </button>
-              <button
-                class="pill"
-                data-filter="Hospitality"
-                aria-pressed="false"
-                role="tab"
-              >
-                Hospitality
-              </button>
-              <button
-                class="pill"
-                data-filter="Retail"
-                aria-pressed="false"
-                role="tab"
-              >
-                Retail
-              </button>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <!-- Projects Grid Section -->
-      <section class="projects-grid-section">
-        <div class="container">
-          <div class="projects-grid" id="projectsGrid">
-            <!-- Projects will be loaded here via JavaScript -->
-          </div>
-        </div>
-      </section>
-
-      <!-- CTA Section -->
-      <section class="cta-section">
-        <div class="container">
-          <div class="cta-content">
-            <h2>Ready to Start Your Project?</h2>
-            <p>Let's discuss how KH3 can bring your vision to life</p>
-            <a href="contact.html" class="btn-primary">Get in Touch</a>
-          </div>
+      <section class="min-h-screen flex items-center justify-center">
+        <div class="text-center">
+          <h1 class="text-6xl md:text-8xl font-bold mb-8 tracking-wider">
+            PROJECTS
+          </h1>
+          <div class="w-32 h-px bg-kh3-red mx-auto mb-8"></div>
+          <p class="text-2xl md:text-3xl text-neutral-300 mb-12 tracking-wide">
+            COMING SOON
+          </p>
+          <p class="text-lg text-neutral-400 max-w-2xl mx-auto leading-relaxed">
+            We're working on something amazing. Our portfolio of completed
+            projects will be available soon.
+          </p>
         </div>
       </section>
     </main>
 
-    <!-- Footer -->
-    <footer class="footer">
-      <div class="container">
-        <div class="footer-content">
-          <div class="footer-logo">
-            <img src="images/kh3_logo.png" alt="KH3" class="logo-image" />
-            <span class="logo-text">KH3</span>
-          </div>
-          <div class="footer-links">
-            <a href="contact.html">Contact</a>
-            <a href="about.html">About</a>
-            <a href="projects.html">Projects</a>
-            <a href="services.html">Services</a>
-            <a href="careers.html">Careers</a>
-            <a href="privacy.html">Privacy Policy</a>
-            <a href="terms.html">Terms of Service</a>
-          </div>
-          <div class="footer-copyright">© 2024 KH3. All rights reserved.</div>
-        </div>
-      </div>
-    </footer>
-
     <script src="js/main.js"></script>
-    <script src="js/projects.js"></script>
+    <script>
+      // Menu toggle functionality
+      const menuToggle = document.getElementById("menuToggle");
+      const navMenu = document.getElementById("navMenu");
+      const menuGrid = document.getElementById("menuGrid");
+
+      if (menuToggle && navMenu && menuGrid) {
+        let isMenuOpen = false;
+
+        menuToggle.addEventListener("click", () => {
+          if (isMenuOpen) {
+            // Close menu
+            navMenu.classList.add("hidden");
+            menuGrid.innerHTML = `
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+            `;
+            isMenuOpen = false;
+          } else {
+            // Open menu
+            navMenu.classList.remove("hidden");
+            menuGrid.innerHTML = `
+              <div class="absolute inset-0 flex items-center justify-center">
+                <svg class="w-5 h-5 text-kh3-red" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                </svg>
+              </div>
+            `;
+            isMenuOpen = true;
+          }
+        });
+
+        // Close menu when clicking outside
+        document.addEventListener("click", (e) => {
+          if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
+            navMenu.classList.add("hidden");
+            menuGrid.innerHTML = `
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+            `;
+            isMenuOpen = false;
+          }
+        });
+      }
+    </script>
   </body>
 </html>
-
diff --git a/services.html b/services.html
new file mode 100644
index 0000000..a2a795a
--- /dev/null
+++ b/services.html
@@ -0,0 +1,747 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Services - KH3</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap"
+      rel="stylesheet"
+    />
+    <script>
+      tailwind.config = {
+        theme: {
+          extend: {
+            colors: {
+              kh3: {
+                black: "#212829",
+                red: "#B03037",
+                grey: "#8E9089",
+                white: "#FFFFFF",
+              },
+            },
+            fontFamily: {
+              montserrat: ["Montserrat", "sans-serif"],
+            },
+            animation: {
+              "fade-in-up": "fadeInUp 1s ease-out forwards",
+              "fade-in-left": "fadeInLeft 1s ease-out forwards",
+              "fade-in-right": "fadeInRight 1s ease-out forwards",
+              "logo-float": "logoFloat 3s ease-in-out infinite",
+            },
+            keyframes: {
+              fadeInUp: {
+                "0%": { opacity: "0", transform: "translateY(30px)" },
+                "100%": { opacity: "1", transform: "translateY(0)" },
+              },
+              fadeInLeft: {
+                "0%": { opacity: "0", transform: "translateX(-30px)" },
+                "100%": { opacity: "1", transform: "translateX(0)" },
+              },
+              fadeInRight: {
+                "0%": { opacity: "0", transform: "translateX(30px)" },
+                "100%": { opacity: "1", transform: "translateX(0)" },
+              },
+              logoFloat: {
+                "0%, 100%": { transform: "translateY(0px)" },
+                "50%": { transform: "translateY(-10px)" },
+              },
+            },
+          },
+        },
+      };
+    </script>
+    <style>
+      body {
+        font-family: "Montserrat", sans-serif;
+      }
+      /* Scroll reveal utility */
+      .reveal { opacity: 0; transform: translateY(24px); transition: opacity 600ms ease, transform 600ms ease; }
+      .reveal.in { opacity: 1; transform: translateY(0); }
+      /* Interactive hover embellishments */
+      .hover-card { transition: transform 300ms ease, box-shadow 300ms ease, background-color 300ms ease; }
+      .hover-card:hover { transform: translateY(-6px); box-shadow: 0 10px 30px rgba(0,0,0,0.25); }
+      .hover-row { transition: transform 200ms ease, color 200ms ease; }
+      .hover-row:hover { transform: translateX(6px); color: #ffffff; }
+    </style>
+  </head>
+  <body class="bg-kh3-black text-white font-montserrat">
+    <!-- Navigation Menu (copied from about.html) -->
+    <div
+      class="fixed left-0 top-0 h-full w-1/3 bg-kh3-black z-50 hidden shadow-2xl"
+      id="navMenu"
+    >
+      <div class="p-8 flex flex-col h-full">
+        <!-- Logo -->
+        <div class="flex items-center gap-3 mb-12">
+            <img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-12" />
+          <span class="text-white text-2xl font-bold tracking-wider">KH3</span>
+          </div>
+
+        <!-- Navigation Links - Inverted C Layout -->
+        <nav class="flex-1 relative">
+          <div class="absolute inset-0 flex items-center">
+            <div class="relative ml-8">
+              <!-- Navigation items in inverted C shape -->
+              <div class="space-y-6">
+                <!-- HOME - Top -->
+                <a
+                  href="index.html"
+                  class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat"
+          >HOME</a>
+
+                <!-- ABOUT US - Slightly right -->
+            <a
+              href="about.html"
+                  class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-6 font-montserrat"
+                >ABOUT US</a>
+
+                <!-- SERVICES - More right -->
+            <a
+              href="services.html"
+                  class="block text-white text-lg font-medium border-b border-white pb-1 ml-12 font-montserrat"
+                >SERVICES</a>
+
+                <!-- PROJECTS - Most right -->
+                <a
+                  href="projects.html"
+                  class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-20 font-montserrat"
+                >PROJECTS</a>
+
+                <!-- CONTACTS - More right -->
+                <a
+                  href="contact.html"
+                  class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-12 font-montserrat"
+                >CONTACTS</a>
+
+                <!-- PARTNERS - Back to left -->
+                <a
+                  href="partners.html"
+                  class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat"
+                >PARTNERS</a>
+              </div>
+            </div>
+          </div>
+        </nav>
+      </div>
+    </div>
+
+    <!-- Static Logo and Menu (copied from about.html) -->
+    <div class="fixed top-6 left-8 z-40">
+          <div class="flex items-center gap-3">
+        <img
+          src="assets/images/kh3_logo_dark.png"
+          alt="KH3"
+          class="w-12 h-12"
+        />
+        <span
+          class="text-white text-2xl font-bold tracking-wider drop-shadow-lg"
+              >KH3</span
+            >
+          </div>
+    </div>
+
+    <!-- Menu Toggle with Transparent Background -->
+    <div class="fixed top-6 right-8 z-40">
+      <div
+        class="cursor-pointer bg-black/30 backdrop-blur-sm rounded-lg p-3"
+        id="menuToggle"
+      >
+        <div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGrid">
+              <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>
+              <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>
+              <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>
+
+    <!-- Hero Section -->
+    <section class="min-h-screen relative flex">
+      <!-- Left Panel - Dark Background -->
+      <div
+        class="w-1/3 bg-kh3-black relative z-20 flex flex-col justify-center pl-16 pt-8 md:pt-12"
+      >
+        <!-- Vertical Line with Diamonds -->
+        <div
+          class="absolute left-8 top-1/2 transform -translate-y-1/2 flex flex-col items-center"
+        >
+          <div class="w-2.5 h-2.5 bg-white transform rotate-45 mb-8"></div>
+          <div class="w-px h-32 bg-neutral-800 mb-8"></div>
+          <div class="w-2.5 h-2.5 bg-white transform rotate-45 mb-8"></div>
+          <div class="w-px h-32 bg-neutral-800 mb-8"></div>
+          <div class="w-2.5 h-2.5 bg-white transform rotate-45"></div>
+        </div>
+
+        <!-- Title with horizontal ruler -->
+        <div class="mb-8 relative">
+          <h1 class="text-4xl md:text-6xl tracking-[0.2em] font-bold text-white whitespace-nowrap ml-8 md:ml-12">
+            OUR SERVICES
+          </h1>
+        </div>
+
+        <!-- Subtle underline -->
+        <div
+          class="w-24 h-px bg-kh3-grey mt-8 opacity-0"
+          style="animation: fadeInUp 1s ease-out 1.2s forwards"
+        ></div>
+      </div>
+
+      <!-- Right Panel - Image Background -->
+      <div class="w-2/3 relative z-10 h-full min-h-[90vh]">
+        <div
+          class="absolute left-0 right-0 top-20 md:top-28 bottom-0 bg-cover bg-center"
+          style="background-image: url('assets/images/room.png')"
+        >
+          <div class="absolute inset-0 bg-black/60"></div>
+        </div>
+
+        <!-- Scroll Prompt -->
+        <div
+          class="absolute bottom-10 left-4 flex flex-col items-center text-white/60"
+        >
+          <span class="text-sm mb-2">Scroll</span>
+          <div class="animate-pulse">
+            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
+              <path
+                fill-rule="evenodd"
+                d="M16.707 10.293a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l4.293-4.293a1 1 0 011.414 0z"
+                clip-rule="evenodd"
+              ></path>
+            </svg>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- KH3 Services Sections -->
+    <section class="py-32 bg-kh3-black text-white">
+      <div class="container mx-auto px-8 max-w-7xl">
+        <div class="mb-20 reveal" data-delay="0">
+          <h2 class="text-4xl md:text-6xl font-bold tracking-wide">CONSTRUCTION PROJECT MANAGEMENT</h2>
+          <div class="w-16 h-1 bg-kh3-red mt-6"></div>
+        </div>
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 hover-card rounded-lg">
+          <div class="space-y-6 text-white/85 leading-relaxed text-base md:text-lg reveal" data-delay="100">
+            <p>Construction projects can give you a headache and present numerous concerns that can keep you up at night. Details ranging from how to assess and select consultants or contractors to challenges with traffic impact assessments or soil tests. Construction projects can be even more challenging if construction or interior fit-out are not your core business.</p>
+            <p>At KH3, we know it is in our interest and yours, to reduce these challenges to a minimum by providing the expertise required to complete your project successfully and on time.</p>
+
+            <!-- KPIs (count-up) -->
+            <div class="grid grid-cols-3 gap-6 pt-4">
+              <div class="text-center reveal" data-delay="160">
+                <div class="text-3xl md:text-4xl font-extrabold text-white"><span class="counter" data-to="100" data-suffix="+">0</span></div>
+                <div class="text-sm text-kh3-grey mt-1">Projects</div>
+              </div>
+              <div class="text-center reveal" data-delay="200">
+                <div class="text-3xl md:text-4xl font-extrabold text-white"><span class="counter" data-to="20000" data-suffix="+">0</span></div>
+                <div class="text-sm text-kh3-grey mt-1">Sqm Delivered</div>
+              </div>
+              <div class="text-center reveal" data-delay="240">
+                <div class="text-3xl md:text-4xl font-extrabold text-white"><span class="counter" data-to="95" data-suffix="%">0</span></div>
+                <div class="text-sm text-kh3-grey mt-1">On‑time</div>
+              </div>
+            </div>
+          </div>
+          <div class="space-y-4 text-kh3-grey text-base reveal" data-delay="150">
+            <div class="flex items-start gap-3 hover-row"><span class="mt-2 w-2 h-2 rounded-full bg-kh3-red"></span><p>Define project objectives and scope, plan, performance requirements, standards, participants selection, and quality control.</p></div>
+            <div class="flex items-start gap-3 hover-row"><span class="mt-2 w-2 h-2 rounded-full bg-kh3-red"></span><p>Minimize wastage and maximize value via careful procurement of labor, materials and equipment.</p></div>
+            <div class="flex items-start gap-3 hover-row"><span class="mt-2 w-2 h-2 rounded-full bg-kh3-red"></span><p>Execute the designed project diligently by managing schedule, contracting and controlling costs.</p></div>
+            <div class="flex items-start gap-3 hover-row"><span class="mt-2 w-2 h-2 rounded-full bg-kh3-red"></span><p>Review materials and work processes to ensure safety and quality.</p></div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="py-32 bg-gradient-to-b from-kh3-black to-[#1b2021] text-white">
+      <div class="container mx-auto px-8 max-w-7xl">
+        <div class="mb-20 reveal" data-delay="0">
+          <h2 class="text-4xl md:text-6xl font-bold tracking-wide">COMMERCIAL FIT-OUTS & REFURBISHMENTS</h2>
+          <div class="w-16 h-1 bg-kh3-red mt-6"></div>
+        </div>
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 hover-card rounded-lg">
+          <div class="space-y-6 text-white/85 leading-relaxed text-base md:text-lg reveal" data-delay="100">
+            <!-- Blueprint SVG line draw accent -->
+            <svg class="w-full max-w-xl text-kh3-red" viewBox="0 0 600 120" fill="none" stroke="currentColor" stroke-width="2">
+              <path class="blueprint" d="M10 110 H590 M10 10 H300 M300 10 V60 M300 60 H500" stroke-dasharray="1000" stroke-dashoffset="1000"></path>
+            </svg>
+            <p>Acquiring commercial retail and office space requires efficient and effective coordination of highly demanding processes. These include identifying spatial needs, sourcing existing real estate to meet those needs, and designing and constructing the space in line with your corporate values and brand.</p>
+            <p>KH3 manages these processes for you with an integrated system. We acquire in-depth knowledge of your culture, systems, people, and goals and assemble goal-focused creative teams to meet your needs and requirements.</p>
+          </div>
+          <div class="space-y-4 text-kh3-grey text-base reveal" data-delay="150">
+            <div class="flex items-start gap-3 hover-row"><span class="mt-2 w-2 h-2 rounded-full bg-kh3-red"></span><p>In-depth stakeholder interviews to understand spatial needs (dimensions, furniture, IT, AV/telephony, mechanical, electrical, branding).</p></div>
+            <div class="flex items-start gap-3 hover-row"><span class="mt-2 w-2 h-2 rounded-full bg-kh3-red"></span><p>Assist with outlining goals, budgets, and timelines for commercial spaces.</p></div>
+            <div class="flex items-start gap-3 hover-row"><span class="mt-2 w-2 h-2 rounded-full bg-kh3-red"></span><p>Identify and present suitable real estate options.</p></div>
+            <div class="flex items-start gap-3 hover-row"><span class="mt-2 w-2 h-2 rounded-full bg-kh3-red"></span><p>Design and fit-out from layout to furniture selection within budget and realistic timelines.</p></div>
+            <div class="flex items-start gap-3 hover-row"><span class="mt-2 w-2 h-2 rounded-full bg-kh3-red"></span><p>Ensure highest value through safe and ethical procurement and construction methods.</p></div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="py-32 bg-kh3-black text-white">
+      <div class="container mx-auto px-8 max-w-7xl">
+        <div class="mb-20 reveal" data-delay="0">
+          <h2 class="text-4xl md:text-6xl font-bold tracking-wide">PROGRAM MANAGEMENT</h2>
+          <div class="w-16 h-1 bg-kh3-red mt-6"></div>
+        </div>
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 hover-card rounded-lg">
+          <div class="space-y-6 text-white/85 leading-relaxed text-base md:text-lg reveal" data-delay="100">
+            <p>There are immense benefits of managing a group of related projects in a coordinated manner. Grouping projects into a Program yields economies of scale, implements standards, establishes a corporate look-and-feel and delivers flexibility and efficiencies.</p>
+            <p>Our roll-out process reduces inefficiencies, delivers flexibility, reduces cost and sets your organization apart. We help identify projects that should be grouped as a Program, determine individual projects that should be included, and outline and implement a Program Management Strategy.</p>
+          </div>
+          <div class="space-y-6 text-kh3-grey text-base">
+            <!-- Expanding horizontal timeline -->
+            <div class="relative pb-4 reveal" data-delay="120">
+              <div class="absolute bottom-0 left-0 h-[2px] w-0 bg-kh3-red/70 timeline-line -z-10"></div>
+              <ul class="relative grid gap-6 md:grid-cols-3">
+                <li class="relative z-10 hover-row">
+                  <div class="w-2 h-2 bg-kh3-red rounded-full mb-2"></div>
+                  <p>Discovery & grouping value via interviews</p>
+                </li>
+                <li class="relative z-10 hover-row">
+                  <div class="w-2 h-2 bg-kh3-red rounded-full mb-2"></div>
+                  <p>Define scope, standards, resources, controls</p>
+                </li>
+                <li class="relative z-10 hover-row">
+                  <div class="w-2 h-2 bg-kh3-red rounded-full mb-2"></div>
+                  <p>Test, evaluate, refine and roll out</p>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- CTA: Animated Contact Us Button -->
+    <section class="py-24 bg-[#1b2021] text-white">
+      <div class="container mx-auto px-8 max-w-7xl text-center">
+        <a
+          href="contact.html"
+          class="inline-block uppercase tracking-wider px-8 py-4 border border-white text-white hover:bg-kh3-red hover:border-kh3-red transition-all duration-300 rounded-none animate-border-glow"
+        >
+          Contact Us
+        </a>
+      </div>
+    </section>
+
+    <!-- Services Overview (hidden) -->
+    <section class="py-32 bg-white hidden">
+      <!-- Construction Project Management -->
+      <section
+        id="construction"
+        class="service-detail min-h-screen bg-kh3-black flex items-center"
+      >
+        <div class="container mx-auto px-8 max-w-7xl">
+          <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
+            <!-- Left Content -->
+            <div class="space-y-8">
+              <div class="flex items-center mb-8">
+                <div class="w-2.5 h-2.5 bg-white transform rotate-45"></div>
+                <div class="w-px flex-1 bg-neutral-800"></div>
+              </div>
+
+              <h2 class="text-5xl md:text-7xl font-bold text-white mb-8">
+                CONSTRUCTION PROJECT MANAGEMENT
+              </h2>
+
+              <div class="w-24 h-px bg-kh3-red mb-8"></div>
+
+              <div class="space-y-6 text-white/80">
+                <p class="text-xl leading-relaxed">
+                  Construction projects can give you a headache and present
+                  numerous concerns that can keep you up at night. Details
+                  ranging from how to assess and select consultants or
+                  contractors to challenges with traffic impact assessments or
+                  soil tests. Construction projects can be even more challenging
+                  if construction or interior fit-out are not your core
+                  business.
+                </p>
+                <p class="text-xl leading-relaxed">
+                  At KH3, we know it is in our interest and yours, to reduce
+                  these challenges to a minimum by providing the expertise
+                  required to complete your project successfully and on time.
+                </p>
+              </div>
+            </div>
+
+            <!-- Right Content -->
+            <div class="space-y-8">
+              <h3 class="text-3xl font-bold text-white mb-8">HOW WE HELP</h3>
+              <div class="space-y-6">
+                <div class="flex items-start space-x-4">
+                  <div
+                    class="w-2 h-2 bg-kh3-red rounded-full mt-3 flex-shrink-0"
+                  ></div>
+                  <p class="text-white/80 text-lg leading-relaxed">
+                    We work with you to define your project objectives and
+                    scope, lay out a project plan, define performance
+                    requirements and standards, select project participants, and
+                    set quality control standards.
+                  </p>
+                </div>
+                <div class="flex items-start space-x-4">
+                  <div
+                    class="w-2 h-2 bg-kh3-red rounded-full mt-3 flex-shrink-0"
+                  ></div>
+                  <p class="text-white/80 text-lg leading-relaxed">
+                    We minimize wastage and maximize value through the careful
+                    procurement of labor, materials, and equipment.
+                  </p>
+                </div>
+                <div class="flex items-start space-x-4">
+                  <div
+                    class="w-2 h-2 bg-kh3-red rounded-full mt-3 flex-shrink-0"
+                  ></div>
+                  <p class="text-white/80 text-lg leading-relaxed">
+                    We execute the designed project diligently by carefully
+                    managing the project schedule, contracting, and also
+                    controlling costs.
+                  </p>
+                </div>
+                <div class="flex items-start space-x-4">
+                  <div
+                    class="w-2 h-2 bg-kh3-red rounded-full mt-3 flex-shrink-0"
+                  ></div>
+                  <p class="text-white/80 text-lg leading-relaxed">
+                    We consistently review materials and work processes to
+                    ensure safety and quality.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Commercial Fit-outs -->
+      <section
+        id="fitouts"
+        class="service-detail min-h-screen bg-kh3-black flex items-center"
+      >
+        <div class="container mx-auto px-8 max-w-7xl">
+          <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
+            <!-- Left Content -->
+            <div class="space-y-8">
+              <div class="flex items-center mb-8">
+                <div class="w-2.5 h-2.5 bg-white transform rotate-45"></div>
+                <div class="w-px flex-1 bg-neutral-800"></div>
+              </div>
+
+              <h2 class="text-5xl md:text-7xl font-bold text-white mb-8">
+                COMMERCIAL FIT-OUTS & REFURBISHMENTS
+              </h2>
+
+              <div class="w-24 h-px bg-kh3-red mb-8"></div>
+
+              <div class="space-y-6 text-white/80">
+                <p class="text-xl leading-relaxed">
+                  Acquiring and designing commercial spaces can be a complex
+                  process that requires efficient coordination between various
+                  stakeholders. From understanding spatial requirements to
+                  managing budgets and timelines, the process demands expertise
+                  and attention to detail.
+                </p>
+                <p class="text-xl leading-relaxed">
+                  At KH3, we provide an integrated system that leverages our
+                  in-depth knowledge and goal-focused teams to deliver
+                  exceptional commercial fit-out and refurbishment services.
+                </p>
+              </div>
+            </div>
+
+            <!-- Right Content -->
+            <div class="space-y-8">
+              <h3 class="text-3xl font-bold text-white mb-8">HOW WE HELP</h3>
+              <div class="space-y-6">
+                <div class="flex items-start space-x-4">
+                  <div
+                    class="w-2 h-2 bg-kh3-red rounded-full mt-3 flex-shrink-0"
+                  ></div>
+                  <p class="text-white/80 text-lg leading-relaxed">
+                    In-depth interviews with stakeholders to understand spatial
+                    needs and requirements including space dimensions,
+                    furniture, IT, audio-visual, telephony, mechanical,
+                    electrical, and branding.
+                  </p>
+                </div>
+                <div class="flex items-start space-x-4">
+                  <div
+                    class="w-2 h-2 bg-kh3-red rounded-full mt-3 flex-shrink-0"
+                  ></div>
+                  <p class="text-white/80 text-lg leading-relaxed">
+                    Assistance with outlining goals, budget, and timelines for
+                    commercial spaces.
+                  </p>
+                </div>
+                <div class="flex items-start space-x-4">
+                  <div
+                    class="w-2 h-2 bg-kh3-red rounded-full mt-3 flex-shrink-0"
+                  ></div>
+                  <p class="text-white/80 text-lg leading-relaxed">
+                    Identification and presentation of suitable real estate
+                    options.
+                  </p>
+                </div>
+                <div class="flex items-start space-x-4">
+                  <div
+                    class="w-2 h-2 bg-kh3-red rounded-full mt-3 flex-shrink-0"
+                  ></div>
+                  <p class="text-white/80 text-lg leading-relaxed">
+                    Design and fit-out services, from layout to furniture
+                    selection, within budget and realistic timelines.
+                  </p>
+                </div>
+                <div class="flex items-start space-x-4">
+                  <div
+                    class="w-2 h-2 bg-kh3-red rounded-full mt-3 flex-shrink-0"
+                  ></div>
+                  <p class="text-white/80 text-lg leading-relaxed">
+                    Commitment to highest value for money through safe and
+                    ethical procurement and construction methods.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Program Management -->
+      <section
+        id="program"
+        class="service-detail min-h-screen bg-kh3-black flex items-center"
+      >
+        <div class="container mx-auto px-8 max-w-7xl">
+          <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
+            <!-- Left Content -->
+            <div class="space-y-8">
+              <div class="flex items-center mb-8">
+                <div class="w-2.5 h-2.5 bg-white transform rotate-45"></div>
+                <div class="w-px flex-1 bg-neutral-800"></div>
+              </div>
+
+              <h2 class="text-5xl md:text-7xl font-bold text-white mb-8">
+                PROGRAM MANAGEMENT
+              </h2>
+
+              <div class="w-24 h-px bg-kh3-red mb-8"></div>
+
+              <div class="space-y-6 text-white/80">
+                <p class="text-xl leading-relaxed">
+                  Managing related projects like bank branches or customer
+                  service outlets in a coordinated manner can achieve economies
+                  of scale, implement standards, establish a corporate
+                  look-and-feel, and deliver flexibility and efficiencies that
+                  would not be possible if each project was managed
+                  individually.
+                </p>
+                <p class="text-xl leading-relaxed">
+                  Our roll-out process reduces inefficiencies, delivers
+                  flexibility, reduces costs, and helps organizations stand out.
+                  We can identify, group, and implement a Program Management
+                  Strategy that works for your organization.
+                </p>
+              </div>
+            </div>
+
+            <!-- Right Content -->
+            <div class="space-y-8">
+              <h3 class="text-3xl font-bold text-white mb-8">HOW WE HELP</h3>
+              <div class="space-y-6">
+                <div class="flex items-start space-x-4">
+                  <div
+                    class="w-2 h-2 bg-kh3-red rounded-full mt-3 flex-shrink-0"
+                  ></div>
+                  <p class="text-white/80 text-lg leading-relaxed">
+                    Determining the nature of related projects and the value of
+                    grouping them through a detailed interview process.
+                  </p>
+                </div>
+                <div class="flex items-start space-x-4">
+                  <div
+                    class="w-2 h-2 bg-kh3-red rounded-full mt-3 flex-shrink-0"
+                  ></div>
+                  <p class="text-white/80 text-lg leading-relaxed">
+                    Developing a detailed Program that identifies all projects,
+                    establishes scope, performance standards, resource
+                    requirements, and controls.
+                  </p>
+                </div>
+                <div class="flex items-start space-x-4">
+                  <div
+                    class="w-2 h-2 bg-kh3-red rounded-full mt-3 flex-shrink-0"
+                  ></div>
+                  <p class="text-white/80 text-lg leading-relaxed">
+                    Building test models and evaluating the process and end
+                    product for fitness of purpose.
+                  </p>
+                </div>
+                <div class="flex items-start space-x-4">
+                  <div
+                    class="w-2 h-2 bg-kh3-red rounded-full mt-3 flex-shrink-0"
+                  ></div>
+                  <p class="text-white/80 text-lg leading-relaxed">
+                    Refining the process and rolling out projects in adherence
+                    to Program and Project Management Principles.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+
+    <!-- Back to Services Button -->
+    <div id="backButton" class="hidden fixed bottom-8 right-8 z-40">
+      <button
+        onclick="hideService()"
+        class="bg-kh3-red text-white px-6 py-3 rounded-lg hover:bg-red-700 transition-colors"
+      >
+        Back to Services
+      </button>
+    </div>
+
+    <script>
+      // Service navigation
+      function showService(serviceId) {
+        document.getElementById("serviceDetails").classList.remove("hidden");
+        document.getElementById("backButton").classList.remove("hidden");
+
+        // Hide all service details
+        document.querySelectorAll(".service-detail").forEach((detail) => {
+          detail.classList.add("hidden");
+        });
+
+        // Show selected service
+        document.getElementById(serviceId).classList.remove("hidden");
+
+        // Smooth scroll to service
+        document
+          .getElementById(serviceId)
+          .scrollIntoView({ behavior: "smooth" });
+      }
+
+      function hideService() {
+        document.getElementById("serviceDetails").classList.add("hidden");
+        document.getElementById("backButton").classList.add("hidden");
+
+        // Scroll back to top
+        window.scrollTo({ top: 0, behavior: "smooth" });
+      }
+
+      // Scroll reveal observer for service sections
+      (function() {
+        const observer = new IntersectionObserver((entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+              const el = entry.target;
+              const delay = parseInt(el.getAttribute('data-delay') || '0', 10);
+              setTimeout(() => el.classList.add('in'), delay);
+
+              // Count-up for KPIs
+              el.querySelectorAll?.('.counter').forEach((c) => {
+                const to = parseInt(c.getAttribute('data-to') || '0', 10);
+                const suffix = c.getAttribute('data-suffix') || '';
+                let start = 0;
+                const duration = 1000;
+                const startTime = performance.now();
+                const step = (now) => {
+                  const p = Math.min((now - startTime) / duration, 1);
+                  const val = Math.floor(start + (to - start) * p);
+                  c.textContent = val.toLocaleString() + suffix;
+                  if (p < 1) requestAnimationFrame(step);
+                };
+                requestAnimationFrame(step);
+              });
+
+              // Blueprint stroke animation
+              el.querySelectorAll?.('.blueprint').forEach((p) => {
+                p.style.transition = 'stroke-dashoffset 1400ms ease-out';
+                p.style.strokeDashoffset = '0';
+              });
+
+              // Expand the timeline connector
+              const line = el.querySelector?.('.timeline-line');
+              if (line) {
+                line.style.transition = 'width 900ms cubic-bezier(0.22,1,0.36,1)';
+                line.style.width = '100%';
+              }
+
+              observer.unobserve(el);
+            }
+          });
+        }, { threshold: 0.15 });
+
+        document.querySelectorAll('.reveal').forEach((el) => observer.observe(el));
+      })();
+
+      // Menu toggle functionality (copied behavior from about.html)
+      const menuToggle = document.getElementById("menuToggle");
+      const navMenu = document.getElementById("navMenu");
+      const menuGrid = document.getElementById("menuGrid");
+
+      if (menuToggle && navMenu && menuGrid) {
+        let isMenuOpen = false;
+
+        menuToggle.addEventListener("click", () => {
+          if (isMenuOpen) {
+            // Close menu
+            navMenu.classList.add("hidden");
+            menuGrid.innerHTML = `
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+            `;
+            isMenuOpen = false;
+          } else {
+            // Open menu
+            navMenu.classList.remove("hidden");
+            menuGrid.innerHTML = `
+              <div class="absolute inset-0 flex items-center justify-center">
+                <svg class="w-5 h-5 text-kh3-red" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                </svg>
+              </div>
+            `;
+            isMenuOpen = true;
+          }
+        });
+
+        // Close menu when clicking outside
+        document.addEventListener("click", (e) => {
+          if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
+            navMenu.classList.add("hidden");
+            menuGrid.innerHTML = `
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+              <span class="w-1 h-1 bg-white"></span>
+            `;
+            isMenuOpen = false;
+          }
+        });
+        // Ensure grid icon is static (no custom animation transforms)
+        if (menuGrid) menuGrid.style.transform = "none";
+      }
+    </script>
+  </body>
+</html>
diff --git a/tailwind.config.js b/tailwind.config.js
index 2f67c61..de2a96f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,8 +6,10 @@ module.exports = {
     extend: {
       colors: {
         kh3: {
-          black: "#212629",
+          black: "#212829",
           red: "#B03037",
+          grey: "#8E9089",
+          white: "#FFFFFF",
           gold: "#b8860b",
           darkGold: "#8b6914",
           lightGold: "#daa520",