completed about page

css/style.css

@@ -417,7 +417,6 @@ a.color-a {
 }
 
 .advantage-icon {
-  
   margin-bottom: 15px;
 }
 
@@ -1063,6 +1062,7 @@ span.textaccor {
 .banner_overlay {
   width: 95%;
   height: 100%;
+
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1093,10 +1093,7 @@ span.textaccor {
 /* about history text */
 .about-stats-section {
   background-color: #fff;
-}
-
-.about-stats-section .container {
-  padding: 60px ;
+  padding: 60px 0px;
 }
 
 .about-text {
@@ -1116,56 +1113,80 @@ span.textaccor {
   font-family: var(--font-primary);
 }
 
-.about-stats-row {
-  margin-top: 30px;
-  width: 100%;
+.about-stats-section .row {
+  margin-top: 50px;
+}
+
+.about-stat-box h3 {
+  font-size: 40px;
+  font-weight: 400;
+  line-height: 60px;
+  color: #033a49;
+  margin-bottom: 10px;
+  font-family: var(--font-secondary);
+}
+
+.about-width-count {
+  width: 23%;
+  text-align: left;
+}
+
+.about-width-count2 {
+  width: 29%;
+  padding-left: 58px;
+}
+
+.about-width-count3 {
+  width: 23%;
+  padding-left: 60px;
+}
+
+.about-width-count4 {
+  width: 23%;
+  padding-left: 55px;
+}
+
+.about-stat-box p {
+  letter-spacing: 0.8px;
+  color: #3e3f3f;
+  margin: 0;
+  font-family: var(--font-primary);
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 28px;
+  text-transform: uppercase;
+}
+
+.about-stat-box {
+  text-align: left;
 }
 
 .about-stat-border {
   position: relative;
 }
 
-.about-stat-box {
-  border-right: 1px solid #b18c4a;
-  /* width: 236px; */
-  box-sizing: border-box;
-}
-
-.last-box {
-  border-right: none;
-}
-/* .about-stat-border::before {
+.about-stat-border::before {
   content: "";
   position: absolute;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
   width: 1px;
-  height: 112px;
+  height: 80px;
   background-color: #b18c4a;
-} */
-
-.about-stat-box h3 {
-  font-size: 40px;
-  font-weight: 400;
-  line-height: 72px;
-  color: #033a49;
-  margin-bottom: 10px;
-  font-family: var(--font-secondary);
+  /* gold tone line */
 }
 
-.about-stat-box p {
-  font-size: 16px;
-  color: #3e3f3f;
-  line-height: 28px;
-  font-weight: 600;
-  text-transform: uppercase;
+/* ✅ Remove divider for first item */
+.about-stats-section .row .col-md-3:first-child::before {
+  display: none;
 }
 
 .about-as-of-date {
+  text-align: left;
   font-family: var(--font-primary);
   font-weight: 600;
-  font-style: italic;
+  font-style: Italic;
   font-size: 16px;
   line-height: 28px;
   color: #929197;
@@ -1176,10 +1197,8 @@ span.textaccor {
 .history_animation {
   background: #131313;
   padding: 60px 0;
- 
 }
 
-
 .history_animation .container .title {
   text-align: left;
   color: white;
@@ -1300,7 +1319,7 @@ span.textaccor {
 =========================== */
 .swiper {
   width: 100%;
-  
+
   display: flex;
   justify-content: center;
   align-items: center;
@@ -1309,7 +1328,6 @@ span.textaccor {
   box-sizing: border-box;
 }
 
-
 .swiper-wrapper {
   display: flex;
   align-items: center;
@@ -1440,7 +1458,6 @@ span.textaccor {
   line-height: 100%;
   text-transform: capitalize;
   color: #b18c4a;
-  
 }
 .blog-aling {
   align-items: center;
@@ -1464,9 +1481,8 @@ span.textaccor {
     height: 24px;
   }
   .card-scroll {
-   
     margin-top: 5px;
-}
+  }
 
   .container {
     padding: 0 25px 0 25px;
@@ -1510,12 +1526,12 @@ span.textaccor {
     gap: 30px;
   }
   .mySwiper2 .mobile-hight {
-  min-width: 50px ;
-  min-height: 50px ;
-  object-fit: contain ;
-  display: block ;
-  margin: 0 ; /* small bottom margin to reduce space */
-}
+    min-width: 50px;
+    min-height: 50px;
+    object-fit: contain;
+    display: block;
+    margin: 0; /* small bottom margin to reduce space */
+  }
 
   .stat-border::before {
     content: "";
@@ -1604,14 +1620,12 @@ span.textaccor {
     background-color: #b18c4a;
     /* gold line */
   }
-  .advantage-icon
-
- {
+  .advantage-icon {
     margin-bottom: 15px;
     width: 100%;
     display: flex;
     justify-content: flex-start !important;
-}
+  }
 
   .arrow {
     display: none;
@@ -1633,11 +1647,9 @@ span.textaccor {
     /* show mobile arrow on mobile */
   }
 
-  
-
-.mySwiper2 {
+  .mySwiper2 {
     height: 338px !important;
-}
+  }
   .offcanvas-body img {
     width: 100%;
     height: auto;
@@ -1912,7 +1924,7 @@ span.textaccor {
   }
 
   .about-stats-section .container {
-    padding: 60px 25px ;
+    padding: 0px 25px;
   }
 
   .about-text {
@@ -1923,62 +1935,85 @@ span.textaccor {
     font-size: 16px;
   }
 
-  .about-stats-row {
+  .about-mobile-resp-count {
     flex-direction: column;
-    justify-content: center;
-    align-items: center;
+    gap: 30px;
+  }
+
+  .about-stat-border::before {
+    content: "";
+    position: absolute;
+    left: 50%;
+    top: -163%;
+    width: 1px;
+    height: 210px;
+    top: -115%;
+    width: 1px;
+    height: 130px;
+    background-color: #033a49;
+    transform: rotate(90deg);
+  }
+
+  .about-width-count {
+    width: 100%;
+
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+
+  .about-width-count2 {
+    width: 100%;
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+
+  .about-width-count3 {
+    width: 100%;
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+
+  .about-width-count4 {
+    width: 100%;
+    padding-left: 0px;
+    padding-right: 0px;
   }
 
   .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;
+    text-align: center;
+    margin-top: 10px;
   }
 
   .about-stat-box h3 {
-    font-size: 32px;
+    font-size: 24px;
     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;  
+    line-height: 16px;
   }
 
   .about-as-of-date {
-    font-weight: 400;
+    text-align: center;
+    width: 100%;
+    /* border: 1px solid black; */
   }
-
   .history_animation {
     width: 100%;
     overflow-x: scroll;
     overflow-y: hidden;
-    
+    -ms-overflow-style: none;
+    scrollbar-width: none;
   }
 
-  .history_animation{
+  .history_animation {
     padding: 60px 0 60px 0 !important;
   }
 
   .history_animation .container .title {
     font-size: 32px;
     padding-left: 25px;
-        padding-right: 25px;
+    padding-right: 25px;
   }
 
   /* .timeline {
@@ -1991,8 +2026,8 @@ span.textaccor {
     content: "";
     position: absolute;
     top: 50%;
-    left: 10px;
-    right: 10px;
+    left: 20px;
+    right: 20px;
     height: 1px;
     background: #b18b4a65;
     transform: translateY(-50%);
@@ -2011,9 +2046,8 @@ span.textaccor {
     font-family: var(--font-primary);
     top: -35px;
   }
-  
 
-.timeline {
+  .timeline {
     justify-content: space-between;
     list-style: none;
     display: flex;
@@ -2027,14 +2061,24 @@ span.textaccor {
     margin-top: 40px;
     margin-bottom: 20px;
     margin-left: 20px;
-}
+  }
 
-.timeline-item {
+  .line-fill {
+    position: absolute;
+    top: 50%;
+    left: 25px; /* Adjust this to match first kite position */
+    height: 1px;
+    background: #b18b4a;
+    transform: translateY(-50%);
+    z-index: 1;
+    transition: width 0.5s ease;
+  }
+
+  .timeline-item {
     position: relative;
     z-index: 1;
     top: -15px;
-}
- 
+  }
 
   .swiper-slide h2 {
     font-size: 35px;

js/main.js

@@ -127,7 +127,7 @@ const timelineData = {
 // ✅ 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;
 
@@ -141,7 +141,8 @@ function initTimelineSwiper() {
     slide.classList.add("swiper-slide");
 
     // ✅ Use mobile icon if on mobile, else desktop
-    const iconToUse = isMobile && content.mobileIcon ? content.mobileIcon : content.icon;
+    const iconToUse =
+      isMobile && content.mobileIcon ? content.mobileIcon : content.icon;
 
     const headingColor = ["2015", "2017", "2018"].includes(year)
       ? "#ffffff"
@@ -173,18 +174,80 @@ function initTimelineSwiper() {
     swiperWrapper.appendChild(slide);
   });
 
-  // Line fill logic
+  // Line fill logic - UPDATED for mobile
   const lineFill = document.querySelector(".line-fill");
+  const timeline = document.querySelector(".timeline");
   const totalKites = timelineItems.length;
 
   function updateTimeline(index) {
     timelineItems.forEach((item, i) => {
       item.classList.toggle("active", i === index);
     });
-    const timelineWidth =
-      document.querySelector(".timeline")?.offsetWidth - 20;
-    const newWidth = (timelineWidth / (totalKites - 1)) * index;
-    if (lineFill) lineFill.style.width = newWidth + "px";
+
+    // Check if mobile (timeline is scrollable)
+    const isMobileView = window.matchMedia("(max-width: 768px)").matches;
+
+    if (isMobileView && timeline && lineFill) {
+      // FIXED: Mobile line fill calculation - exact kite to kite
+      const firstKite = timelineItems[0];
+      const lastKite = timelineItems[totalKites - 1];
+
+      if (firstKite && lastKite) {
+        // Calculate exact positions of first and last kite centers
+        const firstKiteCenter =
+          firstKite.offsetLeft + firstKite.offsetWidth / 2;
+        const lastKiteCenter = lastKite.offsetLeft + lastKite.offsetWidth / 2;
+
+        // Total distance between first and last kite centers
+        const totalDistance = lastKiteCenter - firstKiteCenter;
+
+        // Calculate width based on current index
+        const progress = index / (totalKites - 1);
+        const newWidth = totalDistance * progress;
+
+        // Set the line fill width
+        lineFill.style.width = newWidth + "px";
+      }
+    } else {
+      // Desktop line fill calculation (your original code)
+      const timelineWidth = timeline?.offsetWidth - 20;
+      const newWidth = (timelineWidth / (totalKites - 1)) * index;
+      if (lineFill) lineFill.style.width = newWidth + "px";
+    }
+
+    // Auto-scroll for mobile only
+    if (isMobileView) {
+      autoScrollTimeline(index);
+    }
+  }
+
+  // Auto-scroll timeline horizontally - MOBILE ONLY
+  function autoScrollTimeline(index) {
+    if (!timeline) return;
+
+    const activeItem = timelineItems[index];
+    if (!activeItem) return;
+
+    const itemLeft = activeItem.offsetLeft;
+    const itemWidth = activeItem.offsetWidth;
+    const containerWidth = timeline.offsetWidth;
+
+    // Calculate the target scroll position to show current year
+    // completely visible at the far right edge with a small padding
+    const rightPadding = 40;
+    const targetScroll = itemLeft + itemWidth - containerWidth + rightPadding;
+
+    // Ensure we don't scroll beyond the start or end of the timeline
+    const maxScroll = timeline.scrollWidth - containerWidth;
+    const clampedScroll = Math.max(0, Math.min(targetScroll, maxScroll));
+
+    // Only scroll if we're not already at the correct position
+    if (Math.abs(timeline.scrollLeft - clampedScroll) > 4) {
+      timeline.scrollTo({
+        left: clampedScroll,
+        behavior: "smooth",
+      });
+    }
   }
 
   // Initialize Swiper
@@ -192,10 +255,10 @@ function initTimelineSwiper() {
     spaceBetween: 20,
     centeredSlides: true,
     effect: "fade",
-     fadeEffect: {
-    crossFade: true, // 👈 this makes previous slide fade out smoothly
-  },
- 
+    fadeEffect: {
+      crossFade: true, // 👈 this makes previous slide fade out smoothly
+    },
+
     speed: 2500, // controls fade speed (in ms)
     autoplay: {
       delay: 2200,
@@ -211,9 +274,25 @@ function initTimelineSwiper() {
     updateTimeline(swiper.realIndex);
   });
 
-  updateTimeline(0);
-}
+  // Add click events to timeline items
+  timelineItems.forEach((item, index) => {
+    item.addEventListener("click", () => {
+      updateTimeline(index);
+      swiper.slideTo(index);
+    });
+  });
 
+  updateTimeline(0);
+
+  // Handle window resize - recalculate after a short delay
+  let resizeTimeout;
+  window.addEventListener("resize", function () {
+    clearTimeout(resizeTimeout);
+    resizeTimeout = setTimeout(function () {
+      updateTimeline(swiper.realIndex);
+    }, 250);
+  });
+}
 
 // ===============================
 // ✅ Generic Swiper Init (Other Pages)
@@ -247,9 +326,6 @@ window.openDrawer = function (name, role, img, desc) {
   drawer.show();
 };
 
-
-
-
 let cards = [];
 let currentIndex = 0;
 let animating = false;
@@ -259,7 +335,7 @@ function initGsapStackScroll() {
   const section = document.querySelector(".cards-wrapper");
   if (!section) return;
 
-  cards = Array.from(section.querySelectorAll('.card-scroll'));
+  cards = Array.from(section.querySelectorAll(".card-scroll"));
   if (!cards.length) return;
 
   // Hide all cards initially, show the first one
@@ -267,8 +343,8 @@ function initGsapStackScroll() {
   gsap.set(cards[0], { opacity: 1, y: "0px", zIndex: 4 });
   currentIndex = 0;
 
-  section.addEventListener('mouseenter', () => (isInsideSection = true));
-  section.addEventListener('mouseleave', () => (isInsideSection = false));
+  section.addEventListener("mouseenter", () => (isInsideSection = true));
+  section.addEventListener("mouseleave", () => (isInsideSection = false));
 
   window.removeEventListener("wheel", window._gsapStackHandler);
   window._gsapStackHandler = function (e) {
@@ -283,7 +359,9 @@ function initGsapStackScroll() {
     }
   };
 
-  window.addEventListener('wheel', window._gsapStackHandler, { passive: false });
+  window.addEventListener("wheel", window._gsapStackHandler, {
+    passive: false,
+  });
 }
 
 function showNextGsapCard() {
@@ -300,7 +378,7 @@ function showNextGsapCard() {
     opacity: 1,
     duration: 0.8,
     ease: "power2.inOut",
-    onComplete: () => current.classList.add("previous")
+    onComplete: () => current.classList.add("previous"),
   });
 
   // Animate next card (slide in from below and become active)
@@ -337,7 +415,7 @@ function showPrevGsapCard() {
     opacity: 0,
     duration: 0.8,
     ease: "power2.inOut",
-    onComplete: () => current.classList.remove("previous")
+    onComplete: () => current.classList.remove("previous"),
   });
 
   // Bring back previous card as active
@@ -361,14 +439,14 @@ function showPrevGsapCard() {
 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 
+    gsap.set(cards[currentIndex], {
+      y: "60px",
+      scale: 1,
+      opacity: 1,
+      zIndex: 5,
     });
   }
 
@@ -376,15 +454,15 @@ function adjustPreviousCards() {
   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 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 
+
+      gsap.set(cards[prevIndex], {
+        y: `${yOffset}px`,
+        scale: scale,
+        opacity: 1,
+        zIndex: zIndex,
       });
     }
   }
@@ -392,10 +470,6 @@ function adjustPreviousCards() {
 
 document.addEventListener("DOMContentLoaded", initGsapStackScroll);
 
-
-
-
-
 // ===============================
 // ✅ Load Page Content Dynamically
 // ===============================

pages/about.html

@@ -1,4 +1,3 @@
- 
 <section class="hero_banner">
   <div class="banner_overlay">
     <div class="hero_content">
@@ -15,63 +14,69 @@
 
 <section class="about-stats-section">
   <div class="container">
-    <div class="row">
-      <div>
-        <p class="about-text">
-          Since our founding in 1983, ASK Asset & Wealth Management Group has been driven by a fundamental
-          question: What truly matters? Our unequivocal answer is Quality. This commitment
-          propels us to deliver unmatched growth of returns for our clients and partners. We do this with our deep
-          understanding of market dynamics, cultivated through meticulous research and experience. Our businesses,
-          across listed equities, alternates, real estate private equity, hedge funds, wealth management and more
-          bring an array of bespoke solutions and market defining strategies. With these handpicked strategies and
-          sharp market insights, we aim to deliver wealth preservation and appreciation over time.
-        </p>
-        <p class="about-sub-text">What sets us apart is our focus on what matters most.</p>
-      </div>
+    <div>
+      <p class="about-text">
+        Since our founding in 1983, ASK Asset & Wealth Management Group has been
+        driven by a fundamental question: What truly matters? Our unequivocal
+        answer is Quality. This commitment propels us to deliver unmatched
+        growth of returns for our clients and partners. We do this with our deep
+        understanding of market dynamics, cultivated through meticulous research
+        and experience. Our businesses, across listed equities, alternates, real
+        estate private equity, hedge funds, wealth management and more bring an
+        array of bespoke solutions and market defining strategies. With these
+        handpicked strategies and sharp market insights, we aim to deliver
+        wealth preservation and appreciation over time.
+      </p>
+      <p class="about-sub-text">
+        What sets us apart is our focus on what matters most.
+      </p>
     </div>
-
-    <div class="row justify-content-between align-items-center about-stats-row">
-            <div class="col-md-3 col-6 mb-4 mb-md-0 width-count">
+    <div
+      class="row justify-content-center align-items-center about-mobile-resp-count"
+    >
+      <div class="col-md-3 col-6 mb-4 mb-md-0 about-width-count">
         <div class="about-stat-box">
           <h3>40 Years</h3>
           <p>Years of Expertise</p>
         </div>
       </div>
 
-
-      <div class="col-md-3 col-6 mb-4 mb-md-0 about-stat-border width-count2">
+      <div
+        class="col-md-3 col-6 mb-4 mb-md-0 about-stat-border about-width-count2"
+      >
         <div class="about-stat-box">
           <h3>₹84,500 Cr+</h3>
           <p>Assets Managed</p>
         </div>
       </div>
 
-      <div class="col-md-3 col-6 mb-4 mb-md-0 about-stat-border width-count3">
+      <div
+        class="col-md-3 col-6 mb-4 mb-md-0 about-stat-border about-width-count3"
+      >
         <div class="about-stat-box">
           <h3>20,000+</h3>
           <p>Clients Served</p>
         </div>
       </div>
 
-      <div class="col-md-3 col-6 about-stat-border width-count4">
-        <div class="about-stat-box last-box">
+      <div class="col-md-3 col-6 about-stat-border about-width-count4">
+        <div class="about-stat-box">
           <h3>29 Years</h3>
           <p>Equity Experience</p>
         </div>
       </div>
     </div>
-    <div class="month-date-container mt-4">
-      <span class="about-as-of-date ">As of July 2025</span>
+    <div class="mt-4">
+      <span class="about-as-of-date">As of July 2025</span>
     </div>
   </div>
-  </div>
 </section>
 
 <section class="history_animation">
   <div class="container">
     <h1 class="title">Our History</h1>
 
-        <!-- Timeline -->
+    <!-- Timeline -->
     <ul class="timeline">
       <li class="timeline-item" data-year="1983"><span class="kite"></span></li>
       <li class="timeline-item" data-year="1991"><span class="kite"></span></li>
@@ -96,7 +101,5 @@
       <div class="swiper-button-next"></div>
       <div class="swiper-button-prev"></div>
     </div>
-    
   </div>
 </section>
-