index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <style>
    .center-card {
      margin: 0 auto;
      display: block;
      position: relative;
      bottom: 18px;
    }
  </style>
  <link rel="stylesheet" href="./loader.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
  <link rel="stylesheet" href="faq-website.css">
  <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.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 href="https://cdn.jsdelivr.net/npm/remixicon@3.2.0/fonts/remixicon.css" rel="stylesheet" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
    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://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css">

  <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">
  <link rel="stylesheet" href="./Image-Gallery/stylecaptions.css">
  <link rel="stylesheet" href="explore.css">
  <title>Tourguide</title>
  <!-- adding a fav-icon -->

  <img src="Untitled (1).mp4" alt="">
  <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">
  <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: 150%;
      }

      .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 */
    }

    @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;
    }

    /* cookie-consent */
    #cookie-consent {
      position: fixed;
      bottom: 10px;
      left: 70px;
      background-color: #e3e4fc;
      padding: 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      width: 300px;
      height: fit-content;
      z-index: 10000;
      border-radius: 10px;
      margin-bottom: 5px;
      margin: 20px;
      border-right: 4px solid transparent;
      border-bottom: 4px solid transparent;
      transition: border-color 0.3s;
      border: 1px solid rgb(4, 4, 215);
      border-bottom: #3950ac;
    }

    #cookie-consent:hover {
      border-right: 6px solid #0207a3;
      border-bottom: 6px solid #3202a3;
    }

    #cookie-consent p {
      color: black;
      /* Make the text black for better visibility */
      text-align: center;
      /* Center align the text */
    }

    .accept-cookies,
    .reject-cookies {
      width: 260px;
      /* Decrease the button width */
      height: 35px;
      /* Decrease the button height */
      color: white;
      background-color: #150267;
      border: none;
      border-radius: 5px;
      /* Add rounded corners */
      cursor: pointer;
      transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s, color 0.3s;
      /* Smooth transition for effects */
    }

    .reject-cookies {
      margin-top: 10px;
    }

    .accept-cookies:hover,
    .reject-cookies:hover {
      transform: scale(0.95);
      box-shadow: 0 0 15px rgb(75, 215, 239, 0.6);
      /* Reduce the shadow size */
    }

    .accept-cookies:hover {
      background-color: rgb(57, 159, 222);
      color: #0d0b0b;
      border: 1px solid rgb(2, 2, 53);
    }

    .reject-cookies:hover {
      background-color: rgb(57, 159, 222);
      color: #0d0b0b;
      border: 1px solid rgb(2, 2, 53);
    }

    #learn-more-link,
    #show-less-link {
      color: #f90814;
      text-decoration: none;
      cursor: pointer;
      font-size: 16px;
    }

    #cookie-content {
      display: none;
      margin-top: 10px;
    }


    @media (max-width: 725px) {
      .circle-container {
        display: none;
      }
    }
  </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>

  <!-- sticky animation  -->
 <script type="text/javascript">
  window.addEventListener("scroll", function () {
    var header = document.querySelector("nav");
    header.classList.toggle("sticky", window.scrollY > 50)
  })
</script>

    <div id="pre-loader">
      <h1>TourGuide . . .</h1>
    </div>
    <div id="bg">
      <canvas></canvas>
      <canvas></canvas>
      <canvas></canvas>
    </div>
    <!-- <div id="progressbar"></div> -->
    <div id="scrollPath"></div>

    <div id="cookie-consent">
      <p>
        We use cookies to enhance your experience on our website. By continuing to browse, you agree to our use of
        cookies as described in our Cookie Policy.
        <a href="#" id="learn-more-link">Learn More</a>

      </p>
      <div id="learn-more-content" style="display: none;">
        <p>Cookies are small text files used by websites to enhance user experience. According to the law, we can store
          cookies on your device if they are essential for the operation of this site. For other types of cookies, we
          need your consent.</p>
        <p>This site employs various types of cookies. Some cookies are set by third-party services that appear on our
          pages.</p>
      </div>

      <a href="#" id="show-less-link" style="display: none;">Show Less</a>
      <button class="accept-cookies">Accept</button>
      <button class="reject-cookies">Reject</button>
    </div>

    <script>



      document.addEventListener('DOMContentLoaded', function () {
        const cookieConsent = document.getElementById('cookie-consent');
        const acceptButton = document.querySelector('.accept-cookies');
        const rejectButton = document.querySelector('.reject-cookies');
        const learnMoreLink = document.getElementById('learn-more-link');
        const learnMoreContent = document.getElementById('learn-more-content');

        // Hide preloader after page load
        window.addEventListener('load', function () {
          const preloader = document.getElementById('preloader');
          if (preloader) {
            preloader.style.display = 'none';
          }
          cookieConsent.style.display = 'block';
        });

        // Check if localStorage is available
        function localStorageAvailable() {
          try {
            const test = '__localStorage_test__';
            localStorage.setItem(test, test);
            localStorage.removeItem(test);
            return true;
          } catch (e) {
            return false;
          }
        }

        if (localStorageAvailable()) {
          // Check if the user has already made a choice
          if (localStorage.getItem('cookieConsent')) {
            cookieConsent.style.display = 'none';
          }

          // Function to handle cookie consent choice
          function handleConsent(choice) {
            localStorage.setItem('cookieConsent', choice);
            cookieConsent.style.display = 'none';
          }

          // Add event listeners to buttons
          acceptButton.addEventListener('click', function () {
            handleConsent('accepted');
          });

          rejectButton.addEventListener('click', function () {
            handleConsent('rejected');
          });
        } else {
          // Hide consent if localStorage is not available
          cookieConsent.style.display = 'none';
        }

        // Add event listener to "Learn More" link
        learnMoreLink.addEventListener('click', function (event) {
          event.preventDefault();
          learnMoreContent.style.display = 'block';
          learnMoreLink.style.display = 'none';
        });
      });
    </script>


    <!-- <canvas id="canvas"></canvas> -->
    <!-- <nav>

    <a href="#" class="nav__logo" data-aos="fade-right">Tourguide<span>.</span></a>
    <ul class="nav__links">
      <li class="link" data-aos="fade-down"><a href="#Home">Home</a></li>
      <li class="link" data-aos="fade-down"><a href="#AboutUs">About Us</a></li>
      <li class="link" data-aos="fade-down"><a href="#Destinations">Destinations</a></li>
      <li class="link" data-aos="fade-down"><a href="#trip">Pricing</a></li>
      <li class="link" data-aos="fade-down"><a href="#testimonials">Testimonials</a></li>
      <li class="link" data-aos="fade-down"><a href="#ReviewGallery">Reviews</a></li>
      <li class="link" data-aos="fade-down"><a href="feedback.html">Rate Us?</a></li>
      <li class="link" data-aos="fade-down"><a href="login.html">Login</a></li>

    </ul>
    <button id="toggle" data-aos="fade-down">Dark Theme</button>
    <a href="#contact"><button class="btn" id="btn-style">Contact Us</button></a>
  </nav> -->

    <div class="nav-container" id="top">
      <nav class="newNav">
        <div style="display: flex; flex-direction: row; align-items: center;">
        <img src="./img/tour1.png" class="sitelogo">

        <a href="#" class="nav__logo" data-aos="fade-right">Tourguide<span>.</span></a>
      </div>

        <ul class="navLinks">
          <li class="link" id="View-link" data-aos=""><a href="mapa.html">View</a></li>
          <li class="link" id="LogIn-link" data-aos=""><a href="newLogin.html">Log In</a></li>
          <li class="link" data-aos=""><a href="#Home">Home</a></li>
          <li class="link" data-aos=""><a href="#AboutUs">About</a></li>
          <li class="link dropdown" data-aos="">
            <a href="#Services" class="dropdown">Services</a>
            <ul class="dropdown-menu">
              <li><a href="#Destinations">Destination</a></li>
              <li><a href="#trip">Prices</a></li>
              <li><a href="#ReviewGallery">Trip Gallery</a></li>
              <li><a href="#tourist">Tourist Guide</a></li>
              <li><a href="#hotel">Hotel & Resort</a></li>
            </ul>
          </li>
          <li class="link" data-aos=""><a href="#testimonials">Testimonial</a></li>
          <li class="link" data-aos=""><a href="feedback.html">Rate Us?</a></li>
          <li class="link" data-aos=""><a href="#cnt-form">Contact Us</a></li>
        </ul>

        <a href="newLogin.html" class="contact-btn" id="nav-login-btn"><button class="btn login" id="btn-style"
            data-aos="fade-down">Login/SignUp</button></a>
        <a href="mapa.html" class="contact-btn" id="nav-view-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>
      <div class="nav-wrapperr">
        <div class="progress-bar"></div>
      </div>

      <section class="section__container header__container" id="Home">
        <div class="header__image" data-aos="fade-down-right">
          <img src="https://i.ibb.co/88Qnjxg/pexels-josh-hild-2422259.jpg" alt="header" />
          <img src="https://i.ibb.co/w4Jqjdf/pexels-andrei-tanase-1271619.jpg" alt="header" />
        </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>
            <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
              clients.
            </p>
            <div class="action__btns">
              <a href="pricing/index.html"><button class="btn" data-aos="fade-in"
                  style="box-shadow: 2px 2px 8px red;">Membership</button></a>
              <button class="btn" data-aos="fade-in" onclick="planTrip()" style="box-shadow: 2px 2px 8px red;">Plan a
                Trip</button>
              <a href="./payment.html"><button class="btn" data-aos="fade-in" style="box-shadow: 2px 2px 8px red;">Book
                  Now</button></a>
            </div>


            <br>
            <div class="story">
              <div class="video">
                <img src="https://i.ibb.co/KwHd8PQ/pexels-stijn-dijkstra-2499699.jpg" type="video/mp4"
                  style="box-shadow:2px 2px 8px blue;">
                <!-- link to the hmtl page with the video -->
                <a href="story.html" class="btn_video">
                  <span><i class="ri-play-fill"></i></span>
                </a>
              </div>

            </div>
            <br>
            <span data-aos="fade-in" style="color: #5755b6; font-weight: 600;">Watch our story</span>
          </div>
        </div>
      </section>
    </header>

    <br>
    <!-- Section of About Us -->
    <section class="About" id="AboutUs">
      <div class="color col-12">
        <div class="section__container about__container">
          <!-- Left background color column -->
          <div class="col-8 bg primary"></div>
          <!-- Right content container -->
          <div
            class="section__container gallary__container relative z-10 max-w-screen-xl px-4 mx-auto text-center pb-14">
            <div class="aboutcon">
              <div class="col-span-2 mx-auto lg:mx-0 lg:text-left">
                <h1 class="headingofAbout section__title " data-aos=" fade-in"><b>About Us</b></h1>
                <!-- Article with about us content -->
                <article class="w-full text-left format sm:format-base lg:format-lg format-blue dark:format-invert">
                  <!-- Adding the content -->
                  <style>
                    /* CSS for hover effect */
                    .aboutcontent:hover {
                      transform: scale(1.8);
                      transition: transform 0.8s ease;
                    }

                    .video-container {
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      height: 30vh;
                    }

                    .iframe {
                      width: 760px;
                      height: 515px;
                      border: none;

                    }
                  </style>
                  <br>
                  <div class="video-container">
                    <iframe src="https://www.youtube.com/embed/veULUjsSrPg?si=eq3sDAt3-yZnZUme"
                      allowfullscreen></iframe>
                  </div>
                  <p class="aboutcontent" data-aos="fade-in" style="text-align: justify;">
                    <span style="margin-left: 80px;"></span>Welcome to TourGuide, where we firmly believe that life's
                    true purpose unfolds amidst the thrill of exploration, the embrace of the unfamiliar, and the
                    pursuit of the extraordinary! Our mission is to embolden you, the intrepid traveler, to unveil this
                    purpose and elevate your journey by providing unparalleled assistance and guidance. Let us be your
                    compass as you navigate through the wonders of the world, forging unforgettable memories and
                    discovering the essence of travel!
                  </p>

                  <p class="aboutcontent" data-aos="fade-in" style="text-align: justify;">
                    <span style="margin-left: 80px;"></span> At TourGuide, our local guides serve as your passport to
                    effortlessly navigate through local
                    languages, customs, and traditions that often make traveling to a foreign place overwhelming. We
                    provide curated travel itineraries, once-in-a-lifetime experiences, valuable travel advice, and the
                    freedom to customize itineraries to ensure everything aligns with your wishlist.
                  </p>

                  <p class="aboutcontent" data-aos="fade-in" style="text-align: justify;">
                    <span style="margin-left: 80px;"></span>Since our inception in 2024, TourGuide has cultivated a
                    dynamic travel community, with 30,000+
                    guides hailing from over 200+ countries globally. We continue to grow each day, expanding the
                    horizons of possibilities for discovering the world. With TourGuide by your side, there's no limit
                    to the different ways you can embark on an unforgettable journey!
                  </p>

                  <p class="aboutcontent" data-aos="fade-in" style="text-align: justify;">
                    <strong><span style="margin-left: 50px;"></span> We welcome you to the TourGuide family - where
                      every journey becomes a story worth
                      sharing!</strong>
                  </p>
                </article>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>


    </div>
    <!-- Right statistics container -->

    <!-- <div class="container-fluid text-center">
      <h1>Some cool facts</h1>
      <div class="row">
        <div class="col-sm-3">
          <i class="fa fa-user"></i>
          <h2 data-max="50">+ Happy Customers</h2>
        </div>
        <div class="col-sm-3">
          <i class="fa fa-code"></i>
          <h2 data-max="25000">+ Lines of code</h2>
        </div>
        <div class="col-sm-3">
          <i class="fa fa-lock"></i>
          <h2 data-max="10">+ Projects</h2>

    <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">
          <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" />
              <polyline points="17 11 19 13 23 9" />
            </svg>
            <h3 id="guidesCount"
              class="font-semibold text-4xl md:text-3xl group-hover:text-thq_green-500 text-gray-900 dark:text-white mt-3.5"
              data-aos="fade-in">25000</h3>
            <p
              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 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" />
              <line x1="12" y1="18" x2="12" y2="22" />
              <line x1="8" y1="22" x2="16" y2="22" />
            </svg>
            <h3 id="toursCount"
              class="font-semibold text-4xl md:text-3xl  group-hover:text-thq_green-500 text-gray-900 dark:text-white mt-3.5"
              data-aos="fade-in">20000</h3>
            <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">
          <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" />
              <line x1="9" y1="4" x2="9" y2="17" />
              <line x1="15" y1="15" x2="15" y2="20" />
            </svg>
            <h3 id="destinationsCount"
              class="font-semibold text-4xl md:text-3xl  group-hover:text-thq_green-500 text-black-900 dark:text-black mt-3.5"
              data-aos="fade-in">10994</h3>
            <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">Destinations</p>
          </a>

        </div>
        <div class="col-sm-3">
          <i class="fa fa-briefcase"></i>
          <h2 data-max="30" id="test">+ Developers</h2>
        </div>
      </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>




    <br><br>
    <!-- ending the section of About Us -->

    <!-- Newsletter Modal -->

    <div class="modal-container">
      <div class="modal-wrapper">
        <div class="cross-container">
          <i class="fas fa-times close-btn" onclick="closeModal()"></i>
        </div>
        <div class="modal-newsletter">
          <div class="modal-header">
            <div style="display: flex;flex-flow: column;">
              <a href="#" class="nav__logo"
                style="pointer-events:none;color:#000;scale: 0.75;">Tourguide<span>.</span></a>
              <h3 style="font-weight: 600;font-size: 24px;">Get Flat 15% OFF</h3>
              <span style="color: #939393; padding: .5rem; font-size: 13px;">Sign up and grab your discount.</span>
            </div>
          </div>
          <div class="modal-content">
            <form id="modal-form">
              <input type="email" id="modal-email" placeholder="Email Address" required>
              <button class="modal-btn" id="news-subscribe" type="submit">Subscribe</button>
            </form>
            <span style="color: #3950ac; padding: 1rem 0 0 0; font-weight: 600;cursor:pointer;font-size: 16px;"
              onclick="closeModal()">No, thanks</span>
            <span style="color: #939393; padding: 1rem; font-size: 13px;">You are signing up to receive our newsletters
              via
              email and can unsubscribe at any time.</span>
          </div>
        </div>
        <div>
          <img src="./img/pexels-sam-kolder-2387871.jpg" class="modal-image" alt="maldives">
        </div>
      </div>
    </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>
      </div>

       slideshow 
       <div class="slideshow-container" data-aos="fade-up"> 

       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">
      <img src="./img/eiffelTower.webp" style="width:100%">
    </div>

    <div class="mySlides">
      <img src="./img/london.jpg" style="width:100%">
    </div>

    <div class="mySlides">
      <img src="./img/goa.jpg" style="width:100%">
    </div>

        <div class="mySlides">
          <img src="./img/maldives.jpg" style="width:100%">
        </div>
        <div class="imageDots">
          <span class="active"></span>
          <span></span>
          <span></span>
          <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>
            </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/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>
      <script src="explore.js"></script>
    </section>
  -->

    <!-- Destination Section -->
    <div 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">
            Explore your dream places around the world. Here you can find your perfect destination.
          </p>
        </div>
      </div>

      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide card">
            <img src="./img/eiffelTower2.webp" class="card-img" alt="Eiffel Tower">
            <div class="card-body">
              <h1 class="card-title">Eiffel Tower</h1>
              <p class="card-info">The Eiffel Tower is an iconic iron lattice tower in Paris, built for the 1889 World's
                Fair, standing at 324 meters tall.</p>
              <button class="card-btn" onclick="window.open('./dedicated-destinations/Paris/start.html', '_blank')">Book
                Tour</button>
            </div>
          </div>

          <div class="swiper-slide card">
            <img src="./img/giantWheel.webp" class="card-img" alt="The London Eye">
            <div class="card-body">
              <h1 class="card-title">The London Eye</h1>
              <p class="card-info">The London Eye, a striking 135-meter tall observation wheel on the South Bank of the
                Thames, offers panoramic views of the city's landmarks.</p>
              <button class="card-btn"
                onclick="window.open('./dedicated-destinations/London/start.html', '_blank')">Book Tour</button>
            </div>
          </div>

          <div class="swiper-slide card">
            <img src="./img/maldives.jpg" class="card-img" alt="Male Beach">
            <div class="card-body">
              <h1 class="card-title">Male Beach</h1>
              <p class="card-info">Male Beach, the pristine stretch of golden sand on Malé Atoll, offers a serene escape
                with crystal-clear waters and vibrant marine life.</p>
              <button class="card-btn"
                onclick="window.open('./dedicated-destinations/Maldives/start.html', '_blank')">Book Tour</button>
            </div>
          </div>

          <div class="swiper-slide card">
            <img src="./img/MuseumofFuture.jpg" class="card-img" alt="Museum of the Future">
            <div class="card-body">
              <h1 class="card-title">Museum of the Future</h1>
              <p class="card-info">The Museum of the Future in Dubai is a visionary architectural gem that explores
                cutting-edge innovations and the potential of tomorrow's technology.</p>
              <button class="card-btn" onclick="window.open('./dedicated-destinations/Dubai/start.html', '_blank')">Book
                Tour</button>
            </div>
          </div>

          <div class="swiper-slide card">
            <img src="./img/TajMahal.jpg" class="card-img" alt="Taj Mahal">
            <div class="card-body">
              <h1 class="card-title">Taj Mahal</h1>
              <p class="card-info">The Taj Mahal, a majestic white marble mausoleum in Agra, is a timeless symbol of
                love and architectural brilliance.</p>
              <button class="card-btn"
                onclick="window.open('./dedicated destinations/Taj_Mahal/Taj.html', '_blank')">Book Tour</button>
            </div>
          </div>

          <div class="swiper-slide card">
            <img src="./img/lehLadakh.jpg" class="card-img" alt="Leh Ladakh">
            <div class="card-body">
              <h1 class="card-title">Leh Ladakh</h1>
              <p class="card-info">Leh Ladakh, a breathtaking high-altitude region in northern India, captivates with
                its rugged landscapes, serene monasteries, and vibrant cultural heritage.</p>
              <button class="card-btn"
                onclick="window.open('./dedicated destinations/Ladakh/ladakh.html', '_blank')">Book Tour</button>
            </div>
          </div>

          <div class="swiper-slide card">
            <img src="./img/TimesSquare.jpg" class="card-img" alt="Times Square">
            <div class="card-body">
              <h1 class="card-title">Times Square</h1>
              <p class="card-info">Times Square is a vibrant commercial and entertainment hub in New York City, renowned
                for its bright lights, Broadway theaters, and bustling atmosphere.</p>
              <button class="card-btn"
                onclick="window.open('./dedicated-destinations/new-york/start.html', '_blank')">Book Tour</button>
            </div>
          </div>
        </div>
        <button class="swiper-button-prev"></button>
        <button class="swiper-button-next"></button>
      </div>

      <script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
      <script src="explore.js"></script>
      </section>
      <!-- End Destination Section -->

      <section class="trip" id="trip" data-aos="zoom-in" data-aos-offset="100">
        <div class="section__container trip__container">
          <h2 class="section__title">Best trip packages</h2>
          <p class="section__subtitle" style="margin-left: 280px;">
            Top trip deals curated for you. Get the best package for your adventure and save more.
          </p>
          <div class="trip__grid">
            <div class="trip__card cardd tilt-effect">
              <img src="https://i.ibb.co/60nvYwQ/Screenshot-2023-07-14-173347.png" alt="trip" height="250" width="45" />
              <div class="trip__details">
                <p>Santorini, Aegean Sea</p>
                <div class="rating"><i class="ri-star-fill"></i> 4.2</div>
                <div class="booking__price">
                  <div class="price"><span>From</span> $300</div>
                  <a href="./dedicated-destinations/santorini-aegean-sea/start.html"><button class="book__now btn-style"
                      style="box-shadow: 2px 2px 8px red;">Book
                      Now</button></a>
                </div>
              </div>
            </div>
            <div class="trip__card cardd tilt-effect">
              <img src="https://i.ibb.co/h1WgH8B/Screenshot-2023-07-14-173807.png" alt="trip" height="250" width="45" />
              <div class="trip__details">
                <p>Machu Picchu, Peru</p>
                <div class="rating"><i class="ri-star-fill"></i> 4.5</div>
                <div class="booking__price">
                  <div class="price"><span>From</span> $450</div>
                  <a href="./dedicated-destinations/machu-picchu-peru/Machu_start.html"><button
                      class="book__now btn-style" style="box-shadow: 2px 2px 8px red;">Book
                      Now</button></a>
                </div>
              </div>
            </div>
            <div class="trip__card cardd tilt-effect">
              <img src="https://i.ibb.co/vc2W0wN/Screenshot-2023-07-14-174151.png" alt="trip" height="250" width="45" />
              <div class="trip__details">
                <p>Grand Canyon National Park, Arizona</p>
                <div class="rating"><i class="ri-star-fill"></i> 4.7</div>
                <div class="booking__price">
                  <div class="price"><span>From</span> $400</div>
                  <a href="./dedicated-destinations/grand-canyon-national-park-arizona/Grand_start.html"><button
                      class="book__now btn-style" style="box-shadow: 2px 2px 8px red;">Book Now</button></a>
                </div>
              </div>
            </div>
          </div>
          <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>

          </ul>
        </div>



      </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>
              </div>
            </div>
          </div>
        </div>
        <br><br>
        <!-- New div components (hidden initially) -->
        <div id="newDiv" style="display: none;" data-aos="zoom-in">
          <!-- Sliding Animated Gallery -->
          <div class="gallery-rotate-image">
            <div class="image-container">
              <span style="--i : 1">
                <img src="./img/pexels-ajay-donga-2174656.jpg">
              </span>
              <span style="--i : 2">
                <img src="./img/pexels-alex-azabache-3214958.jpg">
              </span>
              <span style="--i : 3">
                <img src="./img/pexels-andrei-tanase-1271619.jpg">
              </span>
              <span style="--i : 4">
                <img src="./img/pexels-josh-hild-2422259.jpg">
              </span>
              <span style="--i : 5">
                <img src="./img/pexels-paulo-marcelo-martins-2412606.jpg">
              </span>
              <span style="--i : 6">
                <img src="./img/pexels-quang-nguyen-vinh-2132126.jpg">
              </span>
              <span style="--i : 7">
                <img src="./img/pexels-sam-kolder-2387871.jpg">
              </span>
              <span style="--i : 8">
                <img src="./img/pexels-spencer-davis-4356144.jpg">
              </span>
              <span style="--i : 9">
                <img src="./img/pexels-stijn-dijkstra-2499699.jpg">
              </span>
              <span style="--i : 10">
                <img src="./img/pexels-zakaria-boumliha-2827374.jpg">
              </span>
            </div>
          </div>
          <div class="btn-container">
            <button class="btn btn-style" id="prev">Prev</button>
            <button class="btn btn-style" id="next">Next</button>
          </div>

          <!-- Trip Photo Gallery -->
          <div class="trip-gallery-container">

            <figure class="image-container">
              <img src="./img/Trip_Photos/photo1.png" height="250" width="200">
              <p><a href="https://maps.app.goo.gl/4ULWYJxSVD8AcUin6" target="_blank">LADAKH</a></p>
            </figure>
            <figure class="image-container">
              <img src="./img/Trip_Photos/photo2.png" height="250" width="200">
              <p><a href="https://maps.app.goo.gl/zrA5UgDQoeUtRhhn7" target="_blank">RANNERDALE KNOTTS</a></p>
            </figure>
            <figure class="image-container">
              <img src="./img/Trip_Photos/photo3.jpg" height="250" width="200">
              <p><a href="https://maps.app.goo.gl/eTfvw4peKN3AcMUy8" target="_blank">AMALPHI COAST</a></p>
            </figure>
            <figure class="image-container">
              <img src="./img/Trip_Photos/photo4.png" height="220" width="230">
              <p><a href="https://maps.app.goo.gl/tBZLQcZbCHRWsgGX7" target="_blank">THE GOLDEN TEMPLE,PERIYAPATTNA</a>
              </p>
            </figure>
            <figure class="image-container">
              <img src="./img/Trip_Photos/photo5.jpg" height="220" width="230">
              <p><a href="https://maps.app.goo.gl/8Y3rnjtxU563KVvE9" target="_blank">MALSHEJ GHAT</a></p>
            </figure>
            <figure class="image-container">
              <img src="./img/Trip_Photos/photo6.png" height="220" width="230">
              <p><a href="https://maps.app.goo.gl/cj2UZZoyCTzeoQjEA" target="_blank">SAHARA DESERT</a></p>
            </figure>
            <figure class="image-container">
              <img src="./img/Trip_Photos/photo7.png" height="220" width="230">
              <p><a href="https://maps.app.goo.gl/Gk1fQts4zeVRdAWu6" target="_blank">MALDIVES</a></p>
            </figure>
            <figure class="image-container">
              <img src="./img/Trip_Photos/photo8.jpg" height="220" width="230">
              <p><a href="https://maps.app.goo.gl/DbWvrFgfwwwTWuBT8" target="_blank">PUNAKHA SUSPENSION BRIDGE</a></p>
            </figure>
            <figure class="image-container">
              <img src="./img/Trip_Photos/photo9.jpg" height="220" width="230">
              <p><a href="https://maps.app.goo.gl/gBGuxUNXXemiZ2Td8" target="_blank">ARU VALLEY</a></p>
            </figure>
            <figure class="image-container">
              <img src="./img/Trip_Photos/photo10.jpg" height="220" width="230">
              <p><a href="https://maps.app.goo.gl/tQ4BT4gDoFtauReM9" target="_blank">THE GOLDEN BRIDGE</a></p>
            </figure>
            <figure class="image-container">
              <img src="./img/Trip_Photos/photo11.jpg" height="220" width="230">
              <p><a href="https://maps.app.goo.gl/oqDnmF2pCqRxV5Cp6" target="_blank">LAKE DISTRICT</a></p>
            </figure>
            <figure class="image-container">
              <img src="./img/Trip_Photos/photo13.jpg" height="220" width="230">
              <p><a href="https://maps.app.goo.gl/pHjaA4aqP41JxdAh9" target="_blank">MUNNAR</a></p>
            </figure>
            <figure class="image-container">
              <img src="./img/Trip_Photos/photo19.jpg" height="220" width="230">
              <p><a href="https://maps.app.goo.gl/84rV6GhhginGXgbc8" target="_blank">STATUE OF LIBERTY</a></p>
            </figure>
            <figure class="image-container">
              <img src="./img/Trip_Photos/photo20.png" height="220" width="230">
              <p><a href="https://maps.app.goo.gl/GzVALHoLp4MgFmgw5" target="_blank">NAKKI LAKE</a></p>
            </figure>

            <!-- <img src="./img/Trip_Photos/photo3.jpg" height="240" width="200"> -->

          </div>
        </div>
      </section>
      <script>
        function replaceDivs() {
          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">
        <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" />
        </div>
      </section>
      <br /><br /><br /><br />

      <!-- Hotel & Resort Section -->
      <section class="hotel" id="hotel">
        <h2 class="tourist-heading section__title" align-items="center" data-aos="fade-in">Hotels & Resorts</h2>

        <br></br>
        <h3
          style="color: rgb(151, 6, 241); font-style: italic;font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;">
          Best Place for Beautiful Trip</h3>
        <br></br>
        <div class="center-card">
          <img src="./h1.png" alt="hr1" />
          <br></br>
          <a class="btn btn-primary" href="./hotel.html" role="button">Book Now</a>
          <br></br>
          <br></br>
          <img src="./h2.png" alt="hr2" />
          <br></br>
          <a class="btn btn-primary" href="./hotel.html" role="button">Book Now</a>
          <br></br>
          <br></br>
          <img src="./h3.png" alt="hr3" />
          <br></br>
          <a class="btn btn-primary" href="./hotel.html" role="button">Book Now</a>
          <br></br>
          <br></br>
          <img src="./h4.png" alt="hr4" />
          <br></br>
          <a class="btn btn-primary" href="./hotel.html" role="button">Book Now</a>
        </div>
      </section>
      <br /><br /><br /><br />

      <!-- Testimonials Section -->
      <section class="testimonials" id="testimonials">
        <h2 class="testimonial-heading section__title" align-items="center" data-aos="fade-in">Testimonials</h2>
        <div class="marquee">
          <div class="track">
            <div class="content">
              <div class="testimonial-container">
                <div class="testimonial-user">
                  <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
                      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">
                  <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.
                      The
                      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>
                    <div class="user-info">
                      <h3>Charles</h3>
                    </div>
                  </div>
                </div>
                <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
                      took
                      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">
                      <h3>Katie</h3>
                    </div>
                  </div>
                </div>
                <div class="testimonial-user">
                  <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
                      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">
                  <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.
                      The
                      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>
                    <div class="user-info">
                      <h3>Charles</h3>
                    </div>
                  </div>
                </div>
                <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
                      took
                      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">
                      <h3>Katie</h3>
                    </div>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>

      </section>

      <!----------------------------------------------------- FAQ section ---------------------- -->

      <section>
        <h2 class="section__title" data-aos="zoom-in">
          Frequently asked questions
        </h2>
        <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>

          </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">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>

    <!-- Swiper JS -->
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
      var swiper = new Swiper(".swiper-container", {
        effect: 'coverflow',
        grabCursor: true,
        centeredSlides: true,
        slidesPerView: 'auto',
        coverflowEffect: {
          rotate: 0,
          stretch: 0,
          depth: 100,
          modifier: 2,
          slideShadows: true,
        },
        loop: true,
      });
    </script>




    <!--------------------------------------- Updated Contact Us Section ----------------------------------------------->

    <!-- <section class="contact" id="contact">
    <h2 class="section__title" align-items="center" data-aos="slide-right">Contact Us</h2>
    <div class="contact-form" data-aos="fade-in">
      <div class="left">
        Add your image here
        <img src="./img/flat-design-illustration-customer-support_23-2148887720.avif" alt="Contact Image"
          style="max-width: 100%; width: 500px;">
      </div>
      <div class="right">
        <form>
          <div class="mb-3">

            <label for="exampleInputName" style="color:black;">Name</label>
            <input type="text" class="form-control" id="exampleInputName" placeholder="Enter your name">
          </div>
          <div class="mb-3">
            <label for="exampleInputEmail2" style="color:black;">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail2" aria-describedby="emailHelp"
              placeholder="Enter your email">
            <div id="emailHelp" style="color:black;">We'll never share your email with anyone else.</div>
          </div>
          <div class="mb-3">
            <label for="exampleInputMessage" style="color:black;">Message</label>

            <textarea class="form-control" id="exampleInputMessage" rows="4"
              placeholder="feel free to ask your queries!"></textarea>
          </div>
          <button type="submit" class="btn btn-primary" onclick="sendMail()">Submit</button>
        </form>
        <br>
        <button type="submit" class="btn btn-primary" onclick="window.location.href='feed.html'">
          Go to Feedback Page
        </button>
      </div>
    </div>



  </section> -->

    <section>
      <div class="container" id="cnt-form">
        <div class="items">
          <div class="contact" data-aos="slide-right">
            <div>
              <h1 class="section__title" style="height: 90px;">Contact Us</h1>
              <p>Feel Free to drop us a message with any inquiries or feedback.We're here to assist you!</p>
              <img src="./img/flat-design-illustration-customer-support_23-2148887720.avif">
            </div>
          </div>
          <div class="contact-form" data-aos="fade-in">
            <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%;">
              </div>
              <div style="position: relative;">
                <i class="icon2 fa-solid fa-envelope"></i>
                <input type="email" id="email" placeholder="Email" class="contact-us-email-fix" style="padding-left:6%; width: 50% !important;
                padding-left: 6% !important;
                padding-bottom: 10px !important;
                margin: 20px !important;
                margin-left: 30px !important;
                outline: none !important;
                border: none !important;
                font-size: 15px !important;
                background: none !important;
                border-bottom: 1px solid var(--text-dark) !important;
                color: var(--text-dark) !important;
                font-family: 'Oxygen', sans-serif !important; border-radius: 20px;" 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>
              </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>
              <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>
          </div>
        </div>
      </div>
    </section>




    <section class="subscribe" id="Contact">
      <div class="section__container subscribe__container">
        <div class="subscribe__content">
          <h2 class="section__title" data-aos="fade-up">Subscribe to get special prize</h2>
          <p class="section__subtitle" data-aos="fade-up">
            Subscribe to get special travel prizes. Unlock exclusive deals and offers just for you.
          </p>
        </div>
        <div class="subscribe__form" data-aos="fade-up">
          <form id="subscriptionForm">
            <input type="email" style="border: none; font-size: 15px; margin: auto;" placeholder="Your email here"
              id="emailInput" required />
            <button class="btn-send" id="send" type="submit"
              style="box-shadow: 0px 4px 8px blue; font-weight:530;">Subscribe</button>
          </form>
          <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">
          <h3 class="footer-head" class="footer__title" style="cursor: default;">Tourguide<span>.</span></h3>
          <p>
            Ready for your next adventure? Let's make it unforgettable.<br>
          </p>
          <p class="footer__text">
            Start planning your dream trip with us and explore the world.
          </p>
        </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>

            <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="./blog.html" class="footer__link">Our Blogs</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="./Licensing.html" class="footer__link">Licensing</a></p>
            <p><a href="#cnt-form" class="footer__link">Contact Us</a></p>
            <p><a href="contributors.html" class="footer__link">Our Contributors</a></p>
          </div>
        </div>
      </div>
      <div class="section__container footer__container">
        <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"
                frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe><a
                href="https://embedgooglemap.net/124/">invincible 123movies</a><br>
              <style>
                .mapouter {
                  position: relative;
                  text-align: right;
                  height: 200px;
                  width: 200px;
                }
              </style><a href="https://www.embedgooglemap.net">embed google map on website</a>
              <style>
                .gmap_canvas {
                  overflow: hidden;
                  background: none !important;
                  height: 200px;
                  width: 200px;
                }
              </style>
            </div>
          </div>
        </div>
        <div class="footer__col">
          <div class="footer__area">
            <h4>Contact Us</h4>
            <div class="d-flex align-items-center mb-2">
              <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd">
                <path
                  d="M14.851 11.923c-.179-.641-.521-1.246-1.025-1.749-1.562-1.562-4.095-1.563-5.657 0l-4.998 4.998c-1.562 1.563-1.563 4.095 0 5.657 1.562 1.563 4.096 1.561 5.656 0l3.842-3.841.333.009c.404 0 .802-.04 1.189-.117l-4.657 4.656c-.975.976-2.255 1.464-3.535 1.464-1.28 0-2.56-.488-3.535-1.464-1.952-1.951-1.952-5.12 0-7.071l4.998-4.998c.975-.976 2.256-1.464 3.536-1.464 1.279 0 2.56.488 3.535 1.464.493.493.861 1.063 1.105 1.672l-.787.784zm-5.703.147c.178.643.521 1.25 1.026 1.756 1.562 1.563 4.096 1.561 5.656 0l4.999-4.998c1.563-1.562 1.563-4.095 0-5.657-1.562-1.562-4.095-1.563-5.657 0l-3.841 3.841-.333-.009c-.404 0-.802.04-1.189.117l4.656-4.656c.975-.976 2.256-1.464 3.536-1.464 1.279 0 2.56.488 3.535 1.464 1.951 1.951 1.951 5.119 0 7.071l-4.999 4.998c-.975.976-2.255 1.464-3.535 1.464-1.28 0-2.56-.488-3.535-1.464-.494-.495-.863-1.067-1.107-1.678l.788-.785z" />
              </svg>
              <a href="mailto:tour@tourguide.com" class="text-nowrap">tour@tourguide.com</a>
            </div>
            <div class="d-flex align-items-center">
              <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd">
                <path
                  d="M8.26 1.289l-1.564.772c-5.793 3.02 2.798 20.944 9.31 20.944.46 0 .904-.094 1.317-.284l1.542-.755-2.898-5.594-1.54.754c-.181.087-.384.134-.597.134-2.561 0-6.841-8.204-4.241-9.596l1.546-.763-2.875-5.612zm7.746 22.711c-5.68 0-12.221-11.114-12.221-17.832 0-2.419.833-4.146 2.457-4.992l2.382-1.176 3.857 7.347-2.437 1.201c-1.439.772 2.409 8.424 3.956 7.68l2.399-1.179 3.816 7.36s-2.36 1.162-2.476 1.215c-.547.251-1.129.376-1.733.376" />
              </svg>
              <a href="tel:8562145852" class="text-nowrap">+91 8562145852</a>
            </div>
            <div class="icons">
              <a href="">
                <div class="icon">
                  <i class="fab fa-linkedin" title="linkedin" style="cursor: pointer;"></i>
                </div>
              </a>

              <a href="">
                <div class="icon">
                  <i class="fa-brands fa-x-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>
                </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
          style="padding: 5px; background-color: #ff9fcf; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
          <label for="google_translate_element"
            style="display: block; font-weight: bold; margin-bottom: 10px; font-size: 18px; color: #333;">Select
            Language:</label>
          <div id="google_translate_element"
            style="display: inline-block; margin-top: 10px; padding: 10px; border: 1px solid #ff9fcf; border-radius: 5px; background-color: #fff;">
          </div>
        </div>
        </div>

        
        <script type="text/javascript">
          function googleTranslateElementInit() {
            new google.translate.TranslateElement({ pageLanguage: 'en' }, 'google_translate_element');
          }
        </script>
        <script type="text/javascript"
          src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

        <div style="padding: 32px; background-color: #9fbaff; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
          <label for="google_translate_element" style="display: block; font-weight: bold; margin-bottom: 10px; font-size: 20px; color: #333;">Select Language:</label>
          <div id="google_translate_element" style="display: inline-block; margin-top: 10px; padding: 20px; border: 1px solid #ff9fcf; border-radius: 5px; background-color: #fff;"></div>
      </div>
      
      
      
      
      <script type="text/javascript">
        function googleTranslateElementInit() {
            new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
        }
    </script>
    <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
 

        <!-- <div class="footer__col">
          <label for="google_translate_element" style="display: block; font-weight: bold; margin-bottom: 5px;">Select Language:</label>
          <div id="google_translate_element" style="display: inline-block; margin-top: 10px;"></div>
        </div>
        
        <script>
          function googleTranslateElementInit() {
            new google.translate.TranslateElement({
              pageLanguage: 'en',
              includedLanguages: 'es,fr,de,ja,ko,zh-CN',
              layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
              autoDisplay: false,
              gaTrack: true,
              gaId: 'UA-XXXXXXXX-X'
            }, 'google_translate_element');
          }
        </script>
        <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
        
        <script>
          // Apply inline styling to the select element once it is created by Google Translate
          window.addEventListener('load', function() {
            var interval = setInterval(function() {
              var select = document.querySelector('#google_translate_element select');
              if (select) {
                select.style.padding = '5px';
                select.style.border = '1px solid #ccc';
                select.style.borderRadius = '0'; // Remove rounded corners to make it rectangular
                select.style.appearance = 'none'; // Remove default styling
                select.style.backgroundColor = '#fff';
                select.style.cursor = 'pointer';
                clearInterval(interval); // Stop the interval once the select element is found and styled
              }
            }, 100); // Check every 100ms
          });
        </script> -->


        <div class="section__container footer__container">
        <!--  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>


    <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";
        }
      });

      // 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>





    <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>

    <!-- typing animation -->
    <script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>
    <script>
      var typed = new Typed(".auto-typed", {
        strings: ["Wonders", "Gems", "Secrets"],
        typeSpeed: 150,
        backSpeed: 50,
        loop: true
      })
    </script>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>
    <script>
        //initailizing emailjs

        (function () {
          emailjs.init("kHyqhzLTyzP0cw1px");
        })();

      document.getElementById("contact-form").addEventListener('submit', function (event) {
        event.preventDefault();
        var email = document.getElementById("email").value;
        var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
        if (!emailPattern.test(email)) {
          alert("Please enter a valid email");
          return;
        }
        sendEmail(email);
        event.target.reset();
      });

      function sendEmail(email) {
        var params = {
          name: document.getElementById("Name").value,
          email: email,
          message: document.getElementById("message").value
        }

        const serviceID = "service_txp05dc";
        const templateID = "template_16rbum9";

        emailjs.send(serviceID, templateID, params)
          .then(function (response) {
            console.log("Success!", response.status, response.text);
            alert("Email sent successfully!");
          },
            function (error) {
              console.log("Failed to send email...", error);
              alert("Failed to send Email. Please try again later.");
            });
      }
    </script>

    <script src="index.js"></script>


    <script>
      window.embeddedChatbotConfig = {
        chatbotId: "yDQ_EheFvX0HAPr9beQ5L",
        domain: "www.chatbase.co"
      }
    </script>
    <script src="https://www.chatbase.co/embed.min.js" chatbotId="yDQ_EheFvX0HAPr9beQ5L" domain="www.chatbase.co" defer>
    </script>



    <!-- Start of Conferbot Script

    <script type="text/javascript">
        (function (d, s, id) {
          var js, el = d.getElementsByTagName(s)[0];
          if (d.getElementById(id)) return;
          js = d.createElement(s);
          js.async = true;
          js.src = 'https://s3.ap-south-1.amazonaws.com/conferbot.defaults/dist/v1/widget.min.js';
          js.id = id;
          js.charset = 'UTF-8';
          el.parentNode.insertBefore(js, el);
          js.onload = function () {
            var w = window.ConferbotWidget("65b80765988633d43148e80e", "live_chat");
          };
        })(document, 'script', 'conferbot-js');
    </script>
    End of Conferbot Script
  -->




    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
      integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
      crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <!--
    <script>
      (function ($) {
        var isDarkMode = false; // Assuming initially in light mode

        var canvas = $('#bg').children('canvas'),
          background = canvas[0],
          foreground1 = canvas[1],
          foreground2 = canvas[2],
          config = {
            circle: {
              amount: 18,
              layer: 3,
              color: [157, 97, 207],
              alpha: 0.3
            },
            line: {
              amount: 12,
              layer: 3,
              color: [255, 255, 255],
              alpha: 0.3
            },
            speed: 0.5,
            angle: 20
          };

        if (background.getContext) {
          var bctx = background.getContext('2d'),
            fctx1 = foreground1.getContext('2d'),
            fctx2 = foreground2.getContext('2d'),
            M = window.Math, // Cached Math
            degree = config.angle / 360 * M.PI * 2,
            circles = [],
            lines = [],
            wWidth, wHeight, timer;

          requestAnimationFrame = window.requestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            window.oRequestAnimationFrame ||
            function (callback, element) { setTimeout(callback, 1000 / 60); };

          cancelAnimationFrame = window.cancelAnimationFrame ||
            window.mozCancelAnimationFrame ||
            window.webkitCancelAnimationFrame ||
            window.msCancelAnimationFrame ||
            window.oCancelAnimationFrame ||
            clearTimeout;

          var setCanvasHeight = function () {
            wWidth = $(window).width();
            wHeight = $(window).height(),

              canvas.each(function () {
                this.width = wWidth;
                this.height = wHeight;
              });
          };

          var drawCircle = function (x, y, radius, color, alpha) {
            var gradient = fctx1.createRadialGradient(x, y, radius, x, y, 0);
            gradient.addColorStop(0, 'rgba(' + color[0] + ',' + color[1] + ',' + color[2] + ',' + alpha + ')');
            gradient.addColorStop(1, 'rgba(' + color[0] + ',' + color[1] + ',' + color[2] + ',' + (alpha - 0.1) + ')');

            fctx1.beginPath();
            fctx1.arc(x, y, radius, 0, M.PI * 2, true);
            fctx1.fillStyle = gradient;
            fctx1.fill();
          };

          var drawLine = function (x, y, width, color, alpha) {
            var endX = x + M.sin(degree) * width,
              endY = y - M.cos(degree) * width,
              gradient = fctx2.createLinearGradient(x, y, endX, endY);
            gradient.addColorStop(0, 'rgba(' + color[0] + ',' + color[1] + ',' + color[2] + ',' + alpha + ')');
            gradient.addColorStop(1, 'rgba(' + color[0] + ',' + color[1] + ',' + color[2] + ',' + (alpha - 0.1) + ')');

            fctx2.beginPath();
            fctx2.moveTo(x, y);
            fctx2.lineTo(endX, endY);
            fctx2.lineWidth = 3;
            fctx2.lineCap = 'round';
            fctx2.strokeStyle = gradient;
            fctx2.stroke();
          };

          var drawBack = function () {
            bctx.clearRect(0, 0, wWidth, wHeight);

            var gradient = [];

            if (isDarkMode) {
              gradient[0] = bctx.createRadialGradient(wWidth * 0.3, wHeight * 0.1, 0, wWidth * 0.3, wHeight * 0.1, wWidth * 0.9);
              gradient[0].addColorStop(0, '#0e1525');
              gradient[0].addColorStop(1, 'transparent');

              bctx.translate(wWidth, 0);
              bctx.scale(-1, 1);
              bctx.beginPath();
              bctx.fillStyle = gradient[0];
              bctx.fillRect(0, 0, wWidth, wHeight);
            } else {
              gradient[0] = bctx.createRadialGradient(wWidth * 0.3, wHeight * 0.1, 0, wWidth * 0.3, wHeight * 0.1, wWidth * 0.9);
              gradient[0].addColorStop(0, 'rgb(0, 26, 77)');
              gradient[0].addColorStop(1, 'transparent');

              bctx.translate(wWidth, 0);
              bctx.scale(-1, 1);
              bctx.beginPath();
              bctx.fillStyle = gradient[0];
              bctx.fillRect(0, 0, wWidth, wHeight);
            }

            gradient[1] = bctx.createRadialGradient(wWidth * 0.1, wHeight * 0.1, 0, wWidth * 0.3, wHeight * 0.1, wWidth);
            gradient[1].addColorStop(0, 'rgb(0, 150, 240)');
            gradient[1].addColorStop(0.8, 'transparent');

            bctx.translate(wWidth, 0);
            bctx.scale(-1, 1);
            bctx.beginPath();
            bctx.fillStyle = gradient[1];
            bctx.fillRect(0, 0, wWidth, wHeight);

            gradient[2] = bctx.createRadialGradient(wWidth * 0.1, wHeight * 0.5, 0, wWidth * 0.1, wHeight * 0.5, wWidth * 0.5);
            gradient[2].addColorStop(0, 'rgb(40, 20, 105)');
            gradient[2].addColorStop(1, 'transparent');

            bctx.beginPath();
            bctx.fillStyle = gradient[2];
            bctx.fillRect(0, 0, wWidth, wHeight);
          };

          var animate = function () {
            var sin = M.sin(degree),
              cos = M.cos(degree);

            if (config.circle.amount > 0 && config.circle.layer > 0) {
              fctx1.clearRect(0, 0, wWidth, wHeight);
              for (var i = 0, len = circles.length; i < len; i++) {
                var item = circles[i],
                  x = item.x,
                  y = item.y,
                  radius = item.radius,
                  speed = item.speed;

                if (x > wWidth + radius) {
                  x = -radius;
                } else if (x < -radius) {
                  x = wWidth + radius
                } else {
                  x += sin * speed;
                }

                if (y > wHeight + radius) {
                  y = -radius;
                } else if (y < -radius) {
                  y = wHeight + radius;
                } else {
                  y -= cos * speed;
                }

                item.x = x;
                item.y = y;
                drawCircle(x, y, radius, item.color, item.alpha);
              }
            }

            if (config.line.amount > 0 && config.line.layer > 0) {
              fctx2.clearRect(0, 0, wWidth, wHeight);
              for (var j = 0, len = lines.length; j < len; j++) {
                var item = lines[j],
                  x = item.x,
                  y = item.y,
                  width = item.width,
                  speed = item.speed;

                if (x > wWidth + width * sin) {
                  x = -width * sin;
                } else if (x < -width * sin) {
                  x = wWidth + width * sin;
                } else {
                  x += sin * speed;
                }

                if (y > wHeight + width * cos) {
                  y = -width * cos;
                } else if (y < -width * cos) {
                  y = wHeight + width * cos;
                } else {
                  y -= cos * speed;
                }

                item.x = x;
                item.y = y;
                drawLine(x, y, width, item.color, item.alpha);
              }
            }

            timer = requestAnimationFrame(animate);
          };

          var createItem = function () {
            circles = [];
            lines = [];

            if (config.circle.amount > 0 && config.circle.layer > 0) {
              for (var i = 0; i < config.circle.amount / config.circle.layer; i++) {
                for (var j = 0; j < config.circle.layer; j++) {
                  circles.push({
                    x: M.random() * wWidth,
                    y: M.random() * wHeight,
                    radius: M.random() * (20 + j * 5) + (20 + j * 5),
                    color: config.circle.color,
                    alpha: M.random() * 0.2 + (config.circle.alpha - j * 0.1),
                    speed: config.speed * (1 + j * 0.5)
                  });
                }
              }
            }

            if (config.line.amount > 0 && config.line.layer > 0) {
              for (var m = 0; m < config.line.amount / config.line.layer; m++) {
                for (var n = 0; n < config.line.layer; n++) {
                  lines.push({
                    x: M.random() * wWidth,
                    y: M.random() * wHeight,
                    width: M.random() * (20 + n * 5) + (20 + n * 5),
                    color: config.line.color,
                    alpha: M.random() * 0.2 + (config.line.alpha - n * 0.1),
                    speed: config.speed * (1 + n * 0.5)
                  });
                }
              }
            }

            cancelAnimationFrame(timer);
            timer = requestAnimationFrame(animate);
            drawBack();
          };

          $(document).ready(function () {
            setCanvasHeight();
            createItem();
          });

          $(window).resize(function () {
            setCanvasHeight();
            createItem();
          });

          // Add an event listener for toggling dark mode
          $('#toggleDarkMode').on('click', function () {
            isDarkMode = !isDarkMode;
            createItem(); // Recreate the canvas elements with updated colors
          });

        }
      })(jQuery);
    </script> -->

    <script>
      let pre = document.querySelector('#pre-loader');
      window.addEventListener("load", function () {
        pre.style.display = "none";
      })
    </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');
            }
          });
        }

        document.addEventListener('scroll', highlightNavLink);
        window.addEventListener('resize', highlightNavLink);

        // Initialize AOS library
        AOS.init();
      });</script>
    <script>

      let progress = document.getElementById("progressbar");

      let totalHeight = document.body.scrollHeight - window.innerHeight;
      window.onscroll = function () {
        let progressHeight = (window.pageYOffset / totalHeight) * 100;
        progress.style.height = progressHeight + "%";
      }

    </script>




  </body>
  <script>
    function replaceDivs() {
      // Get references to the original and new divs
      var originalDiv = document.getElementById("originalDiv");
      var newDiv = document.getElementById("newDiv");

      // Check if the original div exists
      if (originalDiv) {
        // Hide the original div
        originalDiv.style.display = "none";

        // Show the new div
        newDiv.style.display = "block";
      }
    }
  </script>
  <script src="./Image-Gallery/script.js"></script>
  <script src="./index.js"></script>

  <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);
    }
  </script>

  <script src="index.js"></script>


  <!--  Adding copyright javascript code to make it dynamic and display current year -->
  <script>
    document.getElementById("year").innerHTML = new Date().getFullYear();
  </script>

  <script>
    // Logout Button

    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';
        });
      } else {
        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);
        }
      }
    })
  </script>


  <script>
    const scrollline = document.querySelector('.progress-bar');

    function fillscrollline() {
      const windowHeight = window.innerHeight;
      const fullHeight = document.body.clientHeight;
      const scrolled = window.scrollY;
      const percentScrolled = (scrolled / (fullHeight - windowHeight)) * 100;

      scrollline.style.width = percentScrolled + '%';
    };

    window.addEventListener('scroll', fillscrollline);


    // 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 -->


<!-- <div class="bubbles">
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>


  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>



</div> -->
<!-- New bubble background end -->