All pages responsive animation overflow issues are fixed

src/app/about-antalya-restaurant/AboutContent.tsx

@@ -34,10 +34,10 @@ export default function AboutContent() {
     };
 
     const slideInLeft = {
-        hidden: { opacity: 0, x: -50 },
+        hidden: { opacity: 0, y: 30 },
         visible: {
             opacity: 1,
-            x: 0,
+            y: 0,
             transition: {
                 duration: 0.7
             }
@@ -45,10 +45,10 @@ export default function AboutContent() {
     };
 
     const slideInRight = {
-        hidden: { opacity: 0, x: 50 },
+        hidden: { opacity: 0, y: 30 },
         visible: {
             opacity: 1,
-            x: 0,
+            y: 0,
             transition: {
                 duration: 0.7
             }
@@ -235,9 +235,9 @@ export default function AboutContent() {
                         <motion.div
                             key={currentTestimonial}
                             className={styles.testimonialCard}
-                            initial={{ opacity: 0, x: 50 }}
+                            initial={{ opacity: 0, scale: 0.95 }}
-                            animate={{ opacity: 1, x: 0 }}
+                            animate={{ opacity: 1, scale: 1 }}
-                            exit={{ opacity: 0, x: -50 }}
+                            exit={{ opacity: 0, scale: 0.95 }}
                             transition={{ duration: 0.5 }}
                         >
                             <p className={styles.testimonialText}>"{testimonialData[currentTestimonial].text}"</p>

src/app/about-antalya-restaurant/about.module.css

@@ -307,6 +307,7 @@
   justify-content: center;
   gap: 1rem;
   margin-top: 2rem;
+  display: none;
 }
 
 .dot {
@@ -637,6 +638,47 @@
   }
 }
 
+@media (max-width: 767px) and (min-width: 200px) {
+
+  .testimonialSlider {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    max-width: 900px;
+    margin: 0 auto;
+    position: relative;
+    padding: 0 10px !important;
+    /* Reduced side padding (enough for arrows) */
+  }
+
+  .testimonialCard {
+    padding: 1.5rem 1rem !important;
+    /* Reduced card padding */
+    gap: 1rem !important;
+  }
+
+  .testimonialText {
+    font-size: 1rem !important;
+    /* Reduced font size */
+    line-height: 1.5;
+  }
+
+  .sliderBtn {
+    width: 18px;
+    height: 25px;
+    font-size: 1rem;
+  }
+
+  .sliderBtn:first-child {
+  left: -6px;
+}
+
+.sliderBtn:last-child {
+  right: -6px;
+}
+
+}
+
 @media (max-width: 500px) {
 
   .faqContainer {

src/app/antalya-restaurant-gallery/GalleryContent.tsx

@@ -197,9 +197,9 @@ export default function GalleryContent() {
                             <motion.div
                                 className={styles.lightboxImageWrapper}
                                 key={currentIndex}
-                                initial={{ opacity: 0, x: 50 }}
+                                initial={{ opacity: 0, scale: 0.9 }}
-                                animate={{ opacity: 1, x: 0 }}
+                                animate={{ opacity: 1, scale: 1 }}
-                                exit={{ opacity: 0, x: -50 }}
+                                exit={{ opacity: 0, scale: 0.9 }}
                                 transition={{ duration: 0.3 }}
                             >
                                 <Image

src/app/book-a-table/ContactContent.tsx

@@ -163,8 +163,8 @@ export default function ContactContent() {
                     {/* Left Side - Book a Table Form */}
                     <motion.div
                         className={styles.formBlock}
-                        initial={{ opacity: 0, x: -60 }}
+                        initial={{ opacity: 0, y: 30 }}
-                        whileInView={{ opacity: 1, x: 0 }}
+                        whileInView={{ opacity: 1, y: 0 }}
                         viewport={{ once: true }}
                         transition={{ duration: 0.8 }}
                     >
@@ -316,8 +316,8 @@ export default function ContactContent() {
                     {/* Right Side - Location Info & Map */}
                     <motion.div
                         className={styles.infoBlock}
-                        initial={{ opacity: 0, x: 60 }}
+                        initial={{ opacity: 0, y: 30 }}
-                        whileInView={{ opacity: 1, x: 0 }}
+                        whileInView={{ opacity: 1, y: 0 }}
                         viewport={{ once: true }}
                         transition={{ duration: 0.8 }}
                     >

src/app/catering-services-ontario/CateringContent.tsx

@@ -67,10 +67,10 @@ export default function CateringContent() {
     };
 
     const slideInLeft = {
-        hidden: { opacity: 0, x: -50 },
+        hidden: { opacity: 0, y: 30 },
         visible: {
             opacity: 1,
-            x: 0,
+            y: 0,
             transition: {
                 duration: 0.7
             }
@@ -78,10 +78,10 @@ export default function CateringContent() {
     };
 
     const slideInRight = {
-        hidden: { opacity: 0, x: 50 },
+        hidden: { opacity: 0, y: 30 },
         visible: {
             opacity: 1,
-            x: 0,
+            y: 0,
             transition: {
                 duration: 0.7
             }

src/components/FAQ/FAQ.module.css

@@ -100,7 +100,7 @@
 
 @media (max-width: 768px) {
     .faqSection {
-        padding: 40px 15px;
+        padding: 40px 0px;
     }
 
     .faqTitle {

src/components/Menu/Menu.module.css

@@ -1,5 +1,5 @@
 .sectionHeading {
-    padding: 80px 20px 40px;
+    padding: 0px 20px 40px;
     max-width: 900px;
     margin: 0 auto;
     text-align: center;

src/components/Testimonials/Testimonials.tsx

@@ -65,7 +65,7 @@ export default function Testimonials() {
                                 </div>
                             </div>
                         </div>
-                        <h3 className={styles.name}>— {item.name}</h3>
+                        {/* <h3 className={styles.name}>— {item.name}</h3> */}
                         <p className={styles.testimonialText}>"{item.text}"</p>
                         <div style={{ fontSize: '1.5rem', color: '#ffdf00', textAlign: 'center', letterSpacing: '3px', marginTop: '20px' }}>
                             {'★★★★★'}