diff --git a/app/contact/page.tsx b/app/contact/page.tsx
index 3b5e97d..2bb68eb 100644
--- a/app/contact/page.tsx
+++ b/app/contact/page.tsx
@@ -160,7 +160,13 @@ export default function ContactPage() {
             {contactInfo.map((info) => (
               <StaggerItem key={info.label}>
                 <motion.div
-                  whileHover={{ y: -5, scale: 1.02 }}
+                  initial="rest"
+                  whileHover="hover"
+                  animate="rest"
+                  variants={{
+                    rest: { y: 0, scale: 1 },
+                    hover: { y: -5, scale: 1.02 }
+                  }}
                   className="group bg-white dark:bg-neutral-800 p-6 rounded-2xl shadow-xl hover:shadow-2xl transition-all border border-neutral-100 dark:border-neutral-700"
                 >
                   {info.href ? (
@@ -170,7 +176,10 @@ export default function ContactPage() {
                     >
                       <div className="flex items-start gap-4">
                         <motion.div
-                          whileHover={{ rotate: 360 }}
+                          variants={{
+                            rest: { rotate: 0 },
+                            hover: { rotate: 360 }
+                          }}
                           transition={{ duration: 0.5 }}
                           className="w-12 h-12 rounded-xl bg-[hsl(0,100%,40%)]/10 flex items-center justify-center group-hover:bg-[hsl(0,100%,40%)] transition-colors"
                         >
@@ -195,7 +204,10 @@ export default function ContactPage() {
                   ) : (
                     <div className="flex items-start gap-4">
                       <motion.div
-                        whileHover={{ rotate: 360 }}
+                        variants={{
+                          rest: { rotate: 0 },
+                          hover: { rotate: 360 }
+                        }}
                         transition={{ duration: 0.5 }}
                         className="w-12 h-12 rounded-xl bg-[hsl(0,100%,40%)]/10 flex items-center justify-center"
                       >
@@ -417,12 +429,21 @@ export default function ContactPage() {
               <div className="space-y-8">
                 {/* Address Card */}
                 <motion.div
-                  whileHover={{ y: -5 }}
+                  initial="rest"
+                  whileHover="hover"
+                  animate="rest"
+                  variants={{
+                    rest: { y: 0 },
+                    hover: { y: -5 }
+                  }}
                   className="bg-white dark:bg-neutral-900 p-8 rounded-3xl shadow-xl border border-neutral-100 dark:border-neutral-800"
                 >
                   <div className="flex items-start gap-4 mb-6">
                     <motion.div
-                      whileHover={{ rotate: 360 }}
+                      variants={{
+                        rest: { rotate: 0 },
+                        hover: { rotate: 360 }
+                      }}
                       transition={{ duration: 0.5 }}
                       className="w-14 h-14 rounded-xl bg-[hsl(0,100%,40%)]/10 flex items-center justify-center"
                     >
@@ -448,7 +469,10 @@ export default function ContactPage() {
                     href="https://maps.google.com/?q=12424+East+Weaver+Place,+Centennial,+CO+80111"
                     target="_blank"
                     rel="noopener noreferrer"
-                    whileHover={{ x: 5 }}
+                    variants={{
+                      rest: { x: 0 },
+                      hover: { x: 5 }
+                    }}
                     className="inline-flex items-center gap-2 text-[hsl(0,100%,40%)] font-medium hover:underline"
                   >
                     Get Directions
diff --git a/app/culture/page.tsx b/app/culture/page.tsx
index 241419f..64f3b94 100644
--- a/app/culture/page.tsx
+++ b/app/culture/page.tsx
@@ -196,11 +196,20 @@ export default function CulturePage() {
             {/* Mission */}
             <FadeIn>
               <motion.div
-                whileHover={{ y: -5 }}
+                initial="rest"
+                whileHover="hover"
+                animate="rest"
+                variants={{
+                  rest: { y: 0 },
+                  hover: { y: -5 }
+                }}
                 className="relative bg-gradient-to-br from-[hsl(0,100%,97%)] to-[hsl(0,50%,95%)] dark:from-[hsl(0,100%,10%)] dark:to-neutral-900 p-10 rounded-3xl border border-[hsl(0,100%,90%)] dark:border-[hsl(0,100%,20%)] h-full"
               >
                 <motion.div
-                  whileHover={{ rotate: 360, scale: 1.1 }}
+                  variants={{
+                    rest: { rotate: 0, scale: 1 },
+                    hover: { rotate: 360, scale: 1.1 }
+                  }}
                   transition={{ duration: 0.5 }}
                   className="w-16 h-16 rounded-2xl bg-gradient-to-br from-[hsl(0,100%,45%)] to-[hsl(0,100%,35%)] flex items-center justify-center text-white mb-6"
                 >
@@ -227,11 +236,20 @@ export default function CulturePage() {
             {/* Purpose */}
             <FadeIn delay={0.2}>
               <motion.div
-                whileHover={{ y: -5 }}
+                initial="rest"
+                whileHover="hover"
+                animate="rest"
+                variants={{
+                  rest: { y: 0 },
+                  hover: { y: -5 }
+                }}
                 className="relative bg-gradient-to-br from-amber-50 to-orange-50 dark:from-amber-950/30 dark:to-orange-950/20 p-10 rounded-3xl border border-amber-100 dark:border-amber-900/50 h-full"
               >
                 <motion.div
-                  whileHover={{ rotate: 360, scale: 1.1 }}
+                  variants={{
+                    rest: { rotate: 0, scale: 1 },
+                    hover: { rotate: 360, scale: 1.1 }
+                  }}
                   transition={{ duration: 0.5 }}
                   className="w-16 h-16 rounded-2xl bg-gradient-to-br from-amber-500 to-orange-500 flex items-center justify-center text-white mb-6"
                 >
@@ -313,7 +331,13 @@ export default function CulturePage() {
             {coreValues.map((value) => (
               <StaggerItem key={value.title}>
                 <motion.div
-                  whileHover={{ y: -10 }}
+                  initial="rest"
+                  whileHover="hover"
+                  animate="rest"
+                  variants={{
+                    rest: { y: 0 },
+                    hover: { y: -10 }
+                  }}
                   className={`group relative ${value.bgColor} p-8 rounded-3xl h-full border border-neutral-100 dark:border-neutral-800 overflow-hidden`}
                 >
                   {/* Gradient overlay on hover */}
@@ -322,7 +346,10 @@ export default function CulturePage() {
                   />
 
                   <motion.div
-                    whileHover={{ rotate: 360, scale: 1.1 }}
+                    variants={{
+                      rest: { rotate: 0, scale: 1 },
+                      hover: { rotate: 360, scale: 1.1 }
+                    }}
                     transition={{ duration: 0.5 }}
                     className={`relative w-14 h-14 rounded-2xl bg-gradient-to-br ${value.color} flex items-center justify-center text-white mb-6`}
                   >
@@ -338,8 +365,10 @@ export default function CulturePage() {
 
                   <motion.div
                     className={`absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r ${value.color} origin-left`}
-                    initial={{ scaleX: 0 }}
-                    whileHover={{ scaleX: 1 }}
+                    variants={{
+                      rest: { scaleX: 0 },
+                      hover: { scaleX: 1 }
+                    }}
                     transition={{ duration: 0.3 }}
                   />
                 </motion.div>
@@ -464,11 +493,19 @@ export default function CulturePage() {
                       whileInView={{ opacity: 1, x: 0 }}
                       viewport={{ once: true }}
                       transition={{ delay: index * 0.1 }}
-                      whileHover={{ x: 10 }}
+                      whileHover="hover"
+                      animate="rest"
+                      variants={{
+                        rest: { x: 0 },
+                        hover: { x: 10 }
+                      }}
                       className="flex items-center gap-4 group cursor-default"
                     >
                       <motion.div
-                        whileHover={{ scale: 1.2, rotate: 360 }}
+                        variants={{
+                          rest: { scale: 1, rotate: 0 },
+                          hover: { scale: 1.2, rotate: 360 }
+                        }}
                         transition={{ duration: 0.3 }}
                         className="w-8 h-8 rounded-full bg-[hsl(0,100%,40%)]/20 flex items-center justify-center group-hover:bg-[hsl(0,100%,40%)] transition-colors"
                       >
diff --git a/app/page.tsx b/app/page.tsx
index bcb0268..e4ea743 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -424,11 +424,20 @@ export default function Home() {
             {values.map((value) => (
               <StaggerItem key={value.title}>
                 <motion.div
-                  whileHover={{ y: -10, scale: 1.02 }}
+                  initial="rest"
+                  whileHover="hover"
+                  animate="rest"
+                  variants={{
+                    rest: { y: 0, scale: 1 },
+                    hover: { y: -10, scale: 1.02 }
+                  }}
                   className="group relative bg-white dark:bg-neutral-900 p-8 rounded-3xl shadow-lg shadow-black/5 hover:shadow-xl transition-all duration-500 border border-neutral-100 dark:border-neutral-800"
                 >
                   <motion.div
-                    whileHover={{ rotate: 360, scale: 1.1 }}
+                    variants={{
+                      rest: { rotate: 0, scale: 1 },
+                      hover: { rotate: 360, scale: 1.1 }
+                    }}
                     transition={{ duration: 0.5 }}
                     className="w-14 h-14 rounded-2xl bg-gradient-to-br from-[hsl(0,100%,45%)] to-[hsl(0,100%,35%)] flex items-center justify-center text-white mb-6"
                   >
@@ -442,8 +451,10 @@ export default function Home() {
                   </p>
                   <motion.div
                     className="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-[hsl(0,100%,45%)] to-[hsl(0,100%,35%)] rounded-b-3xl origin-left"
-                    initial={{ scaleX: 0 }}
-                    whileHover={{ scaleX: 1 }}
+                    variants={{
+                      rest: { scaleX: 0 },
+                      hover: { scaleX: 1 }
+                    }}
                     transition={{ duration: 0.3 }}
                   />
                 </motion.div>
@@ -485,7 +496,13 @@ export default function Home() {
             {productCategories.map((category) => (
               <StaggerItem key={category.title}>
                 <motion.div
-                  whileHover={{ y: -10 }}
+                  initial="rest"
+                  whileHover="hover"
+                  animate="rest"
+                  variants={{
+                    rest: { y: 0 },
+                    hover: { y: -10 }
+                  }}
                   className="group relative bg-neutral-50 dark:bg-neutral-800 p-6 rounded-3xl cursor-pointer overflow-hidden"
                 >
                   {/* Gradient overlay on hover */}
@@ -494,7 +511,10 @@ export default function Home() {
                   />
 
                   <motion.div
-                    whileHover={{ scale: 1.1, rotate: 5 }}
+                    variants={{
+                      rest: { scale: 1, rotate: 0 },
+                      hover: { scale: 1.1, rotate: 5 }
+                    }}
                     className={`relative w-14 h-14 rounded-2xl bg-gradient-to-br ${category.color} flex items-center justify-center text-white mb-5`}
                   >
                     <category.icon size={24} />
@@ -508,8 +528,10 @@ export default function Home() {
                   </p>
 
                   <motion.div
-                    initial={{ x: -10, opacity: 0 }}
-                    whileHover={{ x: 0, opacity: 1 }}
+                    variants={{
+                      rest: { x: -10, opacity: 0 },
+                      hover: { x: 0, opacity: 1 }
+                    }}
                     className="absolute bottom-6 right-6"
                   >
                     <ArrowRightIcon
diff --git a/app/products/page.tsx b/app/products/page.tsx
index c1041cf..69f24c9 100644
--- a/app/products/page.tsx
+++ b/app/products/page.tsx
@@ -319,11 +319,19 @@ export default function ProductsPage() {
                           whileInView={{ opacity: 1, x: 0 }}
                           viewport={{ once: true }}
                           transition={{ delay: index * 0.05 }}
-                          whileHover={{ x: 10, scale: 1.02 }}
+                          whileHover="hover"
+                          animate="rest"
+                          variants={{
+                            rest: { x: 0, scale: 1 },
+                            hover: { x: 10, scale: 1.02 }
+                          }}
                           className="group flex items-center gap-4 p-4 bg-white dark:bg-neutral-800 rounded-xl shadow-sm hover:shadow-md transition-all cursor-default"
                         >
                           <motion.div
-                            whileHover={{ scale: 1.2, rotate: 360 }}
+                            variants={{
+                              rest: { scale: 1, rotate: 0 },
+                              hover: { scale: 1.2, rotate: 360 }
+                            }}
                             transition={{ duration: 0.3 }}
                             className={`w-10 h-10 rounded-lg bg-gradient-to-br ${category.color} flex items-center justify-center flex-shrink-0`}
                           >
@@ -333,8 +341,10 @@ export default function ProductsPage() {
                             {product}
                           </span>
                           <motion.div
-                            initial={{ opacity: 0, x: -10 }}
-                            whileHover={{ opacity: 1, x: 0 }}
+                            variants={{
+                              rest: { opacity: 0, x: -10 },
+                              hover: { opacity: 1, x: 0 }
+                            }}
                             className="ml-auto"
                           >
                             <ArrowRightIcon
@@ -405,11 +415,20 @@ export default function ProductsPage() {
             ].map((feature) => (
               <StaggerItem key={feature.title}>
                 <motion.div
-                  whileHover={{ y: -10 }}
+                  initial="rest"
+                  whileHover="hover"
+                  animate="rest"
+                  variants={{
+                    rest: { y: 0 },
+                    hover: { y: -10 }
+                  }}
                   className="group relative bg-white/5 backdrop-blur-sm p-8 rounded-3xl border border-white/10 hover:border-[hsl(0,100%,40%)]/50 transition-all h-full"
                 >
                   <motion.span
-                    whileHover={{ scale: 1.1 }}
+                    variants={{
+                      rest: { scale: 1 },
+                      hover: { scale: 1.1 }
+                    }}
                     className="inline-block text-4xl font-bold text-[hsl(0,100%,40%)] mb-4"
                   >
                     {feature.icon}
@@ -498,11 +517,19 @@ export default function ProductsPage() {
                       whileInView={{ opacity: 1, scale: 1 }}
                       viewport={{ once: true }}
                       transition={{ delay: i * 0.1 }}
-                      whileHover={{ scale: 1.05, y: -5 }}
+                      whileHover="hover"
+                      animate="rest"
+                      variants={{
+                        rest: { scale: 1, y: 0 },
+                        hover: { scale: 1.05, y: -5 }
+                      }}
                       className="bg-white/10 backdrop-blur-sm p-6 rounded-2xl text-center border border-white/20 hover:bg-white/20 transition-colors"
                     >
                       <motion.div
-                        whileHover={{ rotate: 360 }}
+                        variants={{
+                          rest: { rotate: 0 },
+                          hover: { rotate: 360 }
+                        }}
                         transition={{ duration: 0.5 }}
                         className="w-12 h-12 rounded-full bg-white/20 flex items-center justify-center mx-auto mb-3"
                       >
diff --git a/app/state-ordinances/page.tsx b/app/state-ordinances/page.tsx
index c68bbf8..361442d 100644
--- a/app/state-ordinances/page.tsx
+++ b/app/state-ordinances/page.tsx
@@ -340,7 +340,13 @@ export default function StateOrdinancesPage() {
             {stateOrdinances.map((ordinance) => (
               <StaggerItem key={ordinance.state}>
                 <motion.div
-                  whileHover={{ scale: 1.01 }}
+                  initial="rest"
+                  whileHover="hover"
+                  animate="rest"
+                  variants={{
+                    rest: { scale: 1 },
+                    hover: { scale: 1.01 }
+                  }}
                   className="bg-white dark:bg-neutral-900 rounded-3xl shadow-lg border border-neutral-100 dark:border-neutral-800 overflow-hidden"
                 >
                   {/* Header */}
@@ -348,7 +354,10 @@ export default function StateOrdinancesPage() {
                     <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                       <div className="flex items-center gap-4">
                         <motion.span
-                          whileHover={{ scale: 1.2, rotate: 10 }}
+                          variants={{
+                            rest: { scale: 1, rotate: 0 },
+                            hover: { scale: 1.2, rotate: 10 }
+                          }}
                           className="text-4xl"
                         >
                           {ordinance.flag}
@@ -363,7 +372,10 @@ export default function StateOrdinancesPage() {
                         </div>
                       </div>
                       <motion.span
-                        whileHover={{ scale: 1.05 }}
+                        variants={{
+                          rest: { scale: 1 },
+                          hover: { scale: 1.05 }
+                        }}
                         className="inline-flex items-center gap-2 px-4 py-2 bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-400 rounded-full text-sm font-medium w-fit"
                       >
                         <span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
@@ -493,7 +505,16 @@ export default function StateOrdinancesPage() {
           <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
             {complianceSteps.map((item, index) => (
               <FadeIn key={item.step} delay={index * 0.1}>
-                <motion.div whileHover={{ y: -10 }} className="group relative">
+                <motion.div
+                  initial="rest"
+                  whileHover="hover"
+                  animate="rest"
+                  variants={{
+                    rest: { y: 0 },
+                    hover: { y: -10 }
+                  }}
+                  className="group relative"
+                >
                   {/* Connector line */}
                   {index < complianceSteps.length - 1 && (
                     <div className="hidden lg:block absolute top-10 left-full w-full h-0.5 bg-gradient-to-r from-[hsl(0,100%,40%)] to-transparent z-0" />
@@ -501,7 +522,10 @@ export default function StateOrdinancesPage() {
 
                   <div className="relative bg-white/5 backdrop-blur-sm p-8 rounded-3xl border border-white/10 hover:border-[hsl(0,100%,40%)]/50 transition-colors h-full">
                     <motion.span
-                      whileHover={{ scale: 1.1 }}
+                      variants={{
+                        rest: { scale: 1 },
+                        hover: { scale: 1.1 }
+                      }}
                       className="inline-block text-5xl font-bold text-[hsl(0,100%,40%)] mb-4"
                     >
                       {item.step}
@@ -579,11 +603,19 @@ export default function StateOrdinancesPage() {
                     whileInView={{ opacity: 1, scale: 1 }}
                     viewport={{ once: true }}
                     transition={{ delay: i * 0.1 }}
-                    whileHover={{ scale: 1.05, y: -5 }}
+                    whileHover="hover"
+                    animate="rest"
+                    variants={{
+                      rest: { scale: 1, y: 0 },
+                      hover: { scale: 1.05, y: -5 }
+                    }}
                     className="bg-white/10 backdrop-blur-sm p-6 rounded-2xl border border-white/20 text-center hover:bg-white/20 transition-colors"
                   >
                     <motion.div
-                      whileHover={{ rotate: 360 }}
+                      variants={{
+                        rest: { rotate: 0 },
+                        hover: { rotate: 360 }
+                      }}
                       transition={{ duration: 0.5 }}
                       className="w-12 h-12 rounded-full bg-white/20 flex items-center justify-center mx-auto mb-3"
                     >
diff --git a/app/sustainability/page.tsx b/app/sustainability/page.tsx
index 2ce4d64..7318468 100644
--- a/app/sustainability/page.tsx
+++ b/app/sustainability/page.tsx
@@ -280,12 +280,21 @@ export default function SustainabilityPage() {
             {definitions.map((def) => (
               <StaggerItem key={def.term}>
                 <motion.div
-                  whileHover={{ y: -10, scale: 1.02 }}
+                  initial="rest"
+                  whileHover="hover"
+                  animate="rest"
+                  variants={{
+                    rest: { y: 0, scale: 1 },
+                    hover: { y: -10, scale: 1.02 }
+                  }}
                   className="group relative bg-gradient-to-br from-emerald-50 to-teal-50 dark:from-emerald-950/30 dark:to-teal-950/30 p-8 rounded-3xl border border-emerald-100 dark:border-emerald-900/50 h-full"
                 >
                   <motion.span
                     className="text-5xl block mb-6"
-                    whileHover={{ scale: 1.2, rotate: 10 }}
+                    variants={{
+                      rest: { scale: 1, rotate: 0 },
+                      hover: { scale: 1.2, rotate: 10 }
+                    }}
                     transition={{ type: "spring", stiffness: 300 }}
                   >
                     {def.icon}
@@ -304,12 +313,21 @@ export default function SustainabilityPage() {
           {/* Additional context */}
           <FadeIn delay={0.4}>
             <motion.div
-              whileHover={{ scale: 1.01 }}
+              initial="rest"
+              whileHover="hover"
+              animate="rest"
+              variants={{
+                rest: { scale: 1 },
+                hover: { scale: 1.01 }
+              }}
               className="mt-12 bg-neutral-50 dark:bg-neutral-800 p-8 md:p-10 rounded-3xl border border-neutral-200 dark:border-neutral-700"
             >
               <div className="flex items-start gap-4">
                 <motion.div
-                  whileHover={{ rotate: 360 }}
+                  variants={{
+                    rest: { rotate: 0 },
+                    hover: { rotate: 360 }
+                  }}
                   transition={{ duration: 0.5 }}
                   className="w-12 h-12 rounded-xl bg-emerald-100 dark:bg-emerald-900/50 flex items-center justify-center flex-shrink-0"
                 >
@@ -362,11 +380,20 @@ export default function SustainabilityPage() {
                 {benefits.map((benefit, index) => (
                   <FadeIn key={benefit.title} delay={0.2 + index * 0.1}>
                     <motion.div
-                      whileHover={{ x: 10 }}
+                      initial="rest"
+                      whileHover="hover"
+                      animate="rest"
+                      variants={{
+                        rest: { x: 0 },
+                        hover: { x: 10 }
+                      }}
                       className="group flex items-start gap-4"
                     >
                       <motion.div
-                        whileHover={{ scale: 1.1, rotate: 360 }}
+                        variants={{
+                          rest: { scale: 1, rotate: 0 },
+                          hover: { scale: 1.1, rotate: 360 }
+                        }}
                         transition={{ duration: 0.4 }}
                         className="w-12 h-12 rounded-xl bg-emerald-100 dark:bg-emerald-900/50 flex items-center justify-center flex-shrink-0 group-hover:bg-emerald-500 transition-colors"
                       >
@@ -490,11 +517,19 @@ export default function SustainabilityPage() {
                     whileInView={{ opacity: 1, y: 0 }}
                     viewport={{ once: true }}
                     transition={{ delay: index * 0.05 }}
-                    whileHover={{ scale: 1.05, y: -5 }}
+                    whileHover="hover"
+                    animate="rest"
+                    variants={{
+                      rest: { scale: 1, y: 0 },
+                      hover: { scale: 1.05, y: -5 }
+                    }}
                     className="group flex items-center gap-3 p-4 bg-white dark:bg-neutral-800 rounded-xl shadow-sm hover:shadow-lg transition-all cursor-default"
                   >
                     <motion.div
-                      whileHover={{ rotate: 360 }}
+                      variants={{
+                        rest: { rotate: 0 },
+                        hover: { rotate: 360 }
+                      }}
                       transition={{ duration: 0.4 }}
                       className="w-10 h-10 rounded-lg bg-emerald-100 dark:bg-emerald-900/50 flex items-center justify-center flex-shrink-0 group-hover:bg-emerald-500 transition-colors"
                     >
diff --git a/app/what-we-do/page.tsx b/app/what-we-do/page.tsx
index 5541125..06c4620 100644
--- a/app/what-we-do/page.tsx
+++ b/app/what-we-do/page.tsx
@@ -361,11 +361,20 @@ export default function WhatWeDoPage() {
             {distributorServices.map((service) => (
               <StaggerItem key={service.title}>
                 <motion.div
-                  whileHover={{ y: -10, scale: 1.02 }}
+                  initial="rest"
+                  whileHover="hover"
+                  animate="rest"
+                  variants={{
+                    rest: { y: 0, scale: 1 },
+                    hover: { y: -10, scale: 1.02 }
+                  }}
                   className="group relative bg-white dark:bg-neutral-900 p-8 rounded-3xl shadow-lg shadow-black/5 hover:shadow-xl transition-all duration-500 h-full border border-neutral-100 dark:border-neutral-800"
                 >
                   <motion.div
-                    whileHover={{ rotate: 360, scale: 1.1 }}
+                    variants={{
+                      rest: { rotate: 0, scale: 1 },
+                      hover: { rotate: 360, scale: 1.1 }
+                    }}
                     transition={{ duration: 0.5 }}
                     className="w-14 h-14 rounded-2xl bg-gradient-to-br from-[hsl(0,100%,45%)] to-[hsl(0,100%,35%)] flex items-center justify-center text-white mb-6"
                   >
@@ -379,8 +388,10 @@ export default function WhatWeDoPage() {
                   </p>
                   <motion.div
                     className="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-[hsl(0,100%,45%)] to-[hsl(0,100%,35%)] rounded-b-3xl origin-left"
-                    initial={{ scaleX: 0 }}
-                    whileHover={{ scaleX: 1 }}
+                    variants={{
+                      rest: { scaleX: 0 },
+                      hover: { scaleX: 1 }
+                    }}
                     transition={{ duration: 0.3 }}
                   />
                 </motion.div>
@@ -391,7 +402,13 @@ export default function WhatWeDoPage() {
           {/* Additional info */}
           <FadeIn delay={0.4}>
             <motion.div
-              whileHover={{ scale: 1.01 }}
+              initial="rest"
+              whileHover="hover"
+              animate="rest"
+              variants={{
+                rest: { scale: 1 },
+                hover: { scale: 1.01 }
+              }}
               className="mt-12 bg-gradient-to-br from-neutral-900 to-neutral-800 dark:from-neutral-800 dark:to-neutral-900 p-8 md:p-12 rounded-3xl text-white"
             >
               <div className="grid md:grid-cols-2 gap-8 items-center">
@@ -408,7 +425,10 @@ export default function WhatWeDoPage() {
                 </div>
                 <div className="flex justify-center md:justify-end">
                   <motion.div
-                    whileHover={{ rotate: 5, scale: 1.05 }}
+                    variants={{
+                      rest: { rotate: 0, scale: 1 },
+                      hover: { rotate: 5, scale: 1.05 }
+                    }}
                     className="relative"
                   >
                     <div className="absolute inset-0 bg-[hsl(0,100%,40%)] rounded-2xl blur-xl opacity-30" />
@@ -452,11 +472,19 @@ export default function WhatWeDoPage() {
                       whileInView={{ opacity: 1, x: 0 }}
                       viewport={{ once: true }}
                       transition={{ delay: index * 0.1 }}
-                      whileHover={{ x: 10 }}
+                      whileHover="hover"
+                      animate="rest"
+                      variants={{
+                        rest: { x: 0 },
+                        hover: { x: 10 }
+                      }}
                       className="flex items-center gap-4 group cursor-default"
                     >
                       <motion.div
-                        whileHover={{ scale: 1.2, rotate: 360 }}
+                        variants={{
+                          rest: { scale: 1, rotate: 0 },
+                          hover: { scale: 1.2, rotate: 360 }
+                        }}
                         transition={{ duration: 0.3 }}
                         className="w-8 h-8 rounded-full bg-[hsl(0,100%,40%)]/10 flex items-center justify-center group-hover:bg-[hsl(0,100%,40%)] transition-colors"
                       >
@@ -588,7 +616,13 @@ export default function WhatWeDoPage() {
             {processSteps.map((item, index) => (
               <FadeIn key={item.step} delay={index * 0.1}>
                 <motion.div
-                  whileHover={{ y: -10 }}
+                  initial="rest"
+                  whileHover="hover"
+                  animate="rest"
+                  variants={{
+                    rest: { y: 0 },
+                    hover: { y: -10 }
+                  }}
                   className="group relative"
                 >
                   {/* Connector line */}
@@ -598,7 +632,10 @@ export default function WhatWeDoPage() {
 
                   <div className="relative bg-white/5 backdrop-blur-sm p-8 rounded-3xl border border-white/10 hover:border-[hsl(0,100%,40%)]/50 transition-colors">
                     <motion.span
-                      whileHover={{ scale: 1.1 }}
+                      variants={{
+                        rest: { scale: 1 },
+                        hover: { scale: 1.1 }
+                      }}
                       className="inline-block text-5xl font-bold text-[hsl(0,100%,40%)] mb-4"
                     >
                       {item.step}