The image is loading very slowly, I need it load up correctly and have the rising animation before the text box below

index.html

@@ -38,9 +38,11 @@
             document.addEventListener('DOMContentLoaded', () => {
                 setTimeout(() => {
                     document.getElementById('hero-logo').classList.remove('opacity-0', 'translate-y-10');
-                    document.getElementById('hero-tagline').classList.remove('opacity-0', 'translate-y-10');
+                    setTimeout(() => {
+                        document.getElementById('hero-tagline').classList.remove('opacity-0', 'translate-y-10');
+                    }, 500);
                 }, 200);
-            });
+});
         </script>
 </div>
                 <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
@@ -64,7 +66,7 @@
     <div class="hero-bg pt-32 pb-20 md:pt-40 md:pb-32">
         <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
             <div class="absolute inset-0 bg-[url('https://static.photos/legal/1200x630/42')] opacity-10 bg-cover bg-center -z-10"></div>
-            <img id="hero-logo" src="https://huggingface.co/spaces/Twinory/undefined/resolve/main/images/TWINORY%20Logo%20-%20Edited.png" alt="Twinory Logo" class="h-80 mx-auto mb-6 opacity-0 transform translate-y-10 transition-all duration-1000">
+            <img id="hero-logo" src="https://static.photos/technology/640x360/42" alt="Twinory Logo" class="h-80 mx-auto mb-6 opacity-0 transform translate-y-10 transition-all duration-1000" loading="eager">
 <p id="hero-tagline" class="text-3xl md:text-5xl text-gray-300 max-w-3xl mx-auto opacity-0 transform translate-y-10 transition-all duration-1000 delay-300 italic tracking-wide" style="font-family: 'Montserrat', sans-serif; font-style: italic;">
 Just list it, with perfection!
 </p>