diff --git a/components/footer.html b/components/footer.html
index 31b7fc2..fa3e3f0 100644
--- a/components/footer.html
+++ b/components/footer.html
@@ -17,10 +17,10 @@
           <a href="#" class="me-3"><img src="./assests/images/facebook.svg" alt=""></a>
           <a href="#"><img src="./assests/images/lin.svg" alt=""></a>
         </div>
-        <div class="d-flex gap-2">
+        <!-- <div class="d-flex gap-2">
           <a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/7/78/Google_Play_Store_badge_EN.svg" height="40" alt="Google Play"></a>
           <a href="#"><img src="https://developer.apple.com/assets/elements/badges/download-on-the-app-store.svg" height="40" alt="App Store"></a>
-        </div>
+        </div> -->
       </div>
 
       <!-- Quick Links -->
diff --git a/components/header.html b/components/header.html
index a5c9891..decb522 100644
--- a/components/header.html
+++ b/components/header.html
@@ -42,8 +42,8 @@
           <li class="nav-item me-3">
             <a href="#" class="invest-btn px-3 py-2">Invest Now</a>
           </li>
-          <li class="nav-item d-flex align-items-center">
-            <span class="text-white">Login</span>
+          <li class="nav-item d-flex align-items-center login-btn">
+            <span class="">Login</span>
             <i class="bi bi-chevron-down" style="font-size: 13px; color: #B18C4A; margin-left: 8px; display: none;"></i>
           </li>
         </ul>
diff --git a/css/style.css b/css/style.css
index f2fb3c6..23b66f0 100644
--- a/css/style.css
+++ b/css/style.css
@@ -46,18 +46,20 @@ a.nav-link:hover {
 }
 
 .nav-link:focus,
-.nav-link:hover {
+.nav-link:hover,
+.login-btn span:hover {
   color: #b58b4b;
 }
 
-.text-white {
+.login-btn span {
   font-family: var(--font-primary);
-  font-weight: 600;
+  font-weight: 400;
   font-size: 16px;
   line-height: 120%;
   letter-spacing: 0%;
   text-align: center;
   color: #fff;
+  cursor: pointer;
 }
 
 /* Invest Now button */
@@ -181,10 +183,10 @@ span.banner-desc {
   justify-content: center;
 }
 
-.invest-btn:hover {
+/* .invest-btn:hover {
   background-color: #b58b4b;
   color: #fff;
-}
+} */
 
 a.color-a {
   color: #fff;
@@ -589,8 +591,13 @@ a.color-a {
   display: none;
 }
 
+.date-container {
+  text-align: left;
+  padding: 0px 10px;
+}
+
 .as-of-date {
-  text-align: center;
+  width: 100%;
   font-family: var(--font-primary);
   font-weight: 400;
   font-style: Italic;
@@ -658,12 +665,12 @@ span.banner-desc2 {
   height: auto;
 }
 
-.tittle-blog {
+.home-tittle-blog {
   font-family: var(--font-primary);
   font-weight: 600;
-  font-size: 28px;
+  font-size: 21px;
   line-height: 135%;
-  letter-spacing: 0%;
+  /* letter-spacing: 0%; */
   color: #3e3f3f;
 }
 
@@ -681,7 +688,7 @@ span.banner-desc2 {
 .desc-blog {
   font-family: var(--font-primary);
   font-weight: 400;
-  font-size: 20px;
+  font-size: 16px;
   line-height: 135%;
   color: #929197;
   margin-bottom: 25px;
@@ -766,7 +773,8 @@ span.textaccor {
   padding-right: 0;
 }
 
-.col-6:hover {
+.descktop .col-6:hover,
+.mobile .col-6:hover {
   background-color: rgba(155, 155, 155, 0.26);
   border-radius: 10px;
 }
@@ -1038,13 +1046,82 @@ span.textaccor {
   display: none;
 }
 
-.descktop-marging-new {
+.wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 39px;
+  margin: 0 auto;
+  max-width: 1200px;
+}
+
+.outer_box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: calc(25% - 15px); /* 4 cards on desktop */
+  max-width: 250px;
+  padding: 45px 30px;
+  border-radius: 10px;
+}
+
+.inner_box {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.inner_box img {
+  width: 64px;
+  height: 64px;
+}
+
+.inner_box .heading-container {
+  display: flex;
+  flex-direction: column;
+  line-height: 1.4;
+}
+
+.inner_box .paragraph-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  line-height: 1.4;
+  height: 40px;
+  margin-top: -10px;
+}
+
+.inner_box h2 {
+  font-family: var(--font-primary);
+  font-size: 21px;
+  font-weight: 600;
+  color: #004a5d !important;
+  margin-bottom: 1;
+  padding: 0;
+}
+
+.inner_box p {
+  font-family: var(--font-primary);
+  font-size: 16px;
+  font-weight: 400;
+  margin: 0;
+  color: #666;
+}
+
+.outer_box:hover {
+  background-color: rgba(128, 128, 128, 0.24);
+  border-radius: 10px;
+  transform: translateY(-2px);
+  transition: all 0.3s ease;
+}
+
+/* .descktop-marging-new {
   margin-left: 30px;
-  gap: 50px;
+  gap: 60px;
 }
 .padding-icon {
   width: 20%;
-  padding: 30px 25px;
+  padding: 40px 25px;
   transition: all 0.5s ease;
   border-radius: 10px;
 }
@@ -1054,7 +1131,7 @@ span.textaccor {
 }
 .padding-icon1 {
   width: 20%;
-  padding: 30px 24px;
+  padding: 40px 24px;
   transition: all 0.5s ease;
   border-radius: 10px;
 }
@@ -1064,7 +1141,7 @@ span.textaccor {
 }
 .padding-icon2 {
   width: 20%;
-  padding: 30px 35px;
+  padding: 40px 35px;
   transition: all 0.5s ease;
   border-radius: 10px;
 }
@@ -1075,7 +1152,7 @@ span.textaccor {
 
 .padding-icon3 {
   width: 20%;
-  padding: 30px 35px;
+  padding: 40px 35px;
   transition: all 0.5s ease;
   border-radius: 10px;
 }
@@ -1085,14 +1162,14 @@ span.textaccor {
 }
 .padding-icon4 {
   width: 20%;
-  padding: 30px 35px;
+  padding: 40px 35px;
   transition: all 0.5s ease;
   border-radius: 10px;
 }
 .padding-icon4:hover {
   background-color: #e6e7e8;
   border-radius: 10px;
-}
+} */
 
 .gy-4 {
   --bs-gutter-y: 2.5rem;
@@ -1599,6 +1676,8 @@ span.textaccor {
   font-size: 24px;
 }
 
+
+
 @media (max-width: 768px) {
   .navbar-expand-lg .gap-menu {
     flex-direction: column;
@@ -1729,22 +1808,27 @@ span.textaccor {
     line-height: 16px;
   }
 
+  .date-container {
+  text-align: center;
+}
+
   .ask-advantage-home h2 {
     font-size: 24px;
     line-height: 36px;
   }
 
   .ask-advantage-home p.lead {
-    font-size: 14px;
+    font-size: 15px;
     line-height: 22px;
   }
-  .ask-advantage h2 {
+
+  .ask-advantage-heading {
     font-size: 24px;
     line-height: 36px;
   }
 
   .ask-advantage p.lead {
-    font-size: 14px;
+    font-size: 15px;
     line-height: 22px;
   }
 
@@ -2309,6 +2393,73 @@ span.textaccor {
   }
 }
 
+@media (max-width:767px){
+    .wrapper {
+    gap: 15px;
+    justify-content: flex-start; /* Align to left on mobile too */
+  }
+
+  .outer_box {
+    width: calc(50% - 8px); /* 2 cards per row */
+    padding: 20px 15px;
+    max-width: none;
+  }
+
+  .inner_box {
+    height: auto;
+    gap: 12px;
+  }
+
+  .inner_box img {
+    width: 32px;
+    height: 32px;
+  }
+
+  .inner_box h2 {
+    font-size: 12px;
+    line-height: 1.2;
+    margin-bottom: 0px;
+  }
+
+  .inner_box p {
+    font-size: 10px;
+  }
+
+  .inner_box .paragraph-container {
+    line-height: 1.2;
+    margin-top: -4px;
+  }
+}
+
+@media (min-width:768px) and (max-width:1200px){
+  .wrapper {
+    gap: 15px;
+    justify-content: flex-start; /* Align to left on mobile too */
+    margin-left: 25px;
+  }
+
+  .outer_box {
+    width: calc(48% - 15px); /* 2 cards per row */
+    padding: 30px 30px;
+    max-width: none;
+  }
+
+
+  .inner_box h2 {
+    margin-bottom: 5px;
+    font-size: 21px;
+  }
+
+  .paragraph-container p{
+    font-size: 20px;
+  }
+
+  .inner_box .paragraph-container {
+    line-height: 1.2;
+    margin-top: -10px;
+  }
+}
+
 @media (max-width: 991px) {
   .topbar {
     display: none;
@@ -2476,3 +2627,11 @@ span.textaccor {
     padding: 60px 25px 0 25px !important;
   }
 }
+
+/* Small Mobile Styles - 1 card per row (max 319px) */
+@media (max-width: 319px) {
+  .outer_box {
+    width: 100%;
+    max-width: 300px;
+  }
+}
diff --git a/css/testing.css b/css/testing.css
index 16af31d..c925aba 100644
--- a/css/testing.css
+++ b/css/testing.css
@@ -8,10 +8,6 @@
   /* for headings or special text */
 }
 
-section.ask-advantage-scroll {
-  padding: 60px 0 0 0;
-}
-
 .ask-advantage-scroll h2 {
   font-family: var(--font-secondary);
   font-weight: 400;
@@ -37,7 +33,7 @@ section.ask-advantage-scroll {
   gap: 20px;
   flex-wrap: wrap;
   justify-content: center;
-  margin-top: 60px;
+  /* margin-top: 60px; */
 }
 
 .card-scroll {
@@ -175,14 +171,14 @@ section.ask-advantage-scroll {
     line-height: 36px;
   }
   .ask-advantage-scroll p.lead {
-    font-size: 14px;
+    font-size: 15px;
     line-height: 22px;
   }
 }
 
 .cards-wrapper {
   position: relative;
-  height: 530px; /* ya jitna aapko chahiye ho */
+  height: 530px;
   overflow: hidden;
 }
 
diff --git a/js/main.js b/js/main.js
index da90ade..05c61af 100644
--- a/js/main.js
+++ b/js/main.js
@@ -334,7 +334,7 @@ let scrollTrigger;
 let allowNormalScroll = false;
 
 // ===============================
-// ✅ GSAP Stack Scroll with Section Pinning
+// ✅ GSAP Stack Scroll with Section Pinning (Fixed Scroll Lock Only)
 // ===============================
 function initGsapStackScroll() {
   const section = document.querySelector(".ask-advantage-scroll");
@@ -346,22 +346,22 @@ function initGsapStackScroll() {
   cards = Array.from(cardsWrapper.querySelectorAll(".card-scroll"));
   if (!cards.length) return;
 
-  // Initial setup - Using your simple stacking logic
+  // Initial setup
   gsap.set(cards, { opacity: 0, y: "100%", zIndex: 0 });
   gsap.set(cards[0], { opacity: 1, y: "60px", zIndex: 5 });
   currentIndex = 0;
   allowNormalScroll = false;
 
-  //Calculate exact pinning distance
+  // Calculate exact pinning distance
   const cardHeight = cardsWrapper.offsetHeight;
   const totalCards = cards.length;
-  const pinningDistance = cardHeight * totalCards * 1.5; // Adjust multiplier as needed
+  const pinningDistance = cardHeight * totalCards * 2;
 
-  // Scroll pinning logic from updated code
+  // Scroll pinning logic
   scrollTrigger = ScrollTrigger.create({
     trigger: cardsWrapper,
     start: "top top",
-    end:`+=${pinningDistance}`,
+    end: `+=${pinningDistance}`,
     pin: true,
     anticipatePin: 1,
     pinSpacing: true,
@@ -375,7 +375,6 @@ function initGsapStackScroll() {
     onLeave: () => {
       isSectionPinned = false;
       allowNormalScroll = true;
-      console.log("Left pinned section");
     },
     onEnterBack: () => {
       isSectionPinned = true;
@@ -384,21 +383,32 @@ function initGsapStackScroll() {
     onLeaveBack: () => {
       isSectionPinned = false;
       allowNormalScroll = true;
-    }
+    },
   });
 
-  // Global wheel handler that checks if section is pinned
+  // ✅ Wheel handler with scroll block fix
   window._gsapStackHandler = function (e) {
-    if (!isSectionPinned || animating) return;
-    
-    // Allow normal scrolling when at boundaries
-    if (allowNormalScroll || 
-        (e.deltaY > 0 && currentIndex >= cards.length - 1) || 
-        (e.deltaY < 0 && currentIndex <= 0)) {
+    if (!isSectionPinned) return;
+
+    // Completely block scroll while animating
+    if (animating) {
+      e.preventDefault();
+      e.stopPropagation();
       return;
     }
-    
+
+    // Boundaries check
+    if (
+      (e.deltaY > 0 && currentIndex >= cards.length - 1) ||
+      (e.deltaY < 0 && currentIndex <= 0)
+    ) {
+      allowNormalScroll = true;
+      return;
+    }
+
+    // Start animation & block scroll during it
     e.preventDefault();
+    e.stopPropagation();
 
     if (e.deltaY > 0) {
       showNextGsapCard();
@@ -407,56 +417,60 @@ function initGsapStackScroll() {
     }
   };
 
+  // ✅ Keyboard handler
+  window._gsapKeyHandler = function (e) {
+    if (!isSectionPinned || animating) return;
+
+    if (
+      (e.key === "ArrowDown" && currentIndex >= cards.length - 1) ||
+      (e.key === "ArrowUp" && currentIndex <= 0)
+    ) {
+      return; // Allow normal scroll at boundaries
+    }
+
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      showNextGsapCard();
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      showPrevGsapCard();
+    }
+  };
+
   window.addEventListener("wheel", window._gsapStackHandler, {
     passive: false,
   });
+  window.addEventListener("keydown", window._gsapKeyHandler);
 }
 
-// Reset to first card function
+// ✅ Reset to first card
 function resetToFirstCard() {
   animating = true;
-  
-  // Hide all cards
+  allowNormalScroll = false;
+
   gsap.set(cards, { opacity: 0, y: "100%", zIndex: 0 });
-  
-  // Show first card
-  gsap.set(cards[0], { 
-    opacity: 1, 
-    y: "60px", 
+
+  gsap.set(cards[0], {
+    opacity: 1,
+    y: "60px",
     zIndex: 5,
     onComplete: () => {
       currentIndex = 0;
       animating = false;
-      allowNormalScroll = false;
-    }
+    },
   });
 }
 
-// ✅ Show next card - Using your simple stacking logic
+// ✅ Show next card
 function showNextGsapCard() {
-  if (currentIndex >= cards.length - 1) {
-    // Enable normal scrolling when reaching last card
-    allowNormalScroll = true;
-    
-    // Add a small visual indicator that normal scrolling is available
-    const lastCard = cards[currentIndex];
-    gsap.to(lastCard, {
-      y: "50px",
-      duration: 0.3,
-      ease: "power2.out",
-      yoyo: true,
-      repeat: 1
-    });
-    
-    return;
-  }
-  
+  if (currentIndex >= cards.length - 1 || animating) return;
+
   animating = true;
+  allowNormalScroll = false;
 
   const current = cards[currentIndex];
   const next = cards[currentIndex + 1];
 
-  // Animate current slightly up/back
   gsap.to(current, {
     y: "40px",
     scale: 0.95,
@@ -465,7 +479,6 @@ function showNextGsapCard() {
     ease: "power2.inOut",
   });
 
-  // Animate next card into view
   gsap.set(next, { zIndex: 5 });
   gsap.fromTo(
     next,
@@ -480,30 +493,28 @@ function showNextGsapCard() {
         currentIndex++;
         adjustVisibleCards();
         animating = false;
-        
-        // Enable normal scrolling when reaching last card
+
+        // ✅ Allow normal scroll only after last card animation completes
         if (currentIndex >= cards.length - 1) {
           allowNormalScroll = true;
+          ScrollTrigger.refresh(true);
+        } else {
+          allowNormalScroll = false;
         }
       },
     }
   );
 }
 
-// ✅ Show previous card - Using your simple stacking logic
+// ✅ Show previous card
 function showPrevGsapCard() {
-  if (currentIndex <= 0) {
-    // Enable normal scrolling when at first card
-    allowNormalScroll = true;
-    return;
-  }
-  
+  if (currentIndex <= 0 || animating) return;
+
   animating = true;
+  allowNormalScroll = false;
 
   const current = cards[currentIndex];
   const prev = cards[currentIndex - 1];
-
-  // Hide current card (slide down)
   gsap.to(current, {
     y: "100%",
     opacity: 0,
@@ -511,7 +522,6 @@ function showPrevGsapCard() {
     ease: "power2.inOut",
   });
 
-  // Bring previous card back as active
   gsap.set(prev, { zIndex: 5 });
   gsap.to(prev, {
     y: "60px",
@@ -523,18 +533,16 @@ function showPrevGsapCard() {
       currentIndex--;
       adjustVisibleCards();
       animating = false;
-      
-      // Disable normal scrolling if not at first card
-      if (currentIndex > 0) {
+
+      if (currentIndex <= 0) {
         allowNormalScroll = false;
       }
     },
   });
 }
 
-// ✅ Maintain only 3 visible cards in stack - Using your simple stacking logic
+// ✅ Adjust visible cards stack
 function adjustVisibleCards() {
-  // Reset all first
   gsap.set(cards, { opacity: 0, y: "100%", zIndex: 0 });
 
   // Active card
@@ -547,12 +555,12 @@ function adjustVisibleCards() {
     });
   }
 
-  // Show only 2 previous cards (total 3 visible)
+  // Show only 2 previous cards
   for (let i = 1; i <= 2; i++) {
     const prevIndex = currentIndex - i;
     if (prevIndex >= 0) {
-      const yOffset = 60 - i * 25; // e.g., 60px, 35px
-      const scale = 1 - i * 0.05;  // e.g., 1, 0.95, 0.9
+      const yOffset = 60 - i * 25;
+      const scale = 1 - i * 0.05;
       const zIndex = 5 - i;
 
       gsap.set(cards[prevIndex], {
@@ -564,7 +572,7 @@ function adjustVisibleCards() {
     }
   }
 
-  // Hide any card older than the last 3 visible
+  // Hide older cards
   const hideIndex = currentIndex - 3;
   if (hideIndex >= 0 && cards[hideIndex]) {
     gsap.to(cards[hideIndex], {
@@ -576,8 +584,23 @@ function adjustVisibleCards() {
   }
 }
 
+// ✅ Cleanup function
+function cleanupGsapStackScroll() {
+  if (window._gsapStackHandler) {
+    window.removeEventListener("wheel", window._gsapStackHandler);
+  }
+  if (window._gsapKeyHandler) {
+    window.removeEventListener("keydown", window._gsapKeyHandler);
+  }
+  if (scrollTrigger) {
+    scrollTrigger.kill();
+  }
+}
+
 // Initialize after DOM load
 document.addEventListener("DOMContentLoaded", initGsapStackScroll);
+window.addEventListener("beforeunload", cleanupGsapStackScroll);
+
 
 // ===============================
 // ✅ Load Page Content Dynamically
diff --git a/pages/home.html b/pages/home.html
index 322b69b..69690fa 100644
--- a/pages/home.html
+++ b/pages/home.html
@@ -201,7 +201,7 @@
         </div>
       </div>
     </div>
-    <div class="mt-4">
+    <div class="mt-4 date-container">
       <span class="as-of-date ">As of July 2025</span>
     </div>
   </div>
@@ -339,105 +339,122 @@
 
 
 <section class="ask-advantage container">
-  <h2>Life Moments You Can Plan For</h2>
+  <h2 class="ask-advantage-heading">Life Moments You Can Plan For</h2>
   <p class="lead">Choose a Goal and we’ll help you invest for it, step by step</p>
 
-   <div class="row descktop descktop-marging-new mobile-left">
-    <div class="col-6 col-sm-6 col-lg-3 padding-icon">
-      <img src="./assests/images/life1.svg" alt="icon" class="mb-4 icon1">
-      <h6 class=" text-primary">Buying My Dream Home</h6>
-      <p class="text-muted small">Save up for the perfect place at your pace</p>
-    </div>
-    <div class="col-6 col-sm-6 col-lg-3 padding-icon">
-      <img src="./assests/images/life2.svg" alt="icon" class="mb-4 icon2">
-      <h6 class=" text-primary">Kids' Big<br> Dreams</h6>
-      <p class="text-muted small">Because tuition shouldn’t be a worry</p>
-    </div>
-    <div class="col-6 col-sm-6 col-lg-3 padding-icon1">
-      <img src="./assests/images/life3.svg" alt="icon" class="mb-4 icon3">
-      <h6 class=" text-primary">Early <br>Retirement Goals</h6>
-      <p class="text-muted small">Plan your work-free years ahead</p>
-    </div>
-    <div class="col-6 col-sm-6 col-lg-3 padding-icon">
-      <img src="./assests/images/life4.svg" alt="icon" class="mb-4 icon4">
-      <h6 class=" text-primary">Saving Taxes the Right Way</h6>
-      <p class="text-muted small">Optimize your tax savings legally</p>
-    </div>
-  </div>
+    <div class="wrapper">
+      <div class="outer_box">
+        <div class="inner_box">
+          <img src="./assests/images/life1.svg" alt="Dream Home" />
+          <div class="heading-container">
+            <h2 class="h1">Buying My</h2>
+            <h2 class="h1">Dream Home</h2>
+          </div>
+          <div class="paragraph-container">
+            <p>Save up for the perfect</p>
+            <p>place at your pace</p>
+          </div>
+        </div>
+      </div>
 
-  <div class="row descktop descktop-marging-new mobile-left">
-   
-    <div class="col-6 col-sm-6 col-lg-3 padding-icon2">
-      <img src="./assests/images/life5.svg" alt="icon" class="mb-4 icon5">
-      <h6 class=" text-primary">Dream Vacation</h6>
-      <p class="text-muted small">Turn your dream getaway into reality</p>
-    </div>
-    <div class="col-6 col-sm-6 col-lg-3 padding-icon">
-      <img src="./assests/images/life6.svg" alt="icon" class="mb-4 icon6">
-      <h6 class=" text-primary">Emergency Corpus</h6>
-      <p class="text-muted small">Stay prepared for life’s unexpected turns</p>
-    </div>
-    <div class="col-6 col-sm-6 col-lg-3 padding-icon3">
-      <img src="./assests/images/life7.svg" alt="icon" class="mb-4 icon7">
-      <h6 class=" text-primary">Regular Income</h6>
-      <p class="text-muted small">Secure a steady flow of income</p>
-    </div>
-    <div class="col-6 col-sm-6 col-lg-3 padding-icon4">
-      <img src="./assests/images/life8.svg" alt="icon" class="mb-4 icon8">
-      <h6 class=" text-primary">Wealth Creation</h6>
-      <p class="text-muted small">Grow your money steadily over time</p>
-    </div>
-  </div>
+      <div class="outer_box">
+        <div class="inner_box">
+          <img src="./assests/images/life2.svg" alt="Kid's Dream" />
+          <div class="heading-container">
+            <h2 class="h2">Kid's Big</h2>
+            <h2 class="h2">Dream</h2>
+          </div>
+          <div class="paragraph-container">
+            <p>Because Tution</p>
+            <p>shoudln't be worry</p>
+          </div>
+        </div>
+      </div>
 
-  <div class="row  mobile mobile-left">
-    <div class="col-6 col-sm-6 col-lg-3 padding-icon">
-      <img src="./assests/images/life1.svg" alt="icon" class="mb-4 icon1">
-      <h6 class=" text-primary">Buying My Dream Home</h6>
-      <p class="text-muted small">Save up for the perfect place at your pace</p>
-    </div>
-    <div class="col-6 col-sm-6 col-lg-3 padding-icon1">
-      <img src="./assests/images/life2.svg" alt="icon" class="mb-4 icon2">
-      <h6 class=" text-primary">Kids' Big Dreams</h6>
-      <p class="text-muted small">Because tuition shouldn’t be a worry</p>
-    </div>
-    <div class="col-6 col-sm-6 col-lg-3 padding-icon2">
-      <img src="./assests/images/life3.svg" alt="icon" class="mb-4 icon3">
-      <h6 class=" text-primary">Early Retirement Goals</h6>
-      <p class="text-muted small">Plan your work-free years ahead</p>
-    </div>
-    <div class="col-6 col-sm-6 col-lg-3 padding-icon3">
-      <img src="./assests/images/life4.svg" alt="icon" class="mb-4 icon4">
-      <h6 class=" text-primary">Saving Taxes the Right Way</h6>
-      <p class="text-muted small">Optimize your tax savings legally</p>
-    </div>
+      <div class="outer_box">
+        <div class="inner_box">
+          <img src="./assests/images/life3.svg" alt="Retirement" />
+          <div class="heading-container">
+            <h2 class="h3">Early</h2>
+            <h2 class="h3">Retirement Goals</h2>
+          </div>
+          <div class="paragraph-container">
+            <p>Plan your work-</p>
+            <p>free years ahead</p>
+          </div>
+        </div>
+      </div>
 
-    
- 
-  </div>
+      <div class="outer_box">
+        <div class="inner_box">
+          <img src="./assests/images/life4.png" alt="Tax Savings" />
+          <div class="heading-container">
+            <h2 class="h4">Saving Taxes The</h2>
+            <h2 class="h4">Right Way</h2>
+          </div>
+          <div class="paragraph-container">
+            <p>Optimize your tax</p>
+            <p>savings legally</p>
+          </div>
+        </div>
+      </div>
 
-  <div class="row mobile mobile-left">
-   
-    <div class="col-6 col-sm-6 col-lg-3 padding-icon4">
-      <img src="./assests/images/life5.svg" alt="icon" class="mb-4 icon5">
-      <h6 class=" text-primary">Dream Vacation</h6>
-      <p class="text-muted small">Turn your dream getaway into reality</p>
+      <div class="outer_box">
+        <div class="inner_box">
+          <img src="./assests/images/life5.svg" alt="Vacation" />
+          <div class="heading-container">
+            <h2 class="h5">Dream</h2>
+            <h2 class="h5">Vacation</h2>
+          </div>
+          <div class="paragraph-container">
+            <p>Turn your dream</p>
+            <p>getaway into reality</p>
+          </div>
+        </div>
+      </div>
+
+      <div class="outer_box">
+        <div class="inner_box">
+          <img src="./assests/images/life6.svg" alt="Emergency Fund" />
+          <div class="heading-container">
+            <h2 class="h6">Emergency</h2>
+            <h2 class="h6">Corpus</h2>
+          </div>
+          <div class="paragraph-container">
+            <p>Stay prepared for life's</p>
+            <p>unexpected turns</p>
+          </div>
+        </div>
+      </div>
+
+      <div class="outer_box">
+        <div class="inner_box">
+          <img src="./assests/images/life7.svg" alt="Regular Income" />
+          <div class="heading-container">
+            <h2 class="h7">Regular</h2>
+            <h2 class="h7">Income</h2>
+          </div>
+          <div class="paragraph-container">
+            <p>Secure a steady</p>
+            <p>flow of income</p>
+          </div>
+        </div>
+      </div>
+
+      <div class="outer_box">
+        <div class="inner_box">
+          <img src="./assests/images/life8.svg" alt="Wealth Creation" />
+          <div class="heading-container">
+            <h2 class="h8">Wealth</h2>
+            <h2 class="h8">Creation</h2>
+          </div>
+          <div class="paragraph-container">
+            <p>Grow your money</p>
+            <p>steadily over time</p>
+          </div>
+        </div>
+      </div>
     </div>
-    <div class="col-6 col-sm-6 col-lg-3 padding-icon5">
-      <img src="./assests/images/life6.svg" alt="icon" class="mb-4 icon6">
-      <h6 class=" text-primary">Emergency Corpus</h6>
-      <p class="text-muted small">Stay prepared for life’s unexpected turns</p>
-    </div>
-    <div class="col-6 col-sm-6 col-lg-3 padding-icon6">
-      <img src="./assests/images/life7.svg" alt="icon" class="mb-4 icon7">
-      <h6 class=" text-primary">Regular Income</h6>
-      <p class="text-muted small">Secure a steady flow of income</p>
-    </div>
-    <div class="col-6 col-sm-6 col-lg-3 padding-icon7">
-      <img src="./assests/images/life8.svg" alt="icon" class="mb-4 icon8">
-      <h6 class=" text-primary">Wealth Creation</h6>
-      <p class="text-muted small">Grow your money steadily over time</p>
-    </div>
-  </div>
 
 </section>
 
@@ -478,7 +495,7 @@
     <div class="col-md-4">
       <div class="blog-card">
         <img src="./assests/images/blog1.svg" alt="Understanding SIPs" class="img-fluid rounded-3 mb-3">
-        <h5 class="tittle-blog">Understanding SIPs: Building Wealth One Step at a Time</h5>
+        <h5 class="home-tittle-blog">Understanding SIPs: Building Wealth One Step at a Time</h5>
         <p class="time">7 min read</p>
         <p class="desc-blog">
           Small monthly investments can lead to big financial milestones. Explore how SIPs work, why they matter, and
@@ -492,7 +509,7 @@
     <div class="col-md-4">
       <div class="blog-card">
         <img src="./assests/images/blog2.svg" alt="Goals First" class="img-fluid rounded-3 mb-3">
-        <h5 class="tittle-blog">Goals First: Planning for Retirement, Children & More</h5>
+        <h5 class="home-tittle-blog">Goals First: Planning for Retirement, Children & More</h5>
         <p class="time">7 min read</p>
         <p class="desc-blog">
           Whether it’s your dream home or your child’s future, financial goals need clarity and discipline. Learn how
@@ -506,7 +523,7 @@
     <div class="col-md-4">
       <div class="blog-card">
         <img src="./assests/images/blog3.svg" alt="Market Cycles" class="img-fluid rounded-3 mb-3">
-        <h5 class="tittle-blog">How Market Cycles Affect Mutual Fund Returns</h5>
+        <h5 class="home-tittle-blog">How Market Cycles Affect Mutual Fund Returns</h5>
         <p class="time">7 min read</p>
         <p class="desc-blog">
           Markets rise and fall — but how does that impact your mutual fund investments? Learn how long-term compounding