diff --git a/app/components/About.tsx b/app/components/About.tsx
index 1044fd3..93eee7d 100644
--- a/app/components/About.tsx
+++ b/app/components/About.tsx
@@ -162,7 +162,7 @@ const About = () => {
                       scale: 1.02,
                       transition: { duration: 0.4, ease: "easeOut" },
                     }}
-                    className={`p-5 rounded-xl border-2 transition-all duration-500 ease-out ${
+                    className={`p-5 rounded-xl border-2 transition-[background-color,border-color,box-shadow] duration-500 ease-out ${
                       idx === 0
                         ? "bg-gradient-to-br from-liquid-sky/10 to-liquid-mint/10 border-liquid-sky/30 hover:border-liquid-sky/50 hover:from-liquid-sky/15 hover:to-liquid-mint/15"
                         : idx === 1
@@ -221,7 +221,7 @@ const About = () => {
                       scale: 1.02,
                       transition: { duration: 0.4, ease: "easeOut" },
                     }}
-                    className={`flex items-center gap-3 p-4 rounded-xl border-2 transition-all duration-500 ease-out ${
+                  className={`flex items-center gap-3 p-4 rounded-xl border-2 transition-[background-color,border-color,box-shadow] duration-500 ease-out ${
                       idx === 0
                         ? "bg-gradient-to-r from-liquid-mint/10 to-liquid-sky/10 border-liquid-mint/30 hover:border-liquid-mint/50 hover:from-liquid-mint/15 hover:to-liquid-sky/15"
                         : idx === 1
diff --git a/app/components/Contact.tsx b/app/components/Contact.tsx
index 7dda632..6fe4861 100644
--- a/app/components/Contact.tsx
+++ b/app/components/Contact.tsx
@@ -228,7 +228,7 @@ const Contact = () => {
                     x: 8,
                     transition: { duration: 0.4, ease: "easeOut" },
                   }}
-                  className="flex items-center space-x-4 p-4 rounded-2xl glass-card hover:bg-white/80 transition-all duration-500 ease-out group border-transparent hover:border-white/70"
+                  className="flex items-center space-x-4 p-4 rounded-2xl glass-card hover:bg-white/80 transition-[background-color,border-color,box-shadow] duration-500 ease-out group border-transparent hover:border-white/70"
                 >
                   <div className="p-3 bg-white rounded-xl shadow-sm group-hover:shadow-md transition-all">
                     <info.icon className="w-6 h-6 text-stone-700" />
diff --git a/app/components/Projects.tsx b/app/components/Projects.tsx
index 3a4baa5..1a7f46e 100644
--- a/app/components/Projects.tsx
+++ b/app/components/Projects.tsx
@@ -102,7 +102,7 @@ const Projects = () => {
               key={project.id}
               variants={fadeInUp}
               whileHover={{ y: -8 }}
-              className="group flex flex-col bg-white/40 backdrop-blur-xl rounded-2xl overflow-hidden border border-white/60 shadow-[0_4px_20px_rgba(0,0,0,0.02)] hover:shadow-[0_20px_40px_rgba(0,0,0,0.06)] transition-all duration-500"
+              className="group flex flex-col bg-white/40 backdrop-blur-xl rounded-2xl overflow-hidden border border-white/60 shadow-[0_4px_20px_rgba(0,0,0,0.02)] hover:shadow-[0_20px_40px_rgba(0,0,0,0.06)] transition-[box-shadow,border-color,background-color] duration-500"
             >
               {/* Project Cover / Image Area */}
               <div className="relative aspect-[16/10] overflow-hidden bg-stone-100">