remove text on hero gif after 5 seconds

static/app.js

@@ -44,4 +44,10 @@ document.addEventListener('DOMContentLoaded', function () {
     checkScroll(); // Check on load
   });
   
-  
\ No newline at end of file
+  document.addEventListener("DOMContentLoaded", function() {
+    setTimeout(() => {
+        const heroSection = document.querySelector('.time');
+        heroSection.classList.add('hidden');
+        heroSection.classList.remove('hero-overlay');
+    }, 5000);  // 5 seconds delay
+});
\ No newline at end of file

static/style.css

@@ -325,4 +325,6 @@ h2 {
     opacity: 1;
     transform: translateY(0);
   }
-  
\ No newline at end of file
+  .hidden {
+    display: none;
+  }
\ No newline at end of file

wiki/pages/home.html

@@ -64,7 +64,7 @@
 
     <!-- Full-screen GIF Section -->
     <section class="hero-section">
-        <div class="hero-overlay">
+        <div class="time hero-overlay">
             <h1>Welcome to the GCM-KY Team</h1>
             <p>We are working on solutions to detect PFAS</p>
         </div>