Add floating animation to hero image and update text styles

- Introduce keyframes for float animation in globals.css.
- Apply float animation to the hero image and update text to white.

components/Home/Hero/Hero.tsx

@@ -6,7 +6,7 @@ const Hero = () => {
             className="relative w-full pt-[4vh] md:pt-[12vh] h-screen flex flex-col overflow-hidden"
             style={{
                 backgroundColor: "var(--primary-bg)",
-                color: "var(--primary-text)",
+                color: "white",
             }}
         >
             {/* Background Image with Blur */}
@@ -30,20 +30,24 @@ const Hero = () => {
                     <div>
                         <h1
                             data-aos="fade-up"
-                            className="text-2xl sm:text-4xl md:text-5xl mt-6 mb-6 font-bold md:leading-[3rem] lg:leading-[3.5rem]"
+                            className="text-2xl sm:text-4xl md:text-5xl mt-6 mb-6 font-bold md:leading-[3rem] lg:leading-[3.5rem] text-white"
                         >
                             Rhein Software Development
                         </h1>
-                        <p data-aos="fade-up" data-aos-delay="200">
+                        <p
+                            data-aos="fade-up"
+                            data-aos-delay="200"
+                            className="text-white"
+                        >
                             Wir entwickeln performante und zukunftssichere Software für deine Vision.
                         </p>
                     </div>
 
-                    {/* Image Content */}
+                    {/* Floating Image Content */}
                     <div
                         data-aos="fade-up"
                         data-aos-delay="400"
-                        className="hidden lg:block"
+                        className="hidden lg:block animate-float"
                     >
                         <Image src="/images/hero.png" alt="hero graphic" width={700} height={700}/>
                     </div>