Working on about page

css/style.css

@@ -1092,12 +1092,11 @@ span.textaccor {
 
 /* about history text */
 .about-stats-section {
-  min-height: 600px;
   background-color: #fff;
 }
 
 .about-stats-section .container {
-  padding-top: 60px;
+  padding: 60px ;
 }
 
 .about-text {
@@ -1176,12 +1175,11 @@ span.textaccor {
 
 .history_animation {
   background: #131313;
-  height: 650px;
-}
-.history_animation .container {
-  padding-top: 60px;
+  padding: 60px 0;
+ 
 }
 
+
 .history_animation .container .title {
   text-align: left;
   color: white;
@@ -1302,14 +1300,34 @@ span.textaccor {
 =========================== */
 .swiper {
   width: 100%;
-  height: 300px;
+  
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
-  padding: 0 60px;
+
   box-sizing: border-box;
 }
+.swiper-slide {
+  opacity: 0;
+  transform: scale(1.05); /* slightly zoomed out initially */
+  transition: 
+   opacity 1.2s ease-in-out,
+    transform 2s ease-in-out,
+    visibility 1.2 ease-in-out; /* slower for smooth zoom */
+  visibility: hidden;
+}
+
+.swiper-slide-active {
+  opacity: 1;
+  transform: scale(1); /* zooms in smoothly */
+  visibility: visible;
+}
+.swiper-slide-prev {
+  opacity: 0; /* fades out smoothly */
+  transform: scale(1.05);
+  visibility: hidden;
+}
 
 .swiper-wrapper {
   display: flex;
@@ -1506,12 +1524,12 @@ span.textaccor {
     flex-direction: column;
     gap: 30px;
   }
-  .mySwiper2 img {
-  width: 50px;
-  height: 50px;
-  object-fit: contain;
-  display: block;
-  margin: 0; /* small bottom margin to reduce space */
+  .mySwiper2 .mobile-hight {
+  min-width: 50px ;
+  min-height: 50px ;
+  object-fit: contain ;
+  display: block ;
+  margin: 0 ; /* small bottom margin to reduce space */
 }
 
   .stat-border::before {
@@ -1588,7 +1606,7 @@ span.textaccor {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
-    height: 320px;
+    /* height: 320px; */
   }
 
   .advantage-card::before {
@@ -1909,9 +1927,7 @@ span.textaccor {
   }
 
   .about-stats-section .container {
-    padding-left: 25px;
-    padding-right: 25px;
-    padding-top: 60px;
+    padding: 60px 25px ;
   }
 
   .about-text {
@@ -1957,7 +1973,6 @@ span.textaccor {
     display: flex;
     justify-content: center;
     align-items: center;  
-    padding-bottom: 12vh;
   }
 
   .about-as-of-date {
@@ -1968,15 +1983,17 @@ span.textaccor {
     width: 100%;
     overflow-x: scroll;
     overflow-y: hidden;
-    height: 600px;
+    
   }
 
-  .history_animation .container {
-    padding: 60px 0 0 25px;
+  .history_animation{
+    padding: 60px 0 60px 0 !important;
   }
 
   .history_animation .container .title {
     font-size: 32px;
+    padding-left: 25px;
+        padding-right: 25px;
   }
 
   /* .timeline {
@@ -2009,10 +2026,7 @@ span.textaccor {
     font-family: var(--font-primary);
   }
 
-  .swiper {
-    padding: 0;
-    margin-top: -40px;
-  }
+ 
 
   .swiper-slide h2 {
     font-size: 35px;

js/main.js

@@ -192,8 +192,13 @@ function initTimelineSwiper() {
     spaceBetween: 20,
     centeredSlides: true,
     effect: "fade",
+     fadeEffect: {
+    crossFade: true, // 👈 this makes previous slide fade out smoothly
+  },
+ 
+    speed: 2500, // controls fade speed (in ms)
     autoplay: {
-      delay: 3000,
+      delay: 2200,
       disableOnInteraction: false,
     },
     navigation: {
@@ -209,6 +214,7 @@ function initTimelineSwiper() {
   updateTimeline(0);
 }
 
+
 // ===============================
 // ✅ Generic Swiper Init (Other Pages)
 // ===============================

pages/home.html

@@ -96,13 +96,13 @@
 
   <!-- Mobile View (Slider) -->
 <div class="d-block d-md-none">
-  <div class="swiper mySwiper2">
+  <div class="swiper-home mySwiper2">
     <div class="swiper-wrapper">
 
       <div class="swiper-slide">
         <div class="advantage-card">
           <div class="advantage-icon">
-            <img src="./assests/images/icon1.svg" alt="">
+            <img src="./assests/images/icon1.svg" alt="" class="mobile-hight">
           </div>
           <h5 class="advantage-title">Expert Portfolio Management</h5>
           <p class="advantage-text">
@@ -114,7 +114,7 @@
       <div class="swiper-slide">
         <div class="advantage-card">
           <div class="advantage-icon">
-            <img src="./assests/images/icon2.svg" alt="">
+            <img src="./assests/images/icon2.svg" alt=""  class="mobile-hight">
           </div>
           <h5 class="advantage-title">Smarter SIPs, Smoother Growth</h5>
           <p class="advantage-text">
@@ -126,7 +126,7 @@
       <div class="swiper-slide">
         <div class="advantage-card">
           <div class="advantage-icon">
-            <img src="./assests/images/icon3.svg" alt="">
+            <img src="./assests/images/icon3.svg" alt=""  class="mobile-hight">
           </div>
           <h5 class="advantage-title">High-Conviction, Quality Portfolios</h5>
           <p class="advantage-text">
@@ -138,7 +138,7 @@
       <div class="swiper-slide">
         <div class="advantage-card">
           <div class="advantage-icon">
-            <img src="./assests/images/icon4.svg" alt="">
+            <img src="./assests/images/icon4.svg" alt=""  class="mobile-hight">
           </div>
           <h5 class="advantage-title">Low-Cost Access to Global ETFs</h5>
           <p class="advantage-text">