diff --git a/package-lock.json b/package-lock.json
index cfd474f..eb9d642 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "cookie_website_official": "file:",
+        "framer-motion": "^12.15.0",
         "lucide": "^0.511.0",
         "lucide-react": "^0.511.0",
         "motion": "^12.15.0",
@@ -24,6 +25,7 @@
         "react-dom": "^19.1.0",
         "react-icons": "^5.5.0",
         "react-router-dom": "^7.6.1",
+        "react-scroll-parallax": "^3.4.5",
         "react-simple-typewriter": "^5.0.1",
         "tailwind-merge": "^3.3.0",
         "tailwindcss": "^4.1.7",
@@ -372,7 +374,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -389,7 +390,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -406,7 +406,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -423,7 +422,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -440,7 +438,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -457,7 +454,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -474,7 +470,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -491,7 +486,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -508,7 +502,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -525,7 +518,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -542,7 +534,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -559,7 +550,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -576,7 +566,6 @@
       "cpu": [
         "mips64el"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -593,7 +582,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -610,7 +598,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -627,7 +614,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -644,7 +630,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -661,7 +646,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -678,7 +662,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -695,7 +678,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -712,7 +694,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -729,7 +710,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -746,7 +726,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -763,7 +742,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -780,7 +758,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2001,7 +1978,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2015,7 +1991,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2029,7 +2004,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2043,7 +2017,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2057,7 +2030,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2071,7 +2043,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2085,7 +2056,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2099,7 +2069,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2113,7 +2082,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2127,7 +2095,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2141,7 +2108,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2155,7 +2121,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2169,7 +2134,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2183,7 +2147,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2197,7 +2160,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2211,7 +2173,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2225,7 +2186,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2239,7 +2199,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2253,7 +2212,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2267,7 +2225,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2709,7 +2666,6 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.7.tgz",
       "integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/geojson": {
@@ -2735,7 +2691,6 @@
       "version": "19.1.6",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.6.tgz",
       "integrity": "sha512-JeG0rEWak0N6Itr6QUx+X60uQmN+5t3j9r/OVDtWzFXKaj6kD1BwJzOksD0FF6iWxZlbE1kB0q9vtnU2ekqa1Q==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.0.2"
@@ -2745,7 +2700,7 @@
       "version": "19.1.5",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.5.tgz",
       "integrity": "sha512-CMCjrWucUBZvohgZxkjd6S9h0nZxXjzus6yDfUb+xLxYM7VvjKNH1tQrE9GWLql1XoOP4/Ds3bwFqShHUYraGg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "peerDependencies": {
         "@types/react": "^19.0.0"
@@ -2948,6 +2903,12 @@
       ],
       "license": "MIT"
     },
+    "node_modules/bezier-easing": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.1.0.tgz",
+      "integrity": "sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig==",
+      "license": "MIT"
+    },
     "node_modules/bidi-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.0.3.tgz",
@@ -3261,7 +3222,6 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/d3-array": {
@@ -3595,7 +3555,6 @@
       "version": "0.25.5",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.5.tgz",
       "integrity": "sha512-P8OtKZRv/5J5hhz0cUAdu/cLuPIKXpQl1R9pZtvmHWQvrAUVd0UNIPT4IB4W3rNOqVO0rlqHmCIbSwxh/c9yUQ==",
-      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "bin": {
@@ -3858,7 +3817,6 @@
       "version": "6.4.5",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.5.tgz",
       "integrity": "sha512-4BG7puHpVsIYxZUbiUE3RqGloLaSSwzYie5jvasC4LWuBWzZawynvYouhjbQKw2JuIGYdm0DzIxl8iVidKlUEw==",
-      "dev": true,
       "license": "MIT",
       "peerDependencies": {
         "picomatch": "^3 || ^4"
@@ -4001,7 +3959,6 @@
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "optional": true,
@@ -5047,6 +5004,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/parallax-controller": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/parallax-controller/-/parallax-controller-1.7.1.tgz",
+      "integrity": "sha512-facVMEBnUynzMN7hCSqyNpF6uyCpVIl4XAUyTR9D8q2JlhgyPY6bZtj/OkFk3+Cpka1TnYCppQb8BzDWHtSaZg==",
+      "license": "MIT",
+      "dependencies": {
+        "bezier-easing": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -5089,7 +5058,6 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
       "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -5111,7 +5079,6 @@
       "version": "8.5.3",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
       "integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -5277,6 +5244,22 @@
         "react-dom": ">=18"
       }
     },
+    "node_modules/react-scroll-parallax": {
+      "version": "3.4.5",
+      "resolved": "https://registry.npmjs.org/react-scroll-parallax/-/react-scroll-parallax-3.4.5.tgz",
+      "integrity": "sha512-4NLZQ8cZEUyxoA95DfrXWneOOUSFrFmpM0dZNzMErmuJ0LzY+CCw8Xw0hqB6xxHWxNknfs46AozyIPSWkZeucA==",
+      "license": "MIT",
+      "dependencies": {
+        "parallax-controller": "^1.7.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0-0 || >=17.0.1 || ^18.0.0",
+        "react-dom": "^16.8.0-0 || >=17.0.1 || ^18.0.0"
+      }
+    },
     "node_modules/react-simple-typewriter": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-simple-typewriter/-/react-simple-typewriter-5.0.1.tgz",
@@ -5334,7 +5317,6 @@
       "version": "4.41.1",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.41.1.tgz",
       "integrity": "sha512-cPmwD3FnFv8rKMBc1MxWCwVQFxwf1JEmSX3iQXrRVVG15zerAIXRjMFVWnd5Q5QvgKF7Aj+5ykXFhUl+QGnyOw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/estree": "1.0.7"
@@ -5770,7 +5752,6 @@
       "version": "0.2.14",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",
       "integrity": "sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "fdir": "^6.4.4",
@@ -5942,7 +5923,6 @@
       "version": "6.3.5",
       "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz",
       "integrity": "sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "esbuild": "^0.25.0",
diff --git a/package.json b/package.json
index 7b81b7a..10454e8 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cookie_website_official": "file:",
+    "framer-motion": "^12.15.0",
     "lucide": "^0.511.0",
     "lucide-react": "^0.511.0",
     "motion": "^12.15.0",
@@ -26,6 +27,7 @@
     "react-dom": "^19.1.0",
     "react-icons": "^5.5.0",
     "react-router-dom": "^7.6.1",
+    "react-scroll-parallax": "^3.4.5",
     "react-simple-typewriter": "^5.0.1",
     "tailwind-merge": "^3.3.0",
     "tailwindcss": "^4.1.7",
diff --git a/src/pages/AboutUs/Components/Section3.jsx b/src/pages/AboutUs/Components/Section3.jsx
index 7e9ab32..4f3f698 100644
--- a/src/pages/AboutUs/Components/Section3.jsx
+++ b/src/pages/AboutUs/Components/Section3.jsx
@@ -1,66 +1,214 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { motion, useMotionValue, useTransform } from 'framer-motion';
 
 const Section3 = () => {
   // Content configuration as strings
   const content = {
     title: "Who Are We ?",
-    
-    tagline: `"A Tech-Powered Creative Studio.
-              Powered By Engineers. Inspired By Designers"`,
-    
+    tagline: `"A Tech-Powered Creative Studio.\nPowered By Engineers. Inspired By Designers"`,
     mission: `A Creative Studio Which Turn Ideas Into Brands, Clicks Into Experiences, And Screens Into Stories.`,
-    
     values: `We Don't Just Offer Services Here, We Bring Commitment, Creativity, And Care.`,
-    
     images: {
       left: "/imgs/placeholder.png",
       right: "/imgs/placeholder.png"
     }
   };
 
+  const [hoveredIndex, setHoveredIndex] = useState(null);
+  const x = useMotionValue(0);
+  const y = useMotionValue(0);
+  const rotateX = useTransform(y, [-100, 100], [10, -10]);
+  const rotateY = useTransform(x, [-100, 100], [-10, 10]);
+
+  // Animation variants
+  const container = {
+    hidden: { opacity: 0 },
+    show: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.2
+      }
+    }
+  };
+
+  const item = {
+    hidden: { opacity: 0, y: 30 },
+    show: { opacity: 1, y: 0, transition: { duration: 0.6, ease: "easeOut" } }
+  };
+
+  const textReveal = {
+    hidden: { opacity: 0, x: -20 },
+    visible: { opacity: 1, x: 0 }
+  };
+
   return (
-    <div className="bg-black text-white font-sans">
-      {/* Title Section */}
-      <div className="max-w-6xl mx-auto py-12 px-4 text-center">
-        <h1 className="text-4xl md:text-5xl font-bold mb-12 tracking-tight">
-          {content.title}
-        </h1>
+    <div className="bg-black text-white font-sans overflow-hidden relative">
+      {/* Animated grid background */}
+      <div className="absolute inset-0 overflow-hidden opacity-10">
+        <div className="absolute inset-0 bg-[length:50px_50px] bg-[linear-gradient(to_right,gray_1px,transparent_1px),linear-gradient(to_bottom,gray_1px,transparent_1px)]" />
       </div>
 
+      {/* Title Section */}
+      <motion.div 
+        className="max-w-6xl mx-auto py-20 px-4 text-center relative z-10"
+        initial="hidden"
+        whileInView="show"
+        viewport={{ once: true, margin: "-100px" }}
+        variants={container}
+      >
+        <motion.h1 
+          className="text-4xl md:text-6xl font-bold mb-12 tracking-tighter"
+          variants={item}
+        >
+          {content.title.split('').map((letter, i) => (
+            <motion.span
+              key={i}
+              className="inline-block"
+              whileHover={{ y: -5 }}
+              transition={{ type: "spring", stiffness: 300 }}
+            >
+              {letter === ' ' ? '\u00A0' : letter}
+            </motion.span>
+          ))}
+        </motion.h1>
+      </motion.div>
+
       {/* Tagline Section */}
-      <div className="max-w-3xl mx-auto px-4 py-8 text-center">
-        <p className="text-2xl md:text-3xl font-light italic whitespace-pre-line leading-snug">
-          {content.tagline}
-        </p>
-      </div>
+      <motion.div 
+        className="max-w-3xl mx-auto px-4 py-12 text-center relative z-10"
+        initial={{ opacity: 0 }}
+        whileInView={{ opacity: 1 }}
+        viewport={{ once: true }}
+        transition={{ duration: 1 }}
+      >
+        <div className="border-t border-b border-white/20 py-8">
+          <motion.p 
+            className="text-2xl md:text-3xl font-light italic whitespace-pre-line leading-snug"
+            initial="hidden"
+            whileInView="visible"
+            viewport={{ once: true }}
+            variants={textReveal}
+            transition={{ staggerChildren: 0.05 }}
+          >
+            {content.tagline.split('').map((char, i) => (
+              <motion.span 
+                key={i} 
+                className="inline-block"
+                variants={textReveal}
+                whileHover={{ scale: 1.2, originY: 0.8 }}
+                transition={{ type: "spring", stiffness: 400 }}
+              >
+                {char}
+              </motion.span>
+            ))}
+          </motion.p>
+        </div>
+      </motion.div>
 
       {/* Mission Section with Left Image */}
-      <div className="max-w-6xl mx-auto px-4 py-8 grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
-        <div className="md:pr-8">
-          <img 
+      <div className="max-w-6xl mx-auto px-4 py-12 grid grid-cols-1 md:grid-cols-2 gap-16 items-center relative z-10">
+        <motion.div 
+          className="relative"
+          onMouseMove={e => {
+            const rect = e.currentTarget.getBoundingClientRect();
+            x.set(e.clientX - rect.left - rect.width / 2);
+            y.set(e.clientY - rect.top - rect.height / 2);
+          }}
+          onMouseLeave={() => {
+            x.set(0);
+            y.set(0);
+          }}
+          style={{ perspective: 1000 }}
+        >
+          <motion.img 
             src={content.images.left} 
             alt="Creative studio workspace" 
-            className="w-full h-auto max-h-[500px] object-cover rounded-lg shadow-lg"
+            className="w-full h-auto max-h-[500px] object-cover rounded-sm shadow-xl border border-white/20"
+            style={{ rotateX, rotateY }}
+            transition={{ type: "spring", stiffness: 300, damping: 10 }}
           />
-        </div>
-        <div className="text-xl md:text-2xl font-medium whitespace-pre-line">
-          {content.mission}
-        </div>
+          <div className="absolute inset-0 border border-white/10 pointer-events-none" />
+        </motion.div>
+        
+        <motion.div 
+          className="text-xl md:text-2xl font-medium whitespace-pre-line"
+          initial={{ opacity: 0 }}
+          whileInView={{ opacity: 1 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.8, delay: 0.4 }}
+        >
+          {content.mission.split(' ').map((word, i) => (
+            <motion.span 
+              key={i}
+              className="inline-block mr-2"
+              onMouseEnter={() => setHoveredIndex(i)}
+              onMouseLeave={() => setHoveredIndex(null)}
+              animate={{
+                opacity: hoveredIndex === null || hoveredIndex === i ? 1 : 0.3,
+                transition: { duration: 0.2 }
+              }}
+            >
+              {word}
+            </motion.span>
+          ))}
+        </motion.div>
       </div>
 
       {/* Values Section with Right Image */}
-      <div className="max-w-6xl mx-auto px-4 py-8 grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
-        <div className="text-xl md:text-2xl font-medium whitespace-pre-line order-2 md:order-1">
-          {content.values}
-        </div>
-        <div className="order-1 md:order-2 md:pl-8">
+      <div className="max-w-6xl mx-auto px-4 py-12 grid grid-cols-1 md:grid-cols-2 gap-16 items-center relative z-10">
+        <motion.div 
+          className="text-xl md:text-2xl font-medium whitespace-pre-line order-2 md:order-1"
+          initial={{ opacity: 0 }}
+          whileInView={{ opacity: 1 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.8 }}
+        >
+          <div className="space-y-6">
+            {content.values.split('. ').map((sentence, i) => (
+              <motion.p 
+                key={i}
+                className="relative pl-6"
+                initial={{ opacity: 0, x: -20 }}
+                whileInView={{ opacity: 1, x: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6, delay: i * 0.1 }}
+              >
+                <span className="absolute left-0 top-3 w-3 h-0.5 bg-white" />
+                {sentence}
+              </motion.p>
+            ))}
+          </div>
+        </motion.div>
+        
+        <motion.div 
+          className="order-1 md:order-2 relative"
+          initial={{ opacity: 0, scale: 0.9 }}
+          whileInView={{ opacity: 1, scale: 1 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.8, delay: 0.2 }}
+        >
           <img 
             src={content.images.right} 
             alt="Design team collaborating" 
-            className="w-full h-auto max-h-[500px] object-cover rounded-lg shadow-lg"
+            className="w-full h-auto max-h-[500px] object-cover rounded-sm shadow-xl border border-white/20"
           />
-        </div>
+          <div className="absolute inset-0 bg-white/5 pointer-events-none" />
+        </motion.div>
       </div>
+
+      {/* Interactive cursor follower */}
+      <motion.div 
+        className="fixed w-4 h-4 bg-white rounded-full pointer-events-none z-50"
+        style={{
+          x: useMotionValue(0),
+          y: useMotionValue(0)
+        }}
+        animate={{
+          scale: hoveredIndex !== null ? 2 : 1,
+          opacity: hoveredIndex !== null ? 0.7 : 0.4
+        }}
+        transition={{ type: "spring", stiffness: 500 }}
+      />
     </div>
   );
 };
diff --git a/src/pages/Services/Components/Section3.jsx b/src/pages/Services/Components/Section3.jsx
index fd50c20..d202e0c 100644
--- a/src/pages/Services/Components/Section3.jsx
+++ b/src/pages/Services/Components/Section3.jsx
@@ -1,6 +1,9 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
 
 const Section3 = () => {
+  const [activeStep, setActiveStep] = useState(null);
+
   const steps = [
     {
       title: "Design The Blueprint",
@@ -25,7 +28,45 @@ const Section3 = () => {
   ];
 
   return (
-    <div className="bg-black text-white py-16 px-4 sm:px-6">
+    <div className="bg-black text-white py-16 px-4 sm:px-6 relative overflow-hidden">
+      {/* Floating cookies when hovering */}
+      <AnimatePresence>
+        {activeStep !== null && (
+          <motion.div
+            className="absolute top-0 left-0 w-full h-full pointer-events-none z-0"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 0.5 }}
+            exit={{ opacity: 0 }}
+          >
+            {[...Array(5)].map((_, i) => (
+              <motion.img
+                key={i}
+                src="/imgs/cookie_white.png"
+                className="absolute w-10 h-10"
+                initial={{
+                  x: Math.random() * window.innerWidth,
+                  y: Math.random() * window.innerHeight,
+                  scale: 0,
+                  rotate: 0,
+                }}
+                animate={{
+                  x: [Math.random() * window.innerWidth, Math.random() * window.innerWidth],
+                  y: [Math.random() * window.innerHeight, Math.random() * window.innerHeight],
+                  scale: [0, 1, 0.8],
+                  rotate: [0, 360],
+                }}
+                transition={{
+                  duration: 15 + Math.random() * 10,
+                  repeat: Infinity,
+                  repeatType: "reverse",
+                  ease: "linear",
+                }}
+              />
+            ))}
+          </motion.div>
+        )}
+      </AnimatePresence>
+
       {/* Title */}
       <div className="text-center mb-16 max-w-3xl mx-auto">
         <h1 className="text-4xl md:text-5xl font-bold">Making Of A Masterpiece</h1>
@@ -36,7 +77,7 @@ const Section3 = () => {
 
       {/* Timeline */}
       <div className="relative max-w-6xl mx-auto">
-        {/* Vertical Line with Images - Hidden on mobile */}
+        {/* Vertical line with markers */}
         <div className="hidden md:block absolute left-1/2 transform -translate-x-1/2 h-full">
           <div className="w-0.5 h-full bg-gray-600 mx-auto"></div>
           {steps.map((_, index) => (
@@ -55,13 +96,15 @@ const Section3 = () => {
         </div>
 
         {/* Steps */}
-        <div className="space-y-12 md:space-y-24">
+        <div className="space-y-12 md:space-y-24 relative z-10">
           {steps.map((step, index) => (
             <div 
               key={index} 
               className={`relative flex flex-col ${index % 2 === 0 ? 'md:items-end' : 'md:items-start'}`}
+              onMouseEnter={() => setActiveStep(index)}
+              onMouseLeave={() => setActiveStep(null)}
             >
-              {/* Mobile Cookie Indicator */}
+              {/* Mobile Indicator */}
               <div className="md:hidden flex justify-center mb-4">
                 <img 
                   src="/imgs/cookie_white.png" 
@@ -69,10 +112,10 @@ const Section3 = () => {
                   className="w-8 h-8 bg-black p-1 rounded-full border-2"
                 />
               </div>
-              
+
               {/* Content Box */}
               <div className={`bg-black p-6 md:p-8 rounded-lg border border-white-800 md:w-[45%] 
-                ${index % 2 === 0 ? 'md:mr-4' : 'md:ml-4'}`}>
+                ${index % 2 === 0 ? 'md:mr-4' : 'md:ml-4'} relative z-10`}>
                 <div className="flex items-center mb-4">
                   <img 
                     src="/imgs/cookie_white.png" 
@@ -93,4 +136,4 @@ const Section3 = () => {
   );
 };
 
-export default Section3;
\ No newline at end of file
+export default Section3;
diff --git a/src/pages/Services/Components/Section4.jsx b/src/pages/Services/Components/Section4.jsx
index d0d0e57..17f6c9a 100644
--- a/src/pages/Services/Components/Section4.jsx
+++ b/src/pages/Services/Components/Section4.jsx
@@ -21,9 +21,9 @@ const Section4 = () => {
     {
       title: "Digital Marketing",
       description: [
-        "Crafting Intuitive Interfaces",
-        "That Delight Users And",
-        "Drive Engagement."
+        "Creating Effective Strategies",
+        "To Expand Your Online Presence",
+        "And Boost Conversions."
       ]
     },
     {
@@ -37,9 +37,9 @@ const Section4 = () => {
     {
       title: "Logo Design",
       description: [
-        "Crafting Intuitive Interfaces",
-        "That Delight Users And",
-        "Drive Engagement."
+        "Designing Unique Visual Identities",
+        "That Capture Your Brand's",
+        "Essence And Story."
       ]
     },
   ];
@@ -48,30 +48,46 @@ const Section4 = () => {
     <div className="bg-white py-16 px-4 sm:px-6 lg:px-8">
       <div className="max-w-7xl mx-auto text-center">
         {/* Header */}
-        <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
-          What's On The Menu ?
+        <h1 className="text-4xl md:text-5xl font-extrabold text-black mb-4">
+          What's On The Menu?
         </h1>
         <p className="text-xl text-gray-600 mb-12 max-w-3xl mx-auto">
           A Full-Stack Of Creative Services Cooked With Care.
         </p>
 
         {/* Services Grid */}
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8">
           {services.map((service, index) => (
             <div 
               key={index} 
-              className="bg-gray-50 p-8 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300"
+              className="relative bg-black text-white p-8 rounded-3xl shadow-lg transition-all duration-300 hover:scale-105 hover:shadow-2xl group cursor-pointer overflow-hidden"
             >
-              <h2 className="text-2xl font-bold text-gray-900 mb-6">
+              {/* Background White Circle Accent */}
+              <div className="absolute -top-10 -right-10 w-40 h-40 bg-white rounded-full opacity-10 group-hover:opacity-30 transition-all duration-500"></div>
+              
+              <h2 className="text-2xl font-bold mb-4 relative z-10">
                 {service.title}
               </h2>
-              <div className="space-y-2 text-gray-700">
+              <div className="space-y-2 relative z-10">
                 {service.description.map((line, i) => (
-                  <p key={i} className="text-lg leading-relaxed">
+                  <p key={i} className="text-base leading-relaxed text-gray-300">
                     {line}
                   </p>
                 ))}
               </div>
+
+              {/* Arrow Icon on Hover */}
+              <div className="absolute bottom-4 right-4 opacity-0 group-hover:opacity-100 transition duration-500">
+                <svg
+                  className="w-6 h-6 text-white"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
+                </svg>
+              </div>
             </div>
           ))}
         </div>
@@ -80,4 +96,4 @@ const Section4 = () => {
   );
 };
 
-export default Section4;
\ No newline at end of file
+export default Section4;