diff --git a/faq.html b/faq.html
index 02b9506d..dd26f0f8 100644
--- a/faq.html
+++ b/faq.html
@@ -8,9 +8,272 @@
     <link rel="stylesheet" href="./styles.css">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
     <link rel="icon" type="image/x-icon" href="favicon.ico"/>
+
   </head>
 <body>
 
+  
+    <script src="index.js" defer></script>
+    <script src="mouseEffect.js"></script>
+    <link rel="stylesheet" href="mouseEffect.css">
+    <script src="Theme.js" defer></script>
+  
+  
+    <link rel="stylesheet" href="path/to/aos.css">
+    <script src="path/to/aos.js"></script>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js">
+    </script>
+    <script type="text/javascript">
+      (function () {
+        emailjs.init("WB9rAyWwwLZube-er");
+      })();
+  
+      function planTrip() {
+  
+        window.location.href = 'plantrip.html';
+      }
+      // const menuButton = document.getElementsByClassName('link');
+      //function closeNav() {
+      //  let list = document.querySelector('.navLinks');
+      //  list.classList.toggle('activeHamburger');
+      //}
+      // menuButton.forEach((button) => (button.onclick = () => closeNav()));
+  
+    </script>
+  
+  
+    <style>
+      html {
+        scroll-behavior: smooth;
+      }
+    </style>
+    <style>
+      .active {
+        color: red !important;
+      }
+      @media screen and (max-width:390px){
+        .nav__logo{
+          position: relative;
+          right: 1.9rem;
+        }
+        .contact-btn{
+          position: relative;
+          right: 2.5rem;
+        }
+        .toggle-container{
+          position: relative;
+          right: 2.5rem;
+  
+        }
+        .toggle{
+          width: 130%;
+        } 
+        .line{
+          width: 130%;
+        }
+        .hamburger{
+          position: relative;
+          right: 1rem;
+        }
+      }
+      @media screen and (max-width:364px) {
+        .toggle{
+          width:190%;
+        }
+        .line{
+          width: 190%;
+        }
+      }
+      .gallery-rotate-image .image-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px; /* Adjust the gap between images */
+  }
+  
+  .gallery-rotate-image .image-container span {
+    display: inline-block;
+  }
+  
+  .trip-gallery-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px; /* Adjust the gap between images */
+  }
+  
+  .trip-gallery-container .image-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .trip-gallery-container .image-container img {
+    max-width: 100%;
+    height: auto;
+  }
+  
+  .btn-container {
+    display: flex;
+    justify-content: center;
+    gap: 8px; /* Adjust the gap between buttons */
+  }
+  .circle {
+      position: absolute;
+      width: 25px;
+      height: 25px;
+      border-radius: 50%;
+      pointer-events: none;
+      background: radial-gradient(circle, rgba(71, 240, 255, 0.3), rgba(0, 119, 255, 0.3));
+      transition: transform 0.1s, left 0.1s, top 0.1s;
+    }
+
+    .circle-container {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+      z-index: 9999;
+    }
+    </style>
+  <link rel="stylesheet" href="imstyle.css">
+  <link rel="stylesheet" href="jquery.flipster.min.css">
+  
+  </head>
+  
+  
+  <body style="background-color: var(--secondary-color);">
+  
+    <body>
+
+      <div class="circle-container">
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+      </div>
+      <script>
+        document.addEventListener("DOMContentLoaded", function () {
+          const coords = { x: 0, y: 0 };
+          const circles = document.querySelectorAll(".circle");
+  
+          circles.forEach(function (circle) {
+            circle.x = 0;
+            circle.y = 0;
+          });
+  
+          window.addEventListener("mousemove", function (e) {
+            coords.x = e.pageX;
+            coords.y = e.pageY - window.scrollY; // Adjust for vertical scroll position
+          });
+  
+          function animateCircles() {
+            let x = coords.x;
+            let y = coords.y;
+  
+            circles.forEach(function (circle, index) {
+              circle.style.left = `${x - 12}px`;
+              circle.style.top = `${y - 12}px`;
+              circle.style.transform = `scale(${(circles.length - index) / circles.length})`;
+  
+              const nextCircle = circles[index + 1] || circles[0];
+              circle.x = x;
+              circle.y = y;
+  
+              x += (nextCircle.x - x) * 0.3;
+              y += (nextCircle.y - y) * 0.3;
+            });
+  
+            requestAnimationFrame(animateCircles);
+          }
+  
+          animateCircles();
+        });
+  
+      </script>
+  
+      
+      <div id="bg">
+        <canvas></canvas>
+        <canvas></canvas>
+        <canvas></canvas>
+      </div>
+      <div id="progressbar"></div>
+      <div id="scrollPath"></div>
+      
+      <div class="nav-container" id="top">
+        <nav class="newNav">
+          <img src="./img/A T logo with a white background and a square shape, connected to nature for a travel company.png" style="width:30px;height:30px;border-radius:50%;">
+          
+          <a href="#" class="nav__logo" data-aos="fade-right">Tourguide<span>.</span></a>
+  
+          <ul class="navLinks">
+  
+            <li class="link" data-aos=""><a href="index.html#Home">Home</a></li>
+            <li class="link" data-aos=""><a href="index.html#AboutUs"> AboutUs</a></li>
+            <li class="link" data-aos=""><a href="index.html#Destinations">Destinations</a></li>
+            <li class="link" data-aos=""><a href="index.html#trip">Pricing</a></li>
+            <li class="link" data-aos=""><a href="index.html#ReviewGallery">Trip Gallery</a></li>
+            <li class="link" data-aos=""><a href="index.html#testimonials">Testimonials</a></li>
+            <li class="link" data-aos=""><a href="feedback.html">Rate Us?</a></li>
+            <li class="link" data-aos=""><a href="index.html#cnt-form">Contact Us</a></li>
+  
+  
+          </ul>
+  
+  
+          <a href="newLogin.html" class="contact-btn"><button class="btn" id="btn-style" style="margin: 0;"
+              data-aos="fade-down">Login/SignUp</button></a>
+              <a href="mapa.html" class="contact-btn"><button class="btn" id="btn-style" style="margin: 0;"
+                data-aos="fade-down">view <map name=""></map></button></a>
+  
+          <a href="loginPage.html" class="contact-btn"><button class="btn" id="logout-btn" style="margin: 0; display: none;"
+                data-aos="fade-down" disabled>Log Out</button></a>
+  
+          <!-- <a href="login-modified.html" class="contact-btn"><button class="btn" id="btn-style"
+              style="margin: 0; box-shadow:1.5px 1.5px 6px red;" data-aos="fade-down">Login</button></a> -->
+  
+          <div class="toggle-container" data-aos="fade-down">
+            <input id="themeToggle" class="toggle" type="checkbox">
+          </div>
+          <div class="hamburger" data-aos="fade-down">
+            <div class="line"></div>
+            <div class="line"></div>
+            <div class="line"></div>
+          </div>
+        </nav>
+      </div>
+      <header>
+    
+
+
+
     <a href="./index.html"><img src="./img/Screenshot 2024-01-23 003448.png" style="width: 130px; margin-top: 20px; margin-left: 20px; border-radius: 6px;"></a>
 
     <br><br><br>
@@ -104,10 +367,86 @@ <h2 class="accordion-header">
           </div>
         </div>
 
+    </div>
+
+    <div class="more">
+      <div>
+      <h2>Have More questions?</h2>
+      <p>Feel Free to Email us!</p>
+    </div>
+    <div>
+      <button class="moreemail" onclick="sendEmail()">Send Email</button>
+    </div>
+    </div>
+
+    <script>
+      let hamburger = document.querySelector('.hamburger');
+      hamburger.addEventListener('click', () => {
+        let list = document.querySelector('.navLinks');
+        list.classList.toggle('activeHamburger');
+      })
+    </script>
+
+
+    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
+    <script>
+      AOS.init({
+        duration: 1500,
+        offset: 120
+      });
+    </script>
+
+    <script>
+    // To highlight active navbar
+    document.addEventListener("DOMContentLoaded", function () {
+      const navLinks = document.querySelectorAll('.navLinks a');
+
+      function highlightNavLink() {
+        const scrollPosition = window.scrollY;
+
+        navLinks.forEach(link => {
+          const sectionId = link.getAttribute('href').substring(1);
+          const section = document.getElementById(sectionId);
+
+          // Adjust this value to control when the link should be highlighted
+          const offsetPercentage = 20;
+
+          if (section.offsetTop - window.innerHeight * (offsetPercentage / 100) <= scrollPosition &&
+            section.offsetTop + section.offsetHeight > scrollPosition) {
+            link.classList.add('active');
+          } else {
+            link.classList.remove('active');
+          }
+        });
+      }
+
+
 
 
 
         <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
 
+    if (isLoggedIn === 'true') {
+        loginButton.style.display = 'none';
+        logoutButton.style.display = 'block';
+        loginButton.disabled = true ;
+        logoutButton.disabled = false;
+        logoutButton.style.cursor = 'pointer';
+        logoutButton.addEventListener('click', function() {
+            localStorage.setItem('isLoggedIn', 'false');
+            window.location.href = './index.html';
+        });
+    } else {
+        loginButton.style.display = 'block';
+        logoutButton.disabled = true;
+    }
+});
+
+
+function sendEmail() {
+  window.location.href = "mailto:arpanchowdhury003@gmail.com";
+}
+</script>
+
 </body>
 </html>
\ No newline at end of file
diff --git a/feedback.html b/feedback.html
index c5ba1f1e..45130fde 100644
--- a/feedback.html
+++ b/feedback.html
@@ -21,9 +21,101 @@
 
     <!-- FontAwsome-->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
+    <style>
+      .circle {
+      position: absolute;
+      width: 25px;
+      height: 25px;
+      border-radius: 50%;
+      pointer-events: none;
+      background: radial-gradient(circle, rgba(71, 240, 255, 0.3), rgba(0, 119, 255, 0.3));
+      transition: transform 0.1s, left 0.1s, top 0.1s;
+    }
+
+    .circle-container {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+      z-index: 9999;
+    }
+    </style>
 </head>
 
 <body>
+  <div class="circle-container">
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+  </div>
+  <script>
+    document.addEventListener("DOMContentLoaded", function () {
+      const coords = { x: 0, y: 0 };
+      const circles = document.querySelectorAll(".circle");
+
+      circles.forEach(function (circle) {
+        circle.x = 0;
+        circle.y = 0;
+      });
+
+      window.addEventListener("mousemove", function (e) {
+        coords.x = e.pageX;
+        coords.y = e.pageY - window.scrollY; // Adjust for vertical scroll position
+      });
+
+      function animateCircles() {
+        let x = coords.x;
+        let y = coords.y;
+
+        circles.forEach(function (circle, index) {
+          circle.style.left = `${x - 12}px`;
+          circle.style.top = `${y - 12}px`;
+          circle.style.transform = `scale(${(circles.length - index) / circles.length})`;
+
+          const nextCircle = circles[index + 1] || circles[0];
+          circle.x = x;
+          circle.y = y;
+
+          x += (nextCircle.x - x) * 0.3;
+          y += (nextCircle.y - y) * 0.3;
+        });
+
+        requestAnimationFrame(animateCircles);
+      }
+
+      animateCircles();
+    });
+
+  </script>
     <div class="nav-container">
       <nav class="newNav">
         <a href="index.html" class="nav__logo" data-aos="fade-right">Tourguide<span>.</span></a>
diff --git a/img/bg video term3.mp4 b/img/bg video term3.mp4
new file mode 100644
index 00000000..3827b261
Binary files /dev/null and b/img/bg video term3.mp4 differ
diff --git a/img/bg video terms.mp4 b/img/bg video terms.mp4
new file mode 100644
index 00000000..351421df
Binary files /dev/null and b/img/bg video terms.mp4 differ
diff --git a/img/bg video terms2.mp4 b/img/bg video terms2.mp4
new file mode 100644
index 00000000..db7accff
Binary files /dev/null and b/img/bg video terms2.mp4 differ
diff --git a/index.html b/index.html
index a2885c95..40b57b8f 100644
--- a/index.html
+++ b/index.html
@@ -23,9 +23,16 @@
     integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
     crossorigin="anonymous" referrerpolicy="no-referrer" />
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
 
 
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+  <link rel="stylesheet" href="counter.css" class="rel href">
+
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+
+
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <link rel="stylesheet" href="styles.css" />
   <link rel="stylesheet" href="./Image-Gallery/style.css">
@@ -33,8 +40,15 @@
   <link rel="stylesheet" href="explore.css">
   <title>Tourguide</title>
   <!-- adding a fav-icon -->
+
   <link rel="icon" type="image/x-icon" href="favicon.ico"/>
 
+  <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  <link rel="stylesheet" href="tilt.css">
+  <script src="tilt.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/countup.js/2.0.7/countUp.min.js"></script>
+
+
   <script src="index.js" defer></script>
   <script src="mouseEffect.js"></script>
   <link rel="stylesheet" href="mouseEffect.css">
@@ -73,40 +87,50 @@
     .active {
       color: red !important;
     }
-    @media screen and (max-width:390px){
-      .nav__logo{
+
+    @media screen and (max-width:390px) {
+      .nav__logo {
         position: relative;
         right: 1.9rem;
       }
-      .contact-btn{
+
+      .contact-btn {
         position: relative;
         right: 2.5rem;
       }
-      .toggle-container{
+
+      .toggle-container {
         position: relative;
         right: 2.5rem;
 
       }
-      .toggle{
+
+      .toggle {
         width: 130%;
-      } 
-      .line{
+      }
+
+      .line {
         width: 150%;
       }
-      .hamburger{
+
+      .hamburger {
         position: relative;
         right: 1rem;
       }
     }
+
     @media screen and (max-width:364px) {
-      .toggle{
-        width:190%;
+      .toggle {
+        width: 190%;
       }
-      .line{
+
+      .line {
         width: 190%;
       }
     }
+
     .gallery-rotate-image .image-container {
+
   display: flex;
   flex-wrap: wrap;
   gap: 16px; /* Adjust the gap between images */
@@ -138,9 +162,73 @@
   justify-content: center;
   gap: 8px; /* Adjust the gap between buttons */
 }
+
+      display: flex;
+      flex-wrap: wrap;
+      gap: 16px;
+      /* Adjust the gap between images */
+    }
+
+    .gallery-rotate-image .image-container span {
+      display: inline-block;
+    }
+
+    .trip-gallery-container {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 16px;
+      /* Adjust the gap between images */
+    }
+
+    .trip-gallery-container .image-container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .trip-gallery-container .image-container img {
+      max-width: 100%;
+      height: auto;
+    }
+
+    .btn-container {
+      display: flex;
+      justify-content: center;
+      gap: 8px;
+      /* Adjust the gap between buttons */
+    }
+
+    @media screen and (max-width: 768px) {
+      body {
+        align-items: flex-end;
+        width: auto;
+      }
+    }
+
+    .circle {
+      position: absolute;
+      width: 25px;
+      height: 25px;
+      border-radius: 50%;
+      pointer-events: none;
+      background: radial-gradient(circle, rgba(71, 240, 255, 0.3), rgba(0, 119, 255, 0.3));
+      transition: transform 0.1s, left 0.1s, top 0.1s;
+    }
+
+    .circle-container {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+      z-index: 9999;
+    }
+
+
   </style>
-<link rel="stylesheet" href="imstyle.css">
-<link rel="stylesheet" href="jquery.flipster.min.css">
+  <link rel="stylesheet" href="imstyle.css">
+  <link rel="stylesheet" href="jquery.flipster.min.css">
 
 </head>
 
@@ -148,7 +236,77 @@
 <body style="background-color: var(--secondary-color);">
 
   <body>
+    <div class="circle-container">
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+    </div>
+    <script>
+      document.addEventListener("DOMContentLoaded", function () {
+        const coords = { x: 0, y: 0 };
+        const circles = document.querySelectorAll(".circle");
+
+        circles.forEach(function (circle) {
+          circle.x = 0;
+          circle.y = 0;
+        });
+
+        window.addEventListener("mousemove", function (e) {
+          coords.x = e.pageX;
+          coords.y = e.pageY - window.scrollY; // Adjust for vertical scroll position
+        });
+
+        function animateCircles() {
+          let x = coords.x;
+          let y = coords.y;
+
+          circles.forEach(function (circle, index) {
+            circle.style.left = `${x - 12}px`;
+            circle.style.top = `${y - 12}px`;
+            circle.style.transform = `scale(${(circles.length - index) / circles.length})`;
+
+            const nextCircle = circles[index + 1] || circles[0];
+            circle.x = x;
+            circle.y = y;
+
+            x += (nextCircle.x - x) * 0.3;
+            y += (nextCircle.y - y) * 0.3;
+          });
+
+          requestAnimationFrame(animateCircles);
+        }
 
+        animateCircles();
+      });
+
+    </script>
     <div id="pre-loader">
       <h1>TourGuide . . .</h1>
     </div>
@@ -179,8 +337,10 @@ <h1>TourGuide . . .</h1>
   </nav> -->
     <div class="nav-container" id="top">
       <nav class="newNav">
-        <img src="./img/A T logo with a white background and a square shape, connected to nature for a travel company.png" style="width:30px;height:30px;border-radius:50%;">
-        
+        <img
+          src="./img/A T logo with a white background and a square shape, connected to nature for a travel company.png"
+          style="width:30px;height:30px;border-radius:50%;">
+
         <a href="#" class="nav__logo" data-aos="fade-right">Tourguide</span></a>
 
         <ul class="navLinks">
@@ -201,11 +361,16 @@ <h1>TourGuide . . .</h1>
 
         <a href="newLogin.html" class="contact-btn"><button class="btn" id="btn-style" style="margin: 0;"
             data-aos="fade-down">Login/SignUp</button></a>
+
             <a href="mapa.html" class="contact-btn"><button class="btn" id="btn-style" style="margin: 0;"
               data-aos="fade-down">view <map name=""></map></button></a>
 
-        <a href="loginPage.html" class="contact-btn"><button class="btn" id="logout-btn" style="margin: 0; display: none;"
-              data-aos="fade-down" disabled>Log Out</button></a>
+        <a href="mapa.html" class="contact-btn"><button class="btn" id="btn-style" style="margin: 0;"
+            data-aos="fade-down">view <map name=""></map></button></a>
+
+
+        <a href="loginPage.html" class="contact-btn"><button class="btn" id="logout-btn"
+            style="margin: 0; display: none;" data-aos="fade-down" disabled>Log Out</button></a>
 
         <!-- <a href="login-modified.html" class="contact-btn"><button class="btn" id="btn-style"
             style="margin: 0; box-shadow:1.5px 1.5px 6px red;" data-aos="fade-down">Login</button></a> -->
@@ -228,8 +393,9 @@ <h1>TourGuide . . .</h1>
         </div>
         <div class="header__content">
           <div>
-            <h1 data-aos="fade-in">Find Your Perfect Getaway<br />Discover the World's Best Kept   <div> <span
-                class="auto-typed" style="color: var(--head-text);"></span></div></h1>
+            <h1 data-aos="fade-in">Find Your Perfect Getaway<br />Discover the World's Best Kept <div> <span
+                  class="auto-typed" style="color: var(--head-text);"></span></div>
+            </h1>
             <p class="section__subtitle" data-aos="fade-in">
               Make your travel more enjoyable with us. We are the best travel
               agency and we are providing the best travel services for our
@@ -244,7 +410,7 @@ <h1 data-aos="fade-in">Find Your Perfect Getaway<br />Discover the World's Best
                   style="box-shadow: 2px 2px 8px red;">Book Now</button></a>
             </div>
 
-              
+
             <br>
             <div class="story">
               <div class="video">
@@ -254,7 +420,7 @@ <h1 data-aos="fade-in">Find Your Perfect Getaway<br />Discover the World's Best
                 <a href="story.html" class="btn_video">
                   <span><i class="ri-play-fill"></i></span>
               </div>
-               
+
             </div>
             <span data-aos="fade-in">Watch our story</span>
           </div>
@@ -329,16 +495,26 @@ <h1 class="headingofAbout section__title " data-aos=" fade-in"><b>About Us</b></
     <div data-aos="fade-left" class="col-6">
 
       <div class="space-y-4 sm:grid sm:grid-cols-2 lg:grid-cols-1 sm:gap-4 xl:gap-8 sm:space-y-0 md:mt-12">
+
         <!-- Box 1 - Number of Guides -->
         <div class="box1">
+
+         Box 1 - Number of Guides -->
+    <!-- <div class="box1">
+
           <div class="iconss">
 
             <svg class="w-12 h-12 mx-auto dark:text-gray-100 group-hover:text-pink-500 group-hover:dark:text-pink-500"
               viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
               stroke-linejoin="round">
               <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+
               <!-- SVG Path for the icon -->
               <circle cx="8.5" cy="7" r="4" />
+
+              SVG Path for the icon -->
+    <!-- <circle cx="8.5" cy="7" r="4" />
+
               <polyline points="17 11 19 13 23 9" />
             </svg>
             <h3
@@ -348,17 +524,29 @@ <h1 class="headingofAbout section__title " data-aos=" fade-in"><b>About Us</b></
               class="text-base font-semibold text-gray-600 dark:text-gray-300 group-hover:text-gray-900 group-hover:dark:text-gray-300">
               Guides</p>
           </div>
+
         </div>
         <!-- Box 2 - Number of Tours -->
         <div class="box1">
+
+        </div>  -->
+    <!-- Box 2 - Number of Tours -->
+    <!-- <div class="box1">
+
           <div class="iconss">
             <svg class="w-12 h-12 mx-auto dark:text-gray-100 group-hover:text-pink-500 group-hover:dark:text-pink-500"
               viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
               stroke-linejoin="round">
               <path stroke="none" d="M0 0h24v24H0z" />
+
               <circle cx="12" cy="10" r="4" />
               <!-- SVG Path for the icon -->
+
               <path d="M6.75 16a8.015 8.015 0 1 0 9.25 -13" />
+             <circle cx="12" cy="10" r="4" /> -->
+    <!-- SVG Path for the icon -->
+    <!-- <path d="M6.75 16a8.015 8.015 0 1 0 9.25 -13" />
+
               <line x1="12" y1="18" x2="12" y2="22" />
               <line x1="8" y1="22" x2="16" y2="22" />
             </svg>
@@ -368,6 +556,7 @@ <h1 class="headingofAbout section__title " data-aos=" fade-in"><b>About Us</b></
             <p class="text-base font-semibold text-gray-600 dark:text-gray-300 group-hover:text-gray-900 group-hover:dark:text-gray-300"
               data-aos="fade-in">Tours</p>
           </div>
+
         </div>
         <!-- Box 3 - Number of Destinations -->
         <div class="box1">
@@ -377,6 +566,17 @@ <h1 class="headingofAbout section__title " data-aos=" fade-in"><b>About Us</b></
               stroke-linejoin="round">
               <!-- SVG Path for the icon -->
               <path stroke="none" d="M0 0h24v24H0z" />
+
+        </div> -->
+    <!-- Box 3 - Number of Destinations -->
+    <!-- <div class="box1">
+          <a href="affordable-destinations.html" class="iconss">
+            <svg class="w-12 h-12 mx-auto group-hover:text-pink-500 dark:text-gray-100 group-hover:dark:text-pink-500"
+              viewBox="0 0 24 24" stroke-width="2" stroke="black" fill="none" stroke-linecap="round"
+              stroke-linejoin="round"> -->
+    <!-- SVG Path for the icon -->
+    <!-- <path stroke="none" d="M0 0h24v24H0z" />
+
               <line x1="18" y1="6" x2="18" y2="6.01" />
               <path d="M18 13l-3.5 -5a4 4 0 1 1 7 0l-3.5 5" />
               <polyline points="10.5 4.75 9 4 3 7 3 20 9 17 15 20 21 17 21 15" />
@@ -393,6 +593,7 @@ <h1 class="headingofAbout section__title " data-aos=" fade-in"><b>About Us</b></
       </div>
     </div>
 
+
     </div>
     </div>
     </div>
@@ -400,6 +601,49 @@ <h1 class="headingofAbout section__title " data-aos=" fade-in"><b>About Us</b></
 
     </section>
     </header>
+
+    <section>
+      <div class="wrapper">
+        <div class="countitem">
+          <i class="fa-solid fa-handshake-angle"></i>
+          <span class="num" data-val="25000">000</span>
+          <span class="text">Guides</span>
+        </div>
+        <div class="countitem">
+          <i class="fa-solid fa-suitcase-rolling"></i>
+          <span class="num" data-val="20000">000</span>
+          <span class="text">Tours</span>
+        </div>
+        <div class="countitem">
+          <i class="fa-solid fa-location-dot"></i>
+          <span class="num" data-val="20000">000</span>
+          <span class="text">Destinations</span>
+        </div>
+
+      </div>
+    </section>
+
+    <script>
+      let valueDisplays = document.querySelectorAll(".num");
+      let interval = 4000;
+      valueDisplays.forEach((valueDisplay) => {
+        let startValue = 0;
+        let endValue = parseInt(valueDisplay.getAttribute("data-val"));
+        let duration = Math.floor(interval / endValue);
+        let counter = setInterval(function () {
+          startValue += 10;
+          valueDisplay.textContent = startValue;
+          if (startValue == endValue) {
+            clearInterval(counter);
+          }
+        }, duration);
+      });
+    </script>
+
+
+
+
+
     <br><br>
     <!-- ending the section of About Us -->
 
@@ -438,26 +682,36 @@ <h3 style="font-weight: 600;font-size: 24px;">Get Flat 15% OFF</h3>
     </div>
 
     <section class="section__container destination__container" id="Destinations" data-aos="fade-up">
+
     <div class="section__header">
       <div>
         <h2 class="section__title" data-aos="fade-in">Explore top destinations</h2>
         <p class="section__subtitle" data-aos="fade-in" style="margin-left: 280px; text-align: center;">
           Explore your dream places around the world. Here you can find your perfect destination.
         </p>
+
+      <div class="section__header">
+        <div>
+          <h2 class="section__title" data-aos="fade-in"><span style="margin-left: 300px;"></span>Explore top
+            destinations</h2>
+          <p class="section__subtitle" data-aos="fade-in" style="margin-left: 300px;">
+            Explore your dream places around the world. Here you can find your perfect destination.
+          </p>
+        </div>
+
       </div>
-    </div>
 
-    <!-- slideshow -->
-<!-- <div class="slideshow-container" data-aos="fade-up"> -->
+      <!-- slideshow -->
+      <!-- <div class="slideshow-container" data-aos="fade-up"> -->
 
-<!-- Next and previous buttons -->
-<!-- <div class="destination__nav">
+      <!-- Next and previous buttons -->
+      <!-- <div class="destination__nav">
       <span onclick="pullSlide(-1)"><i class="ri-arrow-left-s-line"></i></span>
       <span onclick="pullSlide(1)"><i class="ri-arrow-right-s-line"></i></span>
     </div> -->
 
-<!-- Full-width images with number and caption text -->
-<!-- <div class="mySlides">
+      <!-- Full-width images with number and caption text -->
+      <!-- <div class="mySlides">
       <img src="./img/eiffelTower.webp" style="width:100%">
     </div>
 
@@ -479,26 +733,28 @@ <h2 class="section__title" data-aos="fade-in">Explore top destinations</h2>
           <span></span>
         </div>
       </div> -->
-    <div class="outer-box">
-      <div class="containers">
-            
-          <div class="card active" style="
-            background-image: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 7%, rgba(255, 255, 255, 0) 50%),
-              url('/img/paris.jpg')
-          ">
-          <div class="info">
-
-            <p>
-              ||Eiffel Tower||
-            </p>
-            <h3>PARIS</h3>
+      <div class="outer-box">
+        <div class="containers">
+
+
+          <div class="card" style="
+        background-image: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 7%, rgba(255, 255, 255, 0) 50%),
+          url('./img/paris.jpg')
+            ">
+            <div class="info">
+
+              <p>
+                ||Eiffel Tower||
+              </p>
+              <h3>PARIS</h3>
+            </div>
           </div>
-        </div>
 
-    <div class="card" style="
+          <div class="card" style="
       background-image: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 7%, rgba(255, 255, 255, 0) 50%),
         url('./img/london.jpg')
     ">
+
       <div class="info">
         <img src="./img/london.jpg" alt="Giant Wheel" style="width:100%">
         <p>||Giant Wheel||</p>
@@ -525,13 +781,42 @@ <h3>GOA</h3>
         <img src="./img/maldives.jpg" alt="Male Beach" style="width:100%">
         <p>||Male Beach||</p>
         <h3>MALDIVES</h3>
+
+            <div class="info">
+
+              <p>||Giant Wheel||</p>
+              <h3>LONDON</h3>
+            </div>
+          </div>
+
+
+          <div class="card" style="
+        background-image: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 7%, rgba(255, 255, 255, 0) 50%),
+          url('./img/goa.jpg')
+      ">
+            <div class="info">
+
+              <p>||Goa Beach||</p>
+              <h3>GOA</h3>
+            </div>
+          </div>
+
+          <div class="card" style="
+        background-image: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 7%, rgba(255, 255, 255, 0) 50%),
+          url('./img/maldives.jpg')
+      ">
+            <div class="info">
+              <p>||Male Beach||</p>
+              <h3>MALDIVES</h3>
+            </div>
+          </div>
+
+        </div>
+
       </div>
-    </div>
 
-  </div>
-</div>
 
-    <script src="explore.js"></script>
+      <script src="explore.js"></script>
     </section>
 
     <section class="trip" id="trip" data-aos="zoom-in" data-aos-offset="100">
@@ -583,35 +868,48 @@ <h2 class="section__title" style="text-align: center;">Best trip packages</h2>
         <div class="view__all">
           <a href="./package.html"><button class="btn" id="btn-style" style="box-shadow: 2px 2px 8px red;">View
               All</button></a>
+
+          <br>
+          <br>
+          <a href="trending.html"><button class="btn" id="btn-style" style="box-shadow: 2px 2px 8px red;">View
+              Trending</button></a>
+
         </div>
       </div>
     </section>
     <div class="hero">
       <div class="carousel">
         <ul>
-            <li><img src="https://i.ibb.co/ZYDJ6vv/pexels-spencer-davis-4356144.jpg"></li>
-            <li><img src="https://i.ibb.co/W3HTbYG/pexels-zakaria-boumliha-2827374.jpg"></li>
-            <li><img src="https://i.ibb.co/KwHd8PQ/pexels-stijn-dijkstra-2499699.jpg"></li>
-            <li><img src="https://www.shutterstock.com/image-photo/attractive-young-female-tourist-exploring-260nw-2206967581.jpg"></li>
-            <li><img src="https://thumbs.dreamstime.com/b/young-man-tourist-sail-long-tail-thailand-boat-ocean-sea-vacation-travel-trip-beautiful-nature-87331931.jpg"></li>
-            <li><img src="https://www.tourmyindia.com/blog//wp-content/uploads/2020/11/Feature-Akshardham-Temple.jpg"></li>
-            <li><img src="https://etimg.etb2bimg.com/photo/106124800.cms"></li>
-            <li><img src="https://i.insider.com/5dcc2f02e94e860aff271137?width=700"></li>
-            <li><img src="https://static01.nyt.com/images/2022/03/23/multimedia/23-virus-briefing-capitol/23-virus-briefing-capitol-articleLarge.jpg?quality=75&auto=webp&disable=upscale"></li>
-            <li><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTWh9aGHycWhRya4V6ZiJFL26LyIHheiu-EoQ&s"></li>
-        
+          <li><img src="https://i.ibb.co/ZYDJ6vv/pexels-spencer-davis-4356144.jpg"></li>
+          <li><img src="https://i.ibb.co/W3HTbYG/pexels-zakaria-boumliha-2827374.jpg"></li>
+          <li><img src="https://i.ibb.co/KwHd8PQ/pexels-stijn-dijkstra-2499699.jpg"></li>
+          <li><img
+              src="https://www.shutterstock.com/image-photo/attractive-young-female-tourist-exploring-260nw-2206967581.jpg">
+          </li>
+          <li><img
+              src="https://thumbs.dreamstime.com/b/young-man-tourist-sail-long-tail-thailand-boat-ocean-sea-vacation-travel-trip-beautiful-nature-87331931.jpg">
+          </li>
+          <li><img src="https://www.tourmyindia.com/blog//wp-content/uploads/2020/11/Feature-Akshardham-Temple.jpg">
+          </li>
+          <li><img src="https://etimg.etb2bimg.com/photo/106124800.cms"></li>
+          <li><img src="https://i.insider.com/5dcc2f02e94e860aff271137?width=700"></li>
+          <li><img
+              src="https://static01.nyt.com/images/2022/03/23/multimedia/23-virus-briefing-capitol/23-virus-briefing-capitol-articleLarge.jpg?quality=75&auto=webp&disable=upscale">
+          </li>
+          <li><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTWh9aGHycWhRya4V6ZiJFL26LyIHheiu-EoQ&s">
+          </li>
+
         </ul>
       </div>
-    
-     
 
-</div>
 
-    <script
-    src="https://code.jquery.com/jquery-3.7.1.min.js"
-    integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
-    crossorigin="anonymous"></script>
+
+    </div>
+
+    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
+      integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
     <script src="jquery.flipster.min.js"></script>
+
 <script>
 $('.carousel').flipster({
     style:'carousel',
@@ -632,10 +930,32 @@ <h2 class="section__title" data-aos="zoom-in">
           </p>
           <button class="btn btn-style" id="btn-page" onclick="replaceDivs()" data-aos="zoom-in"
             style="box-shadow: 2px 2px 8px rgb(0, 191, 255);">View All</button>
+
+    <script>
+      $('.carousel').flipster({
+        style: 'carousel',
+        spacing: -0.3,
+      });
+    </script>
+    <section class="gallary" id="ReviewGallery">
+      <div class="section__container gallary__container">
+        <div class="section__container gallary__container" id="originalDiv">
+          <div class="gallary__content">
+            <div>
+              <h2 class="section__title" data-aos="zoom-in" style="text-align: center;">
+                Our trip gallery that will inspire you
+              </h2>
+              <p class="section__subtitle" data-aos="zoom-in">
+                Visual Stories of Adventure to Spark Your Imagination.<br>
+                Get inspired for your next journey.
+              </p>
+              <button class="btn btn-style" id="btn-page" onclick="replaceDivs()" data-aos="zoom-in"
+                style="box-shadow: 2px 2px 8px rgb(0, 191, 255);">View All</button>
+            </div>
+          </div>
+
         </div>
       </div>
-    </div>
-  </div>
       <br><br>
       <!-- New div components (hidden initially) -->
       <div id="newDiv" style="display: none;" data-aos="zoom-in">
@@ -746,28 +1066,31 @@ <h2 class="section__title" data-aos="zoom-in">
     </section>
     <script>
       function replaceDivs() {
-    document.querySelector('.hero').style.display = 'none';
-    document.getElementById('originalDiv').style.display = 'none';
-    document.getElementById('newDiv').style.display = 'block';
-  }
+        document.querySelector('.hero').style.display = 'none';
+        document.getElementById('originalDiv').style.display = 'none';
+        document.getElementById('newDiv').style.display = 'block';
+      }
     </script>
     <br /><br />
 
     <!-- Toursit Guide Section -->
-     <section class="tourist" id ="tourist">
+    <section class="tourist" id="tourist">
       <h2 class="tourist-heading section__title" align-items="center" data-aos="fade-in">Tourist Guide</h2>
-       <h4 style="color: rgb(231, 62, 118); font-style: italic;font-family: cursive;">Have an amazing trip and explore the destiny</h4>
-       <br></br>
-       <h3 style="color: rgb(6, 151, 241); font-style: inherit;font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;">Connect with the Guide</h3>
-       <br></br>
-       <div class="center-card">
-       <img src="./tg1.jpg" alt="guide1"/>
-       <br></br>
-       <img src="./tg2.jpg" alt="guide2"/>
-       <br></br>
-       <img src="./tg3.jpg" alt="guide3"/>
+      <h4 style="color: rgb(231, 62, 118); font-style: italic;font-family: cursive;">Have an amazing trip and explore
+        the destiny</h4>
+      <br></br>
+      <h3
+        style="color: rgb(6, 151, 241); font-style: inherit;font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;">
+        Connect with the Guide</h3>
+      <br></br>
+      <div class="center-card">
+        <img src="./tg1.jpg" alt="guide1" />
+        <br></br>
+        <img src="./tg2.jpg" alt="guide2" />
+        <br></br>
+        <img src="./tg3.jpg" alt="guide3" />
       </div>
-      </section>
+    </section>
     <br /><br /><br /><br />
     <!-- Testimonials Section -->
 
@@ -781,20 +1104,24 @@ <h2 class="testimonial-heading section__title" align-items="center" data-aos="fa
                 <img class="testi-img" src="./img/testimonial1.jpg" alt="">
                 <div>
                   <p><sup><i class="fas fa-quote-left"></i></sup>TourGuide made our dream vacation a reality! From the
-                    breathtaking landscapes to the seamless logistics, every moment was a new adventure. The personalized
-                    itinerary and expert guides added a special touch to our journey. We can't wait to book our next trip with
+                    breathtaking landscapes to the seamless logistics, every moment was a new adventure. The
+                    personalized
+                    itinerary and expert guides added a special touch to our journey. We can't wait to book our next
+                    trip with
                     TourGuide!<sup><i class="fas fa-quote-right"></i></sup></p>
                   <div class="user-info">
                     <h3>Joseph</h3>
                   </div>
                 </div>
               </div>
-              <div class="testimonial-user" >
+              <div class="testimonial-user">
                 <img class="testi-img" src="./img/Abhisek Tamang.jpg" alt="">
                 <div>
-                  <p><sup><i class="fas fa-quote-left"></i></sup>Our cultural tour with TourGuide exceeded all expectations.
+                  <p><sup><i class="fas fa-quote-left"></i></sup>Our cultural tour with TourGuide exceeded all
+                    expectations.
                     The
-                    immersive experiences, knowledgeable guides, and carefully curated activities allowed us to connect with
+                    immersive experiences, knowledgeable guides, and carefully curated activities allowed us to connect
+                    with
                     the
                     local culture in a way we never thought possible. Thanks to TourGuide.<sup><i
                         class="fas fa-quote-right"></i></sup></p>
@@ -803,12 +1130,14 @@ <h3>Charles</h3>
                   </div>
                 </div>
               </div>
-              <div class="testimonial-user" >
+              <div class="testimonial-user">
                 <img class="testi-img" src="./img/testimonial2.jpg" alt="">
                 <div>
-                  <p><sup><i class="fas fa-quote-left"></i></sup>Traveling with the family has never been easier! TourGuide
+                  <p><sup><i class="fas fa-quote-left"></i></sup>Traveling with the family has never been easier!
+                    TourGuide
                     took
-                    care of every detail, ensuring a stress-free and enjoyable vacation for all. The kid-friendly activities
+                    care of every detail, ensuring a stress-free and enjoyable vacation for all. The kid-friendly
+                    activities
                     and
                     family-oriented guides made our trip unforgettable.<sup><i class="fas fa-quote-right"></i></sup></p>
                   <div class="user-info">
@@ -820,20 +1149,24 @@ <h3>Katie</h3>
                 <img class="testi-img" src="./img/testimonial1.jpg" alt="">
                 <div>
                   <p><sup><i class="fas fa-quote-left"></i></sup>TourGuide made our dream vacation a reality! From the
-                    breathtaking landscapes to the seamless logistics, every moment was a new adventure. The personalized
-                    itinerary and expert guides added a special touch to our journey. We can't wait to book our next trip with
+                    breathtaking landscapes to the seamless logistics, every moment was a new adventure. The
+                    personalized
+                    itinerary and expert guides added a special touch to our journey. We can't wait to book our next
+                    trip with
                     TourGuide!<sup><i class="fas fa-quote-right"></i></sup></p>
                   <div class="user-info">
                     <h3>Joseph</h3>
                   </div>
                 </div>
               </div>
-              <div class="testimonial-user" >
+              <div class="testimonial-user">
                 <img class="testi-img" src="./img/Abhisek Tamang.jpg" alt="">
                 <div>
-                  <p><sup><i class="fas fa-quote-left"></i></sup>Our cultural tour with TourGuide exceeded all expectations.
+                  <p><sup><i class="fas fa-quote-left"></i></sup>Our cultural tour with TourGuide exceeded all
+                    expectations.
                     The
-                    immersive experiences, knowledgeable guides, and carefully curated activities allowed us to connect with
+                    immersive experiences, knowledgeable guides, and carefully curated activities allowed us to connect
+                    with
                     the
                     local culture in a way we never thought possible. Thanks to TourGuide.<sup><i
                         class="fas fa-quote-right"></i></sup></p>
@@ -842,12 +1175,14 @@ <h3>Charles</h3>
                   </div>
                 </div>
               </div>
-              <div class="testimonial-user" >
+              <div class="testimonial-user">
                 <img class="testi-img" src="./img/testimonial2.jpg" alt="">
                 <div>
-                  <p><sup><i class="fas fa-quote-left"></i></sup>Traveling with the family has never been easier! TourGuide
+                  <p><sup><i class="fas fa-quote-left"></i></sup>Traveling with the family has never been easier!
+                    TourGuide
                     took
-                    care of every detail, ensuring a stress-free and enjoyable vacation for all. The kid-friendly activities
+                    care of every detail, ensuring a stress-free and enjoyable vacation for all. The kid-friendly
+                    activities
                     and
                     family-oriented guides made our trip unforgettable.<sup><i class="fas fa-quote-right"></i></sup></p>
                   <div class="user-info">
@@ -860,7 +1195,7 @@ <h3>Katie</h3>
           </div>
         </div>
       </div>
-      
+
     </section>
 
 
@@ -868,12 +1203,12 @@ <h3>Katie</h3>
 
 
 
-   
 
 
 
 
-    
+
+
 
     <!----------------------------------------------------- FAQ section ---------------------- -->
 
@@ -881,14 +1216,28 @@ <h3>Katie</h3>
       <h2 class="section__title" data-aos="zoom-in">
         Frequently asked questions
       </h2>
+
       <div class="faq-container">
         <div class="faq active" data-aos="zoom-in">
           <h3 class="faq-title">How do I book my travel arrangements through your website?</h3>
           <p class="faq-text">Booking your travel with us is simple and convenient. Start by entering your destination,
+
+      <div class="accordion faq-container faq">
+        <div class="accordion__header" data-aos="zoom-in">
+          <h3 class="accordion__question faq-title">How do I book my travel arrangements through your website?</h3>
+          <span class="accordion__icon">
+            <i id="accordion-icon" class="ri-add-line"></i>
+          </span>
+        </div>
+        <div class="accordion__content">
+          <p class="faq-text accordion__answer">Booking your travel with us is simple and convenient. Start by entering
+            your destination,
+
             travel dates, and other relevant details on our homepage. Browse through the available options, including
             flights, hotels, and car rentals. Once you find the perfect combination for your trip, follow the easy
             step-by-step process to confirm your booking. If you encounter any issues or have questions during the
             booking process, our customer support team is available 24/7 to assist you.</p>
+
           <button class="faq-toggle">
             <i class="fas fa-chevron-down"></i>
             <i class="fas fa-times"></i>
@@ -897,11 +1246,28 @@ <h3 class="faq-title">How do I book my travel arrangements through your website?
         <div class="faq" data-aos="zoom-in">
           <h3 class="faq-title">What measures are in place to ensure the safety of my personal information?</h3>
           <p class="faq-text">We take the security of your personal information seriously. Our website employs
+
+        </div>
+      </div>
+
+      <div class="accordion faq-container faq">
+        <div class="accordion__header" data-aos="zoom-in">
+          <h3 class="accordion__question faq-title">What measures are in place to ensure the safety of my personal
+            information?</h3>
+          <span class="accordion__icon">
+            <i id="accordion-icon" class="ri-add-line"></i>
+          </span>
+        </div>
+        <div class="accordion__content">
+          <p class="faq-text accordion__answer">We take the security of your personal information seriously. Our website
+            employs
+
             state-of-the-art encryption technology to safeguard your data during the booking process. Additionally, we
             adhere to strict privacy policies and comply with industry standards to protect your information. Rest
             assured that your details are used solely for the purpose of facilitating your travel arrangements, and we
             do not share your information with third parties without your consent. For more details, please refer to our
             Privacy Policy.</p>
+
           <button class="faq-toggle">
             <i class="fas fa-chevron-down"></i>
             <i class="fas fa-times"></i>
@@ -910,17 +1276,39 @@ <h3 class="faq-title">What measures are in place to ensure the safety of my pers
         <div class="faq" data-aos="zoom-in">
           <h3 class="faq-title">Can I make changes to my booking or cancel it if needed?</h3>
           <p class="faq-text">Yes, we understand that plans can change. Depending on the terms and conditions of your
+
+
+        </div>
+      </div>
+
+      <div class="accordion faq-container faq">
+        <div class="accordion__header" data-aos="zoom-in">
+          <h3 class="accordion__question faq-title">Can I make changes to my booking or cancel it if needed?</h3>
+          <span class="accordion__icon">
+            <i id="accordion-icon" class="ri-add-line"></i>
+          </span>
+        </div>
+        <div class="accordion__content">
+          <p class="faq-text accordion__answer">Yes, we understand that plans can change. Depending on the terms and
+            conditions of your
+
             specific booking, you may be able to make modifications or cancel your reservation. Log in to your account
             on our website, navigate to the "Manage Booking" section, and follow the provided instructions. Keep in mind
             that there may be associated fees or restrictions depending on the type of booking and the time of the
             requested changes. For further assistance, feel free to contact our customer support team, and they will
             guide you through the process.</p>
+
           <button class="faq-toggle">
             <i class="fas fa-chevron-down"></i>
             <i class="fas fa-times"></i>
           </button>
         </div>
-        
+
+
+        </div>
+      </div>
+
+
 
       </div>
     </section>
@@ -1006,18 +1394,19 @@ <h1>Contact Us</h1>
             <form id="contact-form" name="CalcDiverse Contact" autocomplete="off">
               <div class="one" style="position: relative;">
                 <i class="icon1 fa-solid fa-user"></i>
-                <input type="text" id="Name" placeholder="Name"  style="padding-left: 6%;">
+                <input type="text" id="Name" placeholder="Name" style="padding-left: 6%;">
               </div>
               <div style="position: relative;">
-                <i class="icon2 fa-solid fa-envelope" ></i>
-                <input type="email" id="email" placeholder="Email"style="padding-left:6%;" required>
+                <i class="icon2 fa-solid fa-envelope"></i>
+                <input type="email" id="email" placeholder="Email" style="padding-left:6%;" required>
               </div>
               <div style="position: relative;">
                 <i class="icon3 fa-solid fa-message"></i>
-                <textarea id="message" placeholder="Type your message here.." style="padding-left:6%;" required></textarea><br>
+                <textarea id="message" placeholder="Type your message here.." style="padding-left:6%;"
+                  required></textarea><br>
               </div>
               <button type="submit" class="btn btn-style" data-aos="fade-in" id="btn-style"
-              style="margin-right: 40px;box-shadow: 2px 2px 8px red;">Send</button>
+                style="margin-right: 40px;box-shadow: 2px 2px 8px red;">Send</button>
               <button onclick="window.location.href='feed.html'" class="btn  btn-style" data-aos="fade-in"
                 id="btn-style" style="box-shadow: 2px 2px 8px red;">Feedback</button>
             </form>
@@ -1042,10 +1431,40 @@ <h2 class="section__title" data-aos="fade-up">Subscribe to get special prize</h2
             <input type="email" placeholder="Your email here" id="emailInput" required />
             <button class="btn-send" id="send" type="submit" style="box-shadow: 2px 2px 8px blue;">Subscribe</button>
           </form>
+
         </div>
       </div>
     </section>
 
+          <p id="subscriptionMessage" style="display: none; color: green; margin-top: 10px;">Subscription successful! 🎉
+          </p>
+        </div>
+      </div>
+    </section>
+    <!--DISPLAY SUBSCRIPTION SUCCESS MESSAGE-->
+    <script>
+      document.getElementById('subscriptionForm').addEventListener('submit', function (event) {
+        event.preventDefault(); // Prevent submission
+
+
+
+        //  success message 
+        showSubscriptionMessage();
+      });
+
+      function showSubscriptionMessage() {
+        var messageElement = document.getElementById('subscriptionMessage');
+        messageElement.style.display = 'block';
+
+        // Hide message after 4 seconds
+        setTimeout(function () {
+          messageElement.style.display = 'none';
+        }, 4000); // 4000 milliseconds = 4 seconds
+      }
+    </script>
+
+
+
     <footer class="footer" data-aos="fade-up">
       <div class="section__container footer__container">
         <div class="footer__col">
@@ -1072,18 +1491,19 @@ <h3 class="footer-head" class="footer__title">Tourguide<span>.</span></h3>
         </div>
         <div class="footer__col">
           <h3 class="footer-head" class="footer__title">Places You May Want to Visit<span>.</span></h3>
-          <p class="footer__text"> 
-           
-            <a href="Cultural_Exp.html" >Cultural Experiences</a>
-           
+          <p class="footer__text">
+
+            <a href="Cultural_Exp.html">Cultural Experiences</a>
+
             <a href="HoneyMoon.html">Honeymoon Places</a>
             <a href="Adventure.html">Adventure travel</a>
-           
-           
+
+
           </p>
         </div>
         <div class="footer__col">
           <div class="footer__area">
+
             <h4 class="footer__subtitle">Support</h4>
           <p><a href="./faq.html" class="footer__link">FAQs</a></p>
           <p><a href="./tnc.html" class="footer__link">Terms & Conditions</a></p>
@@ -1102,6 +1522,17 @@ <h4 class="footer__subtitle">Support</h4>
         <div class="footer__col">
           <h4>Address</h4>
           <h4 class="footer-head" style="padding-left: 35px;">  Address</h4>
+
+            <h4 class="footer-head" class="footer__subtitle">Support</h4>
+            <p><a href="./faq.html" class="footer__link">FAQs</a></p>
+            <p><a href="./tnc.html" class="footer__link">Terms & Conditions</a></p>
+            <p><a href="./privacy.html" class="footer__link">Privacy Policy</a></p>
+            <p><a href="#cnt-form" class="footer__link">Contact Us</a></p>
+          </div>
+        </div>
+        <div class="footer__col">
+          <h4 class="footer-head" style="padding-left: 35px;"> Address</h4>
+
           <div class="mapouter">
             <div class="gmap_canvas"><iframe width="200" height="200" id="gmap_canvas"
                 src="https://maps.google.com/maps?q=wellington%20street%20kolkata&t=k&z=11&ie=UTF8&iwloc=&output=embed"
@@ -1172,35 +1603,41 @@ <h4>Contact Us</h4>
                   <i class="fab fa-linkedin" title="linkedin" style="cursor: pointer;"></i>
                 </div>
               </a>
-          
+
               <a href="">
                 <div class="icon">
-                  <i class="fab fa-twitter" title="X"style="cursor: pointer;"></i>
+                  <i class="fab fa-twitter" title="X" style="cursor: pointer;"></i>
                 </div>
               </a>
-          
+
               <a href="">
                 <div class="icon">
-                  <i class="fab fa-instagram" title="Instagram"style="cursor: pointer;"></i>
+                  <i class="fab fa-instagram" title="Instagram" style="cursor: pointer;"></i>
                 </div>
               </a>
-              
-          
+
+
               <a href="" title="YouTube">
                 <div class="icon">
                   <i class="fab fa-youtube" style="cursor: pointer;"></i>
                 </div>
               </a>
-          
+
               <a href="">
                 <div class="icon">
                   <i class="fab fa-github" title="Github"></i>
                 </div>
               </a>
-             
+
+            </div>
+            <!-- Visitor Widget -->
+            <div class="visitor-widget mt-3">
+              <a>
+                <img alt="Hits" src="https://hits.sh/apu52.github.io/Travel_Website.svg?style=for-the-badge&label=Visitors&extraCount=786&color=526180&labelColor=9bbbff"/>
+              </a>
             </div>
           </div>
-        
+
         </div>
         <div class="footer__col">
           <div id="google_element"></div>
@@ -1212,41 +1649,41 @@ <h4>Contact Us</h4>
               }, 'google_element');
             }
           </script>
-      </div>
+        </div>
 
-      
-      <!--  New copyright code to make it dynamic and display current year -->
-      <div class="footer__bar">
-        <div>
-          <li>Copyright &copy;<span id="year"></span> </span> Arpan Chowdhury. All rights reserved. </li>
+
+        <!--  New copyright code to make it dynamic and display current year -->
+        <div class="footer__bar">
+          <div>
+            <li>Copyright &copy;<span id="year"></span> </span> Arpan Chowdhury. All rights reserved. </li>
+          </div>
         </div>
-      </div>
 
-    </footer> 
+    </footer>
 
     <a class="goupbtn" href="#" onclick="goToTop()"><i class="fa-solid fa-arrow-up"></i></a>
 
-<script>
-  // Get the button
-  var mybutton = document.querySelector(".goupbtn");
-
-  // When the user scrolls, check if the button should be displayed
-  window.addEventListener("scroll", function() {
-    if (window.scrollY > 20) {
-      mybutton.style.display = "block";
-    } else {
-      mybutton.style.display = "none";
-    }
-  });
+    <script>
+      // Get the button
+      var mybutton = document.querySelector(".goupbtn");
+
+      // When the user scrolls, check if the button should be displayed
+      window.addEventListener("scroll", function () {
+        if (window.scrollY > 20) {
+          mybutton.style.display = "block";
+        } else {
+          mybutton.style.display = "none";
+        }
+      });
+
+      // When the user clicks on the button, scroll to the top of the document
+      function goToTop() {
+        document.body.scrollTop = 0; // For Safari
+        document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
+      }
+    </script>
 
-  // When the user clicks on the button, scroll to the top of the document
-  function goToTop() {
-    document.body.scrollTop = 0; // For Safari
-    document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
-  }
-</script>
 
-    
 
 
 
@@ -1697,15 +2134,21 @@ <h4>Contact Us</h4>
   <script src="faq-website.js"></script>
 
   <script>
-    window.onload = function() {
-        var link = top.document.createElement("link");
-        link.type = "image/x-icon";
-        link.rel = "icon";
-        link.href = "favicon.ico?v=1";
-        top.document.getElementsByTagName("head")[0].appendChild(link);
+    window.onload = function () {
+      var link = top.document.createElement("link");
+      link.type = "image/x-icon";
+      link.rel = "icon";
+      link.href = "favicon.ico?v=1";
+      top.document.getElementsByTagName("head")[0].appendChild(link);
     }
+
 </script>
-  =======
+
+  </script>
+
+  <script src="index.js"></script>
+
+
 
   <!--  Adding copyright javascript code to make it dynamic and display current year -->
   <script>
@@ -1713,34 +2156,65 @@ <h4>Contact Us</h4>
   </script>
 
   <script>
-        // Logout Button
+    // Logout Button
 
-      document.addEventListener('DOMContentLoaded', function () {
+    document.addEventListener('DOMContentLoaded', function () {
       var isLoggedIn = localStorage.getItem('isLoggedIn');
       var loginButton = document.getElementById('btn-style');
       var logoutButton = document.getElementById('logout-btn');
 
       if (isLoggedIn === 'true') {
-          loginButton.style.display = 'none';
-          logoutButton.style.display = 'block';
-          loginButton.disabled = true ;
-          logoutButton.disabled = false;
-          logoutButton.style.cursor = 'pointer';
-          logoutButton.addEventListener('click', function() {
-              localStorage.setItem('isLoggedIn', 'false');
-              window.location.href = './index.html';
-          });
+        loginButton.style.display = 'none';
+        logoutButton.style.display = 'block';
+        loginButton.disabled = true;
+        logoutButton.disabled = false;
+        logoutButton.style.cursor = 'pointer';
+        logoutButton.addEventListener('click', function () {
+          localStorage.setItem('isLoggedIn', 'false');
+          window.location.href = './index.html';
+        });
       } else {
-          loginButton.style.display = 'block';
-          logoutButton.disabled = true;
+        loginButton.style.display = 'block';
+        logoutButton.disabled = true;
       }
-  });
+    });
+  </script>
+
+
+  <script>
+    document.addEventListener('DOMContentLoaded', function () {
+      function animateValue(id, start, end, duration) {
+        const obj = document.getElementById(id);
+        const startTime = performance.now();
+
+        function updateValue(timestamp) {
+          const elapsedTime = timestamp - startTime;
+          const progress = Math.min(elapsedTime / duration, 1);
+          const currentValue = Math.floor(progress * (end - start) + start);
+          obj.textContent = currentValue;
+          if (progress < 1) {
+            requestAnimationFrame(updateValue);
+          }
+        }
+
+        requestAnimationFrame(updateValue);
+      }
+
+      // Call the function for each count-up element
+      animateValue("guidesCount", 0, 25000, 20000);
+      animateValue("toursCount", 0, 20000, 20000);
+      animateValue("destinationsCount", 0, 10994, 20000);
+    });
   </script>
 
 
 
 
 
+
+
+
+
 </html><!-- New bubble background start -->
 
 
@@ -1770,5 +2244,10 @@ <h4>Contact Us</h4>
 
 
 
+
 </div>
 <!-- New bubble background end -->
+
+</div> -->
+<!-- New bubble background end -->
+
diff --git a/login.css b/login.css
index 20af43ab..2c758567 100644
--- a/login.css
+++ b/login.css
@@ -29,6 +29,7 @@ body {
 
 .left-section {
     flex: 3;
+    margin-top: 58px;
     display: flex;
     flex-direction: column;
     justify-content: center;
diff --git a/maps.css b/maps.css
index 2b9cd7eb..88e19fe9 100644
--- a/maps.css
+++ b/maps.css
@@ -14,4 +14,5 @@
     height: 100%;
     margin: 0;
     padding: 0;
+    margin-top: 0;
   }
\ No newline at end of file
diff --git a/mouseEffect.css b/mouseEffect.css
deleted file mode 100644
index ef52c6b6..00000000
--- a/mouseEffect.css
+++ /dev/null
@@ -1,18 +0,0 @@
-
-.ripple {
-    position: absolute;
-    width: 10px;
-    height: 10px;
-    border-radius: 45%;
-    background: linear-gradient(45deg, #b3e0f1, #01baef);
-    pointer-events: none;
-    transform: scale(0);
-    z-index: 1000;
-    transition: transform 1.2s, opacity 1s;
-    opacity: 1;
-}
-
-.ripple-active {
-    transform: scale(3);
-    opacity: 0;
-}
\ No newline at end of file
diff --git a/mouseEffect.js b/mouseEffect.js
deleted file mode 100644
index fe3edc86..00000000
--- a/mouseEffect.js
+++ /dev/null
@@ -1,27 +0,0 @@
-document.addEventListener('mousemove', function(event) {
-    const ripple = document.createElement('div');
-    const element = document.getElementById('top');
-
-    let x = event.clientX;
-    let y = event.clientY;
-    let scrollLeft = window.pageXOffset;
-    let scrollTop = window.pageYOffset;
-    ripple.className = 'ripple';
-    let relativeX = x + scrollLeft;
-    let relativeY = y + scrollTop;
-    ripple.style.left = `${relativeX  - 5}px`;
-    ripple.style.top = `${relativeY - 5}px`;
-    
-    document.body.appendChild(ripple);
-
-
-    // Trigger the animation by adding the class after a short delay
-    setTimeout(() => {
-        ripple.classList.add('ripple-active');
-    }, 10);
-
-    // Remove the ripple element after the animation ends
-    ripple.addEventListener('transitionend', () => {
-        ripple.remove();
-    });
-});
diff --git a/privacy.html b/privacy.html
index 250cc32d..e84aaa85 100644
--- a/privacy.html
+++ b/privacy.html
@@ -13,18 +13,113 @@
 
     <link href="./tnc.css" rel="stylesheet" type="text/css" />
 
-
+<style>
+  .circle {
+      position: absolute;
+      width: 25px;
+      height: 25px;
+      border-radius: 50%;
+      pointer-events: none;
+      background: radial-gradient(circle, rgba(71, 240, 255, 0.3), rgba(0, 119, 255, 0.3));
+      transition: transform 0.1s, left 0.1s, top 0.1s;
+    }
+
+    .circle-container {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+      z-index: 9999;
+    }
+</style>
    
   </head>
 
   <body id="terms-and-conditions">
+    <div class="circle-container">
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+    </div>
+    <script>
+      document.addEventListener("DOMContentLoaded", function () {
+        const coords = { x: 0, y: 0 };
+        const circles = document.querySelectorAll(".circle");
+
+        circles.forEach(function (circle) {
+          circle.x = 0;
+          circle.y = 0;
+        });
+
+        window.addEventListener("mousemove", function (e) {
+          coords.x = e.pageX;
+          coords.y = e.pageY - window.scrollY; // Adjust for vertical scroll position
+        });
+
+        function animateCircles() {
+          let x = coords.x;
+          let y = coords.y;
+
+          circles.forEach(function (circle, index) {
+            circle.style.left = `${x - 12}px`;
+            circle.style.top = `${y - 12}px`;
+            circle.style.transform = `scale(${(circles.length - index) / circles.length})`;
+
+            const nextCircle = circles[index + 1] || circles[0];
+            circle.x = x;
+            circle.y = y;
+
+            x += (nextCircle.x - x) * 0.3;
+            y += (nextCircle.y - y) * 0.3;
+          });
+
+          requestAnimationFrame(animateCircles);
+        }
+
+        animateCircles();
+      });
+
+    </script>
     
+    <video autoplay muted loop class="video-background">
+      <source src="/img/bg video terms.mp4" type="video/mp4">
+       the video tag.
+  </video>
     <a href="index.html"><img src="./img/Screenshot 2024-01-23 003448.png" style="width: 130px; border-radius: 6px; margin-top: 20px; margin-left: 20px;"></a>
 
     <div class="container-fluid">
       <div class="row terms-and-conditions-section">
         <div class="col-xs-12 text-center">
-          <h1 class="title">Privacy Policy</h1>
+          <h1 class="title" style="color: #041338;">Privacy Policy</h1>
         </div>
 
         <div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
@@ -73,6 +168,9 @@ <h2 class="section-title">Changes to This Privacy Policy</h2>
         </div>
       </div>
     </div>
+    <div>
+      <div  class="copyright-footer"> Copyright &copy;<span id="year"></span> </span> Arpan Chowdhury. All rights reserved. </div>
+     </div>
     
   </body>
 </html>
\ No newline at end of file
diff --git a/story.html b/story.html
index 64670405..2b9ff435 100644
--- a/story.html
+++ b/story.html
@@ -111,7 +111,7 @@ <h4>Address</h4>
             <span>Address:</span> 3/2 Wellington Street, Kolkata , West Bengal , India 
           </p>
           <p><span>Email:</span><a href="mailto:tour@tourguide.com">tour@tourguide.com</a></p>
-          <p><span>Phone:</span><a href="tel:8562145852">+91 8562145852</a></p>
+          <p><span>Phone:</span><a href="tel:8562145852"> +91 8562145852</a></p>
         </div>
         </div>
       </div>
diff --git a/styles.css b/styles.css
index d3d58a6d..f8a00a6b 100644
--- a/styles.css
+++ b/styles.css
@@ -1199,6 +1199,12 @@ body, html {
 .footer {
   width: 100%;
   background-color: #091020;
+  padding: 2rem;
+}
+
+.footer__col p {
+  font-size: 0.8rem;
+  font-weight: 100;
 }
 
 .footer__container {
@@ -1274,14 +1280,16 @@ body, html {
   margin: auto;
   padding: 0.5rem;
   text-align: center;
-  font-size: 1rem;
+  font-size: 0.9rem;
   /*   color: var(--secondary-color); */
   color: var(--extra-light);
+  padding-top: 1rem;
+  margin-top: 1rem;
   border-top: 2px solid var(--text-light);
 }
 
 .footer__area {
-  margin-left: 2.3rem;
+  margin-left: 0rem;
 }
 
 .footer__area a {
@@ -2725,3 +2733,30 @@ button:hover {
   }
 }
 
+@media screen and (max-width: 425px) {
+  .footer__container {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: start;
+  }
+
+  .footer__col p {
+    font-size: 0.5rem;
+    font-weight: 100;
+  }
+
+  .footer__col h3 {
+    font-size: 0.7rem;
+  }
+
+  .footer__area h4 {
+    font-size: 0.7rem;
+  }
+
+  .footer__bar {
+    font-size: 0.6rem;
+  }
+}
+
diff --git a/thankyou.css b/thankyou.css
new file mode 100644
index 00000000..b3e05128
--- /dev/null
+++ b/thankyou.css
@@ -0,0 +1,29 @@
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  margin: 0;
+  background: linear-gradient(to right, #8e2de2, #4a00e0);
+  font-family: 'Roboto', sans-serif;
+}
+
+.container {
+  text-align: center;
+  padding: 20px;
+  background-color: #fff;
+  border-radius: 10px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  max-width: 400px;
+  width: 90%;
+}
+
+.container:hover {
+  transform: scale(1.05);
+  transition: transform 0.3s ease;
+}
+
+h2 {
+  color: #333;
+  font-family: Arial, sans-serif;
+}
diff --git a/thankyou.html b/thankyou.html
index cae0f45f..876630f3 100644
--- a/thankyou.html
+++ b/thankyou.html
@@ -4,8 +4,11 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Thankyou</title>
+    <link rel="stylesheet" href="thankyou.css">
 </head>
 <body>
-    <h2>Thankyou for the valuable feedback!</h2>
+    <div class="container">
+        <h2>Thank you for the valuable feedback! <span>&#128077;</span></h2>
+    </div>
 </body>
 </html>
\ No newline at end of file
diff --git a/tnc.css b/tnc.css
index 8986895d..52299225 100644
--- a/tnc.css
+++ b/tnc.css
@@ -87,7 +87,7 @@
     margin: 10px 0; }
     #terms-and-conditions .terms-and-conditions-section.grey {
       background-color: #f8f8fb; }
-    #terms-and-conditions .terms-and-conditions-section .section-title {
+    #terms-and-conditions .terms-and-conditions-section {
       color: #979797; }
   
   #about .about-section {
@@ -114,18 +114,7 @@
       height: 100px;
       margin-top: -50px; }
   
-  .title {
-    font-family: Lato;
-    font-weight: 100;
-    font-style: italic;
-    color: #979797;
-    margin-bottom: 30px; }
-  
-  .section-header {
-    font-family: Aller;
-    font-weight: bold;
-    color: #6e7fd8; }
-  
+
   .subtext {
     font-family: Lato;
     font-size: 18px;
@@ -144,4 +133,88 @@
         height: auto;
         margin-top: 0; }
     .how-to-image {
-      height: 200px; } }
\ No newline at end of file
+      height: 200px; } }
+
+    .container-fluid .logo {
+        width: 130px;
+        border-radius: 6px;
+        margin-top: 20px;
+        margin-left: 20px;
+    }
+    
+    .container.terms-container {
+        max-width: 70%;
+        margin: 0 auto;
+        padding: 20px;
+        background-color: #0e1525;
+        border-radius: 10px;
+        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+    }
+
+    .video-background {
+      position: fixed;
+      right: 0;
+      bottom: 0;
+      min-width: 100%;
+      min-height: 100%;
+      z-index: -1;
+      opacity: 0.3;
+  }
+
+    
+    .container-fluid .title {
+        font-size: 4.3em;
+        color: #0d94ba;
+        font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        margin-bottom: 20px;
+        font-weight: 700;
+
+    }
+    
+    .container-fluid .section-title {
+        font-size: 2em;
+        color: #0dcaf0;
+        margin-top: 20px;
+    }
+    
+    .container-fluid .content p {
+        font-size: 1.2em;
+        line-height: 1.6;
+        color: #f0f0f0;
+        margin-bottom: 20px;
+    }
+    .text-center hr {
+      width: 50%;
+      color: #d56fa1;
+      opacity: 0.3;
+    }
+    
+    @media (max-width: 768px) {
+        .container-fluid .title {
+            font-size: 2em;
+        }
+    
+        .container-fluid .section-title {
+            font-size: 1.5em;
+        }
+    
+        .container-fluid .content p {
+            font-size: 1em;
+        }
+    }
+
+    body {
+      font-family: 'Lato', sans-serif;
+      /* background-color: #0e1525; */
+      background: linear-gradient(to top, #080f21, #06255b);
+      color: #ffffff;
+      margin: 0;
+      padding: 0;
+  }
+  .copyright-footer {
+    display: flex;
+    justify-content: center;
+    margin-top: 25px;
+    font-size: 17px;
+    color: rgb(185, 185, 185);
+  }
\ No newline at end of file
diff --git a/tnc.html b/tnc.html
index 2103f89e..3a1d7c89 100644
--- a/tnc.html
+++ b/tnc.html
@@ -13,84 +13,181 @@
 
     <link href="./tnc.css" rel="stylesheet" type="text/css" />
 
-
+<style>
+    .circle {
+      position: absolute;
+      width: 25px;
+      height: 25px;
+      border-radius: 50%;
+      pointer-events: none;
+      background: radial-gradient(circle, rgba(71, 240, 255, 0.3), rgba(0, 119, 255, 0.3));
+      transition: transform 0.1s, left 0.1s, top 0.1s;
+    }
+
+    .circle-container {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+      z-index: 9999;
+    }
+</style>
    
   </head>
 
   <body id="terms-and-conditions">
+
+    <body id="terms-and-conditions">
+      <div class="circle-container">
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+      </div>
+      <script>
+        document.addEventListener("DOMContentLoaded", function () {
+          const coords = { x: 0, y: 0 };
+          const circles = document.querySelectorAll(".circle");
+  
+          circles.forEach(function (circle) {
+            circle.x = 0;
+            circle.y = 0;
+          });
+  
+          window.addEventListener("mousemove", function (e) {
+            coords.x = e.pageX;
+            coords.y = e.pageY - window.scrollY; // Adjust for vertical scroll position
+          });
+  
+          function animateCircles() {
+            let x = coords.x;
+            let y = coords.y;
+  
+            circles.forEach(function (circle, index) {
+              circle.style.left = `${x - 12}px`;
+              circle.style.top = `${y - 12}px`;
+              circle.style.transform = `scale(${(circles.length - index) / circles.length})`;
+  
+              const nextCircle = circles[index + 1] || circles[0];
+              circle.x = x;
+              circle.y = y;
+  
+              x += (nextCircle.x - x) * 0.3;
+              y += (nextCircle.y - y) * 0.3;
+            });
+  
+            requestAnimationFrame(animateCircles);
+          }
+  
+          animateCircles();
+        });
+  
+      </script>
     
     <a href="index.html"><img src="./img/Screenshot 2024-01-23 003448.png" style="width: 130px; border-radius: 6px; margin-top: 20px; margin-left: 20px;"></a>
+  
+  <video autoplay muted loop class="video-background">
+    <source src="/img/bg video term3.mp4" type="video/mp4">
+     the video tag.
+</video>
+    <a href="index.html">
+        <img src="./img/Screenshot 2024-01-23 003448.png" style="width: 130px; border-radius: 6px; margin-top: 20px; margin-left: 20px;">
+    </a>
 
     <div class="container-fluid">
-      <div class="row terms-and-conditions-section">
-        <div class="col-xs-12 text-center">
-          <h1 class="title">Terms and Conditions</h1>
-        </div>
-
-        <div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
-          <div class="content">
-            <p>
-                Tourguide, LLC ("Tourguide") operates Tourguide Platform (as defined below), your use of Tourguide Platform is governed by these Terms of Service (“Terms”), and your use of Tourguide Platform constitutes your acceptance of the Terms.
-
-                "Tourguide Platform" (the "Service") means Tourguide tourism management solution made available at https://apu52.github.io/Travel_Website/ and any other software, sites, and services offered by Tourguide in connection therewith but does not include any sites, services, products, or offerings governed by other terms of use, or, other agreements between you and Tourguide. "Traveler Data" means any data you make available to Tourguide or Tourguide Platform for the purpose of using Tourguide Platform. "Content" means all content generated by Tourguide on your behalf (including metric data) and does not include Traveler Data.
-                
-                We will endeavor to provide you with notice about major changes to the Terms or Tourguide Platform and other changes (via email to the address on your account), but we make no guarantees. Other changes could be, without limitation, changes to payment policies, security patches, added or removed functionality, and other enhancements or restrictions to Tourguide Platform. Your use of Tourguide Platform after the Terms have changed constitutes your acceptance of the Terms as changed. You may reject changes to the Terms by terminating your subscription in accordance with the "Cancellation and Termination" section of these Terms of Service. Tourguide shall not be liable to you or to any third party for any change to Tourguide Platform.
-                
-                Please use Tourguide Platform responsibly and in compliance with these Terms. If you don't, we reserve the right to terminate your subscription in accordance with the "Cancellation and Termination" section of these Terms of Service.
-            </p>
-
-            <h2 class="section-title">1. Use of Tourguide Platform</h2>
-            <p>
-                By accessing and utilizing Tourguide Platform, you agree to abide by these Terms of Service ("Terms") set forth by Tourguide, LLC ("Tourguide"). Your use of Tourguide Platform constitutes your acceptance of these Terms.
-
-                You are granted a non-exclusive, non-transferable, and revocable license to use Tourguide Platform for its intended purposes. Any unauthorized use or access may result in termination of your subscription.
-
-            </p>
-
-            <h2 class="section-title">2. Cancellation and Termination</h2>
-            <p>
-                Tourguide reserves the right to terminate or suspend your subscription to Tourguide Platform for any violation of these Terms. You may also terminate your subscription at any time by following the procedures outlined in this section.
-
-                Upon termination, you will lose access to Tourguide Platform, and Tourguide will not be liable for any loss of data or information. Fees paid for the subscription are non-refundable, except as expressly stated in these Terms.            </p>
-           
-
-            <h2 class="section-title">3. Traveller Data</h2>
-            <p>
-                "Traveler Data" refers to any data you provide to Tourguide for the purpose of using Tourguide Platform. Tourguide acknowledges that Traveler Data is owned by you, and Tourguide will take reasonable measures to protect and secure such data.
-
-                You grant Tourguide a limited license to use Traveler Data solely for the purpose of providing and improving Tourguide Platform. Tourguide will not disclose Traveler Data to third parties without your consent, except as required by law or as necessary for providing the services.            </p>
-            
-            <h2 class="section-title">4. Ideas and Feedback</h2>
-            <p>
-                Tourguide welcomes your ideas and feedback regarding Tourguide Platform. However, please be aware that any suggestions, ideas, or feedback you provide may be used by Tourguide without any obligation to compensate you. By submitting such content, you grant Tourguide a perpetual, irrevocable, worldwide, royalty-free license to use, modify, and distribute the ideas and feedback.            </p>
-
-            <h2 class="section-title">5. External Sites and Content</h2>
-            <p>
-                Tourguide Platform may contain links to external sites or content that are not owned or controlled by Tourguide. Tourguide is not responsible for the content or practices of these external sites and disclaims any liability for their actions. Your use of external sites is at your own risk.            </p>
-
-            <h2 class="section-title">6. License and Restrictions</h2>
-            <p>
-                Tourguide grants you a limited, non-exclusive, and non-transferable license to use Tourguide Platform in accordance with these Terms. You may not modify, reproduce, or distribute the software or content without express permission from Tourguide.
-
-                You agree not to engage in any unauthorized access, use, or interference with Tourguide Platform or its associated systems. Violation of these restrictions may result in the termination of your subscription and legal action.            </p>
-            
-
-            <h2 class="section-title">7. Open Source Software</h2>
-            <p>
-                Certain components of Tourguide Platform may be subject to open-source licenses. Your use of such components is governed by the respective open-source license terms. The terms of any open-source licenses do not override the terms specified in this agreement.            </p>
-
-
-            <h2 class="section-title">8. Our Copyright Dispute Policy</h2>
-            <p>
-                Tourguide respects the intellectual property rights of others and expects users of Tourguide Platform to do the same. If you believe that your copyrighted work has been used in a way that constitutes copyright infringement, please follow Tourguide's Copyright Dispute Policy, outlined in a separate document, to address and resolve such concerns.
-            </p>
-            
-
-            
-          </div>
+        <div class="row terms-and-conditions-section">
+            <div class="col-xs-12 text-center">
+                <h1 class="title">Terms and Conditions</h1>
+                <hr>
+            </div>
+
+            <div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
+                <div class="content">
+                    <p>
+                        Tourguide, LLC ("Tourguide") operates Tourguide Platform (as defined below), your use of Tourguide Platform is governed by these Terms of Service (“Terms”), and your use of Tourguide Platform constitutes your acceptance of the Terms.
+                        "Tourguide Platform" (the "Service") means Tourguide tourism management solution made available at https://apu52.github.io/Travel_Website/ and any other software, sites, and services offered by Tourguide in connection therewith but does not include any sites, services, products, or offerings governed by other terms of use, or, other agreements between you and Tourguide. "Traveler Data" means any data you make available to Tourguide or Tourguide Platform for the purpose of using Tourguide Platform. "Content" means all content generated by Tourguide on your behalf (including metric data) and does not include Traveler Data.
+                        We will endeavor to provide you with notice about major changes to the Terms or Tourguide Platform and other changes (via email to the address on your account), but we make no guarantees. Other changes could be, without limitation, changes to payment policies, security patches, added or removed functionality, and other enhancements or restrictions to Tourguide Platform. Your use of Tourguide Platform after the Terms have changed constitutes your acceptance of the Terms as changed. You may reject changes to the Terms by terminating your subscription in accordance with the "Cancellation and Termination" section of these Terms of Service. Tourguide shall not be liable to you or to any third party for any change to Tourguide Platform.
+                        Please use Tourguide Platform responsibly and in compliance with these Terms. If you don't, we reserve the right to terminate your subscription in accordance with the "Cancellation and Termination" section of these Terms of Service.
+                    </p>
+
+                    <h2 class="section-title">1. Use of Tourguide Platform</h2>
+                    <p>
+                        By accessing and utilizing Tourguide Platform, you agree to abide by these Terms of Service ("Terms") set forth by Tourguide, LLC ("Tourguide"). Your use of Tourguide Platform constitutes your acceptance of these Terms.
+                        You are granted a non-exclusive, non-transferable, and revocable license to use Tourguide Platform for its intended purposes. Any unauthorized use or access may result in termination of your subscription.
+                    </p>
+
+                    <h2 class="section-title">2. Cancellation and Termination</h2>
+                    <p>
+                        Tourguide reserves the right to terminate or suspend your subscription to Tourguide Platform for any violation of these Terms. You may also terminate your subscription at any time by following the procedures outlined in this section.
+                        Upon termination, you will lose access to Tourguide Platform, and Tourguide will not be liable for any loss of data or information. Fees paid for the subscription are non-refundable, except as expressly stated in these Terms.
+                    </p>
+
+                    <h2 class="section-title">3. Traveller Data</h2>
+                    <p>
+                        "Traveler Data" refers to any data you provide to Tourguide for the purpose of using Tourguide Platform. Tourguide acknowledges that Traveler Data is owned by you, and Tourguide will take reasonable measures to protect and secure such data.
+                        You grant Tourguide a limited license to use Traveler Data solely for the purpose of providing and improving Tourguide Platform. Tourguide will not disclose Traveler Data to third parties without your consent, except as required by law or as necessary for providing the services.
+                    </p>
+
+                    <h2 class="section-title">4. Ideas and Feedback</h2>
+                    <p>
+                        Tourguide welcomes your ideas and feedback regarding Tourguide Platform. However, please be aware that any suggestions, ideas, or feedback you provide may be used by Tourguide without any obligation to compensate you. By submitting such content, you grant Tourguide a perpetual, irrevocable, worldwide, royalty-free license to use, modify, and distribute the ideas and feedback.
+                    </p>
+
+                    <h2 class="section-title">5. External Sites and Content</h2>
+                    <p>
+                        Tourguide Platform may contain links to external sites or content that are not owned or controlled by Tourguide. Tourguide is not responsible for the content or practices of these external sites and disclaims any liability for their actions. Your use of external sites is at your own risk.
+                    </p>
+
+                    <h2 class="section-title">6. License and Restrictions</h2>
+                    <p>
+                        Tourguide grants you a limited, non-exclusive, and non-transferable license to use Tourguide Platform in accordance with these Terms. You may not modify, reproduce, or distribute the software or content without express permission from Tourguide.
+                        You agree not to engage in any unauthorized access, use, or interference with Tourguide Platform or its associated systems. Violation of these restrictions may result in the termination of your subscription and legal action.
+                    </p>
+
+                    <h2 class="section-title">7. Open Source Software</h2>
+                    <p>
+                        Certain components of Tourguide Platform may be subject to open-source licenses. Your use of such components is governed by the respective open-source license terms. The terms of any open-source licenses do not override the terms specified in this agreement.
+                    </p>
+
+                    <h2 class="section-title">8. Our Copyright Dispute Policy</h2>
+                    <p>
+                        Tourguide respects the intellectual property rights of others and expects users of Tourguide Platform to do the same. If you believe that your copyrighted work has been used in a way that constitutes copyright infringement, please follow Tourguide's Copyright Dispute Policy, outlined in a separate document, to address and resolve such concerns.
+                    </p>
+                </div>
+            </div>
         </div>
       </div>
-    </div>
+      <div>
+       <div  class="copyright-footer"> Copyright &copy;<span id="year"></span> </span> Arpan Chowdhury. All rights reserved. </div>
+      </div>
     
   </body>
 </html>
\ No newline at end of file
