From 0999d08a25175c5a628fcbdf6345e7eae59b81c2 Mon Sep 17 00:00:00 2001
From: RoshanPaudel <roshanpaudel@bibhutisolutions.com>
Date: Mon, 26 Jan 2026 13:31:18 +0545
Subject: [PATCH] update

---
 about.php                  | 135 +++++++++++++++++++------------------
 assets/css/style16eb.css   |  45 ++++++++++++-
 ceo-message.php            |  16 ++---
 contact.php                |   4 +-
 footer.php                 |  61 +++++++++++++++++
 home-parts/class.php       |   2 +-
 home-parts/college-uni.php |   2 +-
 home-parts/why-us.php      |   4 +-
 index.php                  |   2 +-
 9 files changed, 190 insertions(+), 81 deletions(-)

diff --git a/about.php b/about.php
index e4e60b4..9e0d3f2 100644
--- a/about.php
+++ b/about.php
@@ -66,94 +66,99 @@
             </div>
         </div>
         <div class="section-inner">
-            <div class="row g-5">
-                <div class="col-lg-3 col-md-6" data-sal="slide-right" data-sal-duration="800" data-sal-delay="100">
-                    <div class="timeline-wrapper">
-                        <div class="top-area">
-                            <div class="year">2019</div>
-                            <i class="feather-arrow-down"></i>
-                        </div>
-                        <div class="wrapper-bottom">
-                            <div class="image-area">
-                                <img src="assets/images/story/01.webp" alt="">
+            <!-- Marquee wrapper -->
+            <div class="timeline-marquee-wrapper">
+                <div class="timeline-row row g-5">
+                    <div class="col-lg-3 col-md-6">
+                        <div class="timeline-wrapper">
+                            <div class="top-area">
+                                <div class="year">2017</div>
+                                <i class="feather-arrow-down"></i>
                             </div>
-                            <div class="content">
-                                <h6 class="title">Start Company</h6>
-                                <p class="desc">Individual insurance refers to insurance policies that are purchased by individuals for personal </p>
+                            <div class="wrapper-bottom">
+                                <div class="image-area">
+                                    <img src="assets/images/story/01.webp" alt="">
+                                </div>
+                                <div class="content">
+                                    <h6 class="title">Start Company</h6>
+                                    <p class="desc">Individual insurance refers to insurance policies that are purchased by individuals for personal </p>
+                                </div>
                             </div>
                         </div>
                     </div>
-                </div>
-                <div class="col-lg-3 col-md-6" data-sal="slide-right" data-sal-duration="800" data-sal-delay="100">
-                    <div class="timeline-wrapper">
-                        <div class="top-area">
-                            <div class="year">2019</div>
-                            <i class="feather-arrow-down"></i>
-                        </div>
-                        <div class="wrapper-bottom">
-                            <div class="image-area">
-                                <img src="assets/images/story/01.webp" alt="">
+                    <!-- Repeat other timeline items as you already have -->
+                    <div class="col-lg-3 col-md-6">
+                        <div class="timeline-wrapper">
+                            <div class="top-area">
+                                <div class="year">2018</div>
+                                <i class="feather-arrow-down"></i>
                             </div>
-                            <div class="content">
-                                <h6 class="title">Start Company</h6>
-                                <p class="desc">Individual insurance refers to insurance policies that are purchased by individuals for personal </p>
+                            <div class="wrapper-bottom">
+                                <div class="image-area">
+                                    <img src="assets/images/story/01.webp" alt="">
+                                </div>
+                                <div class="content">
+                                    <h6 class="title">Start Company</h6>
+                                    <p class="desc">Individual insurance refers to insurance policies that are purchased by individuals for personal </p>
+                                </div>
                             </div>
                         </div>
                     </div>
-                </div>
-                <div class="col-lg-3 col-md-6" data-sal="slide-right" data-sal-duration="800" data-sal-delay="300">
-                    <div class="timeline-wrapper">
-                        <div class="top-area">
-                            <div class="year">2020</div>
-                            <i class="feather-arrow-down"></i>
-                        </div>
-                        <div class="wrapper-bottom">
-                            <div class="image-area">
-                                <img src="assets/images/story/06.webp" alt="">
+                    <div class="col-lg-3 col-md-6">
+                        <div class="timeline-wrapper">
+                            <div class="top-area">
+                                <div class="year">2019</div>
+                                <i class="feather-arrow-down"></i>
                             </div>
-                            <div class="content">
-                                <h6 class="title">Open Research Team</h6>
-                                <p class="desc">Individual insurance refers to insurance policies that are purchased by individuals for personal </p>
+                            <div class="wrapper-bottom">
+                                <div class="image-area">
+                                    <img src="assets/images/story/01.webp" alt="">
+                                </div>
+                                <div class="content">
+                                    <h6 class="title">Start Company</h6>
+                                    <p class="desc">Individual insurance refers to insurance policies that are purchased by individuals for personal </p>
+                                </div>
                             </div>
                         </div>
                     </div>
-                </div>
-                <div class="col-lg-3 col-md-6" data-sal="slide-right" data-sal-duration="800" data-sal-delay="500">
-                    <div class="timeline-wrapper">
-                        <div class="top-area">
-                            <div class="year">2022</div>
-                            <i class="feather-arrow-down"></i>
-                        </div>
-                        <div class="wrapper-bottom">
-                            <div class="image-area">
-                                <img src="assets/images/story/07.webp" alt="">
+                    <div class="col-lg-3 col-md-6">
+                        <div class="timeline-wrapper">
+                            <div class="top-area">
+                                <div class="year">2023</div>
+                                <i class="feather-arrow-down"></i>
                             </div>
-                            <div class="content">
-                                <h6 class="title">Start Company</h6>
-                                <p class="desc">Individual insurance refers to insurance policies that are purchased by individuals for personal </p>
+                            <div class="wrapper-bottom">
+                                <div class="image-area">
+                                    <img src="assets/images/story/01.webp" alt="">
+                                </div>
+                                <div class="content">
+                                    <h6 class="title">Start Company</h6>
+                                    <p class="desc">Individual insurance refers to insurance policies that are purchased by individuals for personal </p>
+                                </div>
                             </div>
                         </div>
                     </div>
-                </div>
-                <div class="col-lg-3 col-md-6" data-sal="slide-right" data-sal-duration="800" data-sal-delay="700">
-                    <div class="timeline-wrapper">
-                        <div class="top-area">
-                            <div class="year">2025</div>
-                            <i class="feather-arrow-down"></i>
-                        </div>
-                        <div class="wrapper-bottom">
-                            <div class="image-area">
-                                <img src="assets/images/story/05.webp" alt="">
+                    <div class="col-lg-3 col-md-6">
+                        <div class="timeline-wrapper">
+                            <div class="top-area">
+                                <div class="year">2025</div>
+                                <i class="feather-arrow-down"></i>
                             </div>
-                            <div class="content">
-                                <h6 class="title">Start Company</h6>
-                                <p class="desc">Individual insurance refers to insurance policies that are purchased by individuals for personal </p>
+                            <div class="wrapper-bottom">
+                                <div class="image-area">
+                                    <img src="assets/images/story/01.webp" alt="">
+                                </div>
+                                <div class="content">
+                                    <h6 class="title">Start Company</h6>
+                                    <p class="desc">Individual insurance refers to insurance policies that are purchased by individuals for personal </p>
+                                </div>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
+
     </div>
 </section>
 <!-- Timeline Area End -->
diff --git a/assets/css/style16eb.css b/assets/css/style16eb.css
index 927d738..50da141 100644
--- a/assets/css/style16eb.css
+++ b/assets/css/style16eb.css
@@ -19421,7 +19421,7 @@ only screen and (min-width: 768px) and (max-width: 991px) {
   top: -15px;
   width: 32px;
   height: 32px;
-  background: var(--color-white);
+  /* background: var(--color-white); */
   font-size: 16px;
   line-height: 30px;
   border: 0;
@@ -19432,6 +19432,49 @@ only screen and (min-width: 768px) and (max-width: 991px) {
   z-index: 3;
 }
 
+.tmp-lookbook-content-box-wrapper {
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.tmp-lookbook-content-box-wrapper.is-hidden {
+  opacity: 0;
+  transform: translateY(8px);
+  pointer-events: none;
+}
+
+
+.timeline-marquee-wrapper {
+  overflow: hidden;
+  width: 100%;
+}
+
+.timeline-row {
+  display: flex;
+  gap: 30px;
+  flex-wrap: nowrap;
+  white-space: nowrap;
+  transform: translateX(0);
+}
+
+.timeline-row .col-lg-3 {
+  flex: 0 0 auto;
+     min-width: 250px;
+}
+
+.timeline-row .timeline-wrapper .content p.desc {
+  white-space: normal;
+  overflow-wrap: break-word;
+}
+@media (max-width: 768px) {
+    .timeline-row {
+        gap: 15px;
+    }
+    .timeline-row .col-lg-3 {
+        min-width: 180px; /* fits smaller screens */
+    }
+}
+
+
 .tmp-message-shape {
   position: absolute;
   background: var(--color-primary);
diff --git a/ceo-message.php b/ceo-message.php
index 1991f17..21053b5 100644
--- a/ceo-message.php
+++ b/ceo-message.php
@@ -54,7 +54,7 @@
 </div>
 
 <!-- Start Globe Area -->
-<section class="tmp-section-gapTop  mb--80  bg-card position-relative overflow-hidden">
+<section class="mt--20  mb--80  bg-card position-relative overflow-hidden">
     <div class="container">
         <div class="row">
             <div class="col-12">
@@ -78,7 +78,7 @@
                 <!-- Start Single LookBook -->
                 <div class="tmp-lookbook-portion portion-md" data-tmp-position-vertical="23" data-tmp-position-horigental="15">
                     <div class="tmp-lookbook-thumb">
-                        <img src="https://www.pathfinders.com.np/upload/StudyAbroad/Flag_1712900235163USA.png" alt="" data-no-retina="">
+                        <img src="assets/images/photos/usa.png" alt="" data-no-retina="">
                     </div>
                     <div class="tmp-lookbook-content-box-wrapper">
                         <button class="tmp-lookbook-close-btn"><i class="fas fa-times"></i></button>
@@ -107,7 +107,7 @@
                 <!-- Start Single LookBook -->
                 <div class="tmp-lookbook-portion portion-lg" data-tmp-position-vertical="45" data-tmp-position-horigental="30">
                     <div class="tmp-lookbook-thumb">
-                        <img src="https://www.pathfinders.com.np/upload/StudyAbroad/Flag_1712901291364canada_flags_flag_16983.png" alt="Canda" data-no-retina="">
+                        <img src="assets/images/photos/canada-logo.png" alt="Canda" data-no-retina="">
                     </div>
                     <div class="tmp-lookbook-content-box-wrapper">
                         <button class="tmp-lookbook-close-btn"><i class="fas fa-times"></i></button>
@@ -134,9 +134,9 @@
                 <!-- End Single LookBook -->
 
                 <!-- Start Single LookBook -->
-                <div class="tmp-lookbook-portion portion-xm" data-tmp-position-vertical="10" data-tmp-position-horigental="40">
+                <div class="tmp-lookbook-portion" data-tmp-position-vertical="10" data-tmp-position-horigental="40">
                     <div class="tmp-lookbook-thumb">
-                        <img src="https://www.pathfinders.com.np/upload/StudyAbroad/Flag_1724416115592ireland.webp" alt="" data-no-retina="">
+                        <img src="assets/images/photos/ireland-logo.png" alt="" data-no-retina="">
                     </div>
                     <div class="tmp-lookbook-content-box-wrapper">
                         <button class="tmp-lookbook-close-btn"><i class="fas fa-times"></i></button>
@@ -165,7 +165,7 @@
                 <!-- Start Single LookBook -->
                 <div class="tmp-lookbook-portion" data-tmp-position-vertical="70" data-tmp-position-horigental="54">
                     <div class="tmp-lookbook-thumb">
-                        <img src="https://www.pathfinders.com.np/upload/StudyAbroad/Flag_17129002663UK.png" alt="" data-no-retina="">
+                        <img src="assets/images/photos/uk-logo.png" alt="" data-no-retina="">
                     </div>
                     <div class="tmp-lookbook-content-box-wrapper">
                         <button class="tmp-lookbook-close-btn"><i class="fas fa-times"></i></button>
@@ -194,7 +194,7 @@
                 <!-- Start Single LookBook -->
                 <div class="tmp-lookbook-portion portion-xl" data-tmp-position-vertical="30" data-tmp-position-horigental="73">
                     <div class="tmp-lookbook-thumb">
-                        <img src="https://www.pathfinders.com.np/upload/StudyAbroad/Flag_1712900572965New-Zealand-Flag-icon.png" alt="" data-no-retina="">
+                        <img src="assets/images/photos/newzeland-logo.png" alt="" data-no-retina="">
                     </div>
                     <div class="tmp-lookbook-content-box-wrapper">
                         <button class="tmp-lookbook-close-btn"><i class="fas fa-times"></i></button>
@@ -223,7 +223,7 @@
                 <!-- Start Single LookBook -->
                 <div class="tmp-lookbook-portion portion-sm" data-tmp-position-vertical="82" data-tmp-position-horigental="87">
                     <div class="tmp-lookbook-thumb">
-                        <img src="https://www.pathfinders.com.np/upload/StudyAbroad/Flag_1712553290751AUS.png" alt="Australia" data-no-retina="">
+                        <img src="assets/images/photos/australia-logo.png" alt="Australia" data-no-retina="">
                     </div>
                     <div class="tmp-lookbook-content-box-wrapper">
                         <button class="tmp-lookbook-close-btn"><i class="fas fa-times"></i></button>
diff --git a/contact.php b/contact.php
index 0195460..6ae5658 100644
--- a/contact.php
+++ b/contact.php
@@ -23,11 +23,11 @@
 <!-- Start Contact Area  -->
 <div class="main-content">
 
-    <div class="tmp-contact-area tmp-section-gap">
+    <div class="tmp-contact-area">
         <div class="container">
             <div class="row">
 
-                <div class="col-lg-12">
+                <div class="col-lg-12 mt--80">
                     <div class="tmp-contact-address mt_dec--30">
                         <div class="row g-5">
                             <div class="col-lg-4 col-md-6 col-12">
diff --git a/footer.php b/footer.php
index c2af756..e38a6f7 100644
--- a/footer.php
+++ b/footer.php
@@ -318,6 +318,67 @@
         });
     });
 </script>
+<script>
+    const row = document.querySelector('.timeline-row');
+    // Duplicate content for seamless scroll
+    row.innerHTML += row.innerHTML;
+
+    // Set speed based on screen width
+    let speed = window.innerWidth < 768 ? 0.6 : 0.5; // slower on mobile
+
+    let scrollPos = 0;
+
+    function marquee() {
+        scrollPos += speed;
+        if (scrollPos >= row.scrollWidth / 2) {
+            scrollPos = 0; // reset for infinite loop
+        }
+        row.style.transform = `translateX(-${scrollPos}px)`;
+        requestAnimationFrame(marquee);
+    }
+
+    marquee();
+</script>
+
+
+<script>
+    document.addEventListener("DOMContentLoaded", function() {
+
+        // Close button
+        document.querySelectorAll(".tmp-lookbook-close-btn").forEach(function(btn) {
+            btn.addEventListener("click", function(e) {
+                e.stopPropagation();
+                this.closest(".tmp-lookbook-content-box-wrapper")
+                    .classList.add("is-hidden");
+            });
+        });
+
+        // Thumbnail click (open)
+        document.querySelectorAll(".tmp-lookbook-thumb").forEach(function(thumb) {
+            thumb.addEventListener("click", function() {
+                const wrapper = this.closest(".tmp-lookbook-portion")
+                    .querySelector(".tmp-lookbook-content-box-wrapper");
+
+                wrapper.classList.remove("is-hidden");
+            });
+        });
+
+        // Auto-hide on scroll
+        let scrollTimeout;
+        window.addEventListener("scroll", function() {
+            clearTimeout(scrollTimeout);
+
+            scrollTimeout = setTimeout(function() {
+                document.querySelectorAll(".tmp-lookbook-content-box-wrapper")
+                    .forEach(function(box) {
+                        box.classList.add("is-hidden");
+                    });
+            }, 80); // small delay = smooth UX
+        });
+
+    });
+</script>
+
 
 <script>
     document.querySelectorAll('.tab-btns li').forEach(tab => {
diff --git a/home-parts/class.php b/home-parts/class.php
index 2b5f439..123cc2b 100644
--- a/home-parts/class.php
+++ b/home-parts/class.php
@@ -1,5 +1,5 @@
 <!-- Start class Area  -->
-<div class="tmp-service-area  tmp-section-gap">
+<div class="tmp-service-area  ptb--100">
     <div class="container">
         <div class="row">
             <div class="col-lg-12">
diff --git a/home-parts/college-uni.php b/home-parts/college-uni.php
index c10b468..bff662f 100644
--- a/home-parts/college-uni.php
+++ b/home-parts/college-uni.php
@@ -1,4 +1,4 @@
-<div class="tmp-time-table-area pt--100">
+<div class="tmp-time-table-area">
     <div class="container">
         <div class="row">
             <div class="col-lg-12">
diff --git a/home-parts/why-us.php b/home-parts/why-us.php
index e4a946a..9affc45 100644
--- a/home-parts/why-us.php
+++ b/home-parts/why-us.php
@@ -1,4 +1,4 @@
-<div class="tmp-brand-area">
+<!-- <div class="tmp-brand-area">
     <div class="container">
         <div class="row">
             <div class="col-lg-12">
@@ -31,7 +31,7 @@
             </ul>
         </div>
     </div>
-</div>
+</div> -->
 
 
 <!-- cta -->
diff --git a/index.php b/index.php
index baa06b4..b2a6bde 100644
--- a/index.php
+++ b/index.php
@@ -3,10 +3,10 @@
 <?php include("./home-parts/about.php") ?>
 <?php include("./home-parts/counter.php") ?>
 <?php include("./home-parts/globe.php") ?>
+<?php include("./home-parts/college-uni.php") ?>
 <?php include("./home-parts/why-us.php") ?>
 <?php include("./home-parts/service.php") ?>
 <?php include("./home-parts/cta.php") ?>
-<?php include("./home-parts/college-uni.php") ?>
 <?php include("./home-parts/class.php") ?>
 <?php include("./home-parts/testimonial.php") ?>
 <?php include("./home-parts/faq.php") ?>