diff --git a/src/components/PropertyDetailClient.tsx b/src/components/PropertyDetailClient.tsx
index 3d58a13..96a7548 100644
--- a/src/components/PropertyDetailClient.tsx
+++ b/src/components/PropertyDetailClient.tsx
@@ -21,6 +21,32 @@ import axios from "axios";
 import { useCompare } from "@/context/CompareContext";
 
 import dynamic from 'next/dynamic';
+import { motion } from "framer-motion";
+
+const AnimateSection = ({ children, className, id, direction = "left" }: { children: React.ReactNode, className?: string, id?: string, direction?: "left" | "right" | "up" | "down" }) => {
+    const variants = {
+        hidden: {
+            opacity: 0,
+            x: direction === "left" ? -50 : direction === "right" ? 50 : 0,
+            y: direction === "up" ? 50 : direction === "down" ? -50 : 0
+        },
+        visible: { opacity: 1, x: 0, y: 0 }
+    };
+
+    return (
+        <motion.div
+            id={id}
+            className={className}
+            initial="hidden"
+            whileInView="visible"
+            viewport={{ once: true, margin: "-50px" }}
+            transition={{ duration: 0.6, ease: "easeOut" }}
+            variants={variants}
+        >
+            {children}
+        </motion.div>
+    );
+};
 
 
 
@@ -592,7 +618,11 @@ export default function PropertyDetailClient({ property }: { property: Property
 
                     {/* Image Gallery */}
 
-                    <PropertyGallery images={property.images} title={property.title} />
+                    <AnimateSection direction="up">
+
+                        <PropertyGallery images={property.images} title={property.title} />
+
+                    </AnimateSection>
 
                     <div className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-sm border border-gray-200 dark:border-gray-800">
 
@@ -602,7 +632,7 @@ export default function PropertyDetailClient({ property }: { property: Property
 
                                 <div className="flex items-center gap-3 mb-3">
 
-                                    <h1 className="text-3xl md:text-4xl font-bold text-foreground">{property.title}</h1>
+                                    <h1 className="text-2xl md:text-3xl font-bold text-foreground">{property.title}</h1>
 
                                     <span className="px-4 py-1.5 bg-gradient-to-r from-green-500 to-emerald-500 text-white rounded-full text-sm font-semibold shadow-md">
 
@@ -630,7 +660,7 @@ export default function PropertyDetailClient({ property }: { property: Property
 
                                 <div className="text-sm text-gray-500 dark:text-gray-400 mb-1">Starting from</div>
 
-                                <div className="text-4xl font-bold bg-gradient-to-r from-primary to-blue-600 bg-clip-text text-transparent">
+                                <div className="text-4xl md:text-2xl font-bold bg-gradient-to-r from-primary to-blue-600 bg-clip-text text-transparent">
 
                                     {property.price}
 
@@ -644,15 +674,15 @@ export default function PropertyDetailClient({ property }: { property: Property
 
                         {/* Quick Stats */}
 
-                        <div className="grid grid-cols-2 md:grid-cols-4 gap-2 md:gap-4 pt-6 border-t border-gray-200 dark:border-gray-800">
+                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2 md:gap-4 pt-6 border-t border-gray-200 dark:border-gray-800">
 
                             <div className="text-center p-2 md:p-4 bg-gray-50 dark:bg-gray-800 rounded-xl">
-                                <div className="text-2xl font-bold text-primary mb-1">{property.overview.bhk}</div>
+                                <div className="text-2xl md:text-1xl font-bold text-primary mb-1">{property.overview.bhk}</div>
                                 <div className="text-sm text-gray-600 dark:text-gray-400">Configuration</div>
                             </div>
 
                             <div className="text-center p-2 md:p-4 bg-gray-50 dark:bg-gray-800 rounded-xl">
-                                <div className="text-2xl font-bold text-primary mb-1">{property.overview.size}</div>
+                                <div className="text-2xl md:text-1xl font-bold text-primary mb-1">{property.overview.size}</div>
                                 <div className="text-sm text-gray-600 dark:text-gray-400">Area</div>
                             </div>
 
@@ -684,7 +714,7 @@ export default function PropertyDetailClient({ property }: { property: Property
 
                             {/* Overview Section */}
 
-                            <div id="overview" className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-sm border border-gray-200 dark:border-gray-800 scroll-mt-32">
+                            <AnimateSection id="overview" className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-sm border border-gray-200 dark:border-gray-800 scroll-mt-32" direction="left">
 
                                 {/* Header with title and badges */}
 
@@ -904,11 +934,11 @@ export default function PropertyDetailClient({ property }: { property: Property
 
                                 </div>
 
-                            </div>
+                            </AnimateSection>
 
 
 
-                            <div className="space-y-4">
+                            <AnimateSection className="space-y-4" direction="left">
 
                                 <div className={`relative ${!isConnectivityExpanded ? 'max-h-[60px] overflow-hidden' : ''}`}>
 
@@ -942,13 +972,13 @@ export default function PropertyDetailClient({ property }: { property: Property
 
                                 </button>
 
-                            </div>
+                            </AnimateSection>
 
 
 
                             {/* Info Cards Grid */}
 
-                            <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
+                            <AnimateSection className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8" direction="right">
 
                                 {/* RERA Card */}
 
@@ -1056,7 +1086,7 @@ export default function PropertyDetailClient({ property }: { property: Property
 
                                 </div>
 
-                            </div>
+                            </AnimateSection>
 
 
 
@@ -1064,7 +1094,7 @@ export default function PropertyDetailClient({ property }: { property: Property
 
                             {/* Pricing Section - Moved and Redesigned */}
 
-                            <div id="pricing" className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-sm border border-gray-200 dark:border-gray-800 scroll-mt-32">
+                            <AnimateSection id="pricing" className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-sm border border-gray-200 dark:border-gray-800 scroll-mt-32" direction="right">
 
                                 <h2 className="text-3xl font-bold text-foreground mb-2">Pricing</h2>
 
@@ -1138,13 +1168,13 @@ export default function PropertyDetailClient({ property }: { property: Property
 
                                 </div>
 
-                            </div>
+                            </AnimateSection>
 
 
 
                             {/* Connectivity Section (Formerly Location) */}
 
-                            <div id="connectivity" className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-sm border border-gray-200 dark:border-gray-800 scroll-mt-32">
+                            <AnimateSection id="connectivity" className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-sm border border-gray-200 dark:border-gray-800 scroll-mt-32" direction="left">
 
                                 <h2 className="text-3xl font-bold text-foreground mb-2">Connectivity</h2>
 
@@ -1194,13 +1224,13 @@ export default function PropertyDetailClient({ property }: { property: Property
 
                                 <ConnectivityMap />
 
-                            </div>
+                            </AnimateSection>
 
 
 
                             {/* Master Plan Section */}
 
-                            <div id="master-plan" className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-sm border border-gray-200 dark:border-gray-800 scroll-mt-32">
+                            <AnimateSection id="master-plan" className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-sm border border-gray-200 dark:border-gray-800 scroll-mt-32" direction="right">
 
                                 <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4">
 
@@ -1262,7 +1292,7 @@ export default function PropertyDetailClient({ property }: { property: Property
 
                                 {/* Stats Grid */}
 
-                                <div className="grid grid-cols-2 md:grid-cols-4 gap-8 border-t border-gray-100 dark:border-gray-800 pt-8">
+                                <div className="grid grid-cols-2 md:grid-cols-4 gap-4 border-t border-gray-100 dark:border-gray-800 pt-8">
 
                                     <div>
 
@@ -1304,13 +1334,13 @@ export default function PropertyDetailClient({ property }: { property: Property
 
                                 </div>
 
-                            </div>
+                            </AnimateSection>
 
 
 
                             {/* Propsoch Clarity Engine Section */}
 
-                            <div className="py-12">
+                            <AnimateSection className="py-12" direction="up">
 
                                 <div className="text-center mb-12">
 
@@ -1502,13 +1532,13 @@ export default function PropertyDetailClient({ property }: { property: Property
 
                                 </div>
 
-                            </div>
+                            </AnimateSection>
 
 
 
                             {/* Floor Plans Section */}
 
-                            <div id="floor-plans" className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-sm border border-gray-200 dark:border-gray-800 scroll-mt-32">
+                            <AnimateSection id="floor-plans" className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-sm border border-gray-200 dark:border-gray-800 scroll-mt-32" direction="right">
 
                                 <h2 className="text-3xl font-bold text-foreground mb-2">Floor Plans</h2>
 
@@ -1654,13 +1684,13 @@ export default function PropertyDetailClient({ property }: { property: Property
 
                                 </div>
 
-                            </div>
+                            </AnimateSection>
 
 
 
                             {/* Amenities Section */}
 
-                            <div id="amenities" className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-sm border border-gray-200 dark:border-gray-800 scroll-mt-32">
+                            <AnimateSection id="amenities" className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-sm border border-gray-200 dark:border-gray-800 scroll-mt-32" direction="left">
 
                                 <h2 className="text-3xl font-bold text-foreground mb-2">Amenities</h2>
 
@@ -1808,7 +1838,7 @@ export default function PropertyDetailClient({ property }: { property: Property
 
                                 </button>
 
-                            </div>
+                            </AnimateSection>
 
 
 
@@ -1816,7 +1846,7 @@ export default function PropertyDetailClient({ property }: { property: Property
 
                             {/* Approvals Section */}
 
-                            <div id="approvals" className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-sm border border-gray-200 dark:border-gray-800 scroll-mt-32">
+                            <AnimateSection id="approvals" className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-sm border border-gray-200 dark:border-gray-800 scroll-mt-32" direction="right">
 
                                 <h2 className="text-3xl font-bold text-foreground mb-2">Approvals</h2>
 
@@ -2082,13 +2112,13 @@ export default function PropertyDetailClient({ property }: { property: Property
 
                                 </div>
 
-                            </div>
+                            </AnimateSection>
 
 
 
                             {/* About the Builder Section */}
 
-                            <div id="builder" className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-sm border border-gray-200 dark:border-gray-800 scroll-mt-32">
+                            <AnimateSection id="builder" className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-sm border border-gray-200 dark:border-gray-800 scroll-mt-32" direction="left">
 
                                 <h2 className="text-3xl font-bold text-foreground mb-2">About the builder</h2>
 
@@ -2136,7 +2166,7 @@ export default function PropertyDetailClient({ property }: { property: Property
 
                                 </div>
 
-                            </div>
+                            </AnimateSection>
 
 
 
@@ -2146,7 +2176,7 @@ export default function PropertyDetailClient({ property }: { property: Property
 
                             {/* Locality Section */}
 
-                            <div id="locality" className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-sm border border-gray-200 dark:border-gray-800 scroll-mt-32">
+                            <AnimateSection id="locality" className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-sm border border-gray-200 dark:border-gray-800 scroll-mt-32" direction="right">
 
                                 <h2 className="text-3xl font-bold text-foreground mb-2">Locality</h2>
 
@@ -2260,7 +2290,7 @@ export default function PropertyDetailClient({ property }: { property: Property
 
                                 {/* Checkout Nearby Properties Section */}
 
-                                <div id="nearby" className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-sm border border-gray-200 dark:border-gray-800 scroll-mt-32">
+                                <AnimateSection id="nearby" className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-sm border border-gray-200 dark:border-gray-800 scroll-mt-32" direction="left">
 
                                     <h2 className="text-3xl font-bold text-foreground mb-2">Checkout Nearby Properties</h2>
 
@@ -2360,9 +2390,9 @@ export default function PropertyDetailClient({ property }: { property: Property
 
                                     </a>
 
-                                </div>
+                                </AnimateSection>
 
-                            </div>
+                            </AnimateSection>
 
 
 
@@ -2378,7 +2408,7 @@ export default function PropertyDetailClient({ property }: { property: Property
 
                             {/* FAQ Section */}
 
-                            <div id="faq" className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-sm border border-gray-200 dark:border-gray-800 scroll-mt-32">
+                            <AnimateSection id="faq" className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-sm border border-gray-200 dark:border-gray-800 scroll-mt-32" direction="up">
 
                                 <h2 className="text-3xl font-bold text-foreground mb-2">Frequently Asked Questions</h2>
 
@@ -2484,7 +2514,7 @@ export default function PropertyDetailClient({ property }: { property: Property
 
                                 </div>
 
-                            </div>
+                            </AnimateSection>
 
 
 
@@ -2500,7 +2530,7 @@ export default function PropertyDetailClient({ property }: { property: Property
 
                                 {/* Contact Form */}
 
-                                <div className="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-6 shadow-lg">
+                                <AnimateSection direction="up" className="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-6 shadow-lg">
 
                                     <h3 className="text-xl font-bold text-foreground mb-4">Get in Touch</h3>
 
@@ -2618,7 +2648,7 @@ export default function PropertyDetailClient({ property }: { property: Property
 
                                     </form>
 
-                                </div>
+                                </AnimateSection>