feat: complete projects page

about.html

@@ -37,19 +37,19 @@
               <!-- Navigation items in inverted C shape -->
               <div class="space-y-6">
                 <!-- HOME - Top -->
-            <a
+                <a
-              href="index.html"
+                  href="index.html"
                   class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat opacity-0 animate-fade-in-left"
                   style="
                     animation-delay: 0.05s;
                     animation-fill-mode: forwards;
                     animation-duration: 0.3s;
                   "
+                  data-trans="crossfade"
                 >
                   <span class="md:hidden">HOME</span>
-            <span
+                  <span
                     class="hidden md:inline"
-                    class="inline-block opacity-0 animate-fade-in-left"
                     style="
                       animation-delay: 0.05s;
                       animation-fill-mode: forwards;
@@ -57,9 +57,8 @@
                     "
                     >H</span
                   >
-            <span
+                  <span
                     class="hidden md:inline"
-                    class="inline-block opacity-0 animate-fade-in-left"
                     style="
                       animation-delay: 0.075s;
                       animation-fill-mode: forwards;
@@ -69,7 +68,6 @@
                   >
                   <span
                     class="hidden md:inline"
-                    class="inline-block opacity-0 animate-fade-in-left"
                     style="
                       animation-delay: 0.1s;
                       animation-fill-mode: forwards;
@@ -79,7 +77,6 @@
                   >
                   <span
                     class="hidden md:inline"
-                    class="inline-block opacity-0 animate-fade-in-left"
                     style="
                       animation-delay: 0.125s;
                       animation-fill-mode: forwards;
@@ -90,31 +87,104 @@
                 </a>
 
                 <!-- ABOUT US - Slightly right -->
-            <a
+                <a
-              href="about.html"
+                  href="about.html"
                   class="block text-white text-xl md:text-lg font-medium border-b border-white pb-1 ml-0 md:ml-6 font-montserrat opacity-0 animate-fade-in-left"
                   style="
                     animation-delay: 0.2s;
                     animation-fill-mode: forwards;
                     animation-duration: 0.3s;
                   "
-              >ABOUT US</a
+                >
-            >
+                  <span class="md:hidden">ABOUT US</span>
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.2s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >A</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.225s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >B</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.25s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >O</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.275s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >U</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.3s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >T</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.325s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >&nbsp;</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.35s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >U</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.375s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >S</span
+                  >
+                </a>
 
                 <!-- SERVICES - More right -->
-            <a
+                <a
-              href="services.html"
+                  href="services.html"
                   class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-12 font-montserrat opacity-0 animate-fade-in-left"
                   style="
                     animation-delay: 0.35s;
                     animation-fill-mode: forwards;
                     animation-duration: 0.3s;
                   "
+                  data-trans="crossfade"
                 >
                   <span class="md:hidden">SERVICES</span>
                   <span
                     class="hidden md:inline"
-                    class="inline-block opacity-0 animate-fade-in-left"
                     style="
                       animation-delay: 0.35s;
                       animation-fill-mode: forwards;
@@ -124,7 +194,6 @@
                   >
                   <span
                     class="hidden md:inline"
-                    class="inline-block opacity-0 animate-fade-in-left"
                     style="
                       animation-delay: 0.375s;
                       animation-fill-mode: forwards;
@@ -134,7 +203,6 @@
                   >
                   <span
                     class="hidden md:inline"
-                    class="inline-block opacity-0 animate-fade-in-left"
                     style="
                       animation-delay: 0.4s;
                       animation-fill-mode: forwards;
@@ -144,7 +212,6 @@
                   >
                   <span
                     class="hidden md:inline"
-                    class="inline-block opacity-0 animate-fade-in-left"
                     style="
                       animation-delay: 0.425s;
                       animation-fill-mode: forwards;
@@ -154,7 +221,6 @@
                   >
                   <span
                     class="hidden md:inline"
-                    class="inline-block opacity-0 animate-fade-in-left"
                     style="
                       animation-delay: 0.45s;
                       animation-fill-mode: forwards;
@@ -164,7 +230,6 @@
                   >
                   <span
                     class="hidden md:inline"
-                    class="inline-block opacity-0 animate-fade-in-left"
                     style="
                       animation-delay: 0.475s;
                       animation-fill-mode: forwards;
@@ -174,7 +239,6 @@
                   >
                   <span
                     class="hidden md:inline"
-                    class="inline-block opacity-0 animate-fade-in-left"
                     style="
                       animation-delay: 0.5s;
                       animation-fill-mode: forwards;
@@ -184,7 +248,6 @@
                   >
                   <span
                     class="hidden md:inline"
-                    class="inline-block opacity-0 animate-fade-in-left"
                     style="
                       animation-delay: 0.525s;
                       animation-fill-mode: forwards;
@@ -203,8 +266,82 @@
                     animation-fill-mode: forwards;
                     animation-duration: 0.3s;
                   "
-                  >PROJECTS</a
+                  data-trans="crossfade"
                 >
+                  <span class="md:hidden">PROJECTS</span>
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.55s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >P</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.575s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >R</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.6s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >O</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.625s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >J</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.65s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >E</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.675s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >C</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.7s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >T</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.725s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >S</span
+                  >
+                </a>
 
                 <!-- CONTACTS - More right -->
                 <a
@@ -215,8 +352,82 @@
                     animation-fill-mode: forwards;
                     animation-duration: 0.3s;
                   "
-                  >CONTACTS</a
+                  data-trans="crossfade"
                 >
+                  <span class="md:hidden">CONTACTS</span>
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.75s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >C</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.775s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >O</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.8s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >N</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.825s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >T</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.85s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >A</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.875s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >C</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.9s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >T</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.925s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >S</span
+                  >
+                </a>
               </div>
             </div>
       </div>
@@ -262,7 +473,7 @@
     <!-- Main Content -->
     <main class="pt-20">
       <!-- Hero Section (Left panel + vertical line + diamond markers, title with horizontal rule) -->
-      <section class="relative bg-kh3-black">
+      <section class="relative bg-kh3-black hero-section">
         <div class="grid grid-cols-1 md:grid-cols-2 min-h-[90vh]">
           <!-- Left dark panel -->
           <div class="relative bg-kh3-black flex items-center">
@@ -333,7 +544,7 @@
       </section>
 
       <!-- Dream Design Deliver Section -->
-      <section class="py-20 bg-kh3-black text-white relative">
+      <section class="py-20 bg-kh3-black text-white relative dream-design-deliver">
         <div class="container mx-auto px-8 max-w-6xl">
           <div class="text-center">
             <!-- Elegant horizontal layout -->
@@ -433,7 +644,7 @@
       </section>
 
       <!-- Mission & Vision Section -->
-      <section class="py-32 bg-kh3-grey text-kh3-black">
+      <section class="py-32 bg-kh3-grey text-kh3-black mission-vision">
         <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 -->
@@ -567,8 +778,8 @@
       </div>
     </section>
 
-    <!-- Values Section -->
+          <!-- Values Section -->
-      <section class="py-32 bg-white text-kh3-black">
+      <section class="py-32 bg-white text-kh3-black values-section">
       <div class="container mx-auto px-8 max-w-6xl">
           <div class="text-center mb-20">
             <h2
@@ -743,7 +954,7 @@
     </section>
 
     <!-- Team Section -->
-      <section class="py-32 bg-kh3-black text-white">
+      <section class="py-32 bg-kh3-black text-white team-section">
         <div class="container mx-auto px-8 max-w-7xl">
           <div class="text-center mb-20">
             <!-- Main Title -->
@@ -1648,11 +1859,11 @@
       @keyframes staggerFadeOut {
         0% {
           opacity: 1;
-          transform: translateY(0);
+          transform: translateY(0) scale(1);
         }
         100% {
           opacity: 0;
-          transform: translateY(-20px);
+          transform: translateY(-20px) scale(0.95);
         }
       }
 
@@ -1764,39 +1975,46 @@
       }
 
       .diamond-pulse {
-        animation: diamondPulse 4s ease-in-out infinite;
+        animation: diamondPulse 2s ease-in-out infinite;
       }
 
-      .diamond-pulse:nth-child(1) {
+      .diamond-pulse:nth-child(1) { animation-delay: 0s; }
-        animation-delay: 0s;
+      .diamond-pulse:nth-child(2) { animation-delay: 0.2s; }
+      .diamond-pulse:nth-child(3) { animation-delay: 0.4s; }
+      .diamond-pulse:nth-child(4) { animation-delay: 0.6s; }
+      .diamond-pulse:nth-child(5) { animation-delay: 0.8s; }
+
+      /* Page transition animations */
+      @keyframes staggerFadeOut {
+        0% {
+          opacity: 1;
+          transform: translateY(0) scale(1);
+        }
+        100% {
+          opacity: 0;
+          transform: translateY(-20px) scale(0.95);
+        }
       }
 
-      .diamond-pulse:nth-child(2) {
+      /* Section classes for targeting */
-        animation-delay: 0.5s;
+      .hero-section {
+        /* This class will be added to the hero section for targeting */
       }
 
-      .diamond-pulse:nth-child(3) {
+      .dream-design-deliver {
-        animation-delay: 1s;
+        /* This class will be added to the dream design deliver section for targeting */
       }
 
-      .diamond-pulse:nth-child(4) {
+      .mission-vision {
-        animation-delay: 1.5s;
+        /* This class will be added to the mission vision section for targeting */
       }
 
-      .diamond-pulse:nth-child(5) {
+      .values-section {
-        animation-delay: 2s;
+        /* This class will be added to the values section for targeting */
       }
 
-      .diamond-pulse:nth-child(6) {
+      .team-section {
-        animation-delay: 2.5s;
+        /* This class will be added to the team section for targeting */
-      }
-
-      .diamond-pulse:nth-child(7) {
-        animation-delay: 3s;
-      }
-
-      .diamond-pulse:nth-child(8) {
-        animation-delay: 3.5s;
       }
     </style>
 
@@ -1863,6 +2081,15 @@
           if (isMenuOpen) {
             // Close menu
             navMenu.classList.add("hidden");
+            if (closeBtnEl) {
+              closeBtnEl.remove();
+              closeBtnEl = null;
+            }
+            isMenuOpen = false;
+          } else {
+            // Open menu
+            navMenu.classList.remove("hidden");
+            // Keep the grid icon as is, don't transform to X
             menuGrid.innerHTML = `
               <span class="w-1 h-1 bg-white rounded-full"></span>
               <span class="w-1 h-1 bg-white rounded-full"></span>
@@ -1874,14 +2101,8 @@
               <span class="w-1 h-1 bg-white rounded-full"></span>
               <span class="w-1 h-1 bg-white rounded-full"></span>
             `;
-            if (closeBtnEl) {
+            
-              closeBtnEl.remove();
+            // Place red X close button at the bottom of the menu panel
-              closeBtnEl = null;
-            }
-            isMenuOpen = false;
-          } else {
-            // Open menu
-            navMenu.classList.remove("hidden");
             closeBtnEl = document.createElement("button");
             closeBtnEl.setAttribute("aria-label", "Close navigation");
             closeBtnEl.className =
@@ -1889,7 +2110,8 @@
             closeBtnEl.innerHTML = `
               <svg class="w-6 h-6" 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>`;
+              </svg>
+            `;
             navMenu.appendChild(closeBtnEl);
             closeBtnEl.addEventListener("click", () => {
               navMenu.classList.add("hidden");
@@ -1897,21 +2119,23 @@
                 closeBtnEl.remove();
                 closeBtnEl = null;
               }
-              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;
             });
             isMenuOpen = true;
           }
         });
+
+        // Close menu when clicking outside
+        document.addEventListener("click", (e) => {
+          if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
+            navMenu.classList.add("hidden");
+            if (closeBtnEl) {
+              closeBtnEl.remove();
+              closeBtnEl = null;
+            }
+            isMenuOpen = false;
+          }
+        });
       }
 
       // Custom cursor functionality
@@ -2073,6 +2297,53 @@
 
         teamObserver.observe(teamSection);
       }
+
+      // Page transition functionality
+      function handlePageTransition(e) {
+        e.preventDefault();
+        const targetUrl = e.currentTarget.href;
+        const transitionType = e.currentTarget.getAttribute('data-trans') || 'crossfade';
+
+        // Get all elements to animate out
+        const elementsToAnimate = [
+          document.querySelector('.hero-section'),
+          document.querySelector('.dream-design-deliver'),
+          document.querySelector('.mission-vision'),
+          document.querySelector('.values-section'),
+          document.querySelector('.team-section'),
+          document.querySelector('main')
+        ].filter(el => el);
+
+        // Animate elements out in order
+        elementsToAnimate.forEach((element, index) => {
+          setTimeout(() => {
+            if (element) {
+              element.style.animation = 'staggerFadeOut 0.6s ease-in-out forwards';
+            }
+          }, index * 100);
+        });
+
+        // Navigate after animations complete
+        setTimeout(() => {
+          window.location.href = targetUrl;
+        }, elementsToAnimate.length * 100 + 600);
+      }
+
+      // Add event listeners for page transitions
+      document.addEventListener('DOMContentLoaded', function() {
+        const transitionLinks = document.querySelectorAll('[data-trans]');
+        transitionLinks.forEach(link => {
+          link.addEventListener('click', handlePageTransition);
+        });
+      });
+
+      // Handle back/forward navigation
+      window.addEventListener('pageshow', function(event) {
+        if (event.persisted) {
+          // Page was loaded from cache (back/forward)
+          window.location.reload();
+        }
+      });
     </script>
   </body>
 </html>

contact.html

@@ -39,19 +39,397 @@
               <!-- Navigation items in inverted C shape -->
               <div class="space-y-6">
                 <!-- HOME - Top -->
-            <a href="index.html" class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat opacity-0 animate-fade-in-left" style="animation-delay: 0.05s; animation-fill-mode: forwards; animation-duration: 0.3s;">HOME</a>
+                <a
+                  href="index.html"
+                  class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat opacity-0 animate-fade-in-left"
+                  style="
+                    animation-delay: 0.05s;
+                    animation-fill-mode: forwards;
+                    animation-duration: 0.3s;
+                  "
+                  data-trans="crossfade"
+                >
+                  <span class="md:hidden">HOME</span>
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.05s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >H</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.075s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >O</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.1s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >M</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.125s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >E</span
+                  >
+                </a>
 
                 <!-- ABOUT US - Slightly right -->
-            <a href="about.html" class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-6 font-montserrat opacity-0 animate-fade-in-left" style="animation-delay: 0.2s; animation-fill-mode: forwards; animation-duration: 0.3s;">ABOUT US</a>
+                <a
+                  href="about.html"
+                  class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-6 font-montserrat opacity-0 animate-fade-in-left"
+                  style="
+                    animation-delay: 0.2s;
+                    animation-fill-mode: forwards;
+                    animation-duration: 0.3s;
+                  "
+                  data-trans="crossfade"
+                >
+                  <span class="md:hidden">ABOUT US</span>
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.2s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >A</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.225s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >B</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.25s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >O</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.275s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >U</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.3s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >T</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.325s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >&nbsp;</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.35s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >U</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.375s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >S</span
+                  >
+                </a>
 
                 <!-- SERVICES - More right -->
-            <a href="services.html" class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-12 font-montserrat opacity-0 animate-fade-in-left" style="animation-delay: 0.35s; animation-fill-mode: forwards; animation-duration: 0.3s;">SERVICES</a>
+                <a
+                  href="services.html"
+                  class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-12 font-montserrat opacity-0 animate-fade-in-left"
+                  style="
+                    animation-delay: 0.35s;
+                    animation-fill-mode: forwards;
+                    animation-duration: 0.3s;
+                  "
+                  data-trans="crossfade"
+                >
+                  <span class="md:hidden">SERVICES</span>
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.35s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >S</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.375s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >E</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.4s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >R</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.425s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >V</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.45s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >I</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.475s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >C</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.5s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >E</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.525s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >S</span
+                  >
+                </a>
 
                 <!-- PROJECTS - Most right -->
-                <a href="projects.html" class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-20 font-montserrat opacity-0 animate-fade-in-left" style="animation-delay: 0.55s; animation-fill-mode: forwards; animation-duration: 0.3s;">PROJECTS</a>
+                <a
+                  href="projects.html"
+                  class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-20 font-montserrat opacity-0 animate-fade-in-left"
+                  style="
+                    animation-delay: 0.55s;
+                    animation-fill-mode: forwards;
+                    animation-duration: 0.3s;
+                  "
+                  data-trans="crossfade"
+                >
+                  <span class="md:hidden">PROJECTS</span>
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.55s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >P</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.575s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >R</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.6s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >O</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.625s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >J</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.65s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >E</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.675s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >C</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.7s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >T</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.725s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >S</span
+                  >
+                </a>
 
                 <!-- CONTACTS - More right -->
-                <a href="contact.html" class="block text-white text-xl md:text-lg font-medium border-b border-white pb-1 ml-0 md:ml-12 font-montserrat opacity-0 animate-fade-in-left" style="animation-delay: 0.75s; animation-fill-mode: forwards; animation-duration: 0.3s;">CONTACTS</a>
+                <a
+                  href="contact.html"
+                  class="block text-white text-xl md:text-lg font-medium border-b border-white pb-1 ml-0 md:ml-12 font-montserrat opacity-0 animate-fade-in-left"
+                  style="
+                    animation-delay: 0.75s;
+                    animation-fill-mode: forwards;
+                    animation-duration: 0.3s;
+                  "
+                >
+                  <span class="md:hidden">CONTACTS</span>
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.75s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >C</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.775s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >O</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.8s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >N</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.825s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >T</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.85s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >A</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.875s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >C</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.9s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >T</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.925s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >S</span
+                  >
+                </a>
 
               </div>
             </div>
@@ -92,7 +470,7 @@
         </div>
 
     <!-- Hero Section -->
-    <section class="relative h-screen flex items-center justify-center">
+    <section class="relative h-screen flex items-center justify-center hero-section">
       <!-- Background Image -->
       <div class="absolute inset-0">
         <img
@@ -125,7 +503,7 @@
     </section>
 
     <!-- Contact Section -->
-    <section class="relative min-h-screen flex items-center">
+    <section class="relative min-h-screen flex items-center contact-form-section">
            <!-- Background Image with Overlay -->
      <div class="absolute inset-0">
        <img
@@ -337,7 +715,7 @@
     </section>
 
     <!-- Map Section -->
-    <section class="py-20 bg-kh3-black text-white">
+    <section class="py-20 bg-kh3-black text-white map-section">
       <div class="container mx-auto px-8 max-w-6xl">
         <h2
           class="text-4xl font-bold text-center mb-16 opacity-0"
@@ -543,6 +921,36 @@
       .masked-reveal {
         clip-path: inset(0 100% 0 0);
       }
+
+       /* Request quote button hover effect */
+       .bg-kh3-red:hover {
+         box-shadow: 0 0 20px rgba(220, 38, 38, 0.4);
+       }
+
+       /* Page transition animations */
+       @keyframes staggerFadeOut {
+         0% {
+           opacity: 1;
+           transform: translateY(0) scale(1);
+         }
+         100% {
+           opacity: 0;
+           transform: translateY(-20px) scale(0.95);
+         }
+       }
+
+       /* Section classes for targeting */
+       .hero-section {
+         /* This class will be added to the hero section for targeting */
+       }
+
+       .contact-form-section {
+         /* This class will be added to the contact form section for targeting */
+       }
+
+       .map-section {
+         /* This class will be added to the map section for targeting */
+       }
     </style>
 
     <script>
@@ -559,17 +967,6 @@
           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>
-            `;
             if (closeBtnEl) {
               closeBtnEl.remove();
               closeBtnEl = null;
@@ -578,6 +975,19 @@
           } else {
             // Open menu
             navMenu.classList.remove("hidden");
+            // Keep the grid icon as is, don't transform to X
+            menuGrid.innerHTML = `
+              <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>
+            `;
+            
             // Place red X close button at the bottom of the menu panel
             closeBtnEl = document.createElement("button");
             closeBtnEl.setAttribute("aria-label", "Close navigation");
@@ -595,22 +1005,23 @@
                 closeBtnEl.remove();
                 closeBtnEl = null;
               }
-              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;
             });
             isMenuOpen = true;
           }
         });
+
+        // Close menu when clicking outside
+        document.addEventListener("click", (e) => {
+          if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
+            navMenu.classList.add("hidden");
+            if (closeBtnEl) {
+              closeBtnEl.remove();
+              closeBtnEl = null;
+            }
+            isMenuOpen = false;
+          }
+        });
       }
 
       // Form submission
@@ -687,6 +1098,51 @@
           requestAnimationFrame(animation);
         }
       }, 2500);
+
+      // Page transition functionality
+      function handlePageTransition(e) {
+        e.preventDefault();
+        const targetUrl = e.currentTarget.href;
+        const transitionType = e.currentTarget.getAttribute('data-trans') || 'crossfade';
+
+        // Get all elements to animate out
+        const elementsToAnimate = [
+          document.querySelector('.hero-section'),
+          document.querySelector('.contact-form-section'),
+          document.querySelector('.map-section'),
+          document.querySelector('main')
+        ].filter(el => el);
+
+        // Animate elements out in order
+        elementsToAnimate.forEach((element, index) => {
+          setTimeout(() => {
+            if (element) {
+              element.style.animation = 'staggerFadeOut 0.6s ease-in-out forwards';
+            }
+          }, index * 100);
+        });
+
+        // Navigate after animations complete
+        setTimeout(() => {
+          window.location.href = targetUrl;
+        }, elementsToAnimate.length * 100 + 600);
+      }
+
+      // Add event listeners for page transitions
+      document.addEventListener('DOMContentLoaded', function() {
+        const transitionLinks = document.querySelectorAll('[data-trans]');
+        transitionLinks.forEach(link => {
+          link.addEventListener('click', handlePageTransition);
+        });
+      });
+
+      // Handle back/forward navigation
+      window.addEventListener('pageshow', function(event) {
+        if (event.persisted) {
+          // Page was loaded from cache (back/forward)
+          window.location.reload();
+        }
+      });
     </script>
     <script>
       // Ensure clean state on back/forward cache restores

data/approach.json

@@ -1,18 +0,0 @@
-[
-  {
-    "number": "01",
-    "title": "Professional",
-    "description": "We maintain the highest standards of professionalism in every aspect of our work. From initial consultation to project completion, our team demonstrates expertise, reliability, and unwavering commitment to quality. We adhere to international best practices and local regulations, ensuring your project meets all requirements while exceeding expectations."
-  },
-  {
-    "number": "02",
-    "title": "Innovative",
-    "description": "Innovation drives everything we do at KH3. We embrace cutting-edge technologies, sustainable practices, and creative solutions to deliver exceptional results. Our approach combines traditional construction wisdom with modern methodologies, creating spaces that are both timeless and forward-thinking."
-  },
-  {
-    "number": "03",
-    "title": "Caring",
-    "description": "We care deeply about our clients, our team, and the communities we serve. This commitment to care manifests in our attention to detail, our dedication to client satisfaction, and our responsibility to environmental stewardship. We build relationships that last beyond project completion."
-  }
-]
-

data/brands.json

@@ -1,15 +0,0 @@
-[
-  {
-    "name": "Symphony",
-    "blurb": "Symphony specializes in premium audio-visual integration and smart building solutions. We transform spaces with cutting-edge technology that enhances user experience and operational efficiency.",
-    "logo": "images/brands/symphony-logo.png",
-    "url": "https://symphony-gh.com"
-  },
-  {
-    "name": "Knock",
-    "blurb": "Knock delivers innovative door and access solutions for commercial and residential projects. Our products combine security, aesthetics, and functionality to create seamless entry experiences.",
-    "logo": "images/brands/knock-logo.png",
-    "url": "https://knock-gh.com"
-  }
-]
-

data/projects.json

@@ -1,145 +1,203 @@
 [
   {
-    "slug": "accra-corporate-tower",
+    "id": "proj-001",
-    "title": "Accra Corporate Tower",
+    "name": "ACCRA CORPORATE TOWER",
     "category": "Corporate",
     "location": "Accra, Ghana",
-    "client": "Ghana Investment Promotion Centre",
+    "description": "A state-of-the-art 15-story corporate tower featuring modern office spaces, executive suites, and premium amenities. The project showcases innovative construction techniques and sustainable design principles.",
-    "typeOfWork": "Turnkey Design & Fit-out",
+    "client": "Accra Development Consortium",
-    "sizeM2": 2500,
+    "typeOfWork": "Construction & Project Management",
-    "year": 2023,
+    "size": "25,000 SQM",
-    "coverImage": "images/projects/accra-corporate-tower-cover.jpg",
+    "duration": "18 months",
-    "gallery": [
+    "completionDate": "2023",
-      "images/projects/accra-corporate-tower-1.jpg",
+    "images": [
-      "images/projects/accra-corporate-tower-2.jpg",
+      "assets/images/room.png",
-      "images/projects/accra-corporate-tower-3.jpg",
+      "assets/images/chair.png",
-      "images/projects/accra-corporate-tower-4.jpg",
+      "assets/images/google.png",
-      "images/projects/accra-corporate-tower-5.jpg",
+      "assets/images/room.png"
-      "images/projects/accra-corporate-tower-6.jpg"
     ],
-    "summary": "A state-of-the-art corporate headquarters featuring modern workspace design, sustainable materials, and cutting-edge technology integration.",
+    "highlights": [
-    "story": {
+      "LEED Gold certification",
-      "challenge": "Create a prestigious corporate environment that reflects Ghana's economic growth while incorporating sustainable design principles.",
+      "Smart building technology integration",
-      "approach": "Implemented modular workspace design with natural lighting, local materials, and flexible meeting spaces.",
+      "Premium office fit-outs",
-      "outcome": "Delivered a 2,500 sqm premium office space that increased employee productivity by 40% and achieved LEED certification."
+      "Executive lounge and conference facilities"
-    }
+    ],
+    "details_url": "/projects/accra-corporate-tower.html"
   },
   {
-    "slug": "kumasi-university-library",
+    "id": "proj-002",
-    "title": "Kumasi University Library",
+    "name": "KH3 HEADQUARTERS",
-    "category": "Education",
+    "category": "Corporate",
-    "location": "Kumasi, Ghana",
+    "location": "Accra, Ghana",
-    "client": "Kwame Nkrumah University of Science and Technology",
+    "description": "Our own headquarters building featuring contemporary design with open-plan workspaces, collaborative zones, and modern amenities. A showcase of our design and construction capabilities.",
-    "typeOfWork": "Design & Build",
+    "client": "KH3 Group",
-    "sizeM2": 1800,
+    "typeOfWork": "Design Development & Fit-out",
-    "year": 2023,
+    "size": "1,200 SQM",
-    "coverImage": "images/projects/kumasi-library-cover.jpg",
+    "duration": "6 months",
-    "gallery": [
+    "completionDate": "2024",
-      "images/projects/kumasi-library-1.jpg",
+    "images": [
-      "images/projects/kumasi-library-2.jpg",
+      "assets/images/chair.png",
-      "images/projects/kumasi-library-3.jpg",
+      "assets/images/google.png",
-      "images/projects/kumasi-library-4.jpg"
+      "assets/images/room.png",
+      "assets/images/chair.png"
     ],
-    "summary": "Modern academic library designed to foster learning and research with flexible study spaces and digital integration.",
+    "highlights": [
-    "story": {
+      "Modern open-plan design",
-      "challenge": "Transform traditional library spaces into modern learning environments that support both individual study and collaborative research.",
+      "Collaborative workspace zones",
-      "approach": "Designed flexible zones with movable furniture, digital workstations, and natural lighting to create an inspiring academic atmosphere.",
+      "Premium materials and finishes",
-      "outcome": "Created a 1,800 sqm learning hub that increased student engagement and became a model for modern academic facilities in West Africa."
+      "Integrated technology systems"
-    }
+    ],
+    "details_url": "/projects/kh3-headquarters.html"
   },
   {
-    "slug": "tema-harbor-hotel",
+    "id": "proj-003",
-    "title": "Tema Harbor Hotel",
+    "name": "LABONE PREMIUM APARTMENTS",
-    "category": "Hospitality",
+    "category": "Residential",
-    "location": "Tema, Ghana",
+    "location": "Accra, Ghana",
-    "client": "Tema Development Corporation",
+    "description": "Luxury residential development featuring 24 premium apartments with high-end finishes, modern amenities, and sophisticated design. Each unit showcases quality craftsmanship and attention to detail.",
-    "typeOfWork": "Interior Design & Fit-out",
+    "client": "Labone Properties Ltd",
-    "sizeM2": 3200,
+    "typeOfWork": "Construction & Interior Fit-out",
-    "year": 2022,
+    "size": "8,500 SQM",
-    "coverImage": "images/projects/tema-hotel-cover.jpg",
+    "duration": "14 months",
-    "gallery": [
+    "completionDate": "2023",
-      "images/projects/tema-hotel-1.jpg",
+    "images": [
-      "images/projects/tema-hotel-2.jpg",
+      "assets/images/google.png",
-      "images/projects/tema-hotel-3.jpg",
+      "assets/images/room.png",
-      "images/projects/tema-hotel-4.jpg",
+      "assets/images/chair.png",
-      "images/projects/tema-hotel-5.jpg"
+      "assets/images/google.png",
+      "assets/images/room.png"
     ],
-    "summary": "Luxury hotel interior featuring coastal-inspired design, premium finishes, and world-class amenities for business and leisure travelers.",
+    "highlights": [
-    "story": {
+      "Premium residential fit-outs",
-      "challenge": "Create a luxury hotel experience that celebrates Ghana's coastal heritage while meeting international hospitality standards.",
+      "High-end kitchen and bathroom designs",
-      "approach": "Integrated local cultural elements with modern luxury design, using sustainable materials and creating seamless indoor-outdoor connections.",
+      "Integrated smart home systems",
-      "outcome": "Delivered a 3,200 sqm luxury hotel that achieved 4-star rating and became a landmark destination in Tema's hospitality sector."
+      "Luxury amenities and facilities"
-    }
+    ],
+    "details_url": "/projects/labone-apartments.html"
   },
   {
-    "slug": "accra-mall-retail",
+    "id": "proj-004",
-    "title": "Accra Mall Retail Expansion",
+    "name": "EAST LEGON SHOPPING CENTER",
     "category": "Retail",
     "location": "Accra, Ghana",
-    "client": "Accra Mall Management",
+    "description": "Modern retail development featuring boutique shops, restaurants, and entertainment spaces. The project includes comprehensive fit-out services for multiple retail tenants with diverse design requirements.",
-    "typeOfWork": "Retail Fit-out & Design",
+    "client": "East Legon Retail Group",
-    "sizeM2": 1500,
+    "typeOfWork": "Retail Fit-out & Project Management",
-    "year": 2022,
+    "size": "12,000 SQM",
-    "coverImage": "images/projects/accra-mall-cover.jpg",
+    "duration": "10 months",
-    "gallery": [
+    "completionDate": "2023",
-      "images/projects/accra-mall-1.jpg",
+    "images": [
-      "images/projects/accra-mall-2.jpg",
+      "assets/images/room.png",
-      "images/projects/accra-mall-3.jpg",
+      "assets/images/chair.png",
-      "images/projects/accra-mall-4.jpg"
+      "assets/images/google.png",
+      "assets/images/room.png"
     ],
-    "summary": "Modern retail spaces designed to enhance customer experience and maximize sales potential for premium brands.",
+    "highlights": [
-    "story": {
+      "Multiple retail tenant fit-outs",
-      "challenge": "Transform existing mall spaces into premium retail environments that attract international brands and enhance customer experience.",
+      "Modern shopping center design",
-      "approach": "Implemented modular retail design with flexible layouts, premium lighting, and customer flow optimization.",
+      "Restaurant and entertainment spaces",
-      "outcome": "Created 1,500 sqm of premium retail space that increased foot traffic by 60% and attracted major international brands."
+      "Premium retail finishes"
-    }
+    ],
+    "details_url": "/projects/east-legon-shopping.html"
   },
   {
-    "slug": "takoradi-office-complex",
+    "id": "proj-005",
-    "title": "Takoradi Office Complex",
+    "name": "KUMASI BUSINESS HUB",
+    "category": "Corporate",
+    "location": "Kumasi, Ghana",
+    "description": "Innovative business center designed to support startups and established companies. Features flexible office spaces, meeting rooms, and collaborative areas with modern technology integration.",
+    "client": "Kumasi Business Development Authority",
+    "typeOfWork": "Design & Construction Management",
+    "size": "6,500 SQM",
+    "duration": "12 months",
+    "completionDate": "2024",
+    "images": [
+      "assets/images/chair.png",
+      "assets/images/google.png",
+      "assets/images/room.png",
+      "assets/images/chair.png"
+    ],
+    "highlights": [
+      "Flexible coworking spaces",
+      "Modern meeting facilities",
+      "Technology-enabled environments",
+      "Sustainable design features"
+    ],
+    "details_url": "/projects/kumasi-business-hub.html"
+  },
+  {
+    "id": "proj-006",
+    "name": "TAKORADI PORT OFFICE COMPLEX",
     "category": "Corporate",
     "location": "Takoradi, Ghana",
-    "client": "Ghana National Petroleum Corporation",
+    "description": "Professional office complex for port operations and maritime services. Features robust construction, modern office fit-outs, and specialized facilities for port management and logistics operations.",
-    "typeOfWork": "Design & Build",
+    "client": "Ghana Ports and Harbours Authority",
-    "sizeM2": 2800,
+    "typeOfWork": "Construction & Office Fit-out",
-    "year": 2021,
+    "size": "15,000 SQM",
-    "coverImage": "images/projects/takoradi-office-cover.jpg",
+    "duration": "16 months",
-    "gallery": [
+    "completionDate": "2023",
-      "images/projects/takoradi-office-1.jpg",
+    "images": [
-      "images/projects/takoradi-office-2.jpg",
+      "assets/images/google.png",
-      "images/projects/takoradi-office-3.jpg",
+      "assets/images/room.png",
-      "images/projects/takoradi-office-4.jpg",
+      "assets/images/chair.png",
-      "images/projects/takoradi-office-5.jpg"
+      "assets/images/google.png"
     ],
-    "summary": "Modern office complex designed for the energy sector, featuring collaborative workspaces and advanced technology integration.",
+    "highlights": [
-    "story": {
+      "Specialized port facilities",
-      "challenge": "Design a corporate headquarters that reflects the energy sector's innovation while creating productive work environments.",
+      "Modern office environments",
-      "approach": "Created open-plan offices with collaborative zones, advanced AV systems, and sustainable energy features.",
+      "Operational control centers",
-      "outcome": "Delivered a 2,800 sqm office complex that improved team collaboration and became a benchmark for corporate design in Ghana's energy sector."
+      "Durable construction materials"
-    }
+    ],
+    "details_url": "/projects/takoradi-port.html"
   },
   {
-    "slug": "cape-coast-school",
+    "id": "proj-007",
-    "title": "Cape Coast International School",
+    "name": "CAPE COAST HOTEL RENOVATION",
-    "category": "Education",
+    "category": "Hospitality",
     "location": "Cape Coast, Ghana",
-    "client": "Cape Coast Education Trust",
+    "description": "Comprehensive renovation and fit-out of a historic hotel, modernizing facilities while preserving architectural heritage. Includes guest room upgrades, restaurant renovations, and amenity improvements.",
-    "typeOfWork": "Turnkey Design & Build",
+    "client": "Cape Coast Hospitality Group",
-    "sizeM2": 2200,
+    "typeOfWork": "Renovation & Hospitality Fit-out",
-    "year": 2021,
+    "size": "8,000 SQM",
-    "coverImage": "images/projects/cape-coast-school-cover.jpg",
+    "duration": "8 months",
-    "gallery": [
+    "completionDate": "2024",
-      "images/projects/cape-coast-school-1.jpg",
+    "images": [
-      "images/projects/cape-coast-school-2.jpg",
+      "assets/images/room.png",
-      "images/projects/cape-coast-school-3.jpg",
+      "assets/images/chair.png",
-      "images/projects/cape-coast-school-4.jpg"
+      "assets/images/google.png",
+      "assets/images/room.png"
     ],
-    "summary": "International school campus featuring modern classrooms, science labs, and sports facilities designed for 21st-century learning.",
+    "highlights": [
-    "story": {
+      "Historic preservation",
-      "challenge": "Create an educational environment that meets international standards while incorporating local cultural elements and sustainable design.",
+      "Modern hospitality fit-outs",
-      "approach": "Designed flexible learning spaces with integrated technology, outdoor learning areas, and community gathering spaces.",
+      "Restaurant and bar renovations",
-      "outcome": "Built a 2,200 sqm school campus that enhanced learning outcomes and became a model for modern education facilities in Ghana."
+      "Premium guest amenities"
-    }
+    ],
+    "details_url": "/projects/cape-coast-hotel.html"
+  },
+  {
+    "id": "proj-008",
+    "name": "TEMA INDUSTRIAL WAREHOUSE",
+    "category": "Industrial",
+    "location": "Tema, Ghana",
+    "description": "Large-scale industrial warehouse facility designed for manufacturing and logistics operations. Features high-bay storage systems, loading docks, and specialized industrial fit-outs for efficient operations.",
+    "client": "Tema Industrial Development Corporation",
+    "typeOfWork": "Industrial Construction & Fit-out",
+    "size": "35,000 SQM",
+    "duration": "20 months",
+    "completionDate": "2023",
+    "images": [
+      "assets/images/chair.png",
+      "assets/images/google.png",
+      "assets/images/room.png",
+      "assets/images/chair.png"
+    ],
+    "highlights": [
+      "High-bay storage systems",
+      "Industrial-grade construction",
+      "Efficient logistics design",
+      "Modern office facilities"
+    ],
+    "details_url": "/projects/tema-warehouse.html"
   }
 ]
-

data/services.json

@@ -1,54 +0,0 @@
-[
-  {
-    "slug": "design",
-    "title": "Design",
-    "intro": "Our comprehensive design services transform your vision into detailed, buildable plans that optimize space, functionality, and aesthetics.",
-    "bullets": [
-      "Site assessment and feasibility studies",
-      "Conceptual design and space planning",
-      "Detailed architectural drawings and specifications",
-      "MEP (Mechanical, Electrical, Plumbing) design",
-      "Interior design and material selection",
-      "Lighting design and acoustic planning",
-      "3D visualization and virtual walkthroughs",
-      "Building Information Modeling (BIM)",
-      "Value engineering and cost optimization",
-      "Regulatory compliance and permit documentation"
-    ]
-  },
-  {
-    "slug": "build",
-    "title": "Build",
-    "intro": "From groundbreaking to completion, our construction management expertise ensures projects are delivered on time, within budget, and to the highest quality standards.",
-    "bullets": [
-      "Project management and coordination",
-      "Construction planning and scheduling",
-      "Quality control and assurance",
-      "Health and safety management",
-      "Subcontractor management and coordination",
-      "Material procurement and logistics",
-      "Progress monitoring and reporting",
-      "Change order management",
-      "Commissioning and handover",
-      "Post-construction support and maintenance"
-    ]
-  },
-  {
-    "slug": "furnish",
-    "title": "Furnish",
-    "intro": "Complete your space with our comprehensive furnishing services, from custom furniture design to complete fit-out solutions that bring your vision to life.",
-    "bullets": [
-      "Custom furniture design and manufacturing",
-      "Procurement and supply chain management",
-      "Installation and fit-out services",
-      "Workplace consultancy and optimization",
-      "Furniture layout and space planning",
-      "Audio-visual and technology integration",
-      "Signage and branding implementation",
-      "Soft furnishings and accessories",
-      "Maintenance and aftercare services",
-      "Sustainable and ergonomic solutions"
-    ]
-  }
-]
-

data/team.json

@@ -1,67 +0,0 @@
-{
-  "team": [
-    {
-      "name": "Kwame Asante",
-      "role": "Managing Director",
-      "photo": "images/team/kwame-asante.jpg",
-      "bio": "With over 15 years of experience in construction project management, Kwame leads KH3's strategic vision and oversees all major projects. His expertise spans corporate, hospitality, and educational sectors across West Africa."
-    },
-    {
-      "name": "Ama Osei",
-      "role": "Head of Design",
-      "photo": "images/team/ama-osei.jpg",
-      "bio": "Ama brings 12 years of architectural and interior design experience to KH3. She specializes in sustainable design solutions and has led award-winning projects in Ghana's corporate and hospitality sectors."
-    },
-    {
-      "name": "Kofi Mensah",
-      "role": "Construction Manager",
-      "photo": "images/team/kofi-mensah.jpg",
-      "bio": "Kofi manages all construction operations with a focus on quality, safety, and timely delivery. His background in civil engineering and project management ensures excellence in every build."
-    },
-    {
-      "name": "Efua Addo",
-      "role": "Project Coordinator",
-      "photo": "images/team/efua-addo.jpg",
-      "bio": "Efua coordinates project delivery across all phases, from initial planning to final handover. Her attention to detail and client communication skills ensure seamless project execution."
-    },
-    {
-      "name": "Yaw Darko",
-      "role": "Senior Architect",
-      "photo": "images/team/yaw-darko.jpg",
-      "bio": "Yaw leads our architectural team with expertise in modern design principles and sustainable building practices. His innovative approach has shaped many of Ghana's landmark projects."
-    },
-    {
-      "name": "Akosua Boateng",
-      "role": "Interior Designer",
-      "photo": "images/team/akosua-boateng.jpg",
-      "bio": "Akosua creates inspiring interior spaces that balance functionality with aesthetics. Her work spans corporate offices, luxury hotels, and educational facilities across Ghana."
-    }
-  ],
-  "partners": [
-    {
-      "name": "Ghana Investment Promotion Centre",
-      "logo": "images/partners/gipc-logo.png"
-    },
-    {
-      "name": "Kwame Nkrumah University of Science and Technology",
-      "logo": "images/partners/knust-logo.png"
-    },
-    {
-      "name": "Ghana National Petroleum Corporation",
-      "logo": "images/partners/gnpc-logo.png"
-    },
-    {
-      "name": "Tema Development Corporation",
-      "logo": "images/partners/tdc-logo.png"
-    },
-    {
-      "name": "Accra Mall Management",
-      "logo": "images/partners/accra-mall-logo.png"
-    },
-    {
-      "name": "Cape Coast Education Trust",
-      "logo": "images/partners/cape-coast-trust-logo.png"
-    }
-  ]
-}
-

index.html

@@ -39,12 +39,16 @@
                 <!-- HOME - Top -->
                 <a
                   href="index.html"
-                  class="block text-white text-xl md:text-lg font-medium border-b border-white pb-1 ml-0 font-montserrat"
+                  class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat opacity-0 animate-fade-in-left"
+                  style="
+                    animation-delay: 0.05s;
+                    animation-fill-mode: forwards;
+                    animation-duration: 0.3s;
+                  "
                 >
                   <span class="md:hidden">HOME</span>
                   <span
                     class="hidden md:inline"
-                    class="inline-block opacity-0 animate-fade-in-left"
                     style="
                       animation-delay: 0.05s;
                       animation-fill-mode: forwards;
@@ -54,7 +58,6 @@
                   >
                   <span
                     class="hidden md:inline"
-                    class="inline-block opacity-0 animate-fade-in-left"
                     style="
                       animation-delay: 0.075s;
                       animation-fill-mode: forwards;
@@ -64,7 +67,6 @@
                   >
                   <span
                     class="hidden md:inline"
-                    class="inline-block opacity-0 animate-fade-in-left"
                     style="
                       animation-delay: 0.1s;
                       animation-fill-mode: forwards;
@@ -74,7 +76,6 @@
                   >
                   <span
                     class="hidden md:inline"
-                    class="inline-block opacity-0 animate-fade-in-left"
                     style="
                       animation-delay: 0.125s;
                       animation-fill-mode: forwards;
@@ -87,14 +88,19 @@
                 <!-- ABOUT US - Slightly right -->
                 <a
                   href="about.html"
-                  class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-6 font-montserrat"
+                  class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-6 font-montserrat opacity-0 animate-fade-in-left"
+                  style="
+                    animation-delay: 0.2s;
+                    animation-fill-mode: forwards;
+                    animation-duration: 0.3s;
+                  "
+                  data-trans="crossfade"
                 >
-                  <span class="md:hidden">ABOUT&nbsp;US</span>
+                  <span class="md:hidden">ABOUT US</span>
                   <span
                     class="hidden md:inline"
-                    class="inline-block opacity-0 animate-fade-in-left"
                     style="
-                      animation-delay: 0.15s;
+                      animation-delay: 0.2s;
                       animation-fill-mode: forwards;
                       animation-duration: 0.15s;
                     "
@@ -102,9 +108,8 @@
                   >
                   <span
                     class="hidden md:inline"
-                    class="inline-block opacity-0 animate-fade-in-left"
                     style="
-                      animation-delay: 0.175s;
+                      animation-delay: 0.225s;
                       animation-fill-mode: forwards;
                       animation-duration: 0.15s;
                     "
@@ -112,9 +117,8 @@
                   >
                   <span
                     class="hidden md:inline"
-                    class="inline-block opacity-0 animate-fade-in-left"
                     style="
-                      animation-delay: 0.2s;
+                      animation-delay: 0.25s;
                       animation-fill-mode: forwards;
                       animation-duration: 0.15s;
                     "
@@ -122,9 +126,8 @@
                   >
                   <span
                     class="hidden md:inline"
-                    class="inline-block opacity-0 animate-fade-in-left"
                     style="
-                      animation-delay: 0.225s;
+                      animation-delay: 0.275s;
                       animation-fill-mode: forwards;
                       animation-duration: 0.15s;
                     "
@@ -132,9 +135,8 @@
                   >
                   <span
                     class="hidden md:inline"
-                    class="inline-block opacity-0 animate-fade-in-left"
                     style="
-                      animation-delay: 0.25s;
+                      animation-delay: 0.3s;
                       animation-fill-mode: forwards;
                       animation-duration: 0.15s;
                     "
@@ -142,9 +144,8 @@
                   >
                   <span
                     class="hidden md:inline"
-                    class="inline-block opacity-0 animate-fade-in-left"
                     style="
-                      animation-delay: 0.275s;
+                      animation-delay: 0.325s;
                       animation-fill-mode: forwards;
                       animation-duration: 0.15s;
                     "
@@ -152,9 +153,8 @@
                   >
                   <span
                     class="hidden md:inline"
-                    class="inline-block opacity-0 animate-fade-in-left"
                     style="
-                      animation-delay: 0.3s;
+                      animation-delay: 0.35s;
                       animation-fill-mode: forwards;
                       animation-duration: 0.15s;
                     "
@@ -162,9 +162,8 @@
                   >
                   <span
                     class="hidden md:inline"
-                    class="inline-block opacity-0 animate-fade-in-left"
                     style="
-                      animation-delay: 0.325s;
+                      animation-delay: 0.375s;
                       animation-fill-mode: forwards;
                       animation-duration: 0.15s;
                     "
@@ -175,12 +174,17 @@
                 <!-- SERVICES - More right -->
                 <a
                   href="services.html"
-                  class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-12 font-montserrat"
+                  class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-12 font-montserrat opacity-0 animate-fade-in-left"
+                  style="
+                    animation-delay: 0.35s;
+                    animation-fill-mode: forwards;
+                    animation-duration: 0.3s;
+                  "
+                  data-trans="crossfade"
                 >
                   <span class="md:hidden">SERVICES</span>
                   <span
                     class="hidden md:inline"
-                    class="inline-block opacity-0 animate-fade-in-left"
                     style="
                       animation-delay: 0.35s;
                       animation-fill-mode: forwards;
@@ -190,7 +194,6 @@
                   >
                   <span
                     class="hidden md:inline"
-                    class="inline-block opacity-0 animate-fade-in-left"
                     style="
                       animation-delay: 0.375s;
                       animation-fill-mode: forwards;
@@ -200,7 +203,6 @@
                   >
                   <span
                     class="hidden md:inline"
-                    class="inline-block opacity-0 animate-fade-in-left"
                     style="
                       animation-delay: 0.4s;
                       animation-fill-mode: forwards;
@@ -210,7 +212,6 @@
                   >
                   <span
                     class="hidden md:inline"
-                    class="inline-block opacity-0 animate-fade-in-left"
                     style="
                       animation-delay: 0.425s;
                       animation-fill-mode: forwards;
@@ -220,7 +221,6 @@
                   >
                   <span
                     class="hidden md:inline"
-                    class="inline-block opacity-0 animate-fade-in-left"
                     style="
                       animation-delay: 0.45s;
                       animation-fill-mode: forwards;
@@ -230,7 +230,6 @@
                   >
                   <span
                     class="hidden md:inline"
-                    class="inline-block opacity-0 animate-fade-in-left"
                     style="
                       animation-delay: 0.475s;
                       animation-fill-mode: forwards;
@@ -240,7 +239,6 @@
                   >
                   <span
                     class="hidden md:inline"
-                    class="inline-block opacity-0 animate-fade-in-left"
                     style="
                       animation-delay: 0.5s;
                       animation-fill-mode: forwards;
@@ -250,7 +248,6 @@
                   >
                   <span
                     class="hidden md:inline"
-                    class="inline-block opacity-0 animate-fade-in-left"
                     style="
                       animation-delay: 0.525s;
                       animation-fill-mode: forwards;
@@ -263,12 +260,17 @@
                 <!-- PROJECTS - Most right -->
                 <a
                   href="projects.html"
-                  class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-20 font-montserrat"
+                  class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-20 font-montserrat opacity-0 animate-fade-in-left"
+                  style="
+                    animation-delay: 0.55s;
+                    animation-fill-mode: forwards;
+                    animation-duration: 0.3s;
+                  "
+                  data-trans="crossfade"
                 >
                   <span class="md:hidden">PROJECTS</span>
                   <span
                     class="hidden md:inline"
-                    class="inline-block opacity-0 animate-fade-in-left"
                     style="
                       animation-delay: 0.55s;
                       animation-fill-mode: forwards;
@@ -278,7 +280,6 @@
                   >
                   <span
                     class="hidden md:inline"
-                    class="inline-block opacity-0 animate-fade-in-left"
                     style="
                       animation-delay: 0.575s;
                       animation-fill-mode: forwards;
@@ -288,7 +289,6 @@
                   >
                   <span
                     class="hidden md:inline"
-                    class="inline-block opacity-0 animate-fade-in-left"
                     style="
                       animation-delay: 0.6s;
                       animation-fill-mode: forwards;
@@ -298,7 +298,6 @@
                   >
                   <span
                     class="hidden md:inline"
-                    class="inline-block opacity-0 animate-fade-in-left"
                     style="
                       animation-delay: 0.625s;
                       animation-fill-mode: forwards;
@@ -308,7 +307,6 @@
                   >
                   <span
                     class="hidden md:inline"
-                    class="inline-block opacity-0 animate-fade-in-left"
                     style="
                       animation-delay: 0.65s;
                       animation-fill-mode: forwards;
@@ -318,7 +316,6 @@
                   >
                   <span
                     class="hidden md:inline"
-                    class="inline-block opacity-0 animate-fade-in-left"
                     style="
                       animation-delay: 0.675s;
                       animation-fill-mode: forwards;
@@ -328,7 +325,6 @@
                   >
                   <span
                     class="hidden md:inline"
-                    class="inline-block opacity-0 animate-fade-in-left"
                     style="
                       animation-delay: 0.7s;
                       animation-fill-mode: forwards;
@@ -338,7 +334,6 @@
                   >
                   <span
                     class="hidden md:inline"
-                    class="inline-block opacity-0 animate-fade-in-left"
                     style="
                       animation-delay: 0.725s;
                       animation-fill-mode: forwards;
@@ -351,12 +346,17 @@
                 <!-- CONTACTS - More right -->
                 <a
                   href="contact.html"
-                  class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-12 font-montserrat"
+                  class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-12 font-montserrat opacity-0 animate-fade-in-left"
+                  style="
+                    animation-delay: 0.75s;
+                    animation-fill-mode: forwards;
+                    animation-duration: 0.3s;
+                  "
+                  data-trans="crossfade"
                 >
                   <span class="md:hidden">CONTACTS</span>
                   <span
                     class="hidden md:inline"
-                    class="inline-block opacity-0 animate-fade-in-left"
                     style="
                       animation-delay: 0.75s;
                       animation-fill-mode: forwards;
@@ -366,7 +366,6 @@
                   >
                   <span
                     class="hidden md:inline"
-                    class="inline-block opacity-0 animate-fade-in-left"
                     style="
                       animation-delay: 0.775s;
                       animation-fill-mode: forwards;
@@ -376,7 +375,6 @@
                   >
                   <span
                     class="hidden md:inline"
-                    class="inline-block opacity-0 animate-fade-in-left"
                     style="
                       animation-delay: 0.8s;
                       animation-fill-mode: forwards;
@@ -386,7 +384,6 @@
                   >
                   <span
                     class="hidden md:inline"
-                    class="inline-block opacity-0 animate-fade-in-left"
                     style="
                       animation-delay: 0.825s;
                       animation-fill-mode: forwards;
@@ -396,7 +393,6 @@
                   >
                   <span
                     class="hidden md:inline"
-                    class="inline-block opacity-0 animate-fade-in-left"
                     style="
                       animation-delay: 0.85s;
                       animation-fill-mode: forwards;
@@ -406,7 +402,6 @@
                   >
                   <span
                     class="hidden md:inline"
-                    class="inline-block opacity-0 animate-fade-in-left"
                     style="
                       animation-delay: 0.875s;
                       animation-fill-mode: forwards;
@@ -416,7 +411,6 @@
                   >
                   <span
                     class="hidden md:inline"
-                    class="inline-block opacity-0 animate-fade-in-left"
                     style="
                       animation-delay: 0.9s;
                       animation-fill-mode: forwards;
@@ -426,7 +420,6 @@
                   >
                   <span
                     class="hidden md:inline"
-                    class="inline-block opacity-0 animate-fade-in-left"
                     style="
                       animation-delay: 0.925s;
                       animation-fill-mode: forwards;
@@ -444,7 +437,9 @@
 
     <!-- Main Layout -->
     <div class="min-h-screen relative">
-      <section class="relative min-h-screen flex flex-col md:flex-row">
+      <section
+        class="relative min-h-screen flex flex-col md:flex-row hero-section"
+      >
         <!-- KH3 Logo -->
         <div
           class="absolute top-8 left-8 z-20 opacity-0 animate-fade-in-left"
@@ -502,7 +497,7 @@
 
         <!-- LEFT COLUMN -->
         <div
-          class="w-full md:w-1/3 bg-kh3-black flex items-start md:items-center p-8 pt-24 md:pt-8 opacity-0 animate-fade-in-left"
+          class="w-full md:w-1/3 bg-kh3-black flex items-start md:items-center p-8 pt-24 md:pt-8 opacity-0 animate-fade-in-left dream-design-deliver"
           style="animation-delay: 0.8s; animation-fill-mode: forwards"
         >
           <div class="max-w-xl space-y-2">
@@ -709,11 +704,32 @@
         }
       }
 
-      @keyframes staggerFadeOut {
+      /* Logo glow animation */
-        to {
+      @keyframes logoGlow {
-          opacity: 0;
+        0%,
-          transform: translateY(10px) scale(0.98);
+        100% {
+          filter: drop-shadow(0 0 5px rgba(220, 38, 38, 0.3));
         }
+        50% {
+          filter: drop-shadow(0 0 20px rgba(220, 38, 38, 0.6));
+        }
+      }
+
+      /* Page transition animations */
+      @keyframes staggerFadeOut {
+        0% {
+          opacity: 1;
+          transform: translateY(0) scale(1);
+        }
+        100% {
+          opacity: 0;
+          transform: translateY(-20px) scale(0.95);
+        }
+      }
+
+      /* Hero section class for targeting */
+      .hero-section {
+        /* This class will be added to the hero section for targeting */
       }
 
       @keyframes slideOutLeft {
@@ -976,6 +992,52 @@
         });
       }
 
+      // Page transition functionality
+      function handlePageTransition(e) {
+        e.preventDefault();
+        const targetUrl = e.currentTarget.href;
+        const transitionType =
+          e.currentTarget.getAttribute("data-trans") || "crossfade";
+
+        // Get all elements to animate out
+        const elementsToAnimate = [
+          document.querySelector(".hero-section"),
+          document.querySelector(".dream-design-deliver"),
+          document.querySelector("main"),
+        ].filter((el) => el);
+
+        // Animate elements out in order
+        elementsToAnimate.forEach((element, index) => {
+          setTimeout(() => {
+            if (element) {
+              element.style.animation =
+                "staggerFadeOut 0.6s ease-in-out forwards";
+            }
+          }, index * 100);
+        });
+
+        // Navigate after animations complete
+        setTimeout(() => {
+          window.location.href = targetUrl;
+        }, elementsToAnimate.length * 100 + 600);
+      }
+
+      // Add event listeners for page transitions
+      document.addEventListener("DOMContentLoaded", function () {
+        const transitionLinks = document.querySelectorAll("[data-trans]");
+        transitionLinks.forEach((link) => {
+          link.addEventListener("click", handlePageTransition);
+        });
+      });
+
+      // Handle back/forward navigation
+      window.addEventListener("pageshow", function (event) {
+        if (event.persisted) {
+          // Page was loaded from cache (back/forward)
+          window.location.reload();
+        }
+      });
+
       // Loading screen with improved timing
       window.addEventListener("load", () => {
         const loadingScreen = document.getElementById("loadingScreen");

services.html

@@ -149,6 +149,23 @@
           opacity: 1;
         }
       }
+
+      /* Page transition animations */
+      @keyframes staggerFadeOut {
+        0% {
+          opacity: 1;
+          transform: translateY(0) scale(1);
+        }
+        100% {
+          opacity: 0;
+          transform: translateY(-20px) scale(0.95);
+        }
+      }
+
+      /* Hero section class for targeting */
+      .hero-section {
+        /* This class will be added to the hero section for targeting */
+      }
     </style>
   </head>
   <body class="bg-kh3-black text-white font-montserrat">
@@ -173,27 +190,395 @@
                 <!-- HOME - Top -->
                 <a
                   href="index.html"
-                  class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat opacity-0 animate-fade-in-left" style="animation-delay: 0.05s; animation-fill-mode: forwards; animation-duration: 0.3s;">HOME</a>
+                  class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat opacity-0 animate-fade-in-left"
+                  style="
+                    animation-delay: 0.05s;
+                    animation-fill-mode: forwards;
+                    animation-duration: 0.3s;
+                  "
+                  data-trans="crossfade"
+                >
+                  <span class="md:hidden">HOME</span>
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.05s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >H</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.075s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >O</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.1s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >M</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.125s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >E</span
+                  >
+                </a>
 
                 <!-- ABOUT US - Slightly right -->
-            <a
+                <a
-              href="about.html"
+                  href="about.html"
-                  class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-6 font-montserrat opacity-0 animate-fade-in-left" style="animation-delay: 0.2s; animation-fill-mode: forwards; animation-duration: 0.3s;">ABOUT US</a>
+                  class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-6 font-montserrat opacity-0 animate-fade-in-left"
+                  style="
+                    animation-delay: 0.2s;
+                    animation-fill-mode: forwards;
+                    animation-duration: 0.3s;
+                  "
+                  data-trans="crossfade"
+                >
+                  <span class="md:hidden">ABOUT US</span>
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.2s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >A</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.225s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >B</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.25s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >O</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.275s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >U</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.3s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >T</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.325s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >&nbsp;</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.35s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >U</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.375s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >S</span
+                  >
+                </a>
 
                 <!-- SERVICES - More right -->
-            <a
+                <a
-              href="services.html"
+                  href="services.html"
-                  class="block text-white text-xl md:text-lg font-medium border-b border-white pb-1 ml-0 md:ml-12 font-montserrat opacity-0 animate-fade-in-left" style="animation-delay: 0.35s; animation-fill-mode: forwards; animation-duration: 0.3s;">SERVICES</a>
+                  class="block text-white text-xl md:text-lg font-medium border-b border-white pb-1 ml-0 md:ml-12 font-montserrat opacity-0 animate-fade-in-left"
+                  style="
+                    animation-delay: 0.35s;
+                    animation-fill-mode: forwards;
+                    animation-duration: 0.3s;
+                  "
+                >
+                  <span class="md:hidden">SERVICES</span>
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.35s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >S</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.375s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >E</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.4s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >R</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.425s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >V</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.45s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >I</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.475s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >C</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.5s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >E</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.525s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >S</span
+                  >
+                </a>
 
                 <!-- PROJECTS - Most right -->
                 <a
                   href="projects.html"
-                  class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-20 font-montserrat opacity-0 animate-fade-in-left" style="animation-delay: 0.55s; animation-fill-mode: forwards; animation-duration: 0.3s;">PROJECTS</a>
+                  class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-20 font-montserrat opacity-0 animate-fade-in-left"
+                  style="
+                    animation-delay: 0.55s;
+                    animation-fill-mode: forwards;
+                    animation-duration: 0.3s;
+                  "
+                  data-trans="crossfade"
+                >
+                  <span class="md:hidden">PROJECTS</span>
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.55s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >P</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.575s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >R</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.6s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >O</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.625s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >J</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.65s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >E</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.675s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >C</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.7s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >T</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.725s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >S</span
+                  >
+                </a>
 
                 <!-- CONTACTS - More right -->
                 <a
                   href="contact.html"
-                  class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-12 font-montserrat opacity-0 animate-fade-in-left" style="animation-delay: 0.75s; animation-fill-mode: forwards; animation-duration: 0.3s;">CONTACTS</a>
+                  class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-12 font-montserrat opacity-0 animate-fade-in-left"
+                  style="
+                    animation-delay: 0.75s;
+                    animation-fill-mode: forwards;
+                    animation-duration: 0.3s;
+                  "
+                  data-trans="crossfade"
+                >
+                  <span class="md:hidden">CONTACTS</span>
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.75s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >C</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.775s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >O</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.8s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >N</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.825s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >T</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.85s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >A</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.875s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >C</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.9s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >T</span
+                  >
+                  <span
+                    class="hidden md:inline"
+                    style="
+                      animation-delay: 0.925s;
+                      animation-fill-mode: forwards;
+                      animation-duration: 0.15s;
+                    "
+                    >S</span
+                  >
+                </a>
               </div>
             </div>
           </div>
@@ -239,7 +624,7 @@
     <!-- Main Content -->
     <main class="pt-20">
       <!-- Hero Section (Left panel + vertical line + diamond markers, title with horizontal rule) -->
-      <section class="relative bg-kh3-black">
+      <section class="relative bg-kh3-black hero-section">
         <div class="grid grid-cols-1 md:grid-cols-2 min-h-[90vh]">
           <!-- Left dark panel -->
           <div class="relative bg-kh3-black flex items-center justify-center">
@@ -431,7 +816,7 @@
     </section>
 
     <!-- Services Overview (hidden) -->
-    <section class="py-32 bg-white hidden">
+    <section class="py-32 bg-white hidden" id="serviceDetails">
       <!-- Construction Project Management -->
       <section
         id="construction"
@@ -782,40 +1167,59 @@
         document.querySelectorAll('.reveal').forEach((el) => observer.observe(el));
       })();
 
-      // Menu toggle functionality (copied behavior from about.html)
+      // 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;
+        let closeBtnEl = null;
 
         menuToggle.addEventListener("click", () => {
           if (isMenuOpen) {
             // Close menu
             navMenu.classList.add("hidden");
-            menuGrid.innerHTML = `
+            if (closeBtnEl) {
-              <span class="w-1 h-1 bg-white"></span>
+              closeBtnEl.remove();
-              <span class="w-1 h-1 bg-white"></span>
+              closeBtnEl = null;
-              <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");
+            // Keep the grid icon as is, don't transform to X
             menuGrid.innerHTML = `
-              <div class="absolute inset-0 flex items-center justify-center">
+              <span class="w-1 h-1 bg-white rounded-full"></span>
-                <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">
+              <span class="w-1 h-1 bg-white rounded-full"></span>
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+              <span class="w-1 h-1 bg-white rounded-full"></span>
-                </svg>
+              <span class="w-1 h-1 bg-white rounded-full"></span>
-              </div>
+              <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>
             `;
+            
+            // Place red X close button at the bottom of the menu panel
+            closeBtnEl = document.createElement("button");
+            closeBtnEl.setAttribute("aria-label", "Close navigation");
+            closeBtnEl.className =
+              "absolute bottom-12 left-6 text-kh3-red hover:text-white transition-colors";
+            closeBtnEl.innerHTML = `
+              <svg class="w-6 h-6" 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>
+            `;
+            navMenu.appendChild(closeBtnEl);
+            closeBtnEl.addEventListener("click", () => {
+              navMenu.classList.add("hidden");
+              if (closeBtnEl) {
+                closeBtnEl.remove();
+                closeBtnEl = null;
+              }
+              isMenuOpen = false;
+            });
             isMenuOpen = true;
           }
         });
@@ -824,23 +1228,57 @@
         document.addEventListener("click", (e) => {
           if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
             navMenu.classList.add("hidden");
-            menuGrid.innerHTML = `
+            if (closeBtnEl) {
-              <span class="w-1 h-1 bg-white"></span>
+              closeBtnEl.remove();
-              <span class="w-1 h-1 bg-white"></span>
+              closeBtnEl = null;
-              <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";
       }
+
+      // Page transition functionality
+      function handlePageTransition(e) {
+        e.preventDefault();
+        const targetUrl = e.currentTarget.href;
+        const transitionType = e.currentTarget.getAttribute('data-trans') || 'crossfade';
+
+        // Get all elements to animate out
+        const elementsToAnimate = [
+          document.querySelector('.hero-section'),
+          document.querySelector('main')
+        ].filter(el => el);
+
+        // Animate elements out in order
+        elementsToAnimate.forEach((element, index) => {
+          setTimeout(() => {
+            if (element) {
+              element.style.animation = 'staggerFadeOut 0.6s ease-in-out forwards';
+            }
+          }, index * 100);
+        });
+
+        // Navigate after animations complete
+        setTimeout(() => {
+          window.location.href = targetUrl;
+        }, elementsToAnimate.length * 100 + 600);
+      }
+
+      // Add event listeners for page transitions
+      document.addEventListener('DOMContentLoaded', function() {
+        const transitionLinks = document.querySelectorAll('[data-trans]');
+        transitionLinks.forEach(link => {
+          link.addEventListener('click', handlePageTransition);
+        });
+      });
+
+      // Handle back/forward navigation
+      window.addEventListener('pageshow', function(event) {
+        if (event.persisted) {
+          // Page was loaded from cache (back/forward)
+          window.location.reload();
+        }
+      });
     </script>
     <script src="js/main.js"></script>
     <script>

styles/output.css

@@ -757,6 +757,10 @@ video {
   z-index: 30;
 }
 
+.z-\[60\] {
+  z-index: 60;
+}
+
 .mx-4 {
   margin-left: 1rem;
   margin-right: 1rem;
@@ -835,6 +839,17 @@ video {
   margin-top: 2rem;
 }
 
+.mb-3 {
+  margin-bottom: 0.75rem;
+}
+
+.line-clamp-2 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
 .block {
   display: block;
 }
@@ -931,6 +946,18 @@ video {
   height: 100vh;
 }
 
+.h-80 {
+  height: 20rem;
+}
+
+.max-h-\[90vh\] {
+  max-height: 90vh;
+}
+
+.max-h-full {
+  max-height: 100%;
+}
+
 .min-h-\[90vh\] {
   min-height: 90vh;
 }
@@ -1059,6 +1086,10 @@ video {
   max-width: 48rem;
 }
 
+.max-w-full {
+  max-width: 100%;
+}
+
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -1107,6 +1138,18 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.scale-95 {
+  --tw-scale-x: .95;
+  --tw-scale-y: .95;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.scale-100 {
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .scale-y-\[-1\] {
   --tw-scale-y: -1;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1259,6 +1302,10 @@ video {
   flex-direction: column;
 }
 
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
 .items-start {
   align-items: flex-start;
 }
@@ -1365,6 +1412,10 @@ video {
   overflow: visible;
 }
 
+.overflow-y-auto {
+  overflow-y: auto;
+}
+
 .overflow-x-hidden {
   overflow-x: hidden;
 }
@@ -1433,6 +1484,18 @@ video {
   border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
 }
 
+.border-white\/10 {
+  border-color: rgb(255 255 255 / 0.1);
+}
+
+.border-white\/30 {
+  border-color: rgb(255 255 255 / 0.3);
+}
+
+.border-white\/20 {
+  border-color: rgb(255 255 255 / 0.2);
+}
+
 .bg-\[\#1b2021\] {
   --tw-bg-opacity: 1;
   background-color: rgb(27 32 33 / var(--tw-bg-opacity, 1));
@@ -1512,6 +1575,30 @@ video {
   background-color: rgb(0 0 0 / 0.5);
 }
 
+.bg-black\/80 {
+  background-color: rgb(0 0 0 / 0.8);
+}
+
+.bg-kh3-grey\/10 {
+  background-color: rgb(142 144 137 / 0.1);
+}
+
+.bg-black\/90 {
+  background-color: rgb(0 0 0 / 0.9);
+}
+
+.bg-white\/30 {
+  background-color: rgb(255 255 255 / 0.3);
+}
+
+.bg-black\/70 {
+  background-color: rgb(0 0 0 / 0.7);
+}
+
+.bg-black\/95 {
+  background-color: rgb(0 0 0 / 0.95);
+}
+
 .bg-opacity-20 {
   --tw-bg-opacity: 0.2;
 }
@@ -1615,6 +1702,11 @@ video {
   background-position: center;
 }
 
+.object-contain {
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
@@ -1632,6 +1724,18 @@ video {
   padding: 2rem;
 }
 
+.p-6 {
+  padding: 1.5rem;
+}
+
+.p-2 {
+  padding: 0.5rem;
+}
+
+.p-4 {
+  padding: 1rem;
+}
+
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -1692,6 +1796,16 @@ video {
   padding-bottom: 1rem;
 }
 
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
 .pb-1 {
   padding-bottom: 0.25rem;
 }
@@ -1732,6 +1846,10 @@ video {
   padding-top: 8rem;
 }
 
+.pb-2 {
+  padding-bottom: 0.5rem;
+}
+
 .text-center {
   text-align: center;
 }
@@ -1895,6 +2013,14 @@ video {
   color: rgb(255 255 255 / 0.85);
 }
 
+.text-white\/50 {
+  color: rgb(255 255 255 / 0.5);
+}
+
+.text-white\/70 {
+  color: rgb(255 255 255 / 0.7);
+}
+
 .underline {
   text-decoration-line: underline;
 }
@@ -1903,6 +2029,10 @@ video {
   opacity: 0;
 }
 
+.opacity-100 {
+  opacity: 1;
+}
+
 .shadow-2xl {
   --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
   --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
@@ -1935,6 +2065,11 @@ video {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
+.drop-shadow {
+  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
 .grayscale {
   --tw-grayscale: grayscale(100%);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -2030,6 +2165,12 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.hover\:scale-110:hover {
+  --tw-scale-x: 1.1;
+  --tw-scale-y: 1.1;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .hover\:border-kh3-red:hover {
   --tw-border-opacity: 1;
   border-color: rgb(176 48 55 / var(--tw-border-opacity, 1));
@@ -2053,6 +2194,15 @@ video {
   background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
 }
 
+.hover\:bg-white:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-black\/70:hover {
+  background-color: rgb(0 0 0 / 0.7);
+}
+
 .hover\:text-kh3-red:hover {
   --tw-text-opacity: 1;
   color: rgb(176 48 55 / var(--tw-text-opacity, 1));
@@ -2063,6 +2213,11 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
 
+.hover\:text-kh3-black:hover {
+  --tw-text-opacity: 1;
+  color: rgb(33 40 41 / var(--tw-text-opacity, 1));
+}
+
 .focus\:border-transparent:focus {
   border-color: transparent;
 }
@@ -2328,6 +2483,18 @@ video {
 }
 
 @media (min-width: 1024px) {
+  .lg\:h-full {
+    height: 100%;
+  }
+
+  .lg\:w-1\/3 {
+    width: 33.333333%;
+  }
+
+  .lg\:w-2\/3 {
+    width: 66.666667%;
+  }
+
   .lg\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -2336,6 +2503,14 @@ video {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 
+  .lg\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .lg\:flex-row {
+    flex-direction: row;
+  }
+
   .lg\:gap-12 {
     gap: 3rem;
   }