index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="BuddyTrail is a travel agency website that helps you pick out your holiday vacation"
    />
     <meta name="description" content="BuddyTrail is your ultimate travel companion, helping you plan trips, discover new destinations, and connect with fellow travelers. Explore the world with us!">
  <meta name="keywords" content="travel, travel companion, trip planning, travel tips, explore destinations, connect with travelers, travel community">
  <meta name="author" content="Priya Ghosal">

  <meta property="og:title" content="BuddyTrail - Your Travel Companion">
  <meta property="og:description" content="Discover new destinations and connect with fellow travelers with BuddyTrail. Your ultimate travel planning tool!">
  <meta property="og:url" content="https://github.com/PriyaGhosal/BuddyTrail">
  <meta property="og:type" content="website">

  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="BuddyTrail - Your Travel Companion">
  <meta name="twitter:description" content="Join BuddyTrail to explore the world, plan your trips, and connect with a community of travelers.">

  <!-- Structured Data -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "WebSite",
    "name": "BuddyTrail",
    "url": "https://github.com/PriyaGhosal/BuddyTrail",
    "description": "BuddyTrail is your ultimate travel companion, helping you plan trips, discover new destinations, and connect with fellow travelers.",
    "publisher": {
      "@type": "Organization",
      "name": "BuddyTrail"
    }
  }
  </script>
    
    <meta name="robots" content= "index,follow" />

    <link rel="stylesheet" href= "RatingStyle.css">
    <link rel="stylesheet" href="button-ui.css">
    <link rel="stylesheet" href= "style.css" />
    <link rel="stylesheet" href= "./styles/popup.css">
    <link rel="stylesheet" href= "cookie-popup.css">
    <link rel="preconnect" href= "https://fonts.googleapis.com" />
    <link rel="preconnect" href= "https://fonts.gstatic.com" crossorigin />

    <link
      href= "https://fonts.googleapis.com/css2?family=Pattaya&family=Poppins:wght@400;500&display=swap"
      rel= "stylesheet"
    />
    <link rel="icon" href="/icons/airplane.svg" />
    <link
      rel= "stylesheet"
      href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
      integrity= "sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
      crossorigin= "anonymous"
      referrerpolicy= "no-referrer"
    />
    <link rel="stylesheet" href="chatbot.css">

    <!-- Link to manifest file for enabling PWA -->
    <link rel="manifest" href="/manifest.json">

    <title>BuddyTrail</title>
    <style>
     .header1{
       /* background-color:white; */
       border-radius:8px;
       padding: 10px 8px 4px 8px;
     }

    /* Button Styling */
    .btn {
      background-color: #007bff; /* Primary button color */
      padding: 10px 20px; /* Padding for button size */
      text-decoration: none; /* Remove underline from text */
      color: white; /* White text */
      border-radius: 5px; /* Rounded corners */
    }

    /* Hover Effect for Buttons */
    .btn:hover {
      background-color: #0056b3; /* Darker color on hover */
    }

      * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    display: flex;
    align-items: flex-start; /* Align items at the start of the container */
    justify-content: space-between; /* Space between elements */
    gap: 20px; /* Optional gap between form and rating section */
    height: auto; /* Adjust height if necessary */
}
.form-section {
    width: 70%; /* Adjust width as needed */
}
.rating-wrap {
    width: 30%; /* Adjust width as needed */
    text-align: left;
}

.center {
    width: auto;
    display: inline-flex; /* Align stars and rating count in a row */
    align-items: center;
    gap: 10px; /* Add some space between the stars and the count */
}

.rating {
  height: auto;
}

.rating:hover {
  cursor: pointer;
}

#rating-value {
    font-size: 1.2rem; /* Adjust font size */
    font-weight: bold;
    color: black; /* Optional: change the color to match the theme */
}

.rating {
    border: none;
    float:right;
}

.rating > input {
    display: none;
}

.rating > label:before {
    content: '\f005';
    font-family: FontAwesome;
    margin: 5px;
    font-size: 1.5rem;
    display: inline-block;
    cursor: pointer;
}

.rating > .half:before {
    content: '\f089';
    position: absolute;
    cursor: pointer;
}

.rating > label {
    color: #ddd; /* Empty stars initially */
    float: right;
    cursor: pointer;
}

/* Filled stars on hover and selection */
.rating > input:checked ~ label,
.rating:not(:checked) > label {
    color: #ddd; /* Keep stars empty until interaction */
}

.rating > input:checked ~ label,
.rating > input:checked ~ label:hover,
.rating > input:checked ~ label:hover ~ label {
    color: rgb(230, 166, 17); /* Green for filled stars */
}

.rating > label:hover ~ label,
.rating > label:hover {
    color:rgb(230, 166, 17); /* Green hover effect */
}
      .chatbot-container {
        position: fixed;
        bottom: 20px; /* Adjust as needed */
        right: 20px; /* Adjust as needed */
        z-index: 1000; /* Ensure it appears above other elements */
      }

      .chatbot-button {
        background-color: #007bff; /* Change to your preferred color */
        border: none;
        border-radius: 50%;
        padding: 5px; /* Smaller padding */
        cursor: pointer;
        position: relative;
        width: 50px; /* Adjusted size */
        height: 50px; /* Adjusted size */
      }

      .chatbot-button img {
        width: 30px; /* Adjusted image size */
        height: 30px; /* Adjusted image size */
      }

      .tooltip-text {
        display: none; /* Hide by default */
        position: absolute;
        top: -10%; /* Position above the button */
        left: -230px;
        transform: translateX(-230px, -50%);
        background-color: #333; /* Background color for tooltip */
        color: #fff; /* Tooltip text color */
        padding: 5px;
        border-radius: 5px;
        white-space: nowrap; /* Prevent text from wrapping */
      }

      .chatbot-button:hover .tooltip-text {
        display: block; /* Show on hover */
      }
      .logo{
        display: flex;
        flex-direction: row;
        align-items: center;
      }

      .card:hover {
        cursor: pointer;
      }
      @media (max-width: 768px) {
    .itinerary-list {
        flex-direction: column;
        align-items: center;
    }

    .itinerary {
        margin-bottom: 20px;
        width: 90%;
    }
    .itinerary {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
  }

.itinerary:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.btn-view-itinerary:hover {
    background-color: #0056b3;
}

.cards {
  display: flex;
  gap: 20px;
}

.card {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.card.inview {
  opacity: 1;
  transform: translateY(0);

}
.card.inview header1 {
      padding: 10px 8px 4px 8px;
}
/* General hidden state and transition for smooth animation */
.itinerary, .service-card {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Visible state triggered when the element comes into view */
.itinerary.inview, .service-card.inview {
  opacity: 1;
  transform: translateY(0);
  max-width: 95%;
}

 main
  /* circle styles */
    .circle {
     height: 24px;
     width: 24px;
     border-radius: 24px;
     background-color: rgb(255, 0, 0);
     position: fixed;
     top: 0;
     left: 0;
     pointer-events: none;
     z-index: 99999999;
       

    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        (function() {
            const userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
            const savedTheme = localStorage.getItem('theme');
            if (savedTheme) {
                document.body.classList.add(savedTheme === 'dark' ? 'dark-mode' : 'light-mode');
            } else if (userPrefersDark) {
                document.body.classList.add('dark-mode');
            } else {
                document.body.classList.add('light-mode');
            }
        })();
    </script>

  </head>
  <body class="light-mode">
      <!-- Preloader -->
      <div id="preloader">
        <div class="loader-wrapper">
          <img src="img/logo.png" alt="Travel Website Logo" id="logo">
          <div class="loader-globe"></div>
        </div>
        <div id="loading-text">Ready to Explore the World...</div>
      </div>
      <style>
      /* Preloader Container */
      #preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 1000;
  }

  /* Wrapper for the logo and loader */
  .loader-wrapper {
    position: relative;
    width: 180px;
    height: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* Logo Styling */
  #logo {
    width: 140px;
    position: relative;
    z-index: 10; /* Ensures logo stays above the loader */
    animation: pulse 2s infinite ease-in-out;
  }

  /* Circular Loader surrounding the logo */
  .loader-globe {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 8px solid transparent;
    border-left-color: white;
    border-right-color: white;
    animation: spin 2s linear infinite;
  }

  /* Loading Text */
  #loading-text {
    margin-top: 20px;
    font-size: 20px;
    color: white;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
    letter-spacing: 1px;
    animation: textGlow 2s ease-in-out infinite;
  }

  /* Keyframes Animations */
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  @keyframes textGlow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
  }

  @keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
  }
      </style>
      <script>
        // Function to hide preloader and show content once the page has fully loaded
    window.addEventListener('load', function() {
        const preloader = document.getElementById('preloader');
        const content = document.getElementById('content');

        // Set a small timeout for better user experience
        setTimeout(function() {
            // Hide preloader
            preloader.style.opacity = '0';
            preloader.style.transition = 'opacity 1s ease-in-out';

            // Show content after preloader fades out
            setTimeout(function() {
                preloader.style.display = 'none';
                content.style.display = 'block';
                content.classList.add('show');  // Trigger fade-in transition
            }, 1000); // Match the transition duration
        }, 2000);  // Adjust to the length of your spinner animation
    });

      </script>

    <!-- Google Translate Button -->
    <!-- <div class="translate-container">
      <button class="language-toggle" id="languageToggle">🌐</button>
      <div id="google_translate_element"></div>
    </div> -->

    <!-- Circles -->
<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>

    <script>
      // Initialization function
      function googleTranslateElementInit() {
        new google.translate.TranslateElement(
          {
            pageLanguage: "en",
            includedLanguages:
              "en,es,fr,de,it,pt,ja,zh-CN,hi,bn,ml,te,ta,gu,kn,or",
            layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
          },

          "google_translate_element"
        );


        // Toggle visibility
        if (
          translateElement.style.display === "none" ||
          translateElement.style.display === ""
        ) {
          translateElement.style.display = "block";
        } else {
          translateElement.style.display = "none";
        }
      }
      //Providing scroll animation between different parts of the page using jquery
      $(document).ready(function () {
  $     ("a[href^='#']").on("click", function (event) {
          event.preventDefault();
          if (this.hash !== "") {
            event.preventDefault();
            var hash = this.hash;
            var navbarHeight = $(".main-head").outerHeight();
            $("html, body").animate(
              {
                scrollTop: $(hash).offset().top - navbarHeight,
              },
              1000
            );
            event.preventDefault();
          }
          event.preventDefault();
        });
        event.preventDefault();
      });
  </script>

  <script src="script.js"></script>


<script src="cursor.js" defer="defer"></script>

<div id="progress-bar"></div>
  <!-- funcioning of progress bar -->
  <script>
    window.addEventListener('scroll', function () {
      // Calculate the scroll progress
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
      const scrollPercent = (scrollTop / scrollHeight) * 100;

      // Update the width of the progress bar
      document.getElementById('progress-bar').style.width = scrollPercent + '%';
    });
  </script>
  <main>
    <section class="hero" id="home">
      <div class="header2"><h1>Travel Beyond Limits</h1></div>
      <h3>
        Connect, Explore, and Discover Together. <br />
        BuddyTrail: Your Journey Begins with the Perfect Travel Companion.
      </h3>
      <div class="video-background">
        <video autoplay muted loop>
            <!-- Replace this video source with your live waterfall video or another hosted video -->
            <source src="waterfall.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
        <div class="overlay"></div>
    </div>
      <a href="book.html" id="btn">Book now</a>
    </section>

    <section id="locations">
      <header class="locations-head">
    </script>

    <script src="script.js"></script>
    <header class="main-head" style="background-color: rgba(0, 0, 0, 0.4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #000000;  border-radius: 8px;    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);">
  <nav >
    <div class="logo">
      <img src="img/logo.png" id="logo-web">
      <h1 id="logo"><a href="#home">BuddyTrail</a></h1>
    </div>

    <!-- Hamburger button for mobile -->
    <button class="hamburger" id="hamburger">☰</button>

    <ul id="nav-list">
      <!-- Close button for dropdown -->
      <span class="dropdown-close-btn" id="closeBtn">×</span>
      <li><a href="#home" class="navhover">Home</a></li>
      <li><a href="team.html" class="navhover">Team</a></li>
      <li><a href="#deals" class="navhover">Exclusive Deals</a></li>
      <li><a href="blog.html" class="navhover">Blogs</a></li>
      <li><a href="about.html" class="navhover">About</a></li>
      <li><a href="#itineraries" class="navhover">Travel Itineraries</a></li>
      <li><a href="F&Q.html" class="navhover">FAQ</a></li>
      <li><a href="./contact.html" class="navhover">Contact</a></li>
      <li><a href="#reviews" class="navhover">Reviews</a></li>
      <li><a href="auth.html" class="navhover">Sign In</a></li>

    </ul>

    <!-- Toggle Button -->
     <div class="toggle-button">
       <button class="mode-toggle" id="modeToggle">
         <span class="sun-icon glow"><img src="day-mode.png" alt="Light mode"></span>
         <span class="moon-icon glow" style="display: none;"><img src="moon.png" alt="Dark mode"></span>
       </button>
     </div>
  </nav>
</header>

      <!-- Hamburger button for mobile -->
      <button class="hamburger" id="hamburger">☰</button>
    </header>

<!-- Pop up HTML Starts Here -->
 <!-- Pop-up for BuddyTrail -->
<div id="popup" class="popup">
  <div id="popup-content">
      <div class="popup-left">
          <img if="popupimage" src="./img/popup1.jpg" alt="Travel Image">
      </div>
      <div class="popup-right">
          <h1>Ready for Your Next Adventure?</h1>
          <p class="h2">Join <strong>BuddyTrail</strong> and Plan Your Dream Vacation Today!</p>
          <p>Sign up to receive <strong> 20% discount </strong> on your first booking!</p>
          <form id="emailForm" >
            <input type="email" id="email" placeholder="Enter your email" required>
            <button type="submit" id="signup-btn">Sign Up</button>
          </form>
          <a href="#" id="no-thanks">No thanks</a>
          <p id="terms">By signing up, you agree to our <a id="link" href="terms_of_service.html" style="text-decoration: underline;">Terms of Service</a> and <a id="link" href="privacypolicy.html" style="text-decoration: underline;">Privacy Policy</a></p>
      </div>
  </div>
</div>
<!-- Pop up HTML ends Here -->

<!-- JS to handle hamburger and close button -->
<script>

  document.addEventListener("DOMContentLoaded", function () {
    const hamburger = document.getElementById("hamburger");
    const navList = document.getElementById("nav-list");
    const closeBtn = document.getElementById("closeBtn");
    const mainHead = document.querySelector('.main-head'); // Selecting the header

    // Hamburger menu functionality
    hamburger.addEventListener("click", function () {
      navList.classList.toggle("active");
    });

    closeBtn.addEventListener("click", function () {
      navList.classList.remove("active");
    });

    // Scroll event to handle header transparency
    window.addEventListener("scroll", function () {
      if (window.scrollY > 50) { // If scrolled more than 50px
        mainHead.classList.add("shadow");
      } else {
        mainHead.classList.remove("shadow");
      }
    });
  });
</script>

<script src="./script/popup.js"></script>


    <div id="progress-bar"></div>
    <!-- funcioning of progress bar -->
    <script>
      window.addEventListener("scroll", function () {
        // Calculate the scroll progress
        const scrollTop =
          document.documentElement.scrollTop || document.body.scrollTop;
        const scrollHeight =
          document.documentElement.scrollHeight -
          document.documentElement.clientHeight;
        const scrollPercent = (scrollTop / scrollHeight) * 100;

        // Update the width of the progress bar
        document.getElementById("progress-bar").style.width =
          scrollPercent + "%";
      });
    </script>
    <main>


      <h3 style="
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      color: white;
      padding-top: 1rem;
      font-weight: bold;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
      background-image: linear-gradient(to right, #6a11cb, #2575fc);
    ">
      We handle everything, from finding the ideal travel buddy to
      selecting your perfect hotel, flight, and destination.
    </h3>

      </header>
    </section>
    <section id="benefits">
      <header class="benefits-head">
        <h2>The Perfect travel</h2>
        <h3>
          we cover everything from picking the perfect hotel, <br />to flight
          and destination
        </h3>
      </header>
      <!-- Start of Cards Container -->
<div class="cards" >

  <!-- Travel Card -->
<div class="card">
  <div class="header1">
    <div class="card-icon">
      <img src="/icons/route-solid.svg" alt="Travel Icon">
    </div>
    <h4>Travel</h4>
    <p>
      Discover budget-friendly getaways for families and friends! From serene
      mountains to sunny beaches, find your next adventure without breaking the
      bank. Start exploring now!
    </p>
    <a href="travel.html" class="btn" style="color: white;">Explore more</a>
  </div>
</div>

<!-- Hotel Card -->
<div class="card">
  <div class="header1">
    <div class="card-icon">
      <img src="./icons/bed-solid.svg" alt="Hotel Icon">
    </div>
    <h4>Hotel</h4>
    <p>
      We've handpicked top-rated options that offer exceptional value. Book your
      perfect stay today and enjoy premium accommodations without the premium
      price tag!
    </p>
    <a href="hotel.html" class="btn" style="color: white;">See Hotels</a>
  </div>
</div>

<!-- Fly Card -->
<div class="card">
  <div class="header1">
    <div class="card-icon">
      <img src="/icons/plane-departure-solid.svg" alt="Fly Icon">
    </div>
    <h4>Fly</h4>
    <p>
      Fly to your dream destination without breaking the bank! We offer the best
      flight deals, combining comfort and affordability for perfect journey.
      Book now and take off for less!
    </p>
    <a href="fly.html" class="btn" style="color: white;">See Flights</a>
  </div>
</div>

</div>
<style>
    .dark-mode .card{
      background: #0e0e0e;
    }
    .dark-mode .card h4{
      color: #f39c12;
    }
    .dark-mode .card p{
      color: #fff;
    }
</style>
<script>
  document.addEventListener("DOMContentLoaded", function () {
  const cards = document.querySelectorAll(".card");

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add("inview");
      } else {
        entry.target.classList.remove("inview"); // Remove the class when it goes out of view
      }
    });
  }, { threshold: 0.1 }); // Trigger when 10% of the card is visible

  cards.forEach(card => {
    observer.observe(card);
  });
});

</script>
<!-- End of Cards Container -->

<!-- CSS for the buttons (Move this to your CSS file) -->


<!--       <div class="cards" style="height: 384px;">
        <div class="card">
          <div class="header1">
          <div class="card-icon">
            <img src="/icons/route-solid.svg" />
          </div>
          <h4>Travel</h4>
          <p>
            Discover budget-friendly getaways for families and friends! From
            serene mountains to sunny beaches, find your next adventure
            without breaking the bank. Start exploring now!
          </p>
          <button id="btn"><a href="travel.html "> Explore more</a></button></div>
        </div>

        <div class="card">
          <div class="header1">
          <div class="card-icon">
            <img  src="./icons/bed-solid.svg" />
          </div >
          <h4 >Hotel</h4>
          <p>
            We've handpicked top-rated options that offer exceptional value.
            Book your perfect stay today and enjoy premium accommodations
            without the premium price tag!
          </p>
          <button id="btn" style="margin-bottom: 1px;"><a href="hotel.html ">See Hotels</a></button></div>
        </div>

        <div class="card">
          <div class="header1">
          <div class="card-icon">
            <img src="/icons/plane-departure-solid.svg" />
          </div>
          <h4>Fly</h4>
          <p>
            Fly to your dream destination without breaking the bank! We offers
            the best flight deals, combining comfort and affordability for
            perfect journey. Book now and take off for less!
          </p>
          <button id="btn"><a href="fly.html ">See Flights</a></button></div>
        </div>
      </div> -->
    </section>
    <!-- deals -->
    <section id="deals" class="deals-section">
        <h2 style="color: #000000;">Exclusive Deals and Offers</h2>
        <p>Explore our best deals on flights, hotels, and travel packages. Save big on your next adventure!</p>

        <div class="carousel">
          <div class="carousel-inner">
            <!-- Deal 1: Flight Offer -->

            <div class="deal-item">
              <div class="header1">
              <h3>Flight to Dubai</h3>
              <p>Save 20% on round-trip flights to Dubai. Limited time offer!</p>
              <p><strong>Price:</strong> ₹20,000 <span class="discount">₹25,000 </span></p>
            </div>
            <button class="btn-book-now" onclick="window.location.href='book.html'">Book Now</button>
          </div>

            <!-- Deal 2: Hotel Offer -->

            <div class="deal-item" >
              <div class="header1">
              <h3>Luxury Stay in Goa</h3>
              <p>Get 30% off on a 5-star hotel stay in Goa. Enjoy the best of luxury at an affordable price!</p>
              <p><strong>Price:</strong> ₹10,500 <span class="discount"> ₹15,000</span> per night</p>
            </div>
            <button class="btn-book-now" onclick="window.location.href='book.html'">Book Now</button>
          </div>

            <!-- Deal 3: Travel Package -->
            <div class="deal-item">
              <div class="header1">
              <h3>Kerala Backwaters Package</h3>
              <p>Experience the serene beauty of Kerala's backwaters with a 4-day, 3-night package. All-inclusive deal!</p>
              <p><strong>Price:</strong> ₹40,000 <span class="discount">₹50,000</span></p>

            </div>
            <button class="btn-book-now" onclick="window.location.href='book.html'">Book Now</button>
          </div>

            <!-- Deal 4: International Trip -->
            <div class="deal-item">
              <div class="header1">
              <h3>Paris Romantic Getaway</h3>
              <p>Enjoy a romantic trip to Paris with your loved one. Special package for couples!</p>
              <p><strong>Price:</strong> ₹1,20,000 <span class="discount"> ₹1,50,000</span> per couple</p>

            </div>
            <button class="btn-book-now" onclick="window.location.href='book.html'">Book Now</button>
          </div>

            <!-- Deal 5: Adventure Trip -->
            <div class="deal-item">
              <div class="header1">
              <h3>Adventure in Bali</h3>
              <p>Book an adventure trip to Bali with activities like snorkeling, trekking, and more. Discount available for groups!</p>
              <p><strong>Price:</strong> ₹48,000 <span class="discount">₹60,000</span> per person</p>

            </div>
            <button class="btn-book-now" onclick="window.location.href='book.html'">Book Now</button>
          </div>

            <!-- Deal 6: Ski Trip in Switzerland -->
            <div class="deal-item">
              <div class="header1">
              <h3>Ski Trip in Switzerland</h3>
              <p>Hit the slopes with an amazing package for skiing in the Swiss Alps. All equipment included!</p>
              <p><strong>Price:</strong> ₹75,000 <span class="discount">₹90,000</span> per person</p>

            </div>
            <button class="btn-book-now" onclick="window.location.href='book.html'">Book Now</button></div>

            <!-- Deal 7: Wildlife Safari in Kenya -->
            <div class="deal-item">
              <div class="header1">
              <h3>Wildlife Safari in Kenya</h3>
              <p>Experience the thrill of a wildlife safari in Kenya. See the Big Five!</p>
              <p><strong>Price:</strong> ₹1,00,000 <span class="discount">₹1,20,000</span> per person</p>

            </div>
            <button class="btn-book-now" onclick="window.location.href='book.html'">Book Now</button></div>
          </div>
          <button class="carousel-button prev" onclick="moveSlide(-1)">&#10094;</button>
          <button class="carousel-button next" onclick="moveSlide(1)">&#10095;</button>
        </div>
      </section>


        <style>

          /* Updated CSS with Nature-Inspired Colors and Enhanced Hover Effects */
.deals-section {
  text-align: center;
  padding: 3rem 20px;
  background: linear-gradient(135deg, #a4cdf9 0%, #007bff 100%); /* Light aqua gradient background */
  width: 90vw;
  margin: 0 auto;
  color: #2e573e;
  font-family: 'Roboto', sans-serif;
  transition: background-color 0.3s ease-in-out;
}


h2 {
  font-size:xx-large;
  margin-bottom: 1.5rem;
}

p {
  color: #333;
  font-size: 1.1rem;
  margin-bottom: 1.2rem;
}

/* Carousel Styling */
.carousel {
  position: relative;
  overflow: hidden;
  width: 940px;
  max-width: 1000px;
  margin: 0 auto;
  height: 450px;
  display: flex;
  align-items: center;
}

.carousel-inner {
  display: flex;
  transition: transform 0.5s ease;
  gap: 20px;
}

/* Deal Item Styling */
.deal-item {
  min-width: 300px;
  flex: 0 0 300px;
  box-sizing: border-box;
  padding: 25px;
  background: #ffffff; /* Start with a clean white background */
  border: 2px solid transparent;
  background-color: #d3d3d3;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  transform: scale(1);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border 0.4s ease, background-color 0.4s ease;
  cursor: pointer;
}

.deal-item:hover {
  transform: scale(1.1); /* Enlarge on hover */
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3);
  background: #f9f9f9
  /* background: linear-gradient(135deg, #dd36cf 0%, #fdf4fd 100%); /* Nature-inspired gradient (green tones) */
  /* border: 2px solid #662f8b; /* Appear border on hover */
}


.deal-item:hover .discount {
  color: #ff7043; /* Highlight discount with orange when hovered */
}

/* Button Styles */
button {
  background-color: #ba5ae0;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 1.5rem;
  transition: background-color 0.3s ease, transform 0.3s ease, border 0.3s ease;
}

button:hover {
  background-color: #19181a; /* Bright yellow on hover */
  color: #e9e8ea;
  transform: translateY(-3px);
  border: 2px solid #7f6e60;
}

/* Carousel Button Styles */
.carousel-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  border: none;
  padding: 15px;
  border-radius: 50%;
  font-size: 2rem;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}

.carousel-button:hover {
  background-color: #a4caad;
  transform: scale(1.1);
}

/* Animation for Carousel Slide */
@keyframes slideIn {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

.carousel-inner {
  animation: slideIn 0.5s ease-in-out;
}

/* Deal Title and Price Styling */
h3 {
  font-size: 1.8rem;
  color: #ffffff;
  margin-bottom: 0.8rem;
  transition: color 0.4s ease;
}

p {
  transition: color 0.4s ease;
}

.discount {
  text-decoration: line-through;
  color: #6cff43; /* Discount text in a noticeable orange */
}
.btn-book-now {
  position: fixed;
    top: 84%;
    left: 34%;
}

        </style>

        <script>
        let currentSlide = 0;

        function moveSlide(direction) {
          const slides = document.querySelectorAll('.deal-item');
          const totalSlides = slides.length;
          const slidesToShow = 3; // Number of cards to show at once

          // Calculate the new slide index
          currentSlide = (currentSlide + direction + Math.ceil(totalSlides / slidesToShow)) % Math.ceil(totalSlides / slidesToShow);

          // Update the transform to show the correct slides
          const carouselInner = document.querySelector('.carousel-inner');
          carouselInner.style.transform = `translateX(-${currentSlide * (129.5 / slidesToShow)}%)`;

          // Remove highlight class from all cards
          slides.forEach(slide => slide.classList.remove('highlight'));

          // Calculate the index of the center card
          const centerCardIndex = currentSlide * slidesToShow + Math.floor(slidesToShow / 2);
          // Add highlight class to the center card
          if (centerCardIndex < totalSlides) {
            slides[centerCardIndex].classList.add('highlight');
          }
        }

        // Initial highlight
        document.addEventListener('DOMContentLoaded', () => {
          const slides = document.querySelectorAll('.deal-item');
          slides[Math.floor(slides.length / 2)].classList.add('highlight'); // Highlight the initial center card
        });
        </script>

    <!-- travel itineraries -->
    <!-- <section id="itineraries" class="itineraries-section" style="height: 100%;border: 2px solid #FFFFFF;" >
      <h2 id="h1darkbtn">TRAVEL ITINERARIES</h2> 
      
      <p id="darkbtn">
        Plan your trips effortlessly with our curated travel itineraries
        tailored for different types of adventures. Whether you're planning a
        family vacation, a solo adventure, or a romantic getaway, we’ve got
        you covered!
      </p>

      <div class="itinerary-list">

        <div class="itinerary">
          <div class="header1">
          <h3>Family Vacation</h3>
          <p style="font-size: 14px;">
            Explore the best family-friendly destinations with day-by-day
            guides that include must-see attractions and activities for all
            ages.
          </p>
          <a href="./Travel-Itineraries.html"><button>View Itinerary</button></a>
        </div>
      </div>

        <div class="itinerary">
          <div class="header1">
          <h3>Solo Adventure</h3>
          <p style="font-size: 14px;">
            Embark on a solo journey with our handpicked itineraries, offering
            exciting experiences and peaceful retreats just for you.
          </p>
          <a href="./solo-adventure.html"><button>View Itinerary</button></a>
        </div></div>
        <div class="itinerary">
          <div class="header1">
          <h3>Romantic Getaway</h3>
          <p style="font-size: 14px;">
            Plan the perfect romantic escape with itineraries that include
            serene locations, romantic dinners, and memorable experiences.
          </p>
          <a href="./romantic-gateway.html"><button>View Itinerary</button></a>
        </div>
      </div>
      </div>
    </section>
    <style>
      .dark-mode #itineraries h2{
          color: #ffa500;
      }
      .dark-mode #itineraries h3{
          color: #ffa500;
      }
      .dark-mode #itineraries p{
          color: #fff;
      }
      .dark-mode .itinerary{
        background-color: #0e0e0e;
      }
      .dark-mode .itinerary p{
        color: #2c2fdf;
      }
    </style> -->

       <!-- Travel Itineraries Section -->
<section id="itineraries" class="itineraries-section" style="height: 100%; border: 2px solid #FFFFFF; position: relative;">
  <h2 id="h1darkbtn">TRAVEL ITINERARIES</h2>

  <p id="darkbtn">
      Plan your trips effortlessly with our curated travel itineraries tailored for different types of adventures. Whether you're planning a family vacation, a solo adventure, or a romantic getaway, we’ve got you covered!
  </p>

  <div class="itinerary-list" style="height: 1200px;">
      <div class="itinerary" id="itinerary1">
          <div class="header1">
              <h3 style="color: white; font-weight: 900; font-size: large;">Family Vacation</h3>
              <p style="color: black; font-size: 18px; font-weight: 500;">Explore the best family-friendly destinations with day-by-day guides that include must-see attractions and activities for all ages.</p>
              <a href="./Travel-Itineraries.html"><button>View Itinerary</button></a>
          </div>
      </div>

      <div class="itinerary" id="itinerary2">
          <div class="header1">
              <h3 style="color: white; font-weight: 900; font-size: large;">Solo Adventure</h3>
              <p style="color: black; font-size: 18px; font-weight: 500;">Embark on a solo journey with our handpicked itineraries, offering exciting experiences and peaceful retreats just for you.</p>
              <a href="./solo-adventure.html"><button>View Itinerary</button></a>
          </div>
      </div>

      <div class="itinerary" id="itinerary3">
          <div class="header1">
              <h3 style="color: white; font-weight: 900; font-size: large;">Romantic Getaway</h3>
              <p style="color: black; font-size: 18px; font-weight: 500;">Plan the perfect romantic escape with itineraries that include serene locations, romantic dinners, and memorable experiences.</p>
              <a href="./romantic-gateway.html"><button>View Itinerary</button></a>
          </div>
      </div>
  </div>
</section>

<style>
  /* Itineraries Section Styling */
  .itineraries-section {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px;
      color: #ffffff;
  }


  .itineraries-section h2, .itineraries-section p, .itinerary-list {
      position: relative;
      z-index: 2;
  }

  /* Itinerary Styling */
  .itinerary-list {
      display: flex;
      flex-direction: column;
      gap: 20px;
      width: 90%;
      
  }

  .itinerary {
        position: relative;
        width: 100%;
        max-width: 600px;
        padding: 20px;
        border-radius: 8px;
        overflow: hidden;
        text-align: center;
        margin-bottom: 20px;
        
    }

    #itinerary1 {
      background-image: linear-gradient(to right, rgb(35, 34, 34), rgba(238, 230, 230, 0)), url('/img/family-vacation.avif');
        background-size: cover;
        background-position: center;

    }
    #itinerary2 {
      background-image: linear-gradient(to right, rgb(35, 34, 34), rgba(238, 230, 230, 0)), url('/img/solo-travel.jpg');
        background-size: cover;
        background-position: center;
    }
    #itinerary3 {
      background-image: linear-gradient(to right, rgb(35, 34, 34), rgba(238, 230, 230, 0)), url('/img/romantic-travel3.jpg');
        background-size: cover;
        background-position: center;
    }

  .itinerary button {
      background-color: #ffa500;
      border: none;
      color: #fff;
      padding: 10px 15px;
      cursor: pointer;
      border-radius: 5px;
  }

  /* Dark Mode Styling */
  .dark-mode #itineraries h2 {
      color: #ffa500;
  }
  .dark-mode #itineraries h3 {
      color: #ffa500;
  }
  .dark-mode #itineraries p {
      color: #fff;
  }
  .dark-mode .itinerary {
      background-color: #0e0e0e;
  }
  .dark-mode .itinerary p {
      color: #2c2fdf;
  }
</style>

    <!-- Our Services Section -->
    <section class="services" id="services" style="border: 2px solid #FFFFFF;">
      <h2>Our Services</h2>
      <p>Travel smarter with our curated services designed to make your trips effortless and enjoyable.</p>

      <div class="services-container">
        <!-- Service Card: Interactive Travel Map -->
        <div class="service-card">
          <a href="travelmap.html"><div class="icon">
            <i class="fas fa-map-marker-alt"></i>
          </div></a>
         <a href="travelmap.html"> <h3>Travel Map</h3></a>
          <p>Explore popular destinations across India and the world. Click on markers to learn more about each location.
          </p>
        </div>

        <!-- Service Card: Hotel Finder -->
        <div class="service-card">
          <a href="hotel.html"> <div class="icon">
            <i class="fas fa-hotel"></i>
          </div></a>
         <a href="hotel.html"> <h3>Hotel Finder</h3></a>
          <p>Find the best hotels at affordable rates, handpicked to suit your budget and preferences.</p>
        </div>

        <!-- Service Card: Flight Booking -->
        <div class="service-card">
          <a href="fly.html"> <div class="icon">
            <i class="fas fa-plane"></i>
          </div></a>
          <a href="fly.html"><h3>Flight Booking</h3></a>
          <p>Book flights at the best prices, with options tailored to your travel needs.</p>
        </div>

        <!-- Service Card: Travel Blog -->
        <div class="service-card">
          <a href="blog.html">
            <div class="icon">
            <i class="fas fa-pen"></i>
          </div></a>
         <a href="blog.html"><h3>Travel Blog</h3></a>
          <p>Read tips, guides, and personal stories from seasoned travelers.</p>
        </div>

         <!-- Local Guide Connection -->
          <div class="service-card">
            <a href="guide.html"> <div class="icon">
              <i class="fa-solid fa-person"></i>
            </div></a>
            <a href="guide.html"><h3>Local Guide Connection</h3></a>
            <p>Partner with local guides and tour providers, allowing to book personalized tours or experiences led by locals for an authentic travel experience.</p>
          </div>
        </div>

    </section>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
        const itineraries = document.querySelectorAll(".itinerary");
        const serviceCards = document.querySelectorAll(".service-card");

        const observer = new IntersectionObserver((entries) => {
          entries.forEach(entry => {
            if (entry.isIntersecting) {
              entry.target.classList.add("inview");
            } else {
              entry.target.classList.remove("inview"); // Remove class when out of view
            }
          });
        }, { threshold: 0.1 }); // Trigger when 10% of the element is visible

        // Observe both itineraries and service cards
        itineraries.forEach(itinerary => {
          observer.observe(itinerary);
        });

        serviceCards.forEach(card => {
          observer.observe(card);
        });
      });

    </script>
    <!-- Cab or Auto Booking -->
    <img style="position: absolute;height: 450px;left: 1250px;z-index:10;top: 4200px;mix-blend-mode: multiply;" src="img/BOOK-img.avif" alt="image">
    <section id="cab-booking" class="cab-booking-section light-mode" style="border: 2px solid #FFFFFF;">
      <div class="booking-container">
        <h1 style="color: white; font-size: xx-large;">Book a Cab or Auto</h1>
        <form action="/book-cab" method="POST">
          <div class="form-group" style="display: flex; flex-wrap: wrap;">
            <label for="pickup-location" style="font-size: 15px;"><strong>Pickup Location</strong></label>
            <input type="text" id="pickup-location" name="pickup-location" placeholder="Enter pickup location" required />
            <iframe src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d2965.0824050173574!2d-93.63905729999999!3d41.998507000000004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1sWebFilings%2C+University+Boulevard%2C+Ames%2C+IA!5e0!3m2!1sen!2sus!4v1390839289319" width="100%" height="60" frameborder="0" style="border:0"></iframe>
          </div>
          <div class="form-group" style="display: flex; flex-wrap: wrap;">
            <label for="drop-location" style="font-size: 15px;"><strong>Drop Location</strong></label>
            <input type="text" id="drop-location" name="drop-location" placeholder="Enter drop location" required />
            <iframe src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d2965.0824050173574!2d-93.63905729999999!3d41.998507000000004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1sWebFilings%2C+University+Boulevard%2C+Ames%2C+IA!5e0!3m2!1sen!2sus!4v1390839289319" width="100%" height="60" frameborder="0" style="border:0"></iframe>
          </div>

        <form
          action="/book-cab"
          method="POST"
          style="
            margin-left: 40px;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            flex-direction: column;
          "
        >

        <div style="display: flex; align-items: center; margin-bottom: 20px; flex-wrap: wrap;">
          <label style="font-size: 1.5em; margin-right: 35px;" for="vehicle-type">
            <strong>Vehicle Type</strong>
          </label>

          <select
          id="vehicle-type"
          name="vehicle-type"
          style="width: 150px; height: 35px; padding: 5px;"
          required >
            <option value="cab">Cab</option>
            <option value="auto">Auto</option>
            <option value = "Sharing cab">Sharing Cab</option>
            <option value = "Sharing cab">Sharing Auto</option>
            <option value = "Sharing cab">Bike</option>
            <option value = "Sharing cab">Premium Bike</option>
          </select>
        </div>

          <div class="form-group" style="display: flex; flex-wrap: wrap;">
          <label for="travel-date" style="font-size: 15px;"><strong>Travel Date</strong></label>
          <input type="date" id="travel-date" name="travel-date" required min="" />

          <!--Logic To prevent the user from selecting an old date  -->

          <script>
            const today = new Date().toISOString().split('T')[0];
            document.getElementById('travel-date').setAttribute('min', today);
          </script>

        </div>
          <div class="form-group" style="display: flex; flex-wrap: wrap;">
            <label for="travel-time" style="font-size: 15px;"><strong>Travel Time</strong></label>
            <input type="time" id="travel-time" name="travel-time" required />
          </div>


          <!-- <button class="book-btn" type="submit" style="padding: 15px; font-size:20px;background-color: #ba5ae0;color: white;font-size: large;font-weight: bolder;">Book now</button> -->

          <div class="button-container">
          <button class="book2-btn" type="submit">
            Book now
          </button>
        </div>
        </section>

  <style>
    /* Main Section Styling */
.cab-booking-section {
    background-color: #f9f9f9;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Booking Container Styling */
.booking-container {
    width: 80%; /* Increase width of the container */
    max-width: 1200px; /* Limit max width for larger screens */
    margin: 0 auto; /* Center align the container */
    background: linear-gradient(135deg, #5fc0d6, #2193b0); /* Eye-catching gradient */
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    transition: transform 0.3s, box-shadow 0.3s;
}

.booking-container:hover {
    transform: scale(1.02); /* Slight scale effect on hover */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); /* Increase shadow on hover */
}

/* Heading Styles */
.cab-booking-section h2 {
    color: white; /* Match with gradient background */
    text-align: center;
    margin-bottom: 30px;
    transition: color 0.3s;
}

.cab-booking-section h2:hover {
    color: #f1f1f1; /* Slight lightening effect on hover */
}

/* Form Group Styles */
.form-group {
    background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent white background */
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 20px;
    transition: background-color 0.3s;
}

.form-group:hover {
    background-color: rgba(255, 255, 255, 1); /* Fully opaque on hover */
}

/* Label and Input Styles */
label {
    color: #333;
}

input[type="text"],
input[type="date"],
input[type="time"],
select {
    width: 200px;
    padding: 12px;
    border-radius: 5px;
    border: 2px solid #ddd;
    transition: border-color 0.3s, box-shadow 0.3s;
}

input[type="text"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
select:focus {
    border-color: #2193b0;
    box-shadow: 0 0 5px rgba(33, 147, 176, 0.5); /* Match gradient color */
}

/* Button Styling */
.book-btn {
    background: linear-gradient(135deg, #2193b0, #6dd5ed); /* Smooth gradient */
    color: #fff;
    padding: 12px 24px; /* Balanced padding for a better look */
    font-size: 18px; /* Slightly smaller font for a cleaner appearance */
    border: none;
    border-radius: 8px; /* Smoothly rounded corners */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    transition: background 0.3s ease, transform 0.2s ease;
    cursor: pointer; /* Pointer cursor for better interactivity */
    width: fit-content; /* Ensures the button fits the content */
}

.book-btn:hover {
    background: linear-gradient(135deg, #6dd5ed, #2193b0); /* Reverse gradient on hover */
    transform: translateY(-3px); /* Slight lift effect on hover */
}

.book-btn:active {
    transform: translateY(1px); /* Pressed effect for click feedback */
}


    /* Main Section Styling */
.cab-booking-section {
    background-color: #f9f9f9;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Background color for form groups */
.form-group {
    background-color: #e8f4fa; /* Light blue background for each form group */
    border-radius: 5px;
    padding: 15px; /* Padding around the inputs */
    margin-bottom: 20px;
    transition: background-color 0.3s; /* Transition for background color on hover */
}

.form-group:hover {
    background-color: #d1e7f9; /* Darker blue on hover */
}

/* Heading Styles */
.cab-booking-section h2 {
    color: #4a90e2;
    text-align: center;
    margin-bottom: 30px;
    transition: color 0.3s;
}

.cab-booking-section h2:hover {
    color: #007bff; /* Color changes on hover */
}

/* Label Styles */
label {
    display: block;
    color: #333;
    font-size: 15px;
    margin-bottom: 5px;
}

/* Input Styles */
input[type="text"],
input[type="date"],
input[type="time"],
select {
    width: 100%; /* Increased width for text inputs */
    padding: 12px;
    border: 2px solid #ddd;
    border-radius: 5px;
    transition: border-color 0.3s, box-shadow 0.3s;
}

input[type="text"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
select:focus {
    border-color: #4a90e2;
    box-shadow: 0 0 5px rgba(74, 144, 226, 0.5);
}

/* Button Styles */
.book-btn {
    background-color: #4a90e2;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    padding: 15px;
    font-size: 20px;
    transition: background-color 0.3s, transform 0.2s;
}

.book-btn:hover {
    background-color: #007bff; /* Button color on hover */
    transform: scale(1.05); /* Slight zoom effect */
}

/* Responsive Iframe Styles */
iframe {
    border: none;
    border-radius: 5px;
    margin-top: 10px;
    transition: transform 0.3s;
}

iframe:hover {
    transform: scale(1.02); /* Slight zoom effect on iframe */
}

/* Flex Container for Vehicle Type */
.form-group {
    display: flex;
    align-items: center;
}

/* Vehicle Type Dropdown Styling */
select {
    margin-left: 10px;
}

  </style>


    <!-- recommendations -->
    <section id="recommendations" class="recommendations-section" style="margin-top: 20px;">
      <h2 id="h1darkbtn">Personalized Recommendations</h2>
      <p style="font-size: 20px;"> 
        We’ve picked these destinations, hotels, and activities just for you,
        based on your preferences.
      </p>

      <div class="recommendation-list">
        <!-- Example Recommendation -->
        <div class="recommendation-item">
          <div class="header1">
          <h3 id="h1darkbtn">Beach Resort in Goa</h3>
          <p style="color : gray ;">
            Based on your love for sunny destinations, we recommend this
            beachfront resort in Goa for a perfect getaway.
          </p>
          <button onclick="window.location.href='goa-resort.html'">
            Explore More
          </button>
        </div></div>

        <div class="recommendation-item">
          <div class="header2">
          <h3 id="h1darkbtn">Cultural Tour in Rajasthan</h3>
          <p style="color : gray ;">
            Explore the rich cultural heritage of Rajasthan. This tour is
            highly recommended based on your interest in historical places.
          </p>
          <button onclick="window.location.href='rajasthan.html'">
            Explore More
          </button>
        </div></div>

        <div class="recommendation-item">
          <div class="header1">
          <h3 id="h1darkbtn">Adventure Trek in Himachal</h3>
          <p style="color : gray ;">
            For the adventure lover in you, we recommend a thrilling trek in
            the mountains of Himachal Pradesh.
          </p>
          <button onclick="window.location.href='himachal.html'">
            Explore More
          </button>
        </div></div>
      </div>
    </section>

  <!-- Packing Checklist Section -->
<section id="packing-checklist" class="packing-checklist-section">
  <h2>Packing Checklist</h2>
  <p>🌍 Choose your travel style to receive a personalized packing checklist ✈️, curated from seasoned travelers 🧳!</p>
  <div class="checklist-form">
    <label for="travel-type">Choose your travel type:</label>
    <select id="travel-type">
      <option value="beach">Beach</option>
      <option value="adventure">Adventure</option>
      <option value="business">Business</option>
    </select>
    <button onclick="generateChecklist()">Download Checklist</button>
  </div>
</section>
<style>
  /* Packing Checklist Section CSS */
.packing-checklist-section {
  background: linear-gradient(135deg, #e6f7ff, #ccf2ff); 
  padding: 40px 20px; 
  margin: 20px auto;
  text-align: center;
  border-radius: 12px;
  width: 90%;
  max-width: 600px;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); 
  color: #333;
}

.packing-checklist-section h2 {
  font-size: 28px;
  color: #004085;
  margin-bottom: 10px;
}

.packing-checklist-section p {
  font-size: 16px;
  color: #555;
  margin-bottom: 20px;
}

.checklist-form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#travel-type {
  padding: 10px;
  margin: 10px 0;
  border-radius: 8px;
  border: 1px solid #bbb;
  font-size: 16px;
}

.checklist-form button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s;
  font-size: 16px;
  margin-top: 10px;
}

.checklist-form button:hover {
  background-color: #0056b3;
}


</style>
<!-- Packing Checklist Section Script-->
<script>
  function generateChecklist() {
  const travelType = document.getElementById("travel-type").value;
  let checklistContent = "";

  if (travelType === "beach") {
    checklistContent = `
      Beach Packing Checklist:
      - Swimsuit
      - Sunscreen
      - Sunglasses
      - Flip-flops
      - Beach towel
      - Water bottle
      - Hat
      - Snacks
    `;
  } else if (travelType === "adventure") {
    checklistContent = `
      Adventure Packing Checklist:
      - Hiking boots
      - Weather-resistant jacket
      - First aid kit
      - Flashlight
      - Compass or GPS
      - Energy bars
      - Water bottle
      - Map
    `;
  } else if (travelType === "business") {
    checklistContent = `
      Business Packing Checklist:
      - Formal wear
      - Laptop and charger
      - Notepad and pen
      - Business cards
      - Toiletries
      - Work documents
      - Phone and charger
      - Comfortable shoes
    `;
  }

  // Create a downloadable text file
  const blob = new Blob([checklistContent], { type: "text/plain" });
  const url = URL.createObjectURL(blob);
  const link = document.createElement("a");
  link.href = url;
  link.download = `${travelType}_packing_checklist.txt`;
  link.click();
  URL.revokeObjectURL(url);
}

</script>


    <style>
      /* Recommendations Section Styling */
#recommendations {
  background: linear-gradient(135deg, #9aecff 0%, #3b302d 100%);/* Light background for eye comfort */
  padding: 40px; /* Increased padding for more spacing */
  border-radius: 10px;
  max-width: 1200px;
  margin: 0 auto;
}

#recommendations h2 {
  text-align: center;
  color: #2c2b2b;
  font-size: 4rem;
  margin-bottom: 30px; /* Increased margin for better spacing */
}

/* Recommendations List */
.recommendation-list {
  display: flex;
  justify-content: space-between;
  gap: 30px; /* Increased gap for larger cards */
  flex-wrap: wrap;
}

/* Recommendation Item with Gradient Background and Increased Size */
.recommendation-item {
  background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%); /* Gradient 1 */
  border-radius: 12px; /* Slightly rounded corners */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); /* Deeper shadow */
  padding: 25px; /* Increased padding */
  flex: 1 1 calc(33.333% - 30px); /* Adjust size to fit more content */
  transition: transform 0.4s ease, box-shadow 0.4s ease; /* Slower hover effect */
  cursor: pointer;
  height: 320px; /* Fixed height for consistency */
}

.recommendation-item:nth-child(2) {
  background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%); /* Gradient 2 */
}

.recommendation-item:nth-child(3) {
  background: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%); /* Gradient 3 */
}

/* Hover Effects: Larger scale and deeper shadow */
.recommendation-item:hover {
  transform: scale(1.08); /* Larger scaling effect */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* More prominent shadow */
}

.recommendation-item h3 {
  color: #1e293b; /* Darker text for readability */
  font-size: 2.5rem; /* Slightly larger text */
  margin-bottom: 15px;
}

.recommendation-item p {
  color: #555555;
  font-size: 1.5rem;
  margin-bottom: 20px;
}

/* Buttons Styling */
.recommendation-item button {
  background-color: #3b82f6;
  color: white;
  padding: 12px 25px; /* Increased button size */
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
  font-size: 1.5rem;
}

.recommendation-item button:hover {
  background-color: #1e40af; /* Darker button on hover */
  transform: translateY(-5px); /* Slight lift effect */
}

/* Section Responsiveness */
@media (max-width: 768px) {
  .recommendation-list {
    flex-direction: column;
  }

  .recommendation-item {
    margin-bottom: 20px;
    height: auto; /* Allow height to adjust */
  }
}

    </style>


    <!--Emergency-->
    <section class="service" id="services">
    <div class="sos-container">
      <h2>Emergency SOS</h2>
      <p id="emergency-text" style="color: whitesmoke;">In case of an emergency, press the button to send your current location to your emergency contacts.</p>
      <button id="sosButton" onclick="sendSOS()">Send SOS</button>
      <div id="sos-status"></div>
    </div>
    </section>

    <style>
.sos-container h2{
  color: white;
  font-size: 3.0rem;
  text-decoration:underline;
}
      /* General Section Styling */
.service {
    padding: 40px;
    background-color: #1a2a3a; /* Eye-comfort background color */
    color: #f1f1f1; /* Text color for readability */
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s ease;
    border: 10px solid white;
}

.service:hover {
    background-color: #2b3b4c; /* Slightly darker on hover */
}

/* SOS Button Styling */
#sosButton {
  width: 150px;
  height: 60px;
    margin-top: 40px;
    background-color: #ff5555;
    color: #fff;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 1.1em;
    font-weight: bolder;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

#sosButton:hover {
    background-color: #ff3333;
    transform: scale(1.05); /* Slight scaling effect on hover */
}

#sosButton:active {
    background-color: #ff1111;
    transform: scale(0.98); /* Pressed button effect */
}

/* SOS Status and Emergency Text Styling */
#emergency-text {
    margin-top: 40px;
    font-size: 1em;
    margin-bottom: 16px;
}

#sos-status {
    margin-top: 20px;
    font-size: 1em;
    font-weight: bold;
    color: #eef2f5; /* Color to signify emergency status */
}

/* sos-container for additional styling */
.sos-container {
    max-width: 500px;
    margin: 0 auto;
}

    </style>


    <!--posts section-->
    <div id="posts">
      <header class="posts_blog">
        <h1>POSTS AND VLOGS</h1>
      </header>

      <main class="main_blogs">
        <section id="upload">
          <h2>Upload Content</h2>
          <form id="upload-form">
            <input type="file" id="file-input">
            <button id="submit" type="submit">Upload</button>
          </form>
        </section>

        <section id="content">
          <h2>Content</h2>
          <textarea id="content-input"></textarea>
          <ul id="content-list"></ul>
        </section>
      </main>
    </div>

    <style>
      body.dark-mode #emergency-text {
        color: white;

      #emergency-text {
        color: black;
}
}
    </style>

    <style>


       /* Container for the posts and vlogs section */
#posts {
  max-width: 1200px;
  margin: 50px auto;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
}

#content-input {
  height: 200px;
  border-color: #81c784;
  padding: 10px;
  width: 100%; /* Ensure full width inside the container */
  border-radius: 8px;
  outline: none;
  resize: vertical;
}

/* Header styling */
header.posts_blog {
  background-color: #4caf50;
  padding: 20px;
  text-align: center;
  border-radius: 12px 12px 0 0;
}

header.posts_blog h1 {
  color: #fff;
  font-size: 2.5rem;
  margin: 0;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Main section styling */
main.main_blogs {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  gap: 30px; /* Adds space between the two sections */
  align-items: flex-start;
  flex-wrap: wrap; /* Allows wrapping on smaller screens */
}

/* Upload Section */
#upload {
  width: 45%; /* Adjusted width to fit next to content */
  background-color: #e8f5e9;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  height: 320px;
  align-items: center;
  margin: 0; /* Removed extra margin */
}

#upload h2 {
  font-size: 1.8rem;
  color: #4caf50;
  margin-bottom: 15px;
}

#upload-form {
  display: flex;
  flex-direction: column;
  align-items: center;

}

#file-input {
  border: 2px dashed #4caf50;
  background-color: #f1f8e9;
  color: #4caf50;
  font-size: 1rem;
  cursor: pointer;
  text-align: center;
  padding: 15px;
  height: fit-content;
  margin-bottom: 20px;
  transition: border-color 0.3s, background-color 0.3s;
}

/* Hover, Focus, Active state for file input */
#file-input:hover {
  border-color: #81c784;
  background-color: #e8f5e9;
}

#file-input:focus {
  outline: none;
  border-color: #66bb6a;
  background-color: #c8e6c9;
}

#file-input:active,
#file-input:focus-visible {
  border-color: #388e3c;
  background-color: #a5d6a7;
}

/* File input button styling */
#file-input::file-selector-button {
  color: #fff;
  background-color: #4caf50;
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

#file-input::file-selector-button:hover {
  background-color: #66bb6a;
}

#submit {
  background-color: #876bb1;
  margin: 20px;
}

#submit:hover {
  background-color: #744caf;
}

#upload-form button {
  color: #fff;
  padding: 10px;
  border: 1px solid #4caf50; /* Adds border */
  cursor: pointer;
  font-size: 1.2rem;
  transition: background-color 0.3s;
}

#upload-form button:hover {
  background-color: #c081c7;
}

/* Content Section */
#content {
  width: 50%; /* Adjusted width to fit next to upload */
  background-color: #f9fbe7;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

#content h2 {
  font-size: 1.8rem;
  color: #4caf50;
  margin-bottom: 15px;
}

#content-list {
  list-style-type: none;
  padding: 0;
}

#content-list li {
  background-color: #e8f5e9;
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 8px;
  transition: background-color 0.3s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

#content-list li:hover {
  background-color: #c8e6c9;
}

/* Media query for responsiveness */
@media (max-width: 768px) {
  main.main_blogs {
    flex-direction: column; /* Stack upload and content vertically */
  }

  #upload, #content {
    width: 100%; /* Full width on small screens */
    margin-bottom: 20px;
  }
}


    </style>
    <script src="script.js"></script>
    <!--forum Section-->
    <header class="forum_1">
      <h1 id="h1darkbtn">Travel Discussion Forum</h1>
      <nav class="hi">
          <ul>
              <li class="NAVI">
                <!-- added favicon for destinations -->
                <i class="fa-solid fa-location-dot"></i>
                <a href="destinationform.html">Destinations</a>
              </li>
              <li class="NAVI">
                <!-- added favicon for travel planning -->
                <i class="fa-solid fa-earth-americas"></i>
                <a href="traveldisscussionform.html">Travel Planning</a>
              </li>
              <li class="NAVI">
                <!-- added favicon for travel experience -->
                <i class="fa-regular fa-face-smile"></i>
                <a href="experience.html">Travel Experiences</a>
              </li>
              <li class="NAVI">
                <i class="fa-solid fa-gear"></i>
                <!-- added favicon for travel gear -->
                <a href="gear.html">Travel Gear</a>
              </li>
              <li class="NAVI">
                <!-- added favicon for travel safety -->
                <i class="fa-solid fa-shield"></i>
                <a href="travelsafety.html">Travel Safety</a>
              </li>
              <li class="NAVI">
                <!-- added favicon for sustainable travel -->
                <i class="fa-solid fa-seedling"></i>
                <a href="sustainabeltravel.html">Sustainable Travel</a>
              </li>
          </ul>
      </nav>
  </header>
  <style>
          /* General Styles */
      body {
          margin: 0;
          font-family: 'Arial', sans-serif;
          background-color: #f4f4f9;
      }

      /* Header Border */
header.forum_1 {

    border:  10px solid transparent; /* Initial transparent border */
    border-image:  linear-gradient(to right,#44dfa6 , #a08be6); /* Gradient border */
    border-image-slice:  1; /* Ensures the full gradient is applied */
    border-radius:  10px; /* Rounded corners for smooth appearance */
    transition:  border-color 0.3s ease; /* Smooth transition for hover effect */

}

header.forum_1:hover {
    border-color: #ffcc00; /* Changes border color on hover */
}

/* Navigation Item Borders */
nav.hi ul li.NAVI a {
    border: 2px solid transparent; /* Transparent border initially */
    border-radius: 5px; /* Rounded corners */
    transition: border 0.3s ease, background-color 0.3s ease;
}
/*  not needed as styling for nav,li,a is handled at lower */
/* nav.hi ul li.NAVI a:hover {
    border-color: #ffcc00;
    background-color: #ffffff;
    color: #1e88e5;
} */

/* Added styling for favicon */
nav.hi ul li.NAVI i:hover  {
    color: #ffcc00; /* color change on hover */
    transform: scale(1.2); /* scale up on hover */
}

      /* Header Section */
      header.forum_1 {
          background-color: #1e88e5; /* Primary color for the header */
          color: white;
          padding: 10px 20px; /* Minimal padding for compact height */
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex-wrap: wrap;
          min-height: 50px; /* Minimum height of the header bar */
          overflow: hidden;
      }

      h1#h1darkbtn {
        color: white;
        font-size:xx-large;
          margin: 0;
          letter-spacing: 1.2px;
          transition: color 0.3s ease;
      }

      h1#h1darkbtn:hover {
          color: #ffcc00; /* Changes the color when hovered */
      }
      p#darkbtn {
        font-size: large;
      }

      /* Navigation Styles */
      nav.hi ul {
          list-style-type: None;
          margin: 0;
          padding: 0;
          display: flex;
          gap: 0px;
      }

      nav.hi ul li.NAVI {
          position: relative;
      }

      nav.hi ul li.NAVI a {
          color: rgb(162, 37, 37);
          text-decoration: none;
          font-size: 14px; /* Reduced font size for a more compact design */
          padding-right: 5px;
          padding: 8px 12px; /* Reduced padding to fit minimal height */
          transition: color 0.3s, background-color 0.3s ease;
          border-radius: 5px; /* Slight rounding for a modern look */
      }

      nav.hi ul li.NAVI a:hover {
          background-color: #ffcc00; /* Background highlight on hover */
          color: #1e88e5; /* Text color change on hover */
      }

      nav.hi ul li.NAVI a:hover::after {
          width: 100%;
      }

      /* Responsive Design */
      /* @media (max-width: 768px) {
          header.forum_1 {
              flex-direction: column;
              align-items: flex-start;
          }

          nav.hi ul {
              flex-direction: column;
              width: 100%;
              gap: 10px;
          }

          nav.hi ul li.NAVI a {
              display: block;
              width: 100%;
              text-align: center;
          }
      } */


  </style>

  <main>
    <style>
      /* Main container styling */
      #destinations {
          display: flex;
          flex-direction: row; /* Side-by-side layout for the form and image */
          justify-content: space-between;
          align-items: center;
          max-width: 1000px; /* Expanded width */
          margin: 0 auto;
          padding: 40px;
          background-color: #ffffff; /* Set background color to white */
          border-radius: 10px;
          box-shadow: 0 4px 15px rgba(0, 0, 0.1, 0.2);
      }

      /* Form container */
      .post-container {
          width: 60%; /* Adjusted width */
          background-color: #ffffff; /* White background for the form container */
          padding: 30px;
          border-radius: 8px;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
          transition: transform 0.3s ease;
      }

      /* Form structure */
      #postForm {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 100%;
      }

      /* Text area styling */
      #postContent {
          width: 90%;
          min-height: 120px;
          margin-bottom: 15px;
          padding: 15px;
          border: 2px solid #c5def8;
          border-radius: 6px;
          font-size: 18px;
          background-color: #b4d7fc;
          transition: box-shadow 0.3s ease, border-color 0.3s ease;
      }

      #postContent:focus {
          border-color: #007bff;
          box-shadow: 0 0 8px rgba(0, 123, 255, 0.4);
          outline: none;
          background-color: #fff;
      }

      /* Button styling */
      button[type="submit"] {
          padding: 12px 25px;
          background-color: #007bff;
          color: white;
          border: none;
          border-radius: 6px;
          font-size: 16px;
          cursor: pointer;
          transition: background-color 0.3s ease, transform 0.2s ease;
      }

      button[type="submit"]:hover {
          background-color: #0056b3;
          transform: scale(1.05);
      }

      /* Hover effect on the post container */
      .post-container:hover {
          transform: translateY(-5px);
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
      }

      /* Right image container */
      .destination-image-container {
          width: 35%; /* Adjust the size of the image container */
          height: 320px;
          border-radius: 10px;
          overflow: hidden; /* Ensures the image fits inside the container */

      }

      /* Image styling to cover the container */
      .destination-image {
          width: 100%;
          height: 100%;
          object-fit: cover; /* Ensures the image fills the container while maintaining aspect ratio */
      }

      /* Responsive layout for smaller screens */
      @media (max-width: 768px) {
          #destinations {
              flex-direction: column; /* Stacks the form and image vertically on small screens */
          }

          .destination-image-container {
              width: 90%; /* Full width image for small screens */
              margin-top: 20px;
          }
      }
  </style>
  <h1 style="padding-left:40%;color: rgba(255, 255, 248, 0.953);padding-top:8px ; margin: 5px 0 2px;">Destination Guide</h1>
  <section id="destinations">

      <div class="post-container">

          <h3>Share Your Experiences</h3>
          <form id="postForm">
              <textarea id="postContent" placeholder="Write your post here..." required></textarea>
              <button type="submit">Submit</button>
          </form>
      </div>
      <style>

    .post-container {
    background: linear-gradient(135deg, #f0cac0, #c7dcf7); /* Gradient background */

    border-radius: 8px;
    color: white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);

}


        </style>

      <!-- Right image of a destination inside a container -->
      <div class="destination-image-container">
          <img src="https://img.freepik.com/free-vector/tour-vacation-guide-concept-tourists-listening-history-city-attractions-tour-entertainment-idea-traveling-learning-isolated-vector-illustration_613284-3036.jpg?semt=ais_hybrid" alt="Destination Image" class="destination-image">
      </div>
  </section>


      <!-- Add more sections for other categories -->
  </main>

    <!-- Map Section -->
    <section class="services" id="services" style="border: 2px solid #FFFFFF; margin-top:5%">
    <section class="map-section" id="explore">
      <h2>Explore Popular Destinations</h2>
      <p style="color: whitesmoke;">Click on the markers to learn more about each destination.</p>
      <div id="map"></div>
    </section>
    </section>
    <!-- Google Maps JavaScript API -->
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCYcdQdpiSF7BjZl6JF_pyucrblrUCZMxc&loading=async&callback=initMap"
      async defer></script>

    <!-- CONTACT US-->
    <style>
      .contact-section .container {
          max-width: 1200px;
          margin: 0 auto;
          padding: 20px;
      }
</style>
        <section class="contact-section">
            <div class="container">
                <h2 class="section-title">Get in Touch with BuddyTrail</h2>
                <div class="contact-grid">
                    <div class="contact-info">
                        <div class="info-item">
                            <div class="info-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M9 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"></path>
                                    <path d="M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0z"></path>
                                </svg>
                            </div>
                            <div class="info-content">
                                <h3>Our Address</h3>
                                <p>123 Trailblazer Lane, Adventure City</p>
                            </div>
                        </div>
                        <div class="info-item">
                            <div class="info-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2"></path>
                                    <path d="M15 7a2 2 0 0 1 2 2"></path>
                                    <path d="M15 3a6 6 0 0 1 6 6"></path>
                                </svg>
                            </div>
                            <div class="info-content">
                                <h3>Contact</h3>
                                <p>Mobile: +91 921 456-7890</p>
                                <p>Mail: buddyTrail@gmail.com</p>
                            </div>
                        </div>
                        <div class="info-item">
                            <div class="info-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path>
                                    <path d="M12 7v5l3 3"></path>
                                </svg>
                            </div>
                            <div class="info-content">
                                <h3>Working Hours</h3>
                                <p>Monday - Friday: 08:00 - 17:00</p>
                                <p>Saturday & Sunday: 08:00 - 12:00</p>
                            </div>
                        </div>
                        <div class="about-buddytrail">
                            <h3>About BuddyTrail</h3>
                            <p>At BuddyTrail, we're passionate about connecting adventurers and making every trail an unforgettable experience. Our platform is designed to help you discover new paths, meet like-minded explorers, and create lasting memories in the great outdoors.</p>
                        </div>
                    </div>
                    <div class="contact-form">
                        <h3>Send Us a Message</h3>
                        <form id="contactForm">
                            <div class="form-group">
                              <i class="fas fa-user"></i>
                              <input type="text" id="name" class="form-control" placeholder="Your Name" required pattern="[a-zA-Z ]+"
                                oninvalid="this.setCustomValidity('Numbers and Symbols are not allowed')"
                                oninput="this.setCustomValidity('')">
                            </div>
                            <div class="form-group">
                              <i class="fas fa-envelope"></i>
                              <input type="email" id="email" class="form-control" placeholder="      Your Email" required>

                            </div>
                            <div class="form-group">
                              <i class="fas fa-message"></i>
                                <textarea id="message" class="form-control" rows="4" placeholder="Your Message" required></textarea>
                            </div>
                            <button class="book-btn" type="submit">Send Message</button>
                        </form>
                    </div>
                </div>
            </div>
        </section>
        <style>


/* General Section Styles */
.contact-section {
    background-color: #f9f9f9;
    padding: 50px 0;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.section-title {
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    color: #333;
    margin-bottom: 40px;
}

/* Grid Layout for Contact Info and Form */
.contact-grid {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.contact-info, .contact-form {
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    width: 48%;
}

.contact-form {
    width: 48%;
}

/* Contact Info Item */
.info-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.info-icon {
    width: 40px;
    height: 40px;
    margin-right: 20px;
    color: #1a73e8;
}

.info-content h3 {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.info-content p {
    font-size: 16px;
    color: #666;
    margin: 0;
}

/* About BuddyTrail */
.about-buddytrail {
    margin-top: 30px;
}

.about-buddytrail h3 {
    font-size: 20px;
    font-weight: bold;
    color: #ffffff;
}

.about-buddytrail p {
    font-size: 16px;
    color: #fefefe;
}

/* Contact Form */
.contact-form h3 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #333;
}

.dark-mode .contact-section{
  background: #666;
}

.dark-mode .contact-form h3{
  color: #ffa500;
}

.dark-mode .info-content h3{
  color: #ffa500;
}

.dark-mode .info-content p{
  color: #fff;
}

.dark-mode .contact-form{
  background-color: #0e0e0e;
}

.dark-mode .contact-info{
  background-color: #0e0e0e;
}

.form-group {
    margin-bottom: 20px;
}

.form-control {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    color: #000000;
    border: 2px solid rgb(187, 124, 202);
    border-radius: 5px;
    background-color: #f9f9f9;
    outline: none;
}

.form-control:focus {
    border-color: #1a73e8;
}

textarea.form-control {
    resize: none;
}

.btn-submit {
    background-color: #1a73e8;
    color: #fff;
    font-weight: bold;
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.btn-submit:hover {
    background-color: #155ab7;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .contact-grid {
        flex-direction: column;
    }

    .contact-info, .contact-form {
        width: 100%;
        margin-bottom: 30px;
    }
}


        </style>

      <!-- Add this custom popup HTML -->
      <div id="confirmationPopup" class="popup" style="display: none;">
        <div class="popup-content">
          <h2>Thank You!</h2>
          <p>Your message has been sent successfully. We will get back to you soon.</p>
          <button onclick="closePopup()">Close</button>
        </div>
      </div>
    </section>

    <!-- Add this custom popup HTML -->
    <div id="confirmationPopup" class="popup" style="display: none;">
      <div class="popup-content">
        <h2>Thank You!</h2>
        <p>Your message has been sent successfully. We will get back to you soon.</p>
        <button onclick="closePopup()">Close</button>
      </div>
    </div>
  </main>

  <section id="testimonials" class="testimonials-section">
    <h2 class="testimonials-heading"  >Testimonials</h2>

    <div class="testimonials-container">
      <div class="header1 test">
      <figure class="snip1533">
        <figcaption>
          <blockquote>
            <p>It made solo travel a breeze! I met amazing companions and discovered hidden gems.</p>
          </blockquote>
          <h3>Wisteria Ravenclaw</h3>
          <h4>Traveller</h4>
        </figcaption>
      </figure>
      </div>
      <div class="header2 test">
      <figure class="snip1533">

        <figcaption>
          <blockquote>
            <p>Finding the perfect travel group was so easy with Buddy Trail. Unforgettable trips, hassle-free planning!
            </p>
          </blockquote>
          <h3>Ursula Gurnmeister</h3>
          <h4>Traveller</h4>
        </figcaption>
      </figure>
    </div>
    <div class="header1 test">
      <figure class="snip1533">

        <figcaption>
          <blockquote>
            <p>I found great travel buddies for my Europe trip! The platform is intuitive and made my adventure even
              better. </p>
          </blockquote>
          <h3>Ingredia Nutrisha</h3>
          <h4>Traveller</h4>
        </figcaption>
      </figure></div>
    </div>
  </section>

 <style>

.testimonials-heading {
    font-size: 3.8rem;
    margin-bottom: 40px;
    color: rgba(251, 253, 255, 0.95);
    font-weight: bold;
}

/* Testimonials Container */
.testimonials-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

/* Card Styling */
.snip1533 {
    background-color: #ffffff;
    border-radius: 10%;
    padding: 25px;
    max-width: 320px;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    perspective: 1000px;
   
    position: relative;
}

/* 3D Rotation and Shadow Effects */
.snip1533:hover {
 
    transform: scale(1.05) rotateX(5deg) rotateY(5deg);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    background: linear-gradient(135deg, #e0f7fa, #80deea);
}

/* Inner Shadow and Text Effect */
.snip1533::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.4);
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    transition: opacity 0.3s ease;
    opacity: 0;
}

.snip1533:hover::before {
    opacity: 1;
}

/* Text Styling */
.snip1533 blockquote p {
    font-size: 1.1rem;
    color: #34495e;
    line-height: 1.6;
    font-style: italic;
}

.snip1533 h3 {
    font-size: 1.2em;
    margin-top: 20px;
    color: #00a894;
    font-weight: bold;
}

.snip1533 h4 {
    font-size: 1rem;
    color: #34495e;
}

/* Hover Text Color Effect */
.snip1533:hover h3 {
    color: #7a15be;
}

.snip1533:hover h4 {
    color: #004d40;
}

/* Glowing Border Animation */
.snip1533:hover {
    border: 2px solid rgba(0, 150, 136, 0.2);
    box-shadow: 0 0 15px rgba(0, 150, 136, 0.4), 0 0 25px rgba(0, 150, 136, 0.2);
}

 </style>


  <section id="reviews" class="reviews-section">
    <div class="review">
      <div class="review-form">
        <h2 style="color: #0057B3;" id="h1darkbtn">Rate your experience</h2>
        <p class="review-p">
          Read what others have to say about their experiences with various
          destinations, hotels, flights, and activities. Share your own reviews
          and help fellow travelers make informed decisions.
        </p>

        <div style="display: flex;">
          <form class="form" id="reviewForm">
            <label for="name" id="darkbtn" >Your Name:</label>
            <input type="text" id="name" name="name" required pattern="[a-zA-Z ]+"
            placeholder="Enter your name"
            oninvalid="this.setCustomValidity('Numbers and Symbols are not allowed')"
            oninput="this.setCustomValidity('')"/>

            <label for="destination" id="darkbtn">Destination/Service:</label>
            <input type="text" id="destination" name="destination" required  required pattern="[a-zA-Z ]+"
            placeholder="Enter your destination or service"
            oninvalid="this.setCustomValidity('Numbers and Symbols are not allowed')"
            oninput="this.setCustomValidity('')"/>

            <label for="rating" id="darkbtn">Rating:</label>
           <!-- <select id="rating" class="rating" name="rating">
              <option value="5">⭐⭐⭐⭐⭐</option>
              <option value="4">⭐⭐⭐⭐</option>
              <option value="3">⭐⭐⭐</option>
              <option value="2">⭐⭐</option>
              <option value="1">⭐</option>
            </select>-->

            <div class="rating" name="rating">
              <!--<h3 style="font-weight: bold; font-size: 15px; text-align: left;">Your rating:</h3>  -->
              <div class="star-widget">
               <input type="radio" name="rate" id="rate-5">
               <label for="rate-5"  class="fas fa-star"></label>
               <input type="radio" name="rate" id="rate-4">
               <label for="rate-4" class="fas fa-star"></label>
               <input type="radio" name="rate" id="rate-3">
               <label for="rate-3" class="fas fa-star"></label>
               <input type="radio" name="rate" id="rate-2">
               <label for="rate-2" class="fas fa-star"></label>
               <input type="radio" name="rate" id="rate-1">
               <label for="rate-1" class="fas fa-star"></label>
               <header></header>
            </div>
           </div>

            <label for="review" id="darkbtn" >Your Review:</label>
            <textarea id="review" name="review" rows="3" placeholder="Write your review here..."></textarea>
            <label for="complaint" id="darkbtn" >Complaint (if any):</label>
            <textarea id="complaint" name="complaint" rows="3"
              placeholder="Describe any issue with the staff here. Please provide details"></textarea>

            <div class="form-button">
              <button type="submit" onclick="submitFeedback(event)">Send</button>
            </div>
          </form>

          <!-- Thank You Message -->
          <div id="thankYouMessage" style="display: none; margin-top: 20px;">
            <p>Thank you! We use CustomerSure to collect and manage all your feedback because we are absolutely
              committed to making you a happy customer. We will read your feedback, and we'll take it seriously.</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <script>
  async function submitFeedback(event) {
  event.preventDefault();
  const form = document.getElementById('reviewForm');
  
  // Collecting form data
  const Name = form.elements['name'].value;
  const Destination = form.elements['destination'].value;
  const Rating = form.querySelector('input[name="rate"]:checked')?.id.split('-')[1];
  const Review = form.elements['review'].value;
  const Complaint = form.elements['complaint'].value;

  // Creating the payload
  const feedbackData = {
    Name,
    Destination,
    Rating,
    Review,
    Complaint,
  };

  try {
    const response = await fetch('http://localhost:5000/api/contact/feedback', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(feedbackData),
    });

    const result = await response.json();
    if (response.ok) {
      alert('Feedback submitted successfully');
    } else {
      alert(`Error: ${result.message}`);
    }
  } catch (error) {
    console.error('Error submitting feedback:', error);
    alert('An error occurred while submitting feedback.');
  }
}

  </script>


  <!--Cookie pop up-->
  <div id="cookie-popup" class="cookie-container">
    <p id="cookie-title">We value your privacy</p>
    <p class="cookie-description">
        We use cookies to enhance your browsing experience, serve personalized ads or content, and analyze our traffic.
        By clicking "Accept", you consent to our use of cookies.
        <a href="cookie_policy.html">Cookie Policy</a>
    </p>
    <div class="button-container">
        <button id="customize-btn">Customize</button>
        <button id="reject-btn">Reject</button>
        <button id="accept-btn">Accept</button>
    </div>
</div>

<script>document.addEventListener("DOMContentLoaded", function () {
    const cookiePopup = document.getElementById("cookie-popup");
    const acceptBtn = document.getElementById("accept-btn");
    const rejectBtn = document.getElementById("reject-btn");
    const customizeBtn = document.getElementById("customize-btn");

    // Function to get the value of a cookie
    function getCookie(name) {
        const value = `; ${document.cookie}`;
        const parts = value.split(`; ${name}=`);
        if (parts.length === 2) return parts.pop().split(';').shift();
        return null;
    }

    // Function to set a cookie
    function setCookie(name, value, days) {
        const date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); // Convert days to milliseconds
        const expires = "expires=" + date.toUTCString();
        document.cookie = `${name}=${value}; ${expires}; path=/`;
    }

    // Check if the user consent cookie exists
    if (!getCookie("userConsent")) {
        cookiePopup.style.display = "block"; // Show popup if no cookie is found
    }

    // Set the cookie and hide the popup when "Accept All" button is clicked
    acceptBtn.addEventListener("click", function () {
        setCookie("userConsent", "accepted", 365); // Set cookie to last 1 year
        cookiePopup.style.display = "none"; // Hide popup after accepting
    });

    // Set the cookie and hide the popup when "Reject All" button is clicked
    rejectBtn.addEventListener("click", function () {
        setCookie("userConsent", "rejected", 365); // Set cookie to last 1 year
        cookiePopup.style.display = "none"; // Hide popup after rejecting
    });

    // Handle Customize button (this can be expanded with further functionality)
    customizeBtn.addEventListener("click", function () {
        alert("Customization options can be added here.");
    });
});
</script>


  <!-- Chatbot icon -->


  <!-- Chatbot container -->
  <div id="chatbot">
      <div id="chat-header">
          <span>TrailBot</span>
          <button id="close-button">✖</button> <!-- Close button -->
      </div>
      <div id="chatbox">
          <div id="messages"></div>
      </div>
      <input type="text" id="user-input" placeholder="Type your message here..." />
      <button id="send-button">Send</button>
  </div>

  <script src="chatbot.js"></script>
  <div class="fixed bottom-0 right-2 scroll-container" id="scrollContainer" style="display: none;">
    <button class="scroll-button group" id="scrollTopBtn">
      <span class="tooltip-text-scroll">
        <div class="tooltip-icon"> <i class="fa-solid fa-arrow-up" ></i></div>
      </span>
    </button>
  </div>

  <script>
        document.addEventListener('DOMContentLoaded', function() {
            document.getElementById('contactForm').addEventListener('submit', async function(event) {
                event.preventDefault(); // Prevent the default form submission

                const name = document.getElementById('name').value;
                const email = document.getElementById('email').value;
                const message = document.getElementById('message').value;

                // Create an object with the form data
                const formData = {
                    name: name,
                    email: email,
                    message: message
                };

                console.log('Form Data:', formData); // Debugging statement

                try {
                    // Send the data to the backend
                    const response = await fetch('http://localhost:5000/api/contact/', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify(formData)
                    });

                    // Check if the response is ok (status code 200-299)
                    if (response.ok) {
                        const result = await response.json();
                        alert(result.message); // Show success message
                        // Optionally reset the form
                        document.getElementById('contactForm').reset();
                    } else {
                        const errorData = await response.json();
                        alert(`Error: ${errorData.message}`); // Show error message
                    }
                } catch (error) {
                    alert('Failed to send message. Please try again later.'); // Handle network errors
                    console.error('Error:', error);
                }
            });
        });
    </script>
  <script>
    window.addEventListener('scroll', function() {
      const scrollContainer = document.getElementById('scrollContainer');
      if (window.scrollY > 0) {
        scrollContainer.style.display = 'block';
      } else {
        scrollContainer.style.display = 'none';
      }
    });
  </script>

  <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>

<footer id="footer">
  <div class="footer-container">
    <!-- About Us Section -->
    <div class="footer-column">
      <h3>About Us</h3>
      <p>Discover and plan affordable trips with BuddyTrail's travel companion tools.</p>
      <!-- Newsletter Form Section -->
    <style>
      .footer-column.newsletter {
          max-width: 300px;
          margin: 0 auto;
          text-align: center;
      }
      #newsletter-form {
          display: flex;
          flex-direction: column;
          align-items: center;
      }
      #email {
          width: 100%;
          margin-bottom: 10px;
          padding: 8px;
          box-sizing: border-box;
      }
      button[type="submit"] {
          width: 100px;
          padding: 6px;
          font-size: 14px;
      }
      #subscription-message {
          font-size: 14px;
          margin-top: 10px;
      }
  </style>
    <div class="footer-column newsletter" id="newsletter">
      <h3>Subscribe to Our Newsletter</h3>
      <form id="newsletter-form">
        <input type="email" id="email1" placeholder="Enter your email" required />
        <button type="submit">Subscribe</button>
      </form>
      <p id="subscription-message"></p>
    </div>
    </div>
    <script>
      document.getElementById("newsletter-form").addEventListener("submit", async function(event) {
  event.preventDefault(); // Prevent the form from refreshing the page

  const email = document.getElementById("email1").value;
  const subscriptionMessage = document.getElementById("subscription-message");

  try {
    console.log(email)
    // Call the API to subscribe the user to the newsletter
    const response = await fetch("http://localhost:5000/api/contact/newsletter", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ email }),
    });

    const result = await response.json();

    if (response.ok) {
      // Show success message
      subscriptionMessage.textContent = "Thank you for subscribing!";
      subscriptionMessage.style.color = "green";
      document.getElementById("email").value = ""; // Clear the email input
    } else {
      // Show error message from the server
      subscriptionMessage.textContent = result.message || "Subscription failed. Please try again.";
      subscriptionMessage.style.color = "red";
    }
  } catch (error) {
    // Show a generic error message if the API call fails
    subscriptionMessage.textContent = "An error occurred. Please try again.";
    subscriptionMessage.style.color = "red";
  }
});

    </script>

    <!-- Quick Links Section -->
    <div class="footer-column">
      <h3>Quick Links</h3>
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="faq.html" class="faq-link">FAQs</a></li>
        <li><a href="servicespage.html">Services</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="welcome.html">Testimonials</a></li>
        <li><a href="team.html">Team</a></li>
        <a href="./contributor/Contributors.html" id="ourvisionlink">Our Contributors</a>
      </ul>
    </div>

    <!-- Legal Links Section -->
    <div class="footer-column">
      <h3>Legal Links</h3>
      <ul>
        <li><a href="terms_of_service.html">Terms of Service</a></li>
        <li><a href="privacypolicy.html">Privacy Policy</a></li>
        <li><a href="copyright.html">Copyright Notice</a></li>
        <li><a href="disclaimer.html">Disclaimer</a></li>
        <li><a href="cookie_policy.html">Cookie Policy</a></li>


      </ul>
    </div>

    <!-- Contact Us Section -->
    <div class="footer-column">
      <h3>Contact Us</h3>
      <p>Email: <a href="mailto:info@example.com">info@example.com</a></p>
      <p>Phone: <a href="tel:+1234567890">+123 456 7890</a></p>
      <!-- Follow Us Section -->
    <div class="footer-column">
      <h3>Follow Us</h3>
      <div class="social-icons">
        <a href="https://discord.com/invite/priyaghosal" target="_blank"><i class="fab fa-discord"></i></a>
        <a href="https://x.com/https://twitter.com/PriyaGhosa39968" target="_blank"><i class="fa-brands fa-x-twitter"></i></a>
        <a href="https://github.com/PriyaGhosal/BuddyTrail" target="_blank"><i class="fab fa-github"></i></a>
        <a href="https://www.linkedin.com/in/priya-ghosal-785771286/" target="_blank"><i class="fab fa-linkedin-in"></i></a>
      </div>
    </div>
    </div>
  </div>

  <!-- Footer Bottom Section -->
  <div class="footer-bottom">
    <p class="copyright-b">&copy; 2024 BuddyTrail. All rights reserved.</p>
  </div>
</footer>


  <!-- Deals and Offers Popup
  <div id="dealsPopup" class="popup">
    <div class="popup-content">
      <span class="close-btn" id="closePopup">&times;</span>
      <h2>Exclusive Deals and Offers!</h2>
      <p>
        Get the best deals on flights, hotels, and travel packages. Don't miss
        out on our limited-time discounts. Plan your trip now!
      </p>
      <button onclick="document.getElementById('dealsPopup').style.display = 'none'; window.location.href='#deals'">
        Check Out Deals
      </button>
    </div> -->
  </div>
  <!-- this script is for twitter icon  starts -->
  <script src="https://kit.fontawesome.com/856f4a44d7.js" crossorigin="anonymous"></script>
  <!-- this script is for twitter icon  ends -->
  <!-- this script is for twitter icon  starts -->
 <script src="https://kit.fontawesome.com/856f4a44d7.js" crossorigin="anonymous"></script>
 <!-- this script is for twitter icon  ends -->
    <script>
      // script.js

      // change the color of navbar while  scrolling to make it visible

      window.addEventListener("scroll", function () {
        const navbar = document.querySelector(".main-head");
        if (window.scrollY > 0) {
          navbar.classList.add("sticky"); // Add class when scrolled
        } else {
          navbar.classList.remove("sticky"); // Remove class when at the top
        }
      });

      window.onscroll = function () {
        toggleScrollTopButton();
      };

      const scrollTopBtn = document.getElementById("scrollTopBtn");

      function toggleScrollTopButton() {
        if (
          document.body.scrollTop > 100 ||
          document.documentElement.scrollTop > 100
        ) {
          scrollTopBtn.style.display = "block"; // Show button after scrolling down
        } else {
          scrollTopBtn.style.display = "none"; // Hide button when at the top
        }

      }

    scrollTopBtn.onclick = function () {
      window.scrollTo({ top: 0, behavior: "smooth" }); // Smooth scroll to top
    };
  </script>
  // <script>
  //   document.getElementById('contactForm').addEventListener('submit', function (e) {
  //     e.preventDefault();

  //     // Submit the form data using fetch
  //     fetch(this.action, {
  //       method: 'POST',
  //       body: new FormData(this),
  //       headers: {
  //         'Accept': 'application/json'
  //       }
  //     }).then(response => {
  //       // Show the confirmation popup
  //       document.getElementById('confirmationPopup').style.display = 'block';
  //       // Reset the form
  //       this.reset();
  //     }).catch(error => {
  //       console.error('Error:', error);
  //       // Still show the confirmation popup even if there's an error
  //       document.getElementById('confirmationPopup').style.display = 'block';
  //     });
  //   });


  //   function closePopup() {
  //     document.getElementById('confirmationPopup').style.display = 'none';
  //   }
  // </script>
  <script>
  document.getElementById('reviewForm').addEventListener('submit', function(event) {
  event.preventDefault(); // Prevents form submission

  // Show custom alert message
  const customAlert = document.createElement('div');
  customAlert.className = 'custom-alert';
  customAlert.innerHTML = `
    <p><b>Thank you! </b><br>We use BuddyTrail to collect and manage all your feedback because we are absolutely committed to making you a happy customer.<br>We will read your feedback, and we'll take it seriously.</p>
  `;
  document.body.appendChild(customAlert);

  // Remove alert on click
  customAlert.addEventListener('click', () => {
    customAlert.remove();
  });

  this.reset(); // Clears the form fields
});

      function closePopup() {
        document.getElementById('confirmationPopup').style.display = 'none';
      }
    </script>


 <div class="gtranslate_wrapper"></div>

 <script>

 window.gtranslateSettings = {
   "default_language":"en",
   "detect_browser_language":true,
   "wrapper_selector":".gtranslate_wrapper"
 }

 </script>

 <script
   src="https://cdn.gtranslate.net/widgets/latest/float.js"
   defer
 ></script>
<!-- Adding scroll progressBar-->
 <script>

  window.onscroll = function() {
    updateProgressBar();
  };


  function updateProgressBar() {
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      var scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
      var scrollPercent = (scrollTop / scrollHeight) * 100;

      document.getElementById("progressBar").style.width = scrollPercent + "%";
  }

  </script>
     <style>
      .popup {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(24, 23, 24, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1000;
      }

      .popup-content {
        background-color: white;
        padding: 20px;
        border-radius: 5px;
        text-align: center;
      }

      .popup-content h2 {
        margin-top: 0;
      }

      .popup-content button {
        margin-top: 10px;
        padding: 5px 10px;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 3px;
        cursor: pointer;
      }

      .custom-alert {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 400px;
        padding: 20px;
        background-color: black;
        border: 1px solid white;
        color: #fff;
        font-size: 16px;
        border-radius: 8px;
        box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
        text-align: center;
        z-index: 1000;
        cursor: pointer; /* Changes cursor to pointer to indicate it's clickable */
        opacity: 1;
        transition: opacity 0.5s ease-in-out;
      }

  .custom-alert p {
/*     white color text on black background will look nice */
    color:white;
    margin: 0;
    line-height: 1.5;
  }
    </style>
  </script>
  <!-- <script src="script.js">
document.getElementById('newsletter-form').addEventListener('submit', function (e) {
    e.preventDefault(); // Prevent the default form submission

    const email = document.getElementById('email').value.trim(); // Get the email value
    const messageElement = document.getElementById('subscription-message'); // Get the message display element

    // Regular expression to validate email format
    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

    if (emailPattern.test(email)) {
        // Simulate a successful subscription
        messageElement.textContent = 'Subscribed successfully!'; // Show success message
        messageElement.style.color = 'green'; // Change message color to green

        // Clear the input field after successful submission
        document.getElementById('email').value = '';
    } else {
        messageElement.textContent =  'Please enter a valid email address.'; // Show error message
        messageElement.style.color =  'red'; // Change message color to red
    }
});
    </script> -->

    <div class="gtranslate_wrapper"></div>
    <script>window.gtranslateSettings = {"default_language":"en","detect_browser_language":true,"wrapper_selector":".gtranslate_wrapper"}</script>
    <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>


    <script>
 main
      // coordinates for the cursor :
      const coords = { x: 0, y: 0 };
      const circles = document.querySelectorAll(".circle");
  
      const colors = [
        "#fc5720", "#fc6532", "#fc6532","#fd8b65", "#d5585c", "#fac3b1", "#f4d5cb", "#fefefe", "#fefefe", "#cdf2c5", "#b2eca5", "#95e283", "#7dda68", "#4adc2d", "#69d451", "#54c939", "#34b916", "#28b309", "#1e9c02", 
      ];
  
      circles.forEach(function (circle, index) {
        circle.x = 0;
        circle.y = 0;
        circle.style.backgroundColor = colors[index % colors.length];
      });
  
      // update the coordinates when the mouse moves:
      window.addEventListener("mousemove", function (e) {
        coords.x = e.clientX;
        coords.y = e.clientY;
      });
  
      // animation function to move the circles:
      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.scale = (circles.length - index) / circles.length;
  
          circle.x = x;
          circle.y = y;
  
          const nextCircle = circles[index + 1] || circles[0];
          x += (nextCircle.x - x) * 0.3;
          y += (nextCircle.y - y) * 0.3;
        });
  
        requestAnimationFrame(animateCircles);
      }
      
      animateCircles();

      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();
      });

 main
    </script>
  
  <body>
    <div class="container">
        <!-- Your existing content -->

        <!-- Chatbot Icon -->
        <div class="chatbot-icon" onclick="toggleChatbot()">
          🗨️ <!-- You can replace this with an actual image/icon -->
        </div>

        <!-- Chatbot Iframe -->
        <div class="chatbot-container" id="chatbotContainer">
            <iframe src="https://www.chatbase.co/chatbot-iframe/GtcyNsebrd_nrDUEQz53T"
                    width="350"
                    height="500"
                    style="border:none;">
            </iframe>
        </div>
    </div>

    <!-- Scripts -->
    <script src="script.js"></script>
    <script>
        function toggleChatbot() {
            const chatbotContainer = document.getElementById('chatbotContainer');
            if (chatbotContainer.style.display === 'none' || chatbotContainer.style.display === '') {
                chatbotContainer.style.display = 'block';
            } else {
                chatbotContainer.style.display = 'none';
            }
        }
      
    </script>
    <br /><br />
    <link rel="stylesheet" href="visi.css">

    <div class="visitor-counter">
      <div>Visitor</div>
      <div class="website-counter"></div>
    </div>
    <script src="path/to/visitorCounter.js"></script>
    <script src="./assets/css/visitors.css"></script>

      <script src="visi.js"></script>
      <script src="script.js"></script>

</body>

</html>