diff --git a/index.html b/index.html
index e614c993..bebf7504 100644
--- a/index.html
+++ b/index.html
@@ -23,10 +23,10 @@
     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="counter.css" class="rel href">
+  <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">
@@ -34,7 +34,7 @@
   <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>
@@ -77,81 +77,93 @@
     .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 */
-}
-
-.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;
-}  
-}
+      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;
+      }
+    }
   </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>
 
@@ -190,8 +202,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">
@@ -211,10 +225,10 @@ <h1>TourGuide . . .</h1>
         <a href="newLogin.html" class="contact-btn"><button class="btn login" id="btn-style"
             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>
+            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="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> -->
@@ -237,8 +251,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
@@ -253,7 +268,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">
@@ -263,7 +278,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>
@@ -355,7 +370,7 @@ <h2 data-max="10">+ Projects</h2>
 
       <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">
+    <!-- <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"
@@ -363,7 +378,7 @@ <h2 data-max="10">+ Projects</h2>
               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" />
+    <!-- <circle cx="8.5" cy="7" r="4" />
               <polyline points="17 11 19 13 23 9" />
             </svg>
             <h3 id="guidesCount"
@@ -374,16 +389,16 @@ <h2 data-max="10">+ Projects</h2>
               Guides</p>
           </div>
         </div>  -->
-        <!-- Box 2 - Number of Tours -->
-        <!-- <div class="box1">
+    <!-- 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" />
+    <!-- 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>
@@ -394,14 +409,14 @@ <h2 data-max="10">+ Projects</h2>
               data-aos="fade-in">Tours</p>
           </div>
         </div> -->
-        <!-- Box 3 - Number of Destinations -->
-        <!-- <div class="box1">
+    <!-- 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" />
+    <!-- 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" />
@@ -423,47 +438,47 @@ <h2 data-max="30" id="test">+ Developers</h2>
       </div>  -->
 
 
-      <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>
-    
+    <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 -->
 
@@ -502,26 +517,27 @@ <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"><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 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>
 
@@ -543,59 +559,58 @@ <h2 class="section__title" data-aos="fade-in"><span style="margin-left: 300px;">
           <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="
-      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">
-        
-        <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/london.jpg')
+      ">
+            <div class="info">
 
-    <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>
+              <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/maldives.jpg')
-    ">
-      <div class="info">
-       
-        <p>||Male Beach||</p>
-        <h3>MALDIVES</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>
-</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>
 
-    <script src="explore.js"></script>
+      <script src="explore.js"></script>
     </section>
 
     <section class="trip" id="trip" data-aos="zoom-in" data-aos-offset="100">
@@ -647,62 +662,69 @@ <h2 class="section__title">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>
+          <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',
-    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>
+    <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">
@@ -813,28 +835,31 @@ <h2 class="section__title" data-aos="zoom-in" style="text-align: center;">
     </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 -->
 
@@ -848,20 +873,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>
@@ -870,12 +899,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">
@@ -887,20 +918,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>
@@ -909,12 +944,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">
@@ -927,7 +964,7 @@ <h3>Katie</h3>
           </div>
         </div>
       </div>
-      
+
     </section>
 
 
@@ -935,12 +972,12 @@ <h3>Katie</h3>
 
 
 
-   
 
 
 
 
-    
+
+
 
     <!----------------------------------------------------- FAQ section ---------------------- -->
 
@@ -953,54 +990,58 @@ <h2 class="section__title" 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>
+          </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,
+          <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>
-           
+
         </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>
+
+        </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>
+      <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">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>
-             
-          </div>
-          </div>
+        </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>
+
+        </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>
-               
-            </div>
-            </div>
-    
 
       </div>
     </section>
@@ -1086,18 +1127,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>
@@ -1122,32 +1164,33 @@ <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>
-          <p id="subscriptionMessage" style="display: none; color: green; margin-top: 10px;">Subscription successful! 🎉</p>
+          <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) {
+      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() {
+        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">
@@ -1162,27 +1205,27 @@ <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-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>
+            <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>
+          <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"
@@ -1222,35 +1265,35 @@ <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>
           </div>
-        
+
         </div>
 
         <div class="footer__col">
@@ -1263,41 +1306,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");
+    <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 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>
 
-    
 
 
 
@@ -1748,16 +1791,16 @@ <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>
+  <script src="index.js"></script>
 
 
   <!--  Adding copyright javascript code to make it dynamic and display current year -->
@@ -1766,55 +1809,55 @@ <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);
+  <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);
-    }
+        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>
+      // Call the function for each count-up element
+      animateValue("guidesCount", 0, 25000, 20000);
+      animateValue("toursCount", 0, 20000, 20000);
+      animateValue("destinationsCount", 0, 10994, 20000);
+    });
+  </script>
 
 
 
@@ -1854,4 +1897,4 @@ <h4>Contact Us</h4>
 
 
 </div> -->
-<!-- New bubble background end -->
+<!-- New bubble background end -->
\ No newline at end of file