diff --git a/css/testing.css b/css/testing.css
index c925aba..ac12ece 100644
--- a/css/testing.css
+++ b/css/testing.css
@@ -1,11 +1,8 @@
 /* Base setup */
 :root {
   --font-primary: "Open Sans", sans-serif;
-  /* default body font */
   --font-secondary: "Larken", serif;
-  /* decorative font */
   --font-tertiary: "Inter", sans-serif;
-  /* for headings or special text */
 }
 
 .ask-advantage-scroll h2 {
@@ -17,6 +14,7 @@
   letter-spacing: 0%;
   color: #033a49;
 }
+
 .ask-advantage-scroll p.lead {
   font-family: var(--font-primary);
   font-weight: 400;
@@ -28,40 +26,38 @@
   margin-top: 15px;
 }
 
+/* Mobile & Tablet View (default - stacked layout) */
 .cards-wrapper {
   display: flex;
-  gap: 20px;
-  flex-wrap: wrap;
-  justify-content: center;
-  /* margin-top: 60px; */
+  flex-direction: column;
+  gap: 30px;
+  width: 100%;
 }
 
 .card-scroll {
   background-image: url("../assests/images/desbackcard-scroll.svg");
   background-repeat: no-repeat;
   background-size: cover;
-
-  background-position: center center; /* centers it horizontally and vertically */
-
+  background-position: center center;
   border-radius: 30px;
-  width: 100%;
   overflow: hidden;
-
   display: flex;
   flex-direction: row;
   border: 1px solid #e6e7e8;
   box-shadow: 0px 5px 14px 0px #0000000d;
-
-  /* reduce side padding so image aligns better */
   padding: 50px 80px 0px 80px;
   gap: 60px;
-  transition: transform 0.3s ease;
+  width: 100%;
+  position: relative;
+  opacity: 1;
+  transform: none;
 }
 
 .card-content {
   width: 60%;
   margin-bottom: 50px;
 }
+
 .card-image {
   width: 40%;
   display: flex;
@@ -88,10 +84,10 @@
   line-height: 100%;
   letter-spacing: 2px;
 }
+
 .scroll-desc {
   font-family: var(--font-primary);
   font-weight: 400;
-
   font-size: 18px;
   line-height: 100%;
   color: #3e3f3f;
@@ -117,21 +113,38 @@
   display: block;
 }
 
-@media (max-width: 768px) {
+/* Desktop View (Animation Layout) */
+@media (min-width: 1024px) {
+  .cards-wrapper {
+    position: relative;
+    height: 530px;
+    overflow: hidden;
+    display: block;
+    gap: 0;
+  }
+
+  .card-scroll {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    opacity: 0;
+    transform: translateY(100%);
+    transition: none;
+  }
+
+  .card-scroll.active {
+    opacity: 1;
+    transform: translateY(0);
+    z-index: 2;
+  }
+}
+
+/* Mobile & Tablet Styles */
+@media (max-width: 1023px) {
   .card-scroll {
     background-image: url("../assests/images/mobilebackcard-scroll.svg");
-    background-repeat: no-repeat;
-    background-size: cover; /* fills card area */
-    background-position: center center; /* show from top */
-
-    border-radius: 30px;
-    width: 100%;
-    overflow: hidden;
-
-    display: flex;
     flex-direction: column;
-    border: 1px solid #e6e7e8;
-    box-shadow: 0px 0px 14px 0px #0000000d;
     padding: 30px 20px 0px 20px;
     gap: 30px;
   }
@@ -140,65 +153,60 @@
     width: 100%;
     margin-bottom: 0px;
   }
+
   .card-image {
     width: 100%;
     text-align: center;
     justify-content: center;
     display: flex;
   }
+
   .card-image img {
     width: 220px;
     display: block;
   }
+
   .card-label span {
     font-size: 18px;
   }
+
   .scroll-tiile {
     font-size: 18px;
     letter-spacing: 0.5px;
   }
-  .cards-wrapper {
-    margin-top: 30px;
-  }
+
   .scroll-desc {
     font-size: 13px;
   }
+
   .scroll-ul {
     display: none;
   }
+
   .ask-advantage-scroll h2 {
     font-size: 26px;
     line-height: 36px;
   }
+
   .ask-advantage-scroll p.lead {
     font-size: 15px;
     line-height: 22px;
   }
 }
 
-.cards-wrapper {
-  position: relative;
-  height: 530px;
-  overflow: hidden;
-}
-
-.card-scroll {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  opacity: 0;
-  transform: translateY(100%);
-}
-
-.card-scroll.active {
-  opacity: 1;
-  transform: translateY(0);
-  z-index: 2;
+@media (max-width: 768px) {
+  .cards-wrapper {
+    gap: 20px;
+  }
+  
+  .card-scroll {
+    padding: 25px 15px 0px 15px;
+    gap: 20px;
+  }
 }
 
 @media (max-width: 991px) {
   section.ask-advantage-scroll.container {
     padding: 60px 25px 0 25px !important;
   }
-}
+}
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
index 69f623b..5dff187 100644
--- a/js/main.js
+++ b/js/main.js
@@ -334,9 +334,17 @@ let scrollTrigger;
 let allowNormalScroll = false;
 
 // ===============================
-// ✅ GSAP Stack Scroll with Section Pinning (Desktop + Mobile Support)
+// ✅ GSAP Stack Scroll with Section Pinning (Fixed Scroll Lock Only)
 // ===============================
 function initGsapStackScroll() {
+  // Check if device is desktop/laptop (min-width: 1024px)
+  const isDesktop = window.matchMedia("(min-width: 1024px)").matches;
+  
+  if (!isDesktop) {
+    console.log("GSAP stack scroll disabled for mobile/tablet devices");
+    return;
+  }
+
   const section = document.querySelector(".ask-advantage-scroll");
   if (!section) return;
 
@@ -355,7 +363,7 @@ function initGsapStackScroll() {
   // Calculate exact pinning distance
   const cardHeight = cardsWrapper.offsetHeight;
   const totalCards = cards.length;
-  const pinningDistance = cardHeight * totalCards * 2;
+  const pinningDistance = cardHeight * totalCards * 0.4;
 
   // Scroll pinning logic
   scrollTrigger = ScrollTrigger.create({
@@ -386,17 +394,18 @@ function initGsapStackScroll() {
     },
   });
 
-  // ✅ Wheel handler (desktop)
+  // ✅ Wheel handler with scroll block fix
   window._gsapStackHandler = function (e) {
     if (!isSectionPinned) return;
 
+    // Completely block scroll while animating
     if (animating) {
       e.preventDefault();
       e.stopPropagation();
       return;
     }
 
-    // Boundaries
+    // Boundaries check
     if (
       (e.deltaY > 0 && currentIndex >= cards.length - 1) ||
       (e.deltaY < 0 && currentIndex <= 0)
@@ -405,6 +414,7 @@ function initGsapStackScroll() {
       return;
     }
 
+    // Start animation & block scroll during it
     e.preventDefault();
     e.stopPropagation();
 
@@ -423,7 +433,7 @@ function initGsapStackScroll() {
       (e.key === "ArrowDown" && currentIndex >= cards.length - 1) ||
       (e.key === "ArrowUp" && currentIndex <= 0)
     ) {
-      return;
+      return; // Allow normal scroll at boundaries
     }
 
     if (e.key === "ArrowDown") {
@@ -435,40 +445,10 @@ function initGsapStackScroll() {
     }
   };
 
-  // ✅ Touch handler (mobile)
-  let touchStartY = 0;
-  let touchEndY = 0;
-
-  window._gsapTouchStart = function (e) {
-    touchStartY = e.touches[0].clientY;
-  };
-
-  window._gsapTouchMove = function (e) {
-    touchEndY = e.touches[0].clientY;
-  };
-
-  window._gsapTouchEnd = function () {
-    if (!isSectionPinned || animating) return;
-    const deltaY = touchStartY - touchEndY;
-
-    // Swipe threshold
-    if (Math.abs(deltaY) < 40) return;
-
-    if (deltaY > 0) {
-      // Swipe up → next card
-      showNextGsapCard();
-    } else {
-      // Swipe down → previous card
-      showPrevGsapCard();
-    }
-  };
-
-  // Attach listeners
-  window.addEventListener("wheel", window._gsapStackHandler, { passive: false });
+  window.addEventListener("wheel", window._gsapStackHandler, {
+    passive: false,
+  });
   window.addEventListener("keydown", window._gsapKeyHandler);
-  window.addEventListener("touchstart", window._gsapTouchStart, { passive: true });
-  window.addEventListener("touchmove", window._gsapTouchMove, { passive: true });
-  window.addEventListener("touchend", window._gsapTouchEnd);
 }
 
 // ✅ Reset to first card
@@ -522,6 +502,7 @@ function showNextGsapCard() {
         adjustVisibleCards();
         animating = false;
 
+        // ✅ Allow normal scroll only after last card animation completes
         if (currentIndex >= cards.length - 1) {
           allowNormalScroll = true;
           ScrollTrigger.refresh(true);
@@ -572,6 +553,7 @@ function showPrevGsapCard() {
 function adjustVisibleCards() {
   gsap.set(cards, { opacity: 0, y: "100%", zIndex: 0 });
 
+  // Active card
   if (cards[currentIndex]) {
     gsap.set(cards[currentIndex], {
       y: "60px",
@@ -581,6 +563,7 @@ function adjustVisibleCards() {
     });
   }
 
+  // Show only 2 previous cards
   for (let i = 1; i <= 2; i++) {
     const prevIndex = currentIndex - i;
     if (prevIndex >= 0) {
@@ -597,6 +580,7 @@ function adjustVisibleCards() {
     }
   }
 
+  // Hide older cards
   const hideIndex = currentIndex - 3;
   if (hideIndex >= 0 && cards[hideIndex]) {
     gsap.to(cards[hideIndex], {
@@ -610,25 +594,21 @@ function adjustVisibleCards() {
 
 // ✅ Cleanup function
 function cleanupGsapStackScroll() {
-  if (window._gsapStackHandler)
+  if (window._gsapStackHandler) {
     window.removeEventListener("wheel", window._gsapStackHandler);
-  if (window._gsapKeyHandler)
+  }
+  if (window._gsapKeyHandler) {
     window.removeEventListener("keydown", window._gsapKeyHandler);
-  if (window._gsapTouchStart)
-    window.removeEventListener("touchstart", window._gsapTouchStart);
-  if (window._gsapTouchMove)
-    window.removeEventListener("touchmove", window._gsapTouchMove);
-  if (window._gsapTouchEnd)
-    window.removeEventListener("touchend", window._gsapTouchEnd);
-  if (scrollTrigger) scrollTrigger.kill();
+  }
+  if (scrollTrigger) {
+    scrollTrigger.kill();
+  }
 }
 
 // Initialize after DOM load
 document.addEventListener("DOMContentLoaded", initGsapStackScroll);
 window.addEventListener("beforeunload", cleanupGsapStackScroll);
 
-
-
 // ===============================
 // ✅ Load Page Content Dynamically
 // ===============================