Working on about page

assests/images/1983-Icon.svg

@@ -0,0 +1,5 @@
+<svg width="116" height="94" viewBox="0 0 116 94" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M35.5 1C35.4172 22.666 45.988 34.9894 70 35.5C47.713 35.4172 36.6316 47.368 35.5 70C35.3068 48.6514 25.7434 35.4724 1 35.5C23.149 35.1964 35.4172 24.5014 35.5 1V1Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M91.5 46C91.4436 60.758 98.644 69.1522 115 69.5C99.819 69.4436 92.2708 77.584 91.5 93C91.3684 78.4582 84.8542 69.4812 68 69.5C83.087 69.2932 91.4436 62.0082 91.5 46Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M91.5 1C91.47 8.85 95.3 13.315 104 13.5C95.925 13.47 91.91 17.8 91.5 26C91.43 18.265 87.965 13.49 79 13.5C87.025 13.39 91.47 9.515 91.5 1Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

assests/images/1991-Icon.svg

@@ -0,0 +1,13 @@
+<svg width="94" height="95" viewBox="0 0 94 95" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 65.7578V1.75781H65V29.7578H93V93.7578H29V65.7578H1V65.7578Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M33.002 29.7578H29.002V33.7578" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M29.002 41.7578V45.7578" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M45 29.7578H41" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M57 29.7578H53" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M41 65.7578H37" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M53 65.7578H49" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M29.002 57.7578V53.7578" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M64.998 37.7578V41.7578" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M61 65.7578H65V61.7578" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M64.998 53.7578V49.7578" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

assests/images/2007-Icon.svg

@@ -0,0 +1,5 @@
+<svg width="84" height="84" viewBox="0 0 84 84" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M72.3053 72.3006V36.6484H83.0009V82.9963H33.0879V72.3006H72.3053V72.3006Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.2609 15.2609V50.913H1V1H47.3478V15.2609H15.2609V15.2609Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M25.957 61.6053H61.6092V25.9531H25.957V61.6053Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

assests/images/2008-Icon.svg

@@ -0,0 +1,10 @@
+<svg width="84" height="84" viewBox="0 0 84 84" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M75.8691 22.1484V61.3658" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M22.3906 7.89062H61.608" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.13086 61.3658V22.1484" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M61.608 75.625H22.3906" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M82.9992 7.88825C82.9992 11.8242 79.8083 15.0187 75.8687 15.0187C71.9327 15.0187 68.7383 11.8242 68.7383 7.88825C68.7383 3.95225 71.9327 0.757812 75.8687 0.757812C79.8083 0.757812 82.9992 3.95225 82.9992 7.88825V7.88825Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 7.88825C1 11.8242 4.19443 15.0187 8.13043 15.0187C12.07 15.0187 15.2609 11.8242 15.2609 7.88825C15.2609 3.95225 12.07 0.757812 8.13043 0.757812C4.19443 0.757812 1 3.95225 1 7.88825V7.88825Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M82.9992 75.6304C82.9992 71.6944 79.8083 68.5 75.8687 68.5C71.9327 68.5 68.7383 71.6944 68.7383 75.6304C68.7383 79.5664 71.9327 82.7609 75.8687 82.7609C79.8083 82.7609 82.9992 79.5664 82.9992 75.6304V75.6304Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 75.6304C1 71.6944 4.19443 68.5 8.13043 68.5C12.07 68.5 15.2609 71.6944 15.2609 75.6304C15.2609 79.5664 12.07 82.7609 8.13043 82.7609C4.19443 82.7609 1 79.5664 1 75.6304V75.6304Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

assests/images/2013-Icon.svg

@@ -0,0 +1,3 @@
+<svg width="78" height="75" viewBox="0 0 78 75" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M47.7295 29.2422L47.8418 29.5879H76.4541L53.6006 46.1924L53.3066 46.4062L53.4189 46.752L62.1484 73.6182L39.2939 57.0137L39 56.8008L38.7061 57.0137L15.8506 73.6182L24.5811 46.752L24.6934 46.4062L24.3994 46.1924L1.5459 29.5879H30.1582L30.2705 29.2422L39 2.375L47.7295 29.2422Z" stroke="white"/>
+</svg>

assests/images/2015-Icon.svg

@@ -0,0 +1,6 @@
+<svg width="84" height="84" viewBox="0 0 84 84" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M41.8949 11.4531L45.4601 18.5836H52.5905L46.8256 22.9866L49.0253 31.0618L41.8949 25.714L34.7644 31.0618L37.5988 22.9866L31.1992 18.5836H38.3297L41.8949 11.4531V11.4531Z" stroke="white" stroke-linejoin="round"/>
+<path d="M17.5017 36.4124C-0.324405 36.4124 1.02325 12.8142 1.02325 7.89062H10.0611" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M66.4199 36.4124C84.246 36.4124 83.0017 12.8142 83.0017 7.89062H73.8641" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M74.1075 0.757812H9.93359C9.93359 55.7834 38.3305 40.1677 38.3305 59.5839C38.1059 72.0622 32.259 75.6274 22.4119 75.6274V82.7578H61.6292V75.6274C51.7821 75.6274 45.461 72.0622 45.461 59.5839C45.461 40.1428 74.1075 55.5552 74.1075 0.757812V0.757812Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

assests/images/2016-Icon.svg

@@ -0,0 +1,17 @@
+<svg width="83" height="87" viewBox="0 0 83 87" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.1956 71.9293H82.5V0.625H11.1956V71.9293Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M43.2826 39.8425L71.8043 11.3208" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M53.9783 11.3208H71.8043V29.1469" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.06522 46.9727H0.5V50.5379" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M0.5 57.6685V61.2337" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.7609 46.9727H11.1956" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M25.4565 46.9727H21.8913" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.7609 82.625H11.1956" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M25.4565 82.625H21.8913" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.06522 82.6248H0.5V79.0596" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M0.5 71.9295V68.3643" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M32.587 46.9727H36.1522V50.5379" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M36.1522 57.6685V61.2337" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M32.587 82.6248H36.1522V79.0596" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M36.1522 71.9295V68.3643" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

css/fonts.css

@@ -1,4 +1,4 @@
 @font-face {
   font-family: "Larken";
-  src: url("../assests/fonts/LarkenDEMO-Regular.otf") format("opentype");
+  src: url("../assests/fonts/Larken-Regular.otf") format("opentype");
 }

css/style.css

@@ -8,10 +8,8 @@
   /* for headings or special text */
 }
 
-a
+a {
-
+  text-decoration: none;
- {
-    text-decoration: none;
 }
 
 .navbar {
@@ -212,7 +210,6 @@ a.color-a {
   color: #fff;
 }
 
-
 /* Footer */
 
 /* Floating WhatsApp Icon */
@@ -225,7 +222,7 @@ a.color-a {
   border-radius: 50%;
   text-align: center;
   font-size: 28px;
-  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   width: 55px;
   height: 55px;
   display: flex;
@@ -370,11 +367,11 @@ a.color-a {
 .ask-advantage2 {
   padding: 0px 0px 60px 0px;
 }
- .ask-advantage2 {
+.ask-advantage2 {
-        padding: 0px 0px 60px 0px;
+  padding: 0px 0px 60px 0px;
-    }
+}
-    .ask-advantage-scroll {
+.ask-advantage-scroll {
-    padding: 60px 0 0 0;
+  padding: 60px 0 0 0;
 }
 
 .ask-advantage h2 {
@@ -420,8 +417,7 @@ a.color-a {
 }
 
 .advantage-icon {
-  color: #b18b4b;
+  
-  font-size: 32px;
   margin-bottom: 15px;
 }
 
@@ -998,9 +994,8 @@ span.textaccor {
 /* our-fund */
 
 .ask-advantage3 {
-    padding: 60px 0;
+  padding: 60px 0;
-    background-image: url("../assests/images/Our-Funds-back.svg");
+  background-image: url("../assests/images/Our-Funds-back.svg");
- 
 }
 
 .coming-soon-container {
@@ -1058,20 +1053,19 @@ span.textaccor {
 
 /* about hero*/
 .hero_banner {
-  background: url("../assests/images/about-banner-img.png") no-repeat;
+  background: url("../assests/images/about-banner-img.svg") no-repeat;
   background-position: center;
   background-size: cover;
-  height: 420px;
+  height: 70vh;
   position: relative;
 }
 
 .banner_overlay {
-  width: 100%;
+  width: 95%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0 7rem;
 }
 
 .hero_content {
@@ -1080,17 +1074,17 @@ span.textaccor {
 
 .hero_content .heading {
   font-size: 50px;
-  font-weight: 500;
+  font-weight: 400;
   color: white;
   font-family: var(--font-secondary);
-  margin: 0;
   line-height: 1.2;
+  margin: 0;
 }
 
 .hero_content .sub-heading {
   font-size: 24px;
   line-height: 30px;
-  font-weight: 600;
+  font-weight: 400;
   color: white;
   font-family: var(--font-primary);
   margin-top: 18px;
@@ -1098,15 +1092,11 @@ span.textaccor {
 
 /* about history text */
 .about-stats-section {
-  height: 600px;
   background-color: #fff;
-  color: #0a1f2b;
-  line-height: 1.7;
 }
 
 .about-stats-section .container {
-  padding-top: 60px;
+  padding: 60px ;
-  padding-left: 10px;
 }
 
 .about-text {
@@ -1135,7 +1125,16 @@ span.textaccor {
   position: relative;
 }
 
-.about-stat-border::before {
+.about-stat-box {
+  border-right: 1px solid #b18c4a;
+  /* width: 236px; */
+  box-sizing: border-box;
+}
+
+.last-box {
+  border-right: none;
+}
+/* .about-stat-border::before {
   content: "";
   position: absolute;
   left: 0;
@@ -1144,7 +1143,7 @@ span.textaccor {
   width: 1px;
   height: 112px;
   background-color: #b18c4a;
-}
+} */
 
 .about-stat-box h3 {
   font-size: 40px;
@@ -1174,19 +1173,17 @@ span.textaccor {
 
 /* about history animation */
 
-.history_animation{
+.history_animation {
-    background: #131313;
+  background: #131313;
-    height: 718px;
+  padding: 60px 0;
-}
+ 
-.history_animation .container {
-  padding-top: 60px;
-  padding-left: 10px;
 }
 
-.history_animation .container .title{
+
-    text-align: left;
+.history_animation .container .title {
-    color: white;
+  text-align: left;
-    font-family: var(--font-secondary);
+  color: white;
+  font-family: var(--font-secondary);
 }
 
 /* ===========================
@@ -1225,13 +1222,12 @@ span.textaccor {
   left: 50%;
   transform: translateX(-50%);
   font-size: 16px;
-  color: #3E3F3F;
+  color: #3e3f3f;
   font-weight: 400;
   white-space: nowrap;
   font-family: var(--font-primary);
 }
 
-
 /* ===========================
    Kite Style
 =========================== */
@@ -1296,7 +1292,7 @@ span.textaccor {
   z-index: 0;
   transform-origin: left;
   width: 0;
-  transition: left 0.45s linear, width 0.45s linear; /* animate both */
+  transition: left 0.45s linear, width 0.45s linear;
 }
 
 /* ===========================
@@ -1304,19 +1300,39 @@ 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;
   align-items: center;
-  gap: 1px; /* added subtle gap between slides */
+  gap: 1px;
 }
 
 .swiper-slide {
@@ -1326,32 +1342,32 @@ span.textaccor {
   align-items: center;
   text-align: center;
   background: #131313;
-  gap: 2px; /* reduced gap between slide elements */
+  gap: 2px;
 }
 
 .swiper-slide img {
-  width: 82px;
+  min-width: 82px;
-  height: 82px;
+  min-height: 82px;
-  object-fit: contain;
+  object-fit: cover;
   display: block;
-  margin: 0 auto 2px; /* small bottom margin to reduce space */
+  margin: 0 auto 2px;
 }
 
 .swiper-slide h2 {
   font-size: 40px;
   color: #b18c4a;
-  margin: 0 0 10px 0; /* small margin below heading */
+  margin: 0 0 10px 0;
 }
 
 .swiper-slide .heading {
   color: #b18c4a;
   text-align: center;
-  line-height: 1.3; /* tighter line height */
+  line-height: 1.3;
-  margin: 0 0 2px 0; /* small margin below heading */
+  margin: 0 0 2px 0;
 }
 
 .swiper-slide .sub-heading-container {
-  width: 420px;
+  width: 723px;
   display: flex;
   flex-direction: column;
   margin: 0 auto;
@@ -1359,11 +1375,10 @@ span.textaccor {
 
 .swiper-slide .sub-heading-container p {
   color: #fff;
-  margin: 0; /* remove default margin */
+  margin: 0;
-  line-height: 1.4; /* tighter line height */
+  line-height: 1.4;
 }
 
-
 /* ===========================
    Swiper Navigation
 =========================== */
@@ -1371,7 +1386,12 @@ span.textaccor {
 .swiper-button-next {
   top: 50%;
   transform: translateY(-50%);
-  color: #fff;
+  color: #b18c4a;
+}
+
+.swiper-button-prev::after,
+.swiper-button-next::after {
+  font-size: 25px;
 }
 
 .swiper-button-prev {
@@ -1382,15 +1402,46 @@ span.textaccor {
   right: 10px;
 }
 
-
 /* blog */
 
 .blog-banner {
-  background-image: url("../assests/images/blog-banner.svg");
+  position: relative;
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
   height: 70vh;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+}
+
+/* Background video setup */
+.blog-banner video {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: 0;
+}
+
+/* Optional dark overlay for readability */
+.blog-banner::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 0;
+}
+
+/* Content on top of video */
+.blog-aling {
+  position: relative;
+  z-index: 1;
+  text-align: left;
 }
 .blog-tittle-banner {
   font-family: var(--font-secondary);
@@ -1408,6 +1459,7 @@ span.textaccor {
   line-height: 100%;
   text-transform: capitalize;
   color: #b18c4a;
+  
 }
 .blog-aling {
   align-items: center;
@@ -1472,6 +1524,13 @@ span.textaccor {
     flex-direction: column;
     gap: 30px;
   }
+  .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 {
     content: "";
@@ -1538,7 +1597,7 @@ span.textaccor {
   .advantage-card {
     background: #fff;
     box-shadow: 0px 2px 8px 0px #0000001f;
-    padding: 30px 40px;
+    padding: 30px 30px;
     text-align: left;
     position: relative;
     transition: all 0.3s ease;
@@ -1547,7 +1606,7 @@ span.textaccor {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
-    height: 320px;
+    /* height: 320px; */
   }
 
   .advantage-card::before {
@@ -1560,6 +1619,14 @@ span.textaccor {
     background-color: #b18c4a;
     /* gold line */
   }
+  .advantage-icon
+
+ {
+    margin-bottom: 15px;
+    width: 100%;
+    display: flex;
+    justify-content: flex-start !important;
+}
 
   .arrow {
     display: none;
@@ -1581,6 +1648,11 @@ span.textaccor {
     /* show mobile arrow on mobile */
   }
 
+  
+
+.mySwiper2 {
+    height: 338px !important;
+}
   .offcanvas-body img {
     width: 100%;
     height: auto;
@@ -1689,7 +1761,7 @@ span.textaccor {
 
   .swiper-slide {
     display: flex;
-    justify-content: center;
+    justify-content: end;
     align-items: stretch;
     /* 👈 ensures equal height */
   }
@@ -1830,12 +1902,160 @@ span.textaccor {
     font-size: 12px;
   }
 
-
   /* mobile about-page */
+  .hero_banner {
+    background: url("../assests/images/mobile-about-banner.svg") no-repeat;
+    background-position: center;
+    background-size: cover;
+    height: 70vh;
+  }
 
+  .banner_overlay {
+    padding: 0 25px;
+  }
 
-  /*  */
+  .hero_content .heading:nth-child(3) {
+    display: none;
+  }
 
+  .hero_content .heading {
+    font-size: 40px;
+  }
+
+  .hero_content .sub-heading {
+    font-size: 16px;
+  }
+
+  .about-stats-section .container {
+    padding: 60px 25px ;
+  }
+
+  .about-text {
+    font-size: 16px;
+  }
+
+  .about-sub-text {
+    font-size: 16px;
+  }
+
+  .about-stats-row {
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .about-stat-box {
+    border-bottom: 1px solid #033a49;
+    border-right: none;
+    width: 200px;
+    box-sizing: border-box;
+    /* margin-bottom: 20px; */
+    margin: 0 auto 20px auto;
+  }
+
+  .last-box {
+    border-bottom: none;
+  }
+
+  .about-stat-box h3 {
+    font-size: 32px;
+    line-height: 42px;
+    text-align: center;
+  }
+
+  .about-stat-box p {
+    font-size: 16px;
+    text-align: center;
+    margin-bottom: 30px;
+  }
+
+  .month-date-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;  
+  }
+
+  .about-as-of-date {
+    font-weight: 400;
+  }
+
+  .history_animation {
+    width: 100%;
+    overflow-x: scroll;
+    overflow-y: hidden;
+    
+  }
+
+  .history_animation{
+    padding: 60px 0 60px 0 !important;
+  }
+
+  .history_animation .container .title {
+    font-size: 32px;
+    padding-left: 25px;
+        padding-right: 25px;
+  }
+
+  /* .timeline {
+    min-width: 1200px;
+    overflow: visible;
+    position: relative;
+  } */
+
+  .timeline::before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 10px;
+    right: 10px;
+    height: 1px;
+    background: #b18b4a65;
+    transform: translateY(-50%);
+    z-index: 0;
+  }
+
+  .timeline li::before {
+    content: attr(data-year);
+    position: absolute;
+    left: 8%;
+    transform: translateX(-50%);
+    font-size: 18px;
+    color: #3e3f3f;
+    font-weight: 600;
+    white-space: nowrap;
+    font-family: var(--font-primary);
+  }
+
+ 
+
+  .swiper-slide h2 {
+    font-size: 35px;
+  }
+
+  .swiper-slide img {
+    min-width: 82px;
+    min-height: 66px;
+    object-fit: cover;
+    display: block;
+    margin: 0 auto 2px;
+  }
+
+  .swiper-slide .sub-heading-container {
+    width: 285px;
+  }
+
+  .swiper-slide .heading,
+  .swiper-slide .sub-heading-container p {
+    font-size: 14px;
+  }
+
+  .swiper-button-prev {
+    left: 5px;
+  }
+
+  .swiper-button-next {
+    right: 5px;
+  }
 
   .blog-tittle-banner {
     font-size: 40px;
@@ -1861,7 +2081,6 @@ span.textaccor {
   .navbar {
     background-color: #033a4900;
     padding: 0 0;
- 
   }
   .navbar-collapse.show {
     z-index: 999;
@@ -1873,7 +2092,7 @@ span.textaccor {
     width: 100%;
     background: #fff;
     border-bottom: 1px solid #033a49;
-}
+  }
 
   .container,
   .container-md,
@@ -2012,16 +2231,7 @@ span.textaccor {
   .container.blog-aling {
     padding: 0 20px;
   }
-   .ask-advantage-scroll {
+  .ask-advantage-scroll {
     padding: 60px 25px 0 25px !important;
+  }
 }
-}
-
-
-
-
-
-
-
-
-

css/testing.css

@@ -41,11 +41,14 @@ section.ask-advantage-scroll {
   flex-wrap: wrap;
   justify-content: center;
   margin-top: 60px;
+  
 }
 
+
 .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 */
@@ -57,11 +60,12 @@ section.ask-advantage-scroll {
   display: flex;
   flex-direction: row;
   border: 1px solid #E6E7E8;
-  box-shadow: 0px 0px 14px 0px #0000000D;
+  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;
 }
 
 .card-content {
@@ -70,6 +74,8 @@ section.ask-advantage-scroll {
 }
 .card-image {
     width: 40%;
+    display: flex;
+    align-items: end;
 }
 
 
@@ -205,7 +211,7 @@ color: #3E3F3F;
 
 .cards-wrapper {
   position: relative;
-  height: 600px;   /* ya jitna aapko chahiye ho */
+  height: 530px;   /* ya jitna aapko chahiye ho */
   overflow: hidden;
 }
 

js/main.js

@@ -1,17 +1,18 @@
 // ===============================
 // ✅ Load Header & Footer
 // ===============================
-['header', 'footer'].forEach(id => {
+["header", "footer"].forEach((id) => {
-  const file = id === 'header' ? 'components/header.html' : 'components/footer.html';
+  const file =
+    id === "header" ? "components/header.html" : "components/footer.html";
   fetch(file)
-    .then(res => res.text())
+    .then((res) => res.text())
-    .then(html => {
+    .then((html) => {
       const mount = document.getElementById(id);
       if (!mount) return;
       mount.innerHTML = html;
-      if (id === 'header') {
+      if (id === "header") {
-        const script = document.createElement('script');
+        const script = document.createElement("script");
-        script.src = 'js/navbar.js';
+        script.src = "js/navbar.js";
         script.defer = true;
         document.body.appendChild(script);
       }
@@ -35,88 +36,140 @@ const routes = {
 // ===============================
 const timelineData = {
   1983: {
-    icon: "../assests/images/1983-Icon.png",
+    icon: "../assests/images/1983-Icon.svg",
     heading: "The beginning",
-    sub: "Set up by Mr. Asit Koticha and Mr. Sameer Koticha, ASK Group offers research-based Investment advisory."
+    sub1: "Set up by Mr. Asit Koticha and Mr. Sameer Koticha,",
+    sub2: "ASK Group offers research-based Investment advisory",
+    sub3: "",
   },
   1991: {
-    icon: "../assests/images/1991-Icon.png",
+    icon: "../assests/images/1991-Icon.svg",
     heading: "ASK Raymond James",
-    sub: "ASK Group and Raymond James Financial enter into a Partnership."
+    sub1: "ASK Group and Raymond James",
+    sub2: "Financial enter into a Partnership",
+    sub3: "",
   },
   2007: {
-    icon: "../assests/images/2007-Icon.png",
+    icon: "../assests/images/2007-Icon.svg",
     heading: "Launch of ASK Wealth Advisors",
-    sub: "Raymond James Financial partnership exits."
+    sub1: "Raymond James Financial partnership exits.",
+    sub2: "",
+    sub3: "",
   },
   2008: {
-    icon: "../assests/images/2008-Icon.png",
+    icon: "../assests/images/2008-Icon.svg",
     heading: "Launch of ASK multi-family office",
-    sub: ""
+    sub1: "",
+    sub2: "",
+    sub3: "",
   },
   2013: {
-    icon: "../assests/images/2013-Icon.png",
+    icon: "../assests/images/2013-Icon.svg",
     heading: "License from SEBI",
-    sub: "ASK Wealth Advisors receives an Investment Advisor License from SEBI."
+    sub1: "ASK Wealth Advisors receives an",
+    sub2: "Investment Advisor License from SEBI.",
+    sub3: "",
   },
   2015: {
-    icon: "../assests/images/2015-Icon.png",
+    icon: "../assests/images/2015-Icon.svg",
-    heading: "Best Independent Wealth Advisor",
+    heading: "ASK Wealth Advisors adjudged",
-    sub: "ASK Wealth Advisors adjudged 'the best Independent Wealth Advisor, 2015' by Wealth Briefing, Asia."
+    sub1: ` "the best Independent Wealth Advisor, 2015" `,
+    sub2: "by Wealth Briefing, Asia.",
+    sub3: "",
   },
   2016: {
-    icon: "../assests/images/2016-Icon.png",
+    icon: "../assests/images/2016-Icon.svg",
+    mobileIcon: "../assests/images/2016-Mobile-Icon.svg",
     heading: "",
-    sub: "Advent International acquires minority stake in ASK Group."
+    sub1: "Advert International acquires minority ",
+    sub2: "stake in ASK Group.",
+    sub3: "",
   },
   2017: {
-    icon: "../assests/images/2015-Icon.png",
+    icon: "../assests/images/2015-Icon.svg",
-    heading: "",
+    heading: "ASK Wealth Advisors adjudged",
-    sub: "ASK Wealth Advisors adjudged 'One to Watch - Wealth Manager - India Domestic' - Distinction, 2017 by Asian Private Banker."
+    sub1: `"One to Watch - Wealth Manager - India Domestic" - Distinction, 2017"`,
+    sub2: "by Asian Private Banker.",
+    sub3: "",
   },
   2018: {
-    icon: "../assests/images/2015-Icon.png",
+    icon: "../assests/images/2015-Icon.svg",
-    heading: "ASK launches its first offshore fund - ASK Global Strategies Fund",
+    heading:
-    sub: "TWICE IN A ROW: ASK Wealth advisors adjudged 'Best Performing Financial Advisor' - Wealth 2016-17 by UTI MF & CNBC TV18."
+      "ASK launches its first offshore fund - ASK Global Strategies Fund",
+    sub1: "TWICE IN A ROW:",
+    sub2: " ASK Wealth advisors adjudged",
+    sub3: `"Best Performing Financial Advisor"-Wealth 2016-17 by UTI MF & CNBC TV18.`,
   },
   2019: {
-    icon: "../assests/images/1983-Icon.png",
+    icon: "../assests/images/1983-Icon.svg",
     heading: "Hall of Fame",
-    sub: "ASK Wealth Advisors inducted into the 'Hall of Fame' at the Financial Advisor Awards for 2018-19 and 2019-20 by UTI MF & CNBC TV18."
+    sub1: `ASK Wealth Advisors inducted into the "Hall of Fame"`,
+    sub2: "at the Financial Advisor Awards for the Years ",
+    sub3: "2018-19 and 2019-20 by UTI MF & CNBC TV18.",
   },
   2020: {
-    icon: "../assests/images/2015-Icon.png",
+    icon: "../assests/images/2015-Icon.svg",
     heading: "Outstanding Private Bank",
-    sub: "Outstanding Private Bank for UNHW clients at the Private Banker International Global Wealth Summit & Awards 2020, Singapore."
+    sub1: "Outstanding Private Bank for UNHW clients  ",
+    sub2: "at the Private Banker International Global",
+    sub3: "Wealth Summit & Awards 2020, Singapore.",
   },
   2022: {
-    icon: "../assests/images/2022-icon.png",
+    icon: "../assests/images/2022-Icon.svg",
     heading: "Blackstone Acquisition",
-    sub: "Blackstone acquires majority stake in ASK Group. Advent International exits."
+    sub1: "Blackstone acquires majority stake in ",
-  }
+    sub2: "ASK Group, Advert International exits.",
+    sub3: "",
+  },
 };
 
 // ===============================
 // ✅ Initialize Timeline & Swiper
 // ===============================
 function initTimelineSwiper() {
-  const swiperWrapper = document.querySelector(".swiper-wrapper");
+   const swiperWrapper = document.querySelector(".swiper-wrapper");
   const timelineItems = document.querySelectorAll(".timeline-item");
   if (!swiperWrapper || !timelineItems.length) return;
 
-  // Generate Swiper slides
+  // ✅ Check if screen width is 768px or below
+  const isMobile = window.matchMedia("(max-width: 768px)").matches;
+
   swiperWrapper.innerHTML = "";
-  timelineItems.forEach((item) => {
+  Object.keys(timelineData).forEach((year) => {
-    const year = item.dataset.year;
+    const content = timelineData[year];
-    const content = timelineData[year] || { icon: "", heading: "", sub: "" };
     const slide = document.createElement("div");
     slide.classList.add("swiper-slide");
+
+    // ✅ Use mobile icon if on mobile, else desktop
+    const iconToUse = isMobile && content.mobileIcon ? content.mobileIcon : content.icon;
+
+    const headingColor = ["2015", "2017", "2018"].includes(year)
+      ? "#ffffff"
+      : "#b18c4a";
+    const sub1Color = ["2015", "2017", "2018"].includes(year)
+      ? "#b18c4a"
+      : "#ffffff";
+    const customTopPad = ["2018"].includes(year) ? "1rem" : "";
+
     slide.innerHTML = `
-      ${content.icon ? `<img src="${content.icon}" alt="icon" />` : ""}
+      ${iconToUse ? `<img src="${iconToUse}" alt="icon" />` : ""}
       <h2>${year}</h2>
-      ${content.heading ? `<p class="heading">${content.heading}</p>` : ""}
+      ${
-      ${content.sub ? `<div class="sub-heading-container"><p>${content.sub}</p></div>` : ""}
+        content.heading
+          ? `<p class="heading" style="color:${headingColor};">${content.heading}</p>`
+          : ""
+      }
+      <div class="sub-heading-container">
+        ${
+          content.sub1
+            ? `<p style="color:${sub1Color}; padding-top:${customTopPad}">${content.sub1}</p>`
+            : ""
+        }
+        ${content.sub2 ? `<p>${content.sub2}</p>` : ""}
+        ${content.sub3 ? `<p>${content.sub3}</p>` : ""}
+      </div>
     `;
+
     swiperWrapper.appendChild(slide);
   });
 
@@ -128,7 +181,8 @@ function initTimelineSwiper() {
     timelineItems.forEach((item, i) => {
       item.classList.toggle("active", i === index);
     });
-    const timelineWidth = document.querySelector(".timeline").offsetWidth - 10;
+    const timelineWidth =
+      document.querySelector(".timeline")?.offsetWidth - 20;
     const newWidth = (timelineWidth / (totalKites - 1)) * index;
     if (lineFill) lineFill.style.width = newWidth + "px";
   }
@@ -138,14 +192,19 @@ 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: 2500,
+      delay: 2200,
       disableOnInteraction: false,
     },
     navigation: {
       nextEl: ".swiper-button-next",
       prevEl: ".swiper-button-prev",
-    }
+    },
   });
 
   swiper.on("slideChange", () => {
@@ -155,12 +214,13 @@ function initTimelineSwiper() {
   updateTimeline(0);
 }
 
+
 // ===============================
 // ✅ Generic Swiper Init (Other Pages)
 // ===============================
 function initSwiper() {
-  if (document.querySelector(".mySwiper")) {
+  if (document.querySelector(".mySwiper2")) {
-    new Swiper(".mySwiper", {
+    new Swiper(".mySwiper2", {
       slidesPerView: 1.2,
       spaceBetween: 20,
       loop: true,
@@ -181,33 +241,36 @@ window.openDrawer = function (name, role, img, desc) {
   document.getElementById("drawerImg").src = img;
   document.getElementById("drawerDesc").innerHTML = desc;
 
-  const drawer = bootstrap.Offcanvas.getOrCreateInstance(document.getElementById('teamDrawer'));
+  const drawer = bootstrap.Offcanvas.getOrCreateInstance(
+    document.getElementById("teamDrawer")
+  );
   drawer.show();
 };
 
-// ===============================
+
-// ✅ GSAP Stack Scroll Animation
+
-// ===============================
+
 let cards = [];
 let currentIndex = 0;
 let animating = false;
 let isInsideSection = false;
 
 function initGsapStackScroll() {
-  const section = document.querySelector('.cards-wrapper');
+  const section = document.querySelector(".cards-wrapper");
   if (!section) return;
-  
+
   cards = Array.from(section.querySelectorAll('.card-scroll'));
   if (!cards.length) return;
 
-  gsap.set(cards, { opacity: 0, y: "100%" });
+  // Hide all cards initially, show the first one
-  gsap.set(cards[0], { opacity: 1, y: "0%" });
+  gsap.set(cards, { opacity: 0, y: "100%", zIndex: 0 });
+  gsap.set(cards[0], { opacity: 1, y: "0px", zIndex: 4 });
   currentIndex = 0;
 
-  section.addEventListener('mouseenter', () => { isInsideSection = true; });
+  section.addEventListener('mouseenter', () => (isInsideSection = true));
-  section.addEventListener('mouseleave', () => { isInsideSection = false; });
+  section.addEventListener('mouseleave', () => (isInsideSection = false));
 
-  window.removeEventListener('wheel', window._gsapStackHandler);
+  window.removeEventListener("wheel", window._gsapStackHandler);
   window._gsapStackHandler = function (e) {
     if (!isInsideSection) return;
     e.preventDefault();
@@ -219,6 +282,7 @@ function initGsapStackScroll() {
       showPrevGsapCard();
     }
   };
+
   window.addEventListener('wheel', window._gsapStackHandler, { passive: false });
 }
 
@@ -229,10 +293,32 @@ function showNextGsapCard() {
   const current = cards[currentIndex];
   const next = cards[currentIndex + 1];
 
-  gsap.to(current, { y: "-100%", opacity: 0, duration: 0.8, ease: "power2.inOut" });
+  // Animate current card (move it to previous stack position)
-  gsap.fromTo(next,
+  gsap.to(current, {
-    { y: "100%", opacity: 0 },
+    y: "40px",
-    { y: "0%", opacity: 1, duration: 0.8, ease: "power2.inOut", onComplete: () => animating = false }
+    scale: 0.95,
+    opacity: 1,
+    duration: 0.8,
+    ease: "power2.inOut",
+    onComplete: () => current.classList.add("previous")
+  });
+
+  // Animate next card (slide in from below and become active)
+  gsap.set(next, { zIndex: 5 }); // Active card gets highest z-index
+  gsap.fromTo(
+    next,
+    { y: "100%", opacity: 0, scale: 1 },
+    {
+      y: "60px", // Active card position
+      opacity: 1,
+      scale: 1,
+      duration: 0.8,
+      ease: "power2.inOut",
+      onComplete: () => {
+        adjustPreviousCards();
+        animating = false;
+      },
+    }
   );
 
   currentIndex++;
@@ -245,15 +331,71 @@ function showPrevGsapCard() {
   const current = cards[currentIndex];
   const prev = cards[currentIndex - 1];
 
-  gsap.to(current, { y: "100%", opacity: 0, duration: 0.8, ease: "power2.inOut" });
+  // Hide current card (slide it down)
-  gsap.fromTo(prev,
+  gsap.to(current, {
-    { y: "-100%", opacity: 0 },
+    y: "100%",
-    { y: "0%", opacity: 1, duration: 0.8, ease: "power2.inOut", onComplete: () => animating = false }
+    opacity: 0,
-  );
+    duration: 0.8,
+    ease: "power2.inOut",
+    onComplete: () => current.classList.remove("previous")
+  });
+
+  // Bring back previous card as active
+  gsap.set(prev, { zIndex: 5 }); // Active card gets highest z-index
+  gsap.to(prev, {
+    y: "60px", // Active card position
+    opacity: 1,
+    scale: 1,
+    duration: 0.8,
+    ease: "power2.inOut",
+    onComplete: () => {
+      adjustPreviousCards();
+      animating = false;
+    },
+  });
 
   currentIndex--;
 }
 
+// 🪄 Adjust visible cards (up to 4-layer stack including active card)
+function adjustPreviousCards() {
+  // Reset all cards to default state
+  gsap.set(cards, { opacity: 0, y: "100%", zIndex: 0 });
+  
+  // Always show the current active card
+  if (cards[currentIndex]) {
+    gsap.set(cards[currentIndex], { 
+      y: "60px", 
+      scale: 1, 
+      opacity: 1, 
+      zIndex: 5 
+    });
+  }
+
+  // Show up to 3 previous cards in the stack
+  for (let i = 1; i <= 3; i++) {
+    const prevIndex = currentIndex - i;
+    if (prevIndex >= 0) {
+      const yOffset = 60 - (i * 30); // 60px, 40px, 20px, 0px
+      const scale = 1 - (i * 0.05); // 1, 0.95, 0.9, 0.85
+      const zIndex = 5 - i; // 5, 4, 3, 2
+      
+      gsap.set(cards[prevIndex], { 
+        y: `${yOffset}px`, 
+        scale: scale, 
+        opacity: 1, 
+        zIndex: zIndex 
+      });
+    }
+  }
+}
+
+document.addEventListener("DOMContentLoaded", initGsapStackScroll);
+
+
+
+
+
 // ===============================
 // ✅ Load Page Content Dynamically
 // ===============================
@@ -262,8 +404,8 @@ function loadPage() {
   const page = routes[hash] || routes["#/"];
 
   fetch(page)
-    .then(res => res.text())
+    .then((res) => res.text())
-    .then(html => {
+    .then((html) => {
       document.getElementById("page-content").innerHTML = html;
       window.scrollTo({ top: 0, behavior: "smooth" });
 
@@ -273,7 +415,8 @@ function loadPage() {
       initGsapStackScroll();
     })
     .catch(() => {
-      document.getElementById("page-content").innerHTML = "<h2>Page not found</h2>";
+      document.getElementById("page-content").innerHTML =
+        "<h2>Page not found</h2>";
     });
 }
 

pages/about.html

@@ -54,13 +54,13 @@
       </div>
 
       <div class="col-md-3 col-6 about-stat-border width-count4">
-        <div class="about-stat-box">
+        <div class="about-stat-box last-box">
           <h3>29 Years</h3>
           <p>Equity Experience</p>
         </div>
       </div>
     </div>
-    <div class="mt-4">
+    <div class="month-date-container mt-4">
       <span class="about-as-of-date ">As of July 2025</span>
     </div>
   </div>

pages/blog.html

@@ -1,15 +1,19 @@
 <section class="blog-banner">
-  <div  class="container blog-aling" >
+  <video autoplay muted loop playsinline>
-    <div class="row">
+    <source src="./assests/video/vecteezy_a-woman-in-a-business-suit-is-working-on-her-laptop_57327662.mp4" type="video/mp4">
-  <div class="col-md-12 ">
+  </video>
-    <h1 class="blog-tittle-banner">Insights to Grow Your </h1>
-    <p class="blog-text-banner">Wealth Smarter</p>
-  </div>
-</div>  
 
+  <div class="container blog-aling">
+    <div class="row">
+      <div class="col-md-12">
+        <h1 class="blog-tittle-banner">Insights to Grow Your</h1>
+        <p class="blog-text-banner">Wealth Smarter</p>
+      </div>
+    </div>
   </div>
 </section>
 
+
 <section class="ask-advantage container">
    <div class="row">
   <div class="col-md-12">

pages/contact.html

@@ -22,7 +22,9 @@
       <div class="hide-details-conne-dest">
         <img src="./assests/images/contact-call.svg" alt="" style="margin-bottom: 15px;">
         <h4>Call us on</h4>
-        <a href="tel:+91 98765 43210"><p>+91 98765 43210</p></a>
+        <a href="tel:+91 98765 43210">
+          <p>+91 98765 43210</p>
+        </a>
         <p class="size-mobile">Mon–Fri, 10 AM – 6 PM</p>
       </div>
       <div class="hide-details-conne-mobile">
@@ -31,7 +33,9 @@
         </div>
         <div class="hide-details-conne-text">
           <h4>Call us on</h4>
-          <a href="tel:+91 98765 43210"><p>+91 98765 43210</p></a>
+          <a href="tel:+91 98765 43210">
+            <p>+91 98765 43210</p>
+          </a>
           <p class="size-mobile">Mon–Fri, 10 AM – 6 PM</p>
         </div>
       </div>
@@ -41,8 +45,9 @@
       <div class="hide-details-conne-dest">
         <img src="./assests/images/contact-mail.svg" alt="" style="margin-bottom: 15px;">
         <h4>Mail us at</h4>
-        <a href="mailto:ask@gmail.com"><p>ask@gmail.com</p>
+        <a href="mailto:ask@gmail.com">
-        <p class="size-mobile">We'll respond within 24 hours</p>
+          <p>ask@gmail.com</p>
+          <p class="size-mobile">We'll respond within 24 hours</p>
       </div>
       <div class="hide-details-conne-mobile">
         <div class="hide-details-conne-img">
@@ -50,8 +55,9 @@
         </div>
         <div class="hide-details-conne-text">
           <h4>Mail us at</h4>
-          <a href="mailto:ask@gmail.com"><p>ask@gmail.com</p>
+          <a href="mailto:ask@gmail.com">
-          <p class="size-mobile">We'll respond within 24 hours</p>
+            <p>ask@gmail.com</p>
+            <p class="size-mobile">We'll respond within 24 hours</p>
         </div>
       </div>
     </div>
@@ -60,7 +66,9 @@
       <div class="hide-details-conne-dest">
         <img src="./assests/images/contact-whatsapp.svg" alt="" style="margin-bottom: 15px;">
         <h4>WhatsApp service</h4>
-        <a href="tel:+91 98765 43210"><p>+91 98765 43210</p></a>
+        <a href="tel:+91 98765 43210">
+          <p>+91 98765 43210</p>
+        </a>
         <p class="size-mobile">Available 24/7</p>
       </div>
       <div class="hide-details-conne-mobile">
@@ -69,7 +77,9 @@
         </div>
         <div class="hide-details-conne-text">
           <h4>WhatsApp service</h4>
-          <a href="tel:+91 98765 43210"><p>+91 98765 43210</p></a>
+          <a href="tel:+91 98765 43210">
+            <p>+91 98765 43210</p>
+          </a>
           <p class="size-mobile">Available 24/7</p>
         </div>
       </div>
@@ -107,4 +117,121 @@
 
 
 
+</section>
+<section class="ask-advantage2 container " style="margin-top: 60px;">
+  <h2>New to Mutual Funds?</h2>
+  <p class="lead">Here are answers to some common questions we often get</p>
+  <div class="accordion" id="accordionExample">
+    <div class="accordion" id="accordionExample">
+
+      <div class="accordion-item">
+        <h2 class="accordion-header" id="headingOne">
+          <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne"
+            aria-expanded="true" aria-controls="collapseOne">
+            Is it safe to invest in mutual funds?
+          </button>
+        </h2>
+        <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
+          data-bs-parent="#accordionExample">
+          <div class="accordion-body">
+            <span class="textaccor">
+              Mutual funds are regulated by SEBI and offer risk diversification, but returns are not guaranteed and
+              depend on market performance.
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div class="accordion-item">
+        <h2 class="accordion-header" id="headingTwo">
+          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+            data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+            How much money do I need to start?
+          </button>
+        </h2>
+        <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
+          data-bs-parent="#accordionExample">
+          <div class="accordion-body">
+            <span class="textaccor">
+              You can begin investing in most mutual funds with as little as ₹500 via SIP or lump sum.
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div class="accordion-item">
+        <h2 class="accordion-header" id="headingThree">
+          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+            data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
+            Can I withdraw my money anytime?
+          </button>
+        </h2>
+        <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree"
+          data-bs-parent="#accordionExample">
+          <div class="accordion-body">
+            <span class="textaccor">
+              Yes, most open-ended mutual funds allow withdrawals anytime, though some may have exit loads or specific
+              lock-in periods.
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div class="accordion-item">
+        <h2 class="accordion-header" id="headingFour">
+          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+            data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
+            How are mutual funds taxed?
+          </button>
+        </h2>
+        <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour"
+          data-bs-parent="#accordionExample">
+          <div class="accordion-body">
+            <span class="textaccor">
+              Tax is based on the type of fund and holding period, with separate rules for equity and debt funds as per
+              prevailing tax laws.
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div class="accordion-item">
+        <h2 class="accordion-header" id="headingFive">
+          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+            data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
+            Do mutual funds guarantee returns?
+          </button>
+        </h2>
+        <div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive"
+          data-bs-parent="#accordionExample">
+          <div class="accordion-body">
+            <span class="textaccor">
+              No, mutual funds do not guarantee returns; their value fluctuates according to market movements.
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div class="accordion-item">
+        <h2 class="accordion-header" id="headingSix">
+          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+            data-bs-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
+            What is NAV in mutual funds?
+          </button>
+        </h2>
+        <div id="collapseSix" class="accordion-collapse collapse" aria-labelledby="headingSix"
+          data-bs-parent="#accordionExample">
+          <div class="accordion-body">
+            <span class="textaccor">
+              NAV (Net Asset Value) is the per-unit price of a mutual fund, calculated daily after accounting for fund
+              assets and liabilities.
+            </span>
+          </div>
+        </div>
+      </div>
+
+    </div>
+
+  </div>
+
 </section>

pages/home.html

@@ -96,13 +96,13 @@
 
   <!-- Mobile View (Slider) -->
 <div class="d-block d-md-none">
-  <div class="swiper mySwiper">
+  <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">
@@ -324,6 +324,8 @@
 </section>
 
 
+
+
 <section class="ask-advantage container">
   <h2>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>