fixing

resources/css/app.css

     z-index: 1;
     /* Ensures it is on top of other elements */
     opacity: 0.3;
-    /* Set the opacity to a lower value */
-    display: block;
 }
 
 .petal-overlay img {

resources/js/app.js

 
     setTimeout(()=>{
         eventCountdown();
+        let petalOverlay = document.getElementById("petalOverlay");
+        petalOverlay.classList.remove("hidden");
+
     },4000)
 
 });

resources/views/digital-card.blade.php

         <div class="parent absolute h-screen w-screen" style="z-index: 999">
             @include('components.front-cover')
         </div>
+        <div class="petal-overlay hidden" id="petalOverlay">
+            <img src="{{ asset('assets/petal.gif') }}" alt="Falling Petals">
+        </div>
         <div class="section bg-babyblue min-h-screen flex justify-center items-center pb-20">
             @include('components.main-event')
         </div>