diff --git a/src/components/sections/hero/HeroAnimated.tsx b/src/components/sections/hero/HeroAnimated.tsx
index c877f8f..ce162a1 100644
--- a/src/components/sections/hero/HeroAnimated.tsx
+++ b/src/components/sections/hero/HeroAnimated.tsx
@@ -38,11 +38,6 @@ const HeroAnimated = ({
       className="hero-animated-container"
       onMouseMove={handleMouseMove}
     >
-      <div className="hero-animated-image-container">
-        <div className="hero-animated-parallax-wrapper" style={parallaxStyle}>
-          <ImageOrVideo imageSrc={imageSrc} videoSrc={videoSrc} className="hero-animated-image" />
-        </div>
-      </div>
       <div className="hero-animated-content w-content-width mx-auto">
         <div className="flex flex-col items-center gap-3 md:gap-5">
           <span className="px-3 py-1 mb-1 text-sm card rounded">{tag}</span>
@@ -64,6 +59,11 @@ const HeroAnimated = ({
           </div>
         </div>
       </div>
+      <div className="hero-animated-image-container">
+        <div className="hero-animated-parallax-wrapper" style={parallaxStyle}>
+          <ImageOrVideo imageSrc={imageSrc} videoSrc={videoSrc} className="hero-animated-image" />
+        </div>
+      </div>
     </section>
   );
 };
diff --git a/src/index.css b/src/index.css
index f61a6db..55745eb 100644
--- a/src/index.css
+++ b/src/index.css
@@ -155,6 +155,13 @@ h6 {
   padding-top: 4rem;
 }
 
+.hero-animated-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2rem;
+}
+
 /* WEBILD_CARD_STYLE */
 /* @cards/gradient-mesh */
 .card {