bug fixed

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/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 {
@@ -997,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 {
@@ -1057,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 {
@@ -1079,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;
@@ -1097,15 +1092,12 @@ span.textaccor {
 
 /* about history text */
 .about-stats-section {
-  height: 600px;
+  min-height: 600px;
   background-color: #fff;
-  color: #0a1f2b;
-  line-height: 1.7;
 }
 
 .about-stats-section .container {
   padding-top: 60px;
-  padding-left: 10px;
 }
 
 .about-text {
@@ -1134,7 +1126,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;
@@ -1143,7 +1144,7 @@ span.textaccor {
   width: 1px;
   height: 112px;
   background-color: #b18c4a;
-}
+} */
 
 .about-stat-box h3 {
   font-size: 40px;
@@ -1173,19 +1174,18 @@ span.textaccor {
 
 /* about history animation */
 
-.history_animation{
+.history_animation {
-    background: #131313;
+  background: #131313;
-    height: 718px;
+  height: 650px;
 }
 .history_animation .container {
   padding-top: 60px;
-  padding-left: 10px;
 }
 
-.history_animation .container .title{
+.history_animation .container .title {
-    text-align: left;
+  text-align: left;
-    color: white;
+  color: white;
-    font-family: var(--font-secondary);
+  font-family: var(--font-secondary);
 }
 
 /* ===========================
@@ -1224,13 +1224,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
 =========================== */
@@ -1295,7 +1294,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;
 }
 
 /* ===========================
@@ -1315,7 +1314,7 @@ span.textaccor {
 .swiper-wrapper {
   display: flex;
   align-items: center;
-  gap: 1px; /* added subtle gap between slides */
+  gap: 1px;
 }
 
 .swiper-slide {
@@ -1325,32 +1324,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;
@@ -1358,11 +1357,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
 =========================== */
@@ -1370,7 +1368,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 {
@@ -1381,7 +1384,6 @@ span.textaccor {
   right: 10px;
 }
 
-
 /* blog */
 
 .blog-banner {
@@ -1882,12 +1884,164 @@ 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-left: 25px;
+    padding-right: 25px;
+    padding-top: 60px;
+  }
+
+  .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;
+    padding-bottom: 12vh;
+  }
+
+  .about-as-of-date {
+    font-weight: 400;
+  }
+
+  .history_animation {
+    width: 100%;
+    overflow-x: scroll;
+    overflow-y: hidden;
+    height: 600px;
+  }
+
+  .history_animation .container {
+    padding: 60px 0 0 25px;
+  }
+
+  .history_animation .container .title {
+    font-size: 32px;
+  }
+
+  /* .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 {
+    padding: 0;
+    margin-top: -40px;
+  }
+
+  .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;
@@ -1913,7 +2067,6 @@ span.textaccor {
   .navbar {
     background-color: #033a4900;
     padding: 0 0;
- 
   }
   .navbar-collapse.show {
     z-index: 999;
@@ -1925,7 +2078,7 @@ span.textaccor {
     width: 100%;
     background: #fff;
     border-bottom: 1px solid #033a49;
-}
+  }
 
   .container,
   .container-md,
@@ -2064,16 +2217,7 @@ span.textaccor {
   .container.blog-aling {
     padding: 0 20px;
   }
-   .ask-advantage-scroll {
+  .ask-advantage-scroll {
     padding: 60px 25px 0 25px !important;
+  }
 }
-}
-
-
-
-
-
-
-
-
-

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";
   }
@@ -139,13 +193,13 @@ function initTimelineSwiper() {
     centeredSlides: true,
     effect: "fade",
     autoplay: {
-      delay: 2500,
+      delay: 3000,
       disableOnInteraction: false,
     },
     navigation: {
       nextEl: ".swiper-button-next",
       prevEl: ".swiper-button-prev",
-    }
+    },
   });
 
   swiper.on("slideChange", () => {
@@ -181,152 +235,13 @@ 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
-// ===============================
-// ===============================
-// ✅ GSAP Stack Scroll Animation (Stack Effect)
-// ===============================
-// ===============================
-// ✅ GSAP Stack Scroll Animation (Video Jaisa Effect)
-// ===============================
-// let cards = [];
-// let currentIndex = 0;
-// let animating = false;
-// let isInsideSection = false;
 
-// function initGsapStackScroll() {
-//   const section = document.querySelector('.cards-wrapper');
-//   if (!section) return;
-
-//   cards = Array.from(section.querySelectorAll('.card-scroll'));
-//   if (!cards.length) return;
-
-//   // Hide all cards initially, show the first one
-//   gsap.set(cards, { opacity: 0, y: "100%", zIndex: 0 });
-//   gsap.set(cards[0], { opacity: 1, y: "0%", zIndex: 4 });
-//   currentIndex = 0;
-
-//   section.addEventListener('mouseenter', () => (isInsideSection = true));
-//   section.addEventListener('mouseleave', () => (isInsideSection = false));
-
-//   window.removeEventListener('wheel', window._gsapStackHandler);
-//   window._gsapStackHandler = function (e) {
-//     if (!isInsideSection) return;
-//     e.preventDefault();
-//     if (animating) return;
-
-//     if (e.deltaY > 0) {
-//       showNextGsapCard();
-//     } else {
-//       showPrevGsapCard();
-//     }
-//   };
-
-//   window.addEventListener('wheel', window._gsapStackHandler, { passive: false });
-// }
-
-// function showNextGsapCard() {
-//   if (currentIndex >= cards.length - 1) return;
-//   animating = true;
-
-//   const current = cards[currentIndex];
-//   const next = cards[currentIndex + 1];
-
-//   // Animate current card (scale down slightly and fade)
-//   gsap.to(current, {
-//     scale: 0.85,
-//     opacity: 1,
-//     y: "0%",
-//     transformOrigin: "center top",
-//     duration: 0.8,
-//     ease: "power2.inOut",
-//     onComplete: () => current.classList.add("previous")
-//   });
-
-//   // Animate next card (slide in from below and fade in)
-//   gsap.set(next, { zIndex: currentIndex + 5 });
-//   gsap.fromTo(
-//     next,
-//     { y: "100%", opacity: 0, scale: 1 },
-//     {
-//       y: "60px", // Active card slides up to top
-//       opacity: 1,
-//       scale: 1,
-//       duration: 0.8,
-//       ease: "power2.inOut",
-//       onComplete: () => {
-//         adjustPreviousCards();
-//         animating = false;
-//       },
-//     }
-//   );
-
-//   currentIndex++;
-// }
-
-// function showPrevGsapCard() {
-//   if (currentIndex <= 0) return;
-//   animating = true;
-
-//   const current = cards[currentIndex];
-//   const prev = cards[currentIndex - 1];
-
-//   // Hide current card
-//   gsap.to(current, {
-//     y: "100%",
-//     opacity: 0,
-//     duration: 0.8,
-//     ease: "power2.inOut",
-//     onComplete: () => current.classList.remove("previous")
-//   });
-
-//   // Bring back previous card
-//   gsap.to(prev, {
-//     y: "60px",
-//     opacity: 1,
-//     scale: 1,
-//     duration: 0.8,
-//     ease: "power2.inOut",
-//     onComplete: () => {
-//       adjustPreviousCards();
-//       animating = false;
-//     },
-//   });
-
-//   currentIndex--;
-// }
-
-// // 🪄 Adjust visible cards (up to 4-layer stack)
-// function adjustPreviousCards() {
-//   // Reset all cards
-//   gsap.set(cards, { clearProps: "transform" });
-
-//   // Get last 4 visible cards (behind currentIndex)
-//   const first = cards[currentIndex - 3];
-//   const second = cards[currentIndex - 2];
-//   const third = cards[currentIndex - 1];
-//   const fourth = cards[currentIndex];
-  
-
-//   if (first) gsap.set(first, { y: "0px", scale: 0.85, opacity: 1, zIndex: 1 });
-//   console.log(first);
-//   if (second) gsap.set(second, { y: "20px", scale: 0.9, opacity: 1, zIndex: 2 });
-//   console.log(second);
-//   if (third) gsap.set(third, { y: "40px", scale: 0.95, opacity: 1, zIndex: 3 });
-//   console.log(third);
-//   if (fourth) gsap.set(fourth, { y: "60px", scale: 1, opacity: 1, zIndex: 4 });
-//   console.log(fourth);
-//   // if (fifth) gsap.set(fifth, { y: "80px", scale: 1.5, opacity: 1, zIndex: 5 });
-//   // console.log(fifth);
-//   // if(!fourth) gsap.set(cards[currentIndex], { y: "0px", scale: 1, opacity: 1, zIndex: 4 });
-// }
-
-// document.addEventListener("DOMContentLoaded", initGsapStackScroll);
 
 
 let cards = [];
@@ -335,7 +250,7 @@ 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'));
@@ -349,7 +264,7 @@ function initGsapStackScroll() {
   section.addEventListener('mouseenter', () => (isInsideSection = true));
   section.addEventListener('mouseleave', () => (isInsideSection = false));
 
-  window.removeEventListener('wheel', window._gsapStackHandler);
+  window.removeEventListener("wheel", window._gsapStackHandler);
   window._gsapStackHandler = function (e) {
     if (!isInsideSection) return;
     e.preventDefault();
@@ -483,8 +398,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" });
 
@@ -494,7 +409,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>