From 229f794dd9564eb81bc00b3c7963828f437e16d3 Mon Sep 17 00:00:00 2001
From: Deepika Sharma <sharmadeepi200@gmail.com>
Date: Fri, 25 Oct 2024 21:10:49 +0530
Subject: [PATCH 01/38] Update F&Q.html

Now the Toggle Button is functioning as per requirement.
---
 F&Q.html | 103 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 103 insertions(+)

diff --git a/F&Q.html b/F&Q.html
index 915239e2..7e6b5888 100644
--- a/F&Q.html
+++ b/F&Q.html
@@ -208,6 +208,49 @@
       .btn-view-itinerary:hover {
         background-color: #0056b3;
       }
+
+    body {
+    background-color: white;
+    color: black;
+    transition: background-color 0.3s, color 0.3s;
+}
+
+body.dark-mode {
+    background-color: #121212;
+    color: #ffffff;
+}
+
+header.dark-mode {
+    background-color: #1f1f1f;
+}
+
+.mode-toggle {
+    cursor: pointer;
+    border: none;
+    background: transparent;
+    outline: none;
+    padding: 10px;
+}
+
+.mode-toggle img {
+    width: 24px;
+    height: 24px;
+}
+
+.navbar {
+    background-color: #f0f0f0;
+    transition: background-color 0.3s;
+}
+
+body.dark-mode .navbar {
+    background-color: #333;
+}
+
+body.dark-mode .navbar a:hover {
+    color: #4C51BF;
+    transform: translateY(-2px);
+}
+      
     </style>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
   </head>
@@ -522,5 +565,65 @@ <h2>Suggestions/Questions</h2>
         background-color: #ffe0b2;
       }
     </style>
+
+     <!-- dark theme -->
+    <script>
+      document.addEventListener("DOMContentLoaded", function () {
+        const hamburger = document.getElementById("hamburger");
+        const navList = document.getElementById("nav-links");
+        const closeBtn = document.getElementById("closeBtn");
+  
+        hamburger.addEventListener("click", function () {
+          navList.classList.toggle("active");
+        });
+  
+        closeBtn.addEventListener("click", function () {
+          navList.classList.remove("active");
+        });
+      });
+  
+     document.addEventListener("DOMContentLoaded", function() {
+       const modeToggle = document.getElementById("modeToggle");
+       const sunIcon = document.querySelector(".sun-icon");
+       const moonIcon = document.querySelector(".moon-icon");
+  
+       // Check saved theme in localStorage and apply it
+       const currentTheme = localStorage.getItem("theme") || "light";
+        if (currentTheme === "dark") {
+          document.body.classList.add("dark-mode");
+          sunIcon.style.display = "none";
+          moonIcon.style.display = "inline-block";
+       } else {
+          sunIcon.style.display = "inline-block";
+          moonIcon.style.display = "none";
+      }
+  
+  // Toggle between light and dark mode on button click
+  modeToggle.addEventListener("click", () => {
+      const isDarkMode = document.body.classList.toggle("dark-mode");
+  
+      // Apply dark mode styles to relevant sections
+      const sections = document.querySelectorAll('.about, .core-values, .team');
+      sections.forEach(section => {
+          if (isDarkMode) {
+              section.classList.add('dark-mode');
+          } else {
+              section.classList.remove('dark-mode');
+          }
+      });
+  
+      // Update icons and local storage
+      if (isDarkMode) {
+          sunIcon.style.display = "none";
+          moonIcon.style.display = "inline-block";
+          localStorage.setItem("theme", "dark");
+      } else {
+          sunIcon.style.display = "inline-block";
+          moonIcon.style.display = "none";
+          localStorage.setItem("theme", "light");
+      }
+  });
+  });
+    </script>  
   </body>
 </html>

From c8008764e8d0464ea517d17e31b68c963e76e072 Mon Sep 17 00:00:00 2001
From: Deepika Sharma <sharmadeepi200@gmail.com>
Date: Fri, 25 Oct 2024 21:29:17 +0530
Subject: [PATCH 02/38] Now the toggle button is properly responding.

---
 F&Q.html | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/F&Q.html b/F&Q.html
index 7e6b5888..a108c0d8 100644
--- a/F&Q.html
+++ b/F&Q.html
@@ -209,7 +209,8 @@
         background-color: #0056b3;
       }
 
-    body {
+/*       darkmode */
+    body { 
     background-color: white;
     color: black;
     transition: background-color 0.3s, color 0.3s;

From 1ccff27d486ec916fa40b64f9c4f47a3db2595c9 Mon Sep 17 00:00:00 2001
From: Deepika Sharma <sharmadeepi200@gmail.com>
Date: Sat, 26 Oct 2024 16:41:46 +0530
Subject: [PATCH 03/38] Added dark theme to Travel service page.

Successfully added Dark theme to the Travel service page.
---
 service.html | 114 ++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 113 insertions(+), 1 deletion(-)

diff --git a/service.html b/service.html
index 91883fbf..45e844ca 100644
--- a/service.html
+++ b/service.html
@@ -6,6 +6,53 @@
     <title>Travel Services</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="service.css" rel="stylesheet">
+    <style>
+        /* dark mode */
+
+body {
+    background-color: white;
+    color: black;
+    transition: background-color 0.3s, color 0.3s;
+}
+
+body.dark-mode {
+    background-color: #121212;
+    color: #ffffff;
+}
+
+header.dark-mode {
+    background-color: #1f1f1f;
+}
+
+.mode-toggle {
+    cursor: pointer;
+    border: none;
+    background: transparent;
+    outline: none;
+    padding: 10px;
+}
+
+.mode-toggle img {
+    width: 24px;
+    height: 24px;
+}
+
+.navbar {
+    background-color: #f0f0f0;
+    transition: background-color 0.3s;
+}
+
+body.dark-mode .navbar {
+    background-color: #333;
+}
+
+body.dark-mode .navbar a:hover {
+    color: #4C51BF;
+    transform: translateY(-2px);
+}
+
+
+    </style>
 </head>
 <body>
     <header class="bg-primary text-white py-4">
@@ -25,6 +72,12 @@ <h1 class="display-4">Travel Services</h1>
                     <li class="nav-item"><a class="nav-link" href="#hotels">Hotels</a></li>
                     <li class="nav-item"><a class="nav-link" href="#flights">Flights</a></li>
                     <li class="nav-item"><a class="nav-link" href="#cars">Car Rentals</a></li>
+                    <li>
+                    <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>
+                    </li>
                 </ul>
             </div>
         </div>
@@ -215,5 +268,64 @@ <h5>Follow Us</h5>
     </footer>
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+     <script>
+        document.addEventListener("DOMContentLoaded", function () {
+          const hamburger = document.getElementById("hamburger");
+          const navList = document.getElementById("nav-links");
+          const closeBtn = document.getElementById("closeBtn");
+    
+          hamburger.addEventListener("click", function () {
+            navList.classList.toggle("active");
+          });
+    
+          closeBtn.addEventListener("click", function () {
+            navList.classList.remove("active");
+          });
+        });
+    
+       document.addEventListener("DOMContentLoaded", function() {
+         const modeToggle = document.getElementById("modeToggle");
+         const sunIcon = document.querySelector(".sun-icon");
+         const moonIcon = document.querySelector(".moon-icon");
+    
+         // Check saved theme in localStorage and apply it
+         const currentTheme = localStorage.getItem("theme") || "light";
+          if (currentTheme === "dark") {
+            document.body.classList.add("dark-mode");
+            sunIcon.style.display = "none";
+            moonIcon.style.display = "inline-block";
+         } else {
+            sunIcon.style.display = "inline-block";
+            moonIcon.style.display = "none";
+        }
+    
+    // Toggle between light and dark mode on button click
+    modeToggle.addEventListener("click", () => {
+        const isDarkMode = document.body.classList.toggle("dark-mode");
+    
+        // Apply dark mode styles to relevant sections
+        const sections = document.querySelectorAll('.about, .core-values, .team');
+        sections.forEach(section => {
+            if (isDarkMode) {
+                section.classList.add('dark-mode');
+            } else {
+                section.classList.remove('dark-mode');
+            }
+        });
+    
+        // Update icons and local storage
+        if (isDarkMode) {
+            sunIcon.style.display = "none";
+            moonIcon.style.display = "inline-block";
+            localStorage.setItem("theme", "dark");
+        } else {
+            sunIcon.style.display = "inline-block";
+            moonIcon.style.display = "none";
+            localStorage.setItem("theme", "light");
+        }
+    });
+    });
+      </script>
+    
 </body>
-</html>
\ No newline at end of file
+</html>

From a3544ae079168d9e65e2fde1a22f99c59d7a5858 Mon Sep 17 00:00:00 2001
From: biswa <biswa@007gmail.com>
Date: Sat, 26 Oct 2024 17:16:30 +0530
Subject: [PATCH 04/38] Enhanced the footer of about page

---
 about.css  | 123 ++++++++++++++++++++++++--
 about.html | 254 ++++++++++++++++++++++++++++++-----------------------
 2 files changed, 259 insertions(+), 118 deletions(-)

diff --git a/about.css b/about.css
index 48a79c86..eb5c38f9 100644
--- a/about.css
+++ b/about.css
@@ -73,6 +73,9 @@ nav {
     line-height: 1;
 }
 
+
+
+
 .nav-links {
     list-style: none;
     display: flex;
@@ -102,7 +105,10 @@ nav {
 .nav-link.active {
     color: #4C51BF;
     font-weight: bold;
-}
+} 
+
+ 
+
 
 .btn-primary {
     margin-right: -10rem;
@@ -310,7 +316,7 @@ footer {
     font-size: 1.125rem;
 }
 
-.social-icons {
+/* .social-icons {
     display: flex;
     gap: 1rem;
     margin-top: 0.5rem;
@@ -324,24 +330,81 @@ footer {
 .social-icons a:hover {
     color: #4C51BF;
     transform: translateY(-2px);
+} */
+
+ 
+
+.social-icons {
+    display: flex;
+    gap: 15px; /* Adjust spacing between icons */
+    position: relative; /* Ensure the positioning context for the pseudo-elements */
 }
 
-.copyright {
-    text-align: center;
-    margin-top: 1.5rem;
-    padding-top: 1rem;
-    border-top: 1px solid rgba(255, 255, 255, 0.1);
+.social-icons a {
+    display: inline-block;
+    transition: transform 0.3s ease, color 0.3s ease;
+    position: relative;
+    color: #000; /* Default color for the icons */
 }
 
+.social-icons a::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0;
+    height: 0;
+    border-radius: 50%;
+    background: rgba(0, 0, 255, 0.6); /* Blue background */
+    transition: width 0.3s ease, height 0.3s ease, top 0.3s ease, left 0.3s ease;
+    z-index: -1; /* Send the background behind the icon */
+}
 
+.social-icons a:hover::before {
+    width: 120%; /* Slightly larger than the icon for a better effect */
+    height: 120%; /* Slightly larger than the icon */
+    top: -10%; /* Adjust position to keep it centered */
+    left: -10%; /* Adjust position to keep it centered */
+}
 
+.social-icons a:hover {
+    transform: scale(1.2);
+    color: #fff; /* Change icon color on hover */
+}
 
+.social-icons img {
+    width: 30px; /* Adjust size of the X logo */
+    height: auto; /* Maintain aspect ratio */
+    transition: transform 0.3s ease;
+}
 
+.social-icons img:hover {
+    transform: scale(1.2);
+}
 
+/* Optional: Additional hover effects for individual icons */
+.social-icons a.discord:hover::before {
+    background: linear-gradient(45deg, #7289da, #61dafb); /* Discord gradient */
+}
 
+.social-icons a.github:hover::before {
+    background: linear-gradient(45deg, #333, #fff); /* GitHub gradient */
+}
 
+.social-icons a.linkedin:hover::before {
+    background: linear-gradient(45deg, #0077b5, #fff); /* LinkedIn gradient */
+}
 
+.social-icons a.twitter:hover::before {
+    background: linear-gradient(45deg, #1da1f2, #fff); /* Twitter gradient */
+}
 
+.copyright {
+    text-align: center;
+    margin-top: 1.5rem;
+    padding-top: 1rem;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
 
 footer {
     width: 100%;
@@ -470,6 +533,10 @@ form button .fas {
     background: #fff;
     margin-right: 15px;
     cursor: pointer;
+
+    & :hover{
+         background-color: #61dafb;
+    }
 }
 
 hr {
@@ -511,6 +578,48 @@ hr {
     animation: moving 2s linear infinite;
 }
 
+ 
+
+.footer-links {
+    list-style: none; /* Remove bullet points */
+    padding: 0; /* Remove default padding */
+}
+
+.footer-links li {
+   
+    margin-right: 20px; /* Space between links */
+}
+
+.footer-links a {
+    text-decoration: none; /* Remove default underline */
+    color: whitesmoke;  
+    position: relative;  
+    transition: color 0.3s ease;  
+}
+
+.footer-links a::after {
+    content: '';  
+    position: absolute;  
+    left: 0;  
+    bottom: -5px;  
+    width: 100%;  
+    height: 2px;  
+    background: blue;  
+    transform: scaleX(0);  
+    transition: transform 0.3s ease;  
+}
+
+.footer-links a:hover::after {
+    transform: scaleX(1); /* Scale to full width on hover */
+}
+
+.footer-links a:hover {
+    color: blue; /* Change text color on hover */
+}
+
+
+ 
+
 @keyframes moving {
 
     0% {
diff --git a/about.html b/about.html
index cd67eb4b..06c34200 100644
--- a/about.html
+++ b/about.html
@@ -8,115 +8,134 @@
     <link rel="stylesheet" href="about.css" />
     <link rel="icon" href="https://img.icons8.com/?size=100&id=11808&format=png&color=000000">
 
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
-    />
-  </head>
-  <body>
-      <!-- Preloader -->
-      <div id="preloader">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
+</head>
+
+<body>
+    <!-- Preloader -->
+    <div id="preloader">
         <div class="loader-wrapper">
-          <img src="img/logo.png" alt="Travel Website Logo" id="logo">
-          <div class="loader-globe"></div>
+            <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>
+    </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>
+        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>
 
     <header>
         <div class="container">
@@ -536,6 +555,16 @@ <h3>PRIYA Ghosal</h3>
             /* Change text color on hover */
 
         }
+
+        .hover-color {
+            transition: color 0.3s ease;
+            /* Smooth transition for color change */
+        }
+
+        .hover-color:hover {
+            color: rgb(199, 59, 159);
+            /* Change color on hover */
+        }
     </style>
 
     <div class="footer-responsive">
@@ -547,7 +576,9 @@ <h3>PRIYA Ghosal</h3>
                         <img src="img/logo.png" alt="BuddyTrail Logo" />
                         <h1 id="logo">BuddyTrail</h1>
                     </div>
-                    <p>Welcome to BuddyTrail - your premier travel companion! Whether you're planning a family vacation
+                    <p class="hover-color">Welcome to BuddyTrail - your premier travel companion! Whether you're
+                        planning a
+                        family vacation
                         or a
                         getaway with friends, BuddyTrail is here to help you discover and explore incredible
                         destinations.
@@ -569,7 +600,7 @@ <h4>+123 456 7890</h4>
                 <div class="col">
                     <h3>Links <div class="underline"><span></span></div>
                     </h3>
-                    <ul>
+                    <ul class="footer-links">
                         <li><a href="https://buddytrail.netlify.app/#home">Home</a></li>
                         <li><a href="https://buddytrail.netlify.app/#services">Services</a></li>
                         <li><a href="https://buddytrail.netlify.app/about">About Us</a></li>
@@ -594,11 +625,12 @@ <h3>Follow Us <div class="underline"><span></span></div>
                             <a href="https://discord.com/invite/priyaghosal" target="_blank" rel="noopener noreferrer">
                                 <i class="fab fa-discord"></i>
                             </a>
-                            <a href="https://x.com/i/flow/login?redirect_after_login=%2FPriyaGhosa39968" target="_blank" rel="noopener noreferrer">
-                                <img src="img/x-logo.png" alt="X logo"  class="fab">
+                            <a href="https://x.com/i/flow/login?redirect_after_login=%2FPriyaGhosa39968" target="_blank"
+                                rel="noopener noreferrer">
+                                <img src="img/x-logo.png" alt="X logo" class="fab">
                             </a>
-                            
-                            
+
+
                             <a href="https://github.com/PriyaGhosal/BuddyTrail" target="_blank"
                                 rel="noopener noreferrer">
                                 <i class="fab fa-github"></i>

From 3a1e9c57c9771cc321c4b68b9fef34f2c0f4c8b4 Mon Sep 17 00:00:00 2001
From: Adarsh-Chaubey03 <adarsh03chaubey@gmail.com>
Date: Sat, 26 Oct 2024 18:17:32 +0530
Subject: [PATCH 05/38] increased button size

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 6e414046..a7d7ba6b 100644
--- a/index.html
+++ b/index.html
@@ -951,7 +951,7 @@ <h3>Wildlife Safari in Kenya</h3>
   border: none;
   padding: 10px 20px;
   border-radius: 8px;
-  font-size: 1rem;
+  font-size: 1.5rem;
   transition: background-color 0.3s ease, transform 0.3s ease, border 0.3s ease;
 }
 

From cfbc2878f3d0a5c7c7a875c4cbb0fd5506ad3dc5 Mon Sep 17 00:00:00 2001
From: biswa <biswa@007gmail.com>
Date: Sat, 26 Oct 2024 18:17:57 +0530
Subject: [PATCH 06/38] Social media icons update and added 3d hover effect

---
 faq.html | 416 ++++++++++++++++++++++++++++++-------------------------
 1 file changed, 227 insertions(+), 189 deletions(-)

diff --git a/faq.html b/faq.html
index 472f4d4e..78a71084 100644
--- a/faq.html
+++ b/faq.html
@@ -1,114 +1,142 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>BuddyTrail</title>
-    <link rel="stylesheet" href="styles.css"> <!-- Link to your CSS file -->
-    <link rel="stylesheet" href="about.css" />
-    <link rel="icon" href="https://img.icons8.com/?size=100&id=11808&format=png&color=000000">
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
-    />
-    <style>
-      header {
-            background-color: #2D3748;
-            position: sticky;
-            top: 0;
-            z-index: 100;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-        }
-
-        nav {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 0.5rem 0;
-        }
-            #faq{
-                padding-top: 80px;
-                padding-top: 70px;
-              }
-                              
-                
-                .faq-container {
-                  max-width: 900px;
-                  margin: 40px auto;
-                  padding: 20px;
-                  background-color: rgb(203, 203, 220);
-                  border: 1px solid #ddd;
-                  border-radius: 10px;
-                  box-shadow: 2 10px 8px rgba(255, 254, 254, 0.1);
-                }
-                
-                .faq-title {
-                  text-align: center;
-                  font-size: 1.8em;
-                  color: #161515;
-                  margin-bottom: 20px;
-                }
-                
-                .faq {
-                  margin-bottom: 15px;
-                }
-                
-                .faq input[type="checkbox"] {
-                  display: none;
-                }
-                
-                .faq-question {
-                  padding: 15px;
-                  font-size: 1.2em;
-                  background-color: #1477da;
-                  color: #fff;
-                  border: none;
-                  border-radius: 5px;
-                  cursor: pointer;
-                  /* display: block; */
-                  display: flex;
-                  justify-content: space-between;
-                  align-items: center;
-                  transition: background-color 0.3s ease;
-                }
-                
-                .faq-question:hover {
-                  background-color: #0680fa;
-                }
-                
-                .faq-answer {
-                  max-height: 0;
-                  overflow: hidden;
-                  padding: 0 15px;
-                  background-color: #f3f1ef;
-                  color: #333;
-                  border-left: 4px solid #0f0f10;
-                  transition: all 0.6s ease;
-                }
-                
-                .faq input[type="checkbox"]:checked ~ .faq-answer {
-                  max-height: 150px;
-                  padding: 15px;
-                }
-                .arrow {
-                  margin-top: -3px;
-                  display: inline-block;
-                  width: 12px;
-                  height: 12px;
-                  border-right: 2px solid #fff;
-                  border-bottom: 2px solid #fff;
-                  transform: rotate(45deg);
-                  transition: transform 0.3s ease;
-                }
-                /* Rotate arrow on FAQ open */
-                .faq input[type="checkbox"]:checked + label .arrow {
-                  transform: rotate(225deg);
-                }
-              
-            </style>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>BuddyTrail</title>
+  <link rel="stylesheet" href="styles.css"> <!-- Link to your CSS file -->
+  <link rel="stylesheet" href="about.css" />
+  <link rel="icon" href="https://img.icons8.com/?size=100&id=11808&format=png&color=000000">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
+  <style>
+    header {
+      background-color: #2D3748;
+      position: sticky;
+      top: 0;
+      z-index: 100;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+
+    nav {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0.5rem 0;
+    }
+
+    #faq {
+      padding-top: 80px;
+      padding-top: 70px;
+    }
+
+
+    .faq-container {
+      max-width: 900px;
+      margin: 40px auto;
+      padding: 20px;
+      background-color: rgb(203, 203, 220);
+      border: 1px solid #ddd;
+      border-radius: 10px;
+      box-shadow: 2 10px 8px rgba(255, 254, 254, 0.1);
+    }
+
+    .faq-title {
+      text-align: center;
+      font-size: 1.8em;
+      color: #161515;
+      margin-bottom: 20px;
+    }
+
+    .faq {
+      margin-bottom: 15px;
+    }
+
+    .faq input[type="checkbox"] {
+      display: none;
+    }
+
+    .faq-question {
+      padding: 15px;
+      font-size: 1.2em;
+      background-color: #1477da;
+      color: #fff;
+      border: none;
+      border-radius: 5px;
+      cursor: pointer;
+      /* display: block; */
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      transition: background-color 0.3s ease;
+    }
+
+    .faq-question:hover {
+      background-color: #0680fa;
+    }
+
+    .faq-answer {
+      max-height: 0;
+      overflow: hidden;
+      padding: 0 15px;
+      background-color: #f3f1ef;
+      color: #333;
+      border-left: 4px solid #0f0f10;
+      transition: all 0.6s ease;
+    }
+
+    .faq input[type="checkbox"]:checked~.faq-answer {
+      max-height: 150px;
+      padding: 15px;
+    }
+
+    .arrow {
+      margin-top: -3px;
+      display: inline-block;
+      width: 12px;
+      height: 12px;
+      border-right: 2px solid #fff;
+      border-bottom: 2px solid #fff;
+      transform: rotate(45deg);
+      transition: transform 0.3s ease;
+    }
+
+    /* Rotate arrow on FAQ open */
+    .faq input[type="checkbox"]:checked+label .arrow {
+      transform: rotate(225deg);
+    }
+
+    .social-icons {
+    display: flex;
+    gap: 15px;
+}
+
+.social-icons a {
+    display: inline-block;
+    transition: transform 0.3s ease, color 0.3s ease;
+    perspective: 1000px;
+}
+
+.social-icons a i, .social-icons img {
+    font-size: 24px;
+    color: #000;
+    transition: transform 0.3s ease, color 0.3s ease;
+    width: 24px;
+    height: auto;
+}
+
+.social-icons a:hover i, .social-icons a:hover img {
+    transform: rotateY(360deg) scale(1.2);
+    
+}
+ 
+
+
+  </style>
 
 
 </head>
+
 <body>
   <header>
     <div class="container">
@@ -127,119 +155,129 @@ <h1 id="logo">BuddyTrail</h1>
       </nav>
     </div>
   </header>
-<!-- FAQ Section -->
-<section id="faq">          
-  <div class="faq-container">
-      <h1 class="faq-title" data-aos="fade-right">Frequently Asked Questions</h1>  
-      
+  <!-- FAQ Section -->
+  <section id="faq">
+    <div class="faq-container">
+      <h1 class="faq-title" data-aos="fade-right">Frequently Asked Questions</h1>
+
       <div class="faq" data-aos="fade-right">
-          <input type="checkbox" id="faq1">
-          <label for="faq1" class="faq-question">1. What is BuddyTrail? <span class="arrow"></span></label>
-          <div class="faq-answer">
-              BuddyTrail is your all-in-one travel assistant, helping you discover new destinations, find the best hotels, and book flights with ease. Whether you're traveling solo, with family, or friends, BuddyTrail offers personalized suggestions to make your trip unforgettable.
-          </div>
+        <input type="checkbox" id="faq1">
+        <label for="faq1" class="faq-question">1. What is BuddyTrail? <span class="arrow"></span></label>
+        <div class="faq-answer">
+          BuddyTrail is your all-in-one travel assistant, helping you discover new destinations, find the best hotels,
+          and book flights with ease. Whether you're traveling solo, with family, or friends, BuddyTrail offers
+          personalized suggestions to make your trip unforgettable.
+        </div>
       </div>
 
       <div class="faq" data-aos="fade-right">
-          <input type="checkbox" id="faq2">
-          <label for="faq2" class="faq-question">2. How can BuddyTrail help me plan my trip? <span class="arrow"></span></label>
-          <div class="faq-answer">
-              BuddyTrail offers destination guides, hotel recommendations, and flight booking tools all in one platform. We make it easy to compare prices, explore local attractions, and plan the perfect itinerary based on your preferences.
-          </div>
+        <input type="checkbox" id="faq2">
+        <label for="faq2" class="faq-question">2. How can BuddyTrail help me plan my trip? <span
+            class="arrow"></span></label>
+        <div class="faq-answer">
+          BuddyTrail offers destination guides, hotel recommendations, and flight booking tools all in one platform. We
+          make it easy to compare prices, explore local attractions, and plan the perfect itinerary based on your
+          preferences.
+        </div>
       </div>
 
       <div class="faq" data-aos="fade-right">
-          <input type="checkbox" id="faq3">
-          <label for="faq3" class="faq-question">3. Does BuddyTrail offer travel deals and discounts? <span class="arrow"></span></label>
-          <div class="faq-answer">
-              Yes! BuddyTrail partners with various airlines, hotels, and travel services to bring you exclusive discounts and offers. Be sure to check our deals section for the latest promotions on flights, accommodations, and vacation packages.
-          </div>
+        <input type="checkbox" id="faq3">
+        <label for="faq3" class="faq-question">3. Does BuddyTrail offer travel deals and discounts? <span
+            class="arrow"></span></label>
+        <div class="faq-answer">
+          Yes! BuddyTrail partners with various airlines, hotels, and travel services to bring you exclusive discounts
+          and offers. Be sure to check our deals section for the latest promotions on flights, accommodations, and
+          vacation packages.
+        </div>
       </div>
 
       <div class="faq" data-aos="fade-right">
-          <input type="checkbox" id="faq4">
-          <label for="faq4" class="faq-question">4. Can I customize my trip on BuddyTrail? <span class="arrow"></span></label>
-          <div class="faq-answer">
-              Absolutely! You can customize every aspect of your trip from choosing destinations, hotels, and flights, to adding local experiences. BuddyTrail provides a flexible travel planning experience to suit your needs.
-          </div>
+        <input type="checkbox" id="faq4">
+        <label for="faq4" class="faq-question">4. Can I customize my trip on BuddyTrail? <span
+            class="arrow"></span></label>
+        <div class="faq-answer">
+          Absolutely! You can customize every aspect of your trip from choosing destinations, hotels, and flights, to
+          adding local experiences. BuddyTrail provides a flexible travel planning experience to suit your needs.
+        </div>
       </div>
 
       <div class="faq" data-aos="fade-right">
-          <input type="checkbox" id="faq5">
-          <label for="faq5" class="faq-question">5. How do I track my bookings? <span class="arrow"></span></label>
-          <div class="faq-answer">
-              Once you've booked a flight or hotel through BuddyTrail, you'll receive a confirmation email with a link to track and manage your bookings. You can also access your bookings via your BuddyTrail account.
-          </div>
+        <input type="checkbox" id="faq5">
+        <label for="faq5" class="faq-question">5. How do I track my bookings? <span class="arrow"></span></label>
+        <div class="faq-answer">
+          Once you've booked a flight or hotel through BuddyTrail, you'll receive a confirmation email with a link to
+          track and manage your bookings. You can also access your bookings via your BuddyTrail account.
+        </div>
       </div>
 
       <div class="faq" data-aos="fade-right">
-          <input type="checkbox" id="faq6">
-          <label for="faq6" class="faq-question">6. What if I need to cancel or change my booking? <span class="arrow"></span></label>
-          <div class="faq-answer">
-              Cancellations and changes are allowed based on the policy of the airline or hotel. You can manage your booking through BuddyTrail, and our support team is available to assist you if you encounter any issues.
-          </div>
+        <input type="checkbox" id="faq6">
+        <label for="faq6" class="faq-question">6. What if I need to cancel or change my booking? <span
+            class="arrow"></span></label>
+        <div class="faq-answer">
+          Cancellations and changes are allowed based on the policy of the airline or hotel. You can manage your booking
+          through BuddyTrail, and our support team is available to assist you if you encounter any issues.
+        </div>
       </div>
 
       <div class="faq" data-aos="fade-right">
-          <input type="checkbox" id="faq7">
-          <label for="faq7" class="faq-question">7. Does BuddyTrail offer support for group bookings? <span class="arrow"></span></label>
-          <div class="faq-answer">
-              Yes! Whether you're planning a family trip or a getaway with friends, BuddyTrail makes group bookings easy. You can book flights and hotels for multiple travelers and receive group discounts where applicable.
-          </div>
+        <input type="checkbox" id="faq7">
+        <label for="faq7" class="faq-question">7. Does BuddyTrail offer support for group bookings? <span
+            class="arrow"></span></label>
+        <div class="faq-answer">
+          Yes! Whether you're planning a family trip or a getaway with friends, BuddyTrail makes group bookings easy.
+          You can book flights and hotels for multiple travelers and receive group discounts where applicable.
+        </div>
       </div>
-  </div>
-</section>
+    </div>
+  </section>
 
 
-<div class="gtranslate_wrapper"></div>
+  <div class="gtranslate_wrapper"></div>
 
-<script>
+  <script>
 
-window.gtranslateSettings = {
-  "default_language":"en",
-  "detect_browser_language":true,
-  "wrapper_selector":".gtranslate_wrapper"
-}
+    window.gtranslateSettings = {
+      "default_language": "en",
+      "detect_browser_language": true,
+      "wrapper_selector": ".gtranslate_wrapper"
+    }
 
-</script>
+  </script>
 
-<script 
-  src="https://cdn.gtranslate.net/widgets/latest/float.js"
-  defer
-></script>
+  <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
 
- 
 
-    <!-- Footer Include -->
-  
-    <footer>
-      <div class="container">
-        <div class="footer-content">
-          <div class="footer-column-l">
-            <h3>Contact Us</h3>
-            <p>Email: info@example.com</p>
-            <p>Phone: +123 456 7890</p>
-          </div>
-          <div class="footer-column-r">
-            <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://twitter.com/PriyaGhosa39968" target="_blank"
-                ><i class="fab fa-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>
+
+  <!-- Footer Include -->
+
+  <footer>
+    <div class="container">
+      <div class="footer-content">
+        <div class="footer-column-l">
+          <h3>Contact Us</h3>
+          <p>Email: info@example.com</p>
+          <p>Phone: +123 456 7890</p>
+        </div>
+        <div class="footer-column-r">
+          <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://twitter.com/PriyaGhosa39968" target="_blank">
+              <img src="img/x-logo.png" alt="X logo" class="fab twitter" style="width: 40px; height: 40px;">
+          </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>
-        <p class="copyright">&copy; 2024 BuddyTrail | All rights reserved.</p>
       </div>
-    </footer>
+      <p class="copyright">&copy; 2024 BuddyTrail | All rights reserved.</p>
+    </div>
+  </footer>
 </body>
-</html>
+
+</html>
\ No newline at end of file

From b66d510e59160787562b4fc1149cfcdb865786cb Mon Sep 17 00:00:00 2001
From: Adarsh-Chaubey03 <adarsh03chaubey@gmail.com>
Date: Sat, 26 Oct 2024 18:24:09 +0530
Subject: [PATCH 07/38] corrected solo adventure page

---
 solo-adventure.css  | 3 ++-
 solo-adventure.html | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/solo-adventure.css b/solo-adventure.css
index ae387b15..8448f565 100644
--- a/solo-adventure.css
+++ b/solo-adventure.css
@@ -12,7 +12,8 @@ body {
 }
 
 .card-img-top {
-    height: 200px;
+    width: 100%;
+    aspect-ratio: 3/2;
     object-fit: cover;
 }
 
diff --git a/solo-adventure.html b/solo-adventure.html
index 5527d116..a4350299 100644
--- a/solo-adventure.html
+++ b/solo-adventure.html
@@ -6,6 +6,7 @@
     <title>Solo Adventure Explorer</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     <link rel="stylesheet" href="index.css">
+    <link rel="stylesheet" href="solo-adventure.css">
 </head>
 <body>
     <div class="container mt-5">

From 9bbcbc2a62cf69a8f74421dd76c7d5632ace7259 Mon Sep 17 00:00:00 2001
From: Adarsh-Chaubey03 <adarsh03chaubey@gmail.com>
Date: Sat, 26 Oct 2024 18:36:47 +0530
Subject: [PATCH 08/38] updated romantic gateway

---
 romantic-gateway.css  | 11 +++++++++--
 romantic-gateway.html |  2 +-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/romantic-gateway.css b/romantic-gateway.css
index 63aac0c4..48b6c0d0 100644
--- a/romantic-gateway.css
+++ b/romantic-gateway.css
@@ -3,7 +3,8 @@ body {
     color: #333;
 }
 
-h1, h2 {
+h1,
+h2 {
     color: #ff69b4;
 }
 
@@ -41,9 +42,15 @@ h1, h2 {
     height: 100%;
 }
 
+.card-img-top {
+    width: 100%;
+    aspect-ratio: 3/2;
+    object-fit: cover;
+}
+
 @media (max-width: 768px) {
     .container {
         padding-left: 15px;
         padding-right: 15px;
     }
-}
+}
\ No newline at end of file
diff --git a/romantic-gateway.html b/romantic-gateway.html
index 5060315c..afe9b46b 100644
--- a/romantic-gateway.html
+++ b/romantic-gateway.html
@@ -48,7 +48,7 @@ <h2 class="mb-3">🔍 Find Your Perfect Destination</h2>
         <section id="map" class="mb-5">
             <h2 class="mb-3">🗺️ Explore Romantic Destinations</h2>
             <div class="ratio ratio-21x9">
-                <img src="https://images.unsplash.com/photo-1524661135-423995f22d0b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" class="img-fluid rounded" alt="Interactive Map">
+                <img src="https://images.unsplash.com/photo-1524661135-423995f22d0b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" class="card-img-top" alt="Interactive Map">
             </div>
         </section>
 

From 6d5c5210ee3bd0751871243cddf8517c8ee17066 Mon Sep 17 00:00:00 2001
From: Adarsh-Chaubey03 <adarsh03chaubey@gmail.com>
Date: Sat, 26 Oct 2024 18:44:17 +0530
Subject: [PATCH 09/38] fly image updated

---
 fly.css  | 5 +++++
 fly.html | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/fly.css b/fly.css
index 51b76377..6e69468c 100644
--- a/fly.css
+++ b/fly.css
@@ -51,6 +51,11 @@
     transform: translateX(0);
   }
 }
+.preview-image {
+  width: 100%;
+  aspect-ratio: 3/1;
+  object-fit: cover;
+}
 
 .btn {
   padding: 10px 20px;
diff --git a/fly.html b/fly.html
index ed9f1471..fe1ca19a 100644
--- a/fly.html
+++ b/fly.html
@@ -38,7 +38,7 @@ <h1 class="section__header">
       <div style="display: flex; justify-content: center">
         <img
           src="img/Presentation1-removebg-preview.png"
-          style="width: 2000px; height: 500px"
+         class="preview-image"
           alt="header"
         />
       </div>

From 2173eb465c0bbfec9d6a03936f6aaa51ec0c5dc2 Mon Sep 17 00:00:00 2001
From: Adarsh-Chaubey03 <adarsh03chaubey@gmail.com>
Date: Sat, 26 Oct 2024 19:03:27 +0530
Subject: [PATCH 10/38] added link to footer text

---
 fly.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/fly.html b/fly.html
index fe1ca19a..1bf36a96 100644
--- a/fly.html
+++ b/fly.html
@@ -299,9 +299,9 @@ <h4>INFORMATION</h4>
         </div>
         <div class="footer__col">
           <h4>CONTACT</h4>
-          <p>Support</p>
-          <p>Media</p>
-          <p>Socials</p>
+         <a href="contact.html">Support</a> 
+         <a href="blog.html">Media</a> 
+         <a href="#">Social</a> 
         </div>
       </div>
       <div class="section__container footer__bar">

From 616c2c0171422474d1f67fe1317c43a55dc90002 Mon Sep 17 00:00:00 2001
From: Deepika Sharma <sharmadeepi200@gmail.com>
Date: Sat, 26 Oct 2024 20:06:31 +0530
Subject: [PATCH 11/38] Dark Mode to Service Page

Now the user can switch between light and dark mode.
---
 service.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/service.html b/service.html
index 07bcd6ff..6a74b07a 100644
--- a/service.html
+++ b/service.html
@@ -7,7 +7,7 @@
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="service.css" rel="stylesheet">
     <style>
-        /* dark mode */
+        /* dark mode css added*/
 
 body {
     background-color: white;

From 7fdc968b3796c167796aa5c1f0a2eb38f004dd95 Mon Sep 17 00:00:00 2001
From: Krish Patel <65026713+KrishPatel1205@users.noreply.github.com>
Date: Sat, 26 Oct 2024 20:22:31 +0530
Subject: [PATCH 12/38] Update style.css

---
 style.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/style.css b/style.css
index d151c3c0..9f2bc171 100644
--- a/style.css
+++ b/style.css
@@ -242,7 +242,7 @@ h3 {
 
 h4,
 h5 {
-  font-size: 1.8rem;
+  font-size: 2rem;
 }
 
 #logo-web {

From 2f924d05a4605a067cf4d445ea8a062f40b0adaa Mon Sep 17 00:00:00 2001
From: Krish Patel <65026713+KrishPatel1205@users.noreply.github.com>
Date: Sat, 26 Oct 2024 20:23:45 +0530
Subject: [PATCH 13/38] Update style.css

---
 style.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/style.css b/style.css
index 9f2bc171..0ab0a928 100644
--- a/style.css
+++ b/style.css
@@ -711,6 +711,10 @@ h2 {
   line-height: inherit;
 }
 
+.card p {
+  font-size: 1.5rem;
+}
+
 .card-icon {
   border-radius: 10px;
   background: #8b66b6;

From 52b3c60c1e5f8e7afb0b3e2e60fdf701705793f6 Mon Sep 17 00:00:00 2001
From: Deepika Sharma <sharmadeepi200@gmail.com>
Date: Sat, 26 Oct 2024 22:08:33 +0530
Subject: [PATCH 14/38] Added dark mode to Travel Service Page

---
 .vscode/settings.json |  2 +-
 service.css           | 47 +++++++++++++++++++++++++++++++
 service.html          | 65 ++++++++++++++++++++++++++++++++++++++++++-
 3 files changed, 112 insertions(+), 2 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index a0de46ff..85245c9e 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +1,3 @@
 {
-    "liveServer.settings.port": 5504
+    "liveServer.settings.port": 5505
 }
\ No newline at end of file
diff --git a/service.css b/service.css
index 3520544a..19afdb1b 100644
--- a/service.css
+++ b/service.css
@@ -28,3 +28,50 @@ body {
         margin-bottom: 20px;
     }
 }
+
+/* dark mode */
+
+body {
+    background-color: white;
+    color: black;
+    transition: background-color 0.3s, color 0.3s;
+}
+
+body.dark-mode {
+    background-color: #121212;
+    color: #ffffff;
+}
+
+header.dark-mode {
+    background-color: #1f1f1f;
+}
+
+.mode-toggle {
+    cursor: pointer;
+    border: none;
+    background: transparent;
+    outline: none;
+    padding: 10px;
+}
+
+.mode-toggle img {
+    width: 24px;
+    height: 24px;
+}
+
+.navbar {
+    background-color: #f0f0f0;
+    transition: background-color 0.3s;
+}
+
+body.dark-mode .navbar {
+    background-color: #333;
+}
+
+body.dark-mode .navbar a:hover {
+    color: #4C51BF;
+    transform: translateY(-2px);
+}
+
+
+
diff --git a/service.html b/service.html
index a1c70cfa..ced84f75 100644
--- a/service.html
+++ b/service.html
@@ -25,6 +25,12 @@ <h1 class="display-4">Travel Services</h1>
                     <li class="nav-item"><a class="nav-link" href="#hotels">Hotels</a></li>
                     <li class="nav-item"><a class="nav-link" href="#flights">Flights</a></li>
                     <li class="nav-item"><a class="nav-link" href="#cars">Car Rentals</a></li>
+                    <li>
+                        <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>
+                        </li>
                 </ul>
             </div>
         </div>
@@ -213,7 +219,64 @@ <h5>Follow Us</h5>
             </div>
         </div>
     </footer>
-
+    <script>
+        document.addEventListener("DOMContentLoaded", function () {
+          const hamburger = document.getElementById("hamburger");
+          const navList = document.getElementById("nav-links");
+          const closeBtn = document.getElementById("closeBtn");
+    
+          hamburger.addEventListener("click", function () {
+            navList.classList.toggle("active");
+          });
+    
+          closeBtn.addEventListener("click", function () {
+            navList.classList.remove("active");
+          });
+        });
+    
+       document.addEventListener("DOMContentLoaded", function() {
+         const modeToggle = document.getElementById("modeToggle");
+         const sunIcon = document.querySelector(".sun-icon");
+         const moonIcon = document.querySelector(".moon-icon");
+    
+         // Check saved theme in localStorage and apply it
+         const currentTheme = localStorage.getItem("theme") || "light";
+          if (currentTheme === "dark") {
+            document.body.classList.add("dark-mode");
+            sunIcon.style.display = "none";
+            moonIcon.style.display = "inline-block";
+         } else {
+            sunIcon.style.display = "inline-block";
+            moonIcon.style.display = "none";
+        }
+    
+    // Toggle between light and dark mode on button click
+    modeToggle.addEventListener("click", () => {
+        const isDarkMode = document.body.classList.toggle("dark-mode");
+    
+        // Apply dark mode styles to relevant sections
+        const sections = document.querySelectorAll('.about, .core-values, .team');
+        sections.forEach(section => {
+            if (isDarkMode) {
+                section.classList.add('dark-mode');
+            } else {
+                section.classList.remove('dark-mode');
+            }
+        });
+    
+        // Update icons and local storage
+        if (isDarkMode) {
+            sunIcon.style.display = "none";
+            moonIcon.style.display = "inline-block";
+            localStorage.setItem("theme", "dark");
+        } else {
+            sunIcon.style.display = "inline-block";
+            moonIcon.style.display = "none";
+            localStorage.setItem("theme", "light");
+        }
+    });
+    });
+      </script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
 </body>
 </html>
\ No newline at end of file

From 9068c8436c0c07717e6d22cdaa78ecd70789c5c6 Mon Sep 17 00:00:00 2001
From: efshaperveen <efshaperveen10@gmail.com>
Date: Sat, 26 Oct 2024 22:21:12 +0530
Subject: [PATCH 15/38] added validation field and tooltips in contact form

---
 contact.html | 41 +++++++++++++++++++++++++++++++++++++----
 1 file changed, 37 insertions(+), 4 deletions(-)

diff --git a/contact.html b/contact.html
index c5df49cb..1d7f95e6 100644
--- a/contact.html
+++ b/contact.html
@@ -65,6 +65,7 @@
         max-width: 100%;
         height: auto;
         max-height: 500px;
+        margin-top: 60px;
     }
     
     .form-group {
@@ -121,6 +122,34 @@
             min-width: 100%;
         }
     }
+     /* .form-group { 
+    position: relative;
+}  */
+
+.tooltip {
+    visibility: hidden;
+    background-color:  black;
+    color: #fff;
+    width: 200px;
+    text-align: center;
+    padding: 3px;
+    border-radius: 5px;
+    position: absolute;
+    z-index: 1;
+    /* bottom: 30%; Position above the input field */
+    top: 41%;
+    left: 60%;
+    transform: translateX(-50%);
+    opacity: 0;
+    transition: opacity 0.3s;
+    font-size: 12px;
+}
+
+.form-group:hover .tooltip {
+    visibility: visible;
+    opacity: 1;
+}
+
 
 </style>
 <body>
@@ -168,22 +197,26 @@ <h2>Contact Us</h2>
                         <form id="contactForm">
                             <div class="form-group">
                                 <label for="name">Name</label>
-                                <input type="text" id="fullname" name="fullname" placeholder="Your name">
+                                <input type="text" id="fullname" name="fullname" placeholder="Your name" required>
+                                <div class="tooltip">Please enter your full name here.</div> 
                                 <span class="error-message" id="nameError"></span>
                             </div>
                             <div class="form-group">
                                 <label for="email">Email</label>
-                                <input type="email" id="email" name="email" placeholder="Your email">
+                                <input type="email" id="email" name="email" placeholder="Your email" required>
+                                <div class="tooltip">Please enter a valid email like example@mail.com.</div>
                                 <span class="error-message" id="emailError"></span>
                             </div>
                             <div class="form-group">
                                 <label for="phone">Phone Number</label>
-                                <input type="tel" id="phone" name="phone" placeholder="Your phone number">
+                                <input type="tel" id="phone" name="phone" placeholder="Your phone number" required>
+                                <div class="tooltip">Please enter your phone number(10 digits).</div>
                                 <span class="error-message" id="phoneError"></span>
                             </div>
                             <div class="form-group">
                                 <label for="message">Message</label>
-                                <textarea id="message" name="message" placeholder="Your message"></textarea>
+                                <textarea id="message" name="message" placeholder="Your message" required></textarea>
+                                <div class="tooltip">Feel free to describe your message in detail.</div>
                                 <span class="error-message" id="messageError"></span>
                             </div>
                             <button type="submit">Send</button>

From c8c2e091b14e1440f782fa71b806864e1b357f38 Mon Sep 17 00:00:00 2001
From: Deepika Sharma <sharmadeepi200@gmail.com>
Date: Sat, 26 Oct 2024 22:23:16 +0530
Subject: [PATCH 16/38] Dark mode style added

---
 service.html | 46 ----------------------------------------------
 1 file changed, 46 deletions(-)

diff --git a/service.html b/service.html
index 0c1692d9..75644c2a 100644
--- a/service.html
+++ b/service.html
@@ -6,53 +6,7 @@
     <title>Travel Services</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="service.css" rel="stylesheet">
-    <style>
-        /* dark mode css added*/
 
-body {
-    background-color: white;
-    color: black;
-    transition: background-color 0.3s, color 0.3s;
-}
-
-body.dark-mode {
-    background-color: #121212;
-    color: #ffffff;
-}
-
-header.dark-mode {
-    background-color: #1f1f1f;
-}
-
-.mode-toggle {
-    cursor: pointer;
-    border: none;
-    background: transparent;
-    outline: none;
-    padding: 10px;
-}
-
-.mode-toggle img {
-    width: 24px;
-    height: 24px;
-}
-
-.navbar {
-    background-color: #f0f0f0;
-    transition: background-color 0.3s;
-}
-
-body.dark-mode .navbar {
-    background-color: #333;
-}
-
-body.dark-mode .navbar a:hover {
-    color: #4C51BF;
-    transform: translateY(-2px);
-}
-
-
-    </style>
 </head>
 <body>
     <header class="bg-primary text-white py-4">

From e8dff0573b34cfffd2054d08558fdc842d177610 Mon Sep 17 00:00:00 2001
From: Deepika Sharma <sharmadeepi200@gmail.com>
Date: Sat, 26 Oct 2024 22:27:29 +0530
Subject: [PATCH 17/38] Added dark theme to html file

---
 service.html | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/service.html b/service.html
index 75644c2a..572e5946 100644
--- a/service.html
+++ b/service.html
@@ -26,6 +26,12 @@ <h1 class="display-4">Travel Services</h1>
                     <li class="nav-item"><a class="nav-link" href="#hotels">Hotels</a></li>
                     <li class="nav-item"><a class="nav-link" href="#flights">Flights</a></li>
                     <li class="nav-item"><a class="nav-link" href="#cars">Car Rentals</a></li>
+                    <li>
+                        <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>
+                        </li>
             
                 </ul>
             </div>

From 95af361dc00b0d8f56e36a0af8c10587b3244eb6 Mon Sep 17 00:00:00 2001
From: Deepika Sharma <sharmadeepi200@gmail.com>
Date: Sat, 26 Oct 2024 22:33:28 +0530
Subject: [PATCH 18/38] Added js to service page

---
 service.html | 57 ----------------------------------------------------
 1 file changed, 57 deletions(-)

diff --git a/service.html b/service.html
index 572e5946..589cb993 100644
--- a/service.html
+++ b/service.html
@@ -221,64 +221,7 @@ <h5>Follow Us</h5>
             </div>
         </div>
     </footer>
-    <script>
-        document.addEventListener("DOMContentLoaded", function () {
-          const hamburger = document.getElementById("hamburger");
-          const navList = document.getElementById("nav-links");
-          const closeBtn = document.getElementById("closeBtn");
-    
-          hamburger.addEventListener("click", function () {
-            navList.classList.toggle("active");
-          });
-    
-          closeBtn.addEventListener("click", function () {
-            navList.classList.remove("active");
-          });
-        });
-    
-       document.addEventListener("DOMContentLoaded", function() {
-         const modeToggle = document.getElementById("modeToggle");
-         const sunIcon = document.querySelector(".sun-icon");
-         const moonIcon = document.querySelector(".moon-icon");
-    
-         // Check saved theme in localStorage and apply it
-         const currentTheme = localStorage.getItem("theme") || "light";
-          if (currentTheme === "dark") {
-            document.body.classList.add("dark-mode");
-            sunIcon.style.display = "none";
-            moonIcon.style.display = "inline-block";
-         } else {
-            sunIcon.style.display = "inline-block";
-            moonIcon.style.display = "none";
-        }
-    
-    // Toggle between light and dark mode on button click
-    modeToggle.addEventListener("click", () => {
-        const isDarkMode = document.body.classList.toggle("dark-mode");
-    
-        // Apply dark mode styles to relevant sections
-        const sections = document.querySelectorAll('.about, .core-values, .team');
-        sections.forEach(section => {
-            if (isDarkMode) {
-                section.classList.add('dark-mode');
-            } else {
-                section.classList.remove('dark-mode');
-            }
-        });
     
-        // Update icons and local storage
-        if (isDarkMode) {
-            sunIcon.style.display = "none";
-            moonIcon.style.display = "inline-block";
-            localStorage.setItem("theme", "dark");
-        } else {
-            sunIcon.style.display = "inline-block";
-            moonIcon.style.display = "none";
-            localStorage.setItem("theme", "light");
-        }
-    });
-    });
-      </script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
      <script>
         document.addEventListener("DOMContentLoaded", function () {

From c5b2b58df6c77699233be7313c2b7fb90c6d1478 Mon Sep 17 00:00:00 2001
From: akash70629 <akash70629@gmail.com>
Date: Sat, 26 Oct 2024 23:22:08 +0530
Subject: [PATCH 19/38] calender validation added

---
 book.html | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/book.html b/book.html
index c3a3bb81..bc155e09 100644
--- a/book.html
+++ b/book.html
@@ -378,6 +378,39 @@ <h2>Book Your Trip</h2>
             <input type="date" id="dates" name="dates" required />
             <div class="error" id="datesError"></div>
           </div>
+
+          <script>
+            // Function to set the minimum date to today
+            function setMinDate() {
+                const today = new Date();
+                const dd = String(today.getDate()).padStart(2, '0');
+                const mm = String(today.getMonth() + 1).padStart(2, '0'); // January is 0!
+                const yyyy = today.getFullYear();
+        
+                // Format the date as YYYY-MM-DD
+                const minDate = yyyy + '-' + mm + '-' + dd;
+                document.getElementById("dates").setAttribute("min", minDate);
+            }
+        
+            // Call the function when the document is loaded
+            document.addEventListener("DOMContentLoaded", setMinDate);
+        
+            // Optional: Validate the date on form submission
+            document.querySelector("form").addEventListener("submit", function(event) {
+                const selectedDate = new Date(document.getElementById("dates").value);
+                const today = new Date();
+                today.setHours(0, 0, 0, 0); // Set time to midnight for comparison
+        
+                if (selectedDate < today) {
+                    event.preventDefault(); // Prevent form submission
+                    document.getElementById("datesError").innerText = "Please select a date that is today or in the future.";
+                } else {
+                    document.getElementById("datesError").innerText = ""; // Clear any previous error message
+                }
+            });
+        </script>
+
+
           <div class="form-group">
             <label for="transport">Mode of Transport:</label>
             <select id="transport" name="transport" required>

From 26d8640e3f9e939d1f2f17cdcf48a4e502ab3729 Mon Sep 17 00:00:00 2001
From: alolika bhowmik <152315710+alo7lika@users.noreply.github.com>
Date: Sun, 27 Oct 2024 00:48:06 +0530
Subject: [PATCH 20/38] Update README.md

---
 README.md | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/README.md b/README.md
index c57089ae..38d19f94 100644
--- a/README.md
+++ b/README.md
@@ -65,6 +65,20 @@
 <!--Line-->
 <img src="https://user-images.githubusercontent.com/74038190/212284100-561aa473-3905-4a80-b561-0d28506553ee.gif" width="900">
 
+# 📋 Table of Contents
+
+- [🏞️ BuddyTrail](#-buddytrail)
+- [🌟 Project Badges](#-project-badges)
+- [📸 Website Preview](#-website-preview)
+- [🚀 Features](#-features)
+- [⚙️ Getting Started with the Code](#-getting-started-with-the-code)
+- [🛠️ Technologies Used](#-technologies-used)
+- [🎉 Welcome Contributors!!](#-welcome-contributors-)
+- [📁 Project Structure](#project-structure-)
+- [❤️ Our Contributors](#-our-contributors)
+- [👥 Team](#-team)
+- [⭐️ Support the Project](#-support-the-project)
+
 # 📸 Website Preview
 
 

From 9361d26054fc9fa4b44cbe613f8cc2e7ac5bec9f Mon Sep 17 00:00:00 2001
From: Krish Chothani <143370415+KrishChothani@users.noreply.github.com>
Date: Sun, 27 Oct 2024 01:23:17 +0530
Subject: [PATCH 21/38] Fix the Bug in Content writing

---
 index.html | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index d4364865..bd95b45f 100644
--- a/index.html
+++ b/index.html
@@ -1654,7 +1654,7 @@ <h2>Upload Content</h2>
 
         <section id="content">
           <h2>Content</h2>
-          <input id="content-input" type="text">
+          <textarea id="content-input"></textarea>
           <ul id="content-list"></ul>
         </section>
       </main>
@@ -1691,6 +1691,7 @@ <h2>Content</h2>
   width: 100%; /* Ensure full width inside the container */
   border-radius: 8px;
   outline: none;
+  resize: vertical;
 }
 
 /* Header styling */

From d939979874f4d135728c7cfada4528efda7e4721 Mon Sep 17 00:00:00 2001
From: Irtesaam <atfimdirtesaam@gmail.com>
Date: Sun, 27 Oct 2024 07:02:32 +0530
Subject: [PATCH 22/38] added dark mode to book now page

---
 book.html | 899 +++++++++++++++++++++++++++---------------------------
 1 file changed, 446 insertions(+), 453 deletions(-)

diff --git a/book.html b/book.html
index c3a3bb81..03e806b4 100644
--- a/book.html
+++ b/book.html
@@ -1,502 +1,495 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+
+<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 a travel agency website that helps you pick out your holiday vacation" />
     <meta name="robots" content="index,follow" />
     <link rel="stylesheet" href="RatingStyle.css" />
     <link rel="stylesheet" href="style.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 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="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" />
     <title>Book Now - BuddyTrail</title>
     <style>
-      .error {
-        color: red;
-        font-size: 1.2rem;
-        margin-top: 5px;
-      }
-      /* General navigation styles */
-      nav {
-        display: flex;
-        justify-content: space-evenly; /* Aligns nav items evenly */
-      }
-
-      nav ul {
-        list-style-type: none; /* Removes bullet points */
-        padding: 0; /* Removes padding */
-      }
-
-      /* Navigation link styles */
-      nav ul li {
-        display: inline; /* Displays list items in a row */
-      }
-
-      nav ul li a {
-        font-size: 2.5rem; /* Font size for nav links */
-        color: #fffdfd; /* Default color */
-        transition: color 0.3s ease; /* Smooth color transition */
-      }
-
-      /* Hover and active link styles */
-      nav ul li a:hover,
-      nav ul li a:active {
-        color: #ff5733; /* Color on hover or active state */
-      }
-
-      /* Optional: Style for icons specifically */
-      .social-icons a {
-        color: #ffffff; /* Default color for social icons */
-        transition: color 0.3s ease; /* Smooth color transition */
-      }
-
-      .social-icons a:hover,
-      .social-icons a:active {
-        color: #ff5733; /* Color for social icons on hover or active state */
-      }
-
-      /* Additional styles */
-      .nav-elem {
-        font-size: 1.8rem; /* Font size for additional navigation elements */
-        width: 80vw; /* Full viewport width */
-        margin-left: 20px; /* Left margin */
-        display: flex; /* Flexbox display */
-        justify-content: space-evenly;
-        align-items: center;
-        padding: 20px;
-        /* Even spacing between items */
-      }
-
-      .logo {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-      }
-
-      .locations_ h2 {
-        font-size: 4rem; /* Font size for location headings */
-        color: black; /* Color for location headings */
-      }
-
-      .benefits {
-        color: #f9f9f9; /* Color for benefits text */
-      }
-
-      .benefits h2 {
-        font-size: 4rem; /* Font size for benefits headings */
-        margin-bottom: 50px; /* Margin below benefits headings */
-        text-shadow: 0 0 2px rgb(110, 110, 110); /* Text shadow for benefits headings */
-      }
-
-      footer {
-        padding-top: 50px; /* Top padding for footer */
-        padding-bottom: 20px; /* Bottom padding for footer */
-      }
-
-      .footer-bottom {
-        margin-top: 20px;
-      }
+        .error {
+            color: red;
+            font-size: 1.2rem;
+            margin-top: 5px;
+        }
+
+        /* General navigation styles */
+        nav {
+            display: flex;
+            justify-content: space-evenly;
+            /* Aligns nav items evenly */
+        }
+
+        nav ul {
+            list-style-type: none;
+            /* Removes bullet points */
+            padding: 0;
+            /* Removes padding */
+        }
+
+        /* Navigation link styles */
+        nav ul li {
+            display: inline;
+            /* Displays list items in a row */
+        }
+
+        nav ul li a {
+            font-size: 2.5rem;
+            /* Font size for nav links */
+            color: #fffdfd;
+            /* Default color */
+            transition: color 0.3s ease;
+            /* Smooth color transition */
+        }
+
+        /* Hover and active link styles */
+        nav ul li a:hover,
+        nav ul li a:active {
+            color: #ff5733;
+            /* Color on hover or active state */
+        }
+
+        /* Optional: Style for icons specifically */
+        .social-icons a {
+            color: #ffffff;
+            /* Default color for social icons */
+            transition: color 0.3s ease;
+            /* Smooth color transition */
+        }
+
+        .popular-destination {
+            color: initial;
+            /* or any default color */
+        }
+
+        /* Dark mode styles */
+        .dark-mode .popular-destinations {
+            color: #ffa500;
+        }
+
+        /* Ensure the welcome text remains unchanged */
+        .dark-mode .welcome-text {
+            color: initial !important;
+            /* or any default color */
+        }
+
+        .social-icons a:hover,
+        .social-icons a:active {
+            color: #ff5733;
+            /* Color for social icons on hover or active state */
+        }
+
+        /* Additional styles */
+        .nav-elem {
+            font-size: 1.8rem;
+            /* Font size for additional navigation elements */
+            width: 80vw;
+            /* Full viewport width */
+            margin-left: 20px;
+            /* Left margin */
+            display: flex;
+            /* Flexbox display */
+            justify-content: space-evenly;
+            align-items: center;
+            padding: 20px;
+            /* Even spacing between items */
+        }
+
+        .logo {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+        }
+
+        .locations_ h2 {
+            font-size: 4rem;
+            /* Font size for location headings */
+            color: black;
+            /* Color for location headings */
+        }
+
+        .benefits {
+            color: #f9f9f9;
+            /* Color for benefits text */
+        }
+
+        .benefits h2 {
+            font-size: 4rem;
+            /* Font size for benefits headings */
+            margin-bottom: 50px;
+            /* Margin below benefits headings */
+            text-shadow: 0 0 2px rgb(110, 110, 110);
+            /* Text shadow for benefits headings */
+        }
+
+        footer {
+            padding-top: 50px;
+            /* Top padding for footer */
+            padding-bottom: 20px;
+            /* Bottom padding for footer */
+        }
+
+        .footer-bottom {
+            margin-top: 20px;
+        }
     </style>
-  </head>
-  <body>
+</head>
+
+<body>
     <header class="main-head">
-      <nav>
-        <div class="logo">
-          <img src="img/logo.png" id="logo-web" />
-          <h1 id="logo"><a href="index.html">BuddyTrail</a></h1>
-        </div>
+        <nav>
+            <div class="logo">
+                <img src="img/logo.png" id="logo-web" />
+                <h1 id="logo"><a href="index.html">BuddyTrail</a></h1>
+            </div>
+
+            <ul id="nav-list">
+                <span class="dropdown-close-btn" id="closeBtn">×</span>
+
+                <li><a href="./index.html" class="navhover">Home</a></li>
+                <li><a href="./team.html" class="navhover">Team</a></li>
+                <li><a href="./blog.html" class="navhover">Blog</a></li>
+                <li><a href="./F&Q.html" class="navhover">F&Q</a></li>
+                <li><a href="#locations_" class="navhover">Location</a></li>
+                <li><a href="#benefits" class="navhover">Benefits</a></li>
+                <li><a href="contact.html" class="navhover">Contact</a></li>
+                <li><a href="#booking-form" class="navhover">Book Now</a></li>
+                <li><a href="./auth.html" class="navhover">SignIn</a></li>
+                <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>
+            </ul>
+        </nav>
 
-        <ul id="nav-list">
-          <span class="dropdown-close-btn" id="closeBtn">×</span>
-
-          <li><a href="./index.html" class="navhover">Home</a></li>
-          <li><a href="./team.html" class="navhover">Team</a></li>
-          <li><a href="./blog.html" class="navhover">Blog</a></li>
-          <li><a href="./F&Q.html" class="navhover">F&Q</a></li>
-          <li><a href="#locations_" class="navhover">Location</a></li>
-          <li><a href="#benefits" class="navhover">Benefits</a></li>
-          <li><a href="contact.html" class="navhover">Contact</a></li>
-          <li><a href="#booking-form" class="navhover">Book Now</a></li>
-          <li><a href="./auth.html" class="navhover">SignIn</a></li>
-        </ul>
-      </nav>
-
-      <!-- Hamburger button for mobile -->
-      <button class="hamburger" id="hamburger">☰</button>
+        <!-- Hamburger button for mobile -->
+        <button class="hamburger" id="hamburger">☰</button>
     </header>
 
     <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");
-          }
+        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");
+                }
+            });
+
+            // Dark and light mode toggle logic
+            const modeToggle = document.getElementById("modeToggle");
+            const sunIcon = document.querySelector(".sun-icon");
+            const moonIcon = document.querySelector(".moon-icon");
+
+            modeToggle.addEventListener("click", function () {
+                document.body.classList.toggle("dark-mode");
+                document.body.classList.toggle("light-mode");
+                const darkelem = document.querySelectorAll("#darkbtn");
+                const h1dark = document.querySelectorAll("#h1darkbtn");
+                const cardbtn = document.querySelectorAll("#btn a");
+
+                if (document.body.classList.contains("dark-mode")) {
+                    sunIcon.style.display = "none";
+                    moonIcon.style.display = "inline-block";
+                    localStorage.setItem("theme", "dark");
+                    darkelem.forEach((elem) => (elem.style.color = "white"));
+                    cardbtn.forEach((elem) => (elem.style.color = "white"));
+                    h1dark.forEach((darkbtn) => (darkbtn.style.color = "#FFA500"));
+                } else {
+                    sunIcon.style.display = "inline-block";
+                    moonIcon.style.display = "none";
+                    localStorage.setItem("theme", "light");
+                    darkelem.forEach((elem) => (elem.style.color = "gray"));
+                    h1dark.forEach((darkbtn) => (darkbtn.style.color = "#0057B3"));
+                    cardbtn.forEach((elem) => (elem.style.color = "black"));
+                }
+            });
         });
-
-        // Dark and light mode toggle logic
-        const modeToggle = document.getElementById("modeToggle");
-        const sunIcon = document.querySelector(".sun-icon");
-        const moonIcon = document.querySelector(".moon-icon");
-
-        modeToggle.addEventListener("click", function () {
-          document.body.classList.toggle("dark-mode");
-          document.body.classList.toggle("light-mode");
-          const darkelem = document.querySelectorAll("#darkbtn");
-          const h1dark = document.querySelectorAll("#h1darkbtn");
-          const cardbtn = document.querySelectorAll("#btn a");
-
-          if (document.body.classList.contains("dark-mode")) {
-            sunIcon.style.display = "none";
-            moonIcon.style.display = "inline-block";
-            localStorage.setItem("theme", "dark");
-            darkelem.forEach((elem) => (elem.style.color = "white"));
-            cardbtn.forEach((elem) => (elem.style.color = "white"));
-            h1dark.forEach((darkbtn) => (darkbtn.style.color = "#FFA500"));
-          } else {
-            sunIcon.style.display = "inline-block";
-            moonIcon.style.display = "none";
-            localStorage.setItem("theme", "light");
-            darkelem.forEach((elem) => (elem.style.color = "gray"));
-            h1dark.forEach((darkbtn) => (darkbtn.style.color = "#0057B3"));
-            cardbtn.forEach((elem) => (elem.style.color = "black"));
-          }
-        });
-      });
     </script>
 
     <!-- Header ends -->
     <main>
-      <section class="hero">
-        <h2>Welcome to BuddyTrail</h2>
-      </section>
-
-      <section id="locations_" class="locations_">
-        <h2>Popular Destinations</h2>
-        <div class="location-cards">
-          <div
-            class="location-card"
-            style="
+        <section class="hero">
+            <h2 class="welcome-text">Welcome to BuddyTrail</h2>
+        </section>
+
+        <section id="locations_" class="locations_">
+            <h2 class="popular-destinations">Popular Destinations</h2>
+            <div class="location-cards">
+                <div class="location-card" style="
               background-image: url('https://images.unsplash.com/photo-1489516408517-0c0a15662682?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
-            "
-          >
-            <h3>Dubai</h3>
-            <ul>
-              <li>Flight To Dubai</li>
-              <li>
-                Save 20% on round-trip flights to Dubai. Limited time offer!
-              </li>
-            </ul>
-            <p><strong>Price:</strong> ₹20,000 <del>₹25,000</del></p>
-          </div>
-          <div
-            class="location-card"
-            style="
+            ">
+                    <h3>Dubai</h3>
+                    <ul>
+                        <li>Flight To Dubai</li>
+                        <li>
+                            Save 20% on round-trip flights to Dubai. Limited time offer!
+                        </li>
+                    </ul>
+                    <p><strong>Price:</strong> ₹20,000 <del>₹25,000</del></p>
+                </div>
+                <div class="location-card" style="
               background-image: url('https://plus.unsplash.com/premium_photo-1697729701846-e34563b06d47?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
-            "
-          >
-            <h3>Goa</h3>
-            <ul>
-              <li>Luxury Stay in Goa</li>
-              <li>
-                Get 30% off on a 5-star hotel stay in Goa. Enjoy the best of
-                luxury at an affordable price!
-              </li>
-            </ul>
-            <p><strong>Price:</strong> ₹10,500 <del>₹15,000</del> </p>
-          </div>
-          <div
-            class="location-card"
-            style="
+            ">
+                    <h3>Goa</h3>
+                    <ul>
+                        <li>Luxury Stay in Goa</li>
+                        <li>
+                            Get 30% off on a 5-star hotel stay in Goa. Enjoy the best of
+                            luxury at an affordable price!
+                        </li>
+                    </ul>
+                    <p><strong>Price:</strong> ₹10,500 <del>₹15,000</del> </p>
+                </div>
+                <div class="location-card" style="
               background-image: url('https://images.unsplash.com/photo-1679022579345-72dc76a518f6?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
-            "
-          >
-            <h3>Kerala</h3>
-            <ul>
-              <li>Kerala Backwaters Package</li>
-              <li>
-                Experience the serene beauty of Kerala's backwaters with a
-                4-day, 3-night package. All-inclusive deal!
-              </li>
-            </ul>
-            <p><strong>Price:</strong> ₹10,500 <del>₹15,000</del> </p>
-          </div>
-          <div
-            class="location-card"
-            style="
+            ">
+                    <h3>Kerala</h3>
+                    <ul>
+                        <li>Kerala Backwaters Package</li>
+                        <li>
+                            Experience the serene beauty of Kerala's backwaters with a
+                            4-day, 3-night package. All-inclusive deal!
+                        </li>
+                    </ul>
+                    <p><strong>Price:</strong> ₹10,500 <del>₹15,000</del> </p>
+                </div>
+                <div class="location-card" style="
               background-image: url('https://images.unsplash.com/photo-1502602898657-3e91760cbb34?q=80&w=2073&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
-            "
-          >
-            <h3>Paris</h3>
-            <ul>
-              <li>Paris Romantic Getaway</li>
-              <li>
-                Enjoy a romantic trip to Paris with your loved one. Special
-                package for couples!
-              </li>
-            </ul>
-            <p><strong>Price:</strong> ₹10,500 <del>₹15,000</del> </p>
-          </div>
-          <div
-            class="location-card"
-            style="
+            ">
+                    <h3>Paris</h3>
+                    <ul>
+                        <li>Paris Romantic Getaway</li>
+                        <li>
+                            Enjoy a romantic trip to Paris with your loved one. Special
+                            package for couples!
+                        </li>
+                    </ul>
+                    <p><strong>Price:</strong> ₹10,500 <del>₹15,000</del> </p>
+                </div>
+                <div class="location-card" style="
               background-image: url('https://images.unsplash.com/photo-1555400038-63f5ba517a47?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
-            "
-          >
-            <h3>Bali</h3>
-            <ul>
-              <li>Adventure in Bali</li>
-              <li>
-                Get 30% off on a 5-star hotel stay in Goa. Enjoy the best of
-                luxury at an affordable price!
-              </li>
-            </ul>
-            <p><strong>Price:</strong> ₹10,500 <del>₹15,000</del> </p>
-          </div>
-
-          <div
-            class="location-card"
-            style="
+            ">
+                    <h3>Bali</h3>
+                    <ul>
+                        <li>Adventure in Bali</li>
+                        <li>
+                            Get 30% off on a 5-star hotel stay in Goa. Enjoy the best of
+                            luxury at an affordable price!
+                        </li>
+                    </ul>
+                    <p><strong>Price:</strong> ₹10,500 <del>₹15,000</del> </p>
+                </div>
+
+                <div class="location-card" style="
               background-image: url('https://images.unsplash.com/photo-1547131303-543b40443e96?q=80&w=1797&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
-            "
-          >
-            <h3>Switzerland</h3>
-            <ul>
-              <li>Adventure Switzerland</li>
-              <li>
-                Get 30% off on a 5-star hotel stay in Switzerland. Enjoy the
-                best of luxury at an affordable price!
-              </li>
-            </ul>
-            <p><strong>Price:</strong> ₹10,500 <del>₹15,000</del> </p>
-          </div>
-
-          <div
-            class="location-card"
-            style="
+            ">
+                    <h3>Switzerland</h3>
+                    <ul>
+                        <li>Adventure Switzerland</li>
+                        <li>
+                            Get 30% off on a 5-star hotel stay in Switzerland. Enjoy the
+                            best of luxury at an affordable price!
+                        </li>
+                    </ul>
+                    <p><strong>Price:</strong> ₹10,500 <del>₹15,000</del> </p>
+                </div>
+
+                <div class="location-card" style="
               background-image: url('https://images.unsplash.com/photo-1520175480921-4edfa2983e0f?q=80&w=2067&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
-            "
-          >
-            <h3>Italy</h3>
-            <ul>
-              <li>Italy Most beautiful countries in the world</li>
-              <li>
-                Enjoy a romantic trip to Italy with your loved one. Special
-                package for couples!
-              </li>
-            </ul>
-            <p><strong>Price:</strong> ₹10,500 <del>₹15,000</del> </p>
-          </div>
-
-          <div
-            class="location-card"
-            style="
+            ">
+                    <h3>Italy</h3>
+                    <ul>
+                        <li>Italy Most beautiful countries in the world</li>
+                        <li>
+                            Enjoy a romantic trip to Italy with your loved one. Special
+                            package for couples!
+                        </li>
+                    </ul>
+                    <p><strong>Price:</strong> ₹10,500 <del>₹15,000</del> </p>
+                </div>
+
+                <div class="location-card" style="
               background-image: url('https://plus.unsplash.com/premium_photo-1661963145672-a2bd28eba0fb?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
-            "
-          >
-            <h3>Greece</h3>
-            <ul>
-              <li>Greece has the longest coastline in Europe</li>
-              <li>
-                Get 30% off on a 5-star hotel stay in Switzerland. Enjoy the
-                best of luxury at an affordable price!
-              </li>
+            ">
+                    <h3>Greece</h3>
+                    <ul>
+                        <li>Greece has the longest coastline in Europe</li>
+                        <li>
+                            Get 30% off on a 5-star hotel stay in Switzerland. Enjoy the
+                            best of luxury at an affordable price!
+                        </li>
+                    </ul>
+                    <p><strong>Price:</strong> ₹10,500 <del>₹15,000</del> </p>
+                </div>
+            </div>
+        </section>
+
+        <section id="benefits" class="benefits">
+            <h2>Why Travel with BuddyTrail?</h2>
+            <ul class="benifits-list">
+                <li>Exclusive discounts and travel packages</li>
+                <li>24/7 customer support for a hassle-free experience</li>
+                <li>Handpicked destinations and personalized itineraries</li>
+                <li>Safe and secure travel arrangements</li>
             </ul>
-            <p><strong>Price:</strong> ₹10,500 <del>₹15,000</del> </p>
-          </div>
-        </div>
-      </section>
-
-      <section id="benefits" class="benefits">
-        <h2>Why Travel with BuddyTrail?</h2>
-        <ul class="benifits-list">
-          <li>Exclusive discounts and travel packages</li>
-          <li>24/7 customer support for a hassle-free experience</li>
-          <li>Handpicked destinations and personalized itineraries</li>
-          <li>Safe and secure travel arrangements</li>
-        </ul>
-        <div class="call-to-action">
-          <h2>Ready to embark on your next adventure?</h2>
-          <h2>Let BuddyTrail take you there!</h2>
-        </div>
-      </section>
-
-      <section id="booking-form" class="booking-form">
-        <h2>Book Your Trip</h2>
-        <form
-          id="bookingForm"
-          action="#"
-          method="post"
-          onsubmit="return validateForm()"
-          novalidate
-        >
-          <div class="form-group">
-            <label for="place">Place of Visit:</label>
-            <input
-              type="text"
-              id="place"
-              name="place"
-              placeholder="Enter your destination"
-              required
-            />
-            <div class="error" id="placeError"></div>
-          </div>
-          <div class="form-group">
-            <label for="dates">Dates of Staying:</label>
-            <input type="date" id="dates" name="dates" required />
-            <div class="error" id="datesError"></div>
-          </div>
-          <div class="form-group">
-            <label for="transport">Mode of Transport:</label>
-            <select id="transport" name="transport" required>
-              <option value="" disabled selected>
-                Select mode of transport
-              </option>
-              <option value="air">Air</option>
-              <option value="train">Train</option>
-              <option value="bus">Bus</option>
-              <option value="car">Car</option>
-            </select>
-            <div class="error" id="transportError"></div>
-          </div>
-          <button type="submit" class="btn">Book Now</button>
-        </form>
-      </section>
+            <div class="call-to-action">
+                <h2>Ready to embark on your next adventure?</h2>
+                <h2>Let BuddyTrail take you there!</h2>
+            </div>
+        </section>
+
+        <section id="booking-form" class="booking-form">
+            <h2>Book Your Trip</h2>
+            <form id="bookingForm" action="#" method="post" onsubmit="return validateForm()" novalidate>
+                <div class="form-group">
+                    <label for="place">Place of Visit:</label>
+                    <input type="text" id="place" name="place" placeholder="Enter your destination" required />
+                    <div class="error" id="placeError"></div>
+                </div>
+                <div class="form-group">
+                    <label for="dates">Dates of Staying:</label>
+                    <input type="date" id="dates" name="dates" required />
+                    <div class="error" id="datesError"></div>
+                </div>
+                <div class="form-group">
+                    <label for="transport">Mode of Transport:</label>
+                    <select id="transport" name="transport" required>
+                        <option value="" disabled selected>
+                            Select mode of transport
+                        </option>
+                        <option value="air">Air</option>
+                        <option value="train">Train</option>
+                        <option value="bus">Bus</option>
+                        <option value="car">Car</option>
+                    </select>
+                    <div class="error" id="transportError"></div>
+                </div>
+                <button type="submit" class="btn">Book Now</button>
+            </form>
+        </section>
     </main>
 
     <footer>
-      <div class="footer-container">
-        <div class="footer-column">
-          <h3>About Us</h3>
-          <p>
-            We are a team of passionate developers creating amazing web
-            experiences.
-          </p>
-        </div>
-        <div class="footer-column">
-          <h3>Quick Links</h3>
-          <ul>
-            <li><a href="index.html">Home</a></li>
-            <li><a href="about.html">About</a></li>
-            <li><a href="service.html">Services</a></li>
-            <li><a href="contact.html">Contact</a></li>
-            <li><a href="./book.html">Book</a></li>
-            <li><a href="./F&Q.html">F&Q</a></li>
-          </ul>
-        </div>
-        <div class="footer-column">
-          <h3>Contact Us</h3>
-          <p>Email: info@example.com</p>
-          <p>Phone: +123 456 7890</p>
-        </div>
-        <div class="footer-column">
-          <h3>Follow Us</h3>
-          <div class="social-icons">
-            <a href="https://discord.com/invite/priyaghosal"
-              ><i class="fa-brands fa-discord"></i
-            ></a>
-            <a href="https://x.com/https://twitter.com/PriyaGhosa39968"
-              ><i class="fa-brands fa-x-twitter"></i
-            ></a>
-            <a href="https://github.com/PriyaGhosal/BuddyTrail"
-              ><i class="fab fa-github"></i
-            ></a>
-            <a href="https://www.linkedin.com/in/priya-ghosal-785771286/"
-              ><i class="fab fa-linkedin-in"></i
-            ></a>
-          </div>
+        <div class="footer-container">
+            <div class="footer-column">
+                <h3>About Us</h3>
+                <p>
+                    We are a team of passionate developers creating amazing web
+                    experiences.
+                </p>
+            </div>
+            <div class="footer-column">
+                <h3>Quick Links</h3>
+                <ul>
+                    <li><a href="index.html">Home</a></li>
+                    <li><a href="about.html">About</a></li>
+                    <li><a href="service.html">Services</a></li>
+                    <li><a href="contact.html">Contact</a></li>
+                    <li><a href="./book.html">Book</a></li>
+                    <li><a href="./F&Q.html">F&Q</a></li>
+                </ul>
+            </div>
+            <div class="footer-column">
+                <h3>Contact Us</h3>
+                <p>Email: info@example.com</p>
+                <p>Phone: +123 456 7890</p>
+            </div>
+            <div class="footer-column">
+                <h3>Follow Us</h3>
+                <div class="social-icons">
+                    <a href="https://discord.com/invite/priyaghosal"><i class="fa-brands fa-discord"></i></a>
+                    <a href="https://x.com/https://twitter.com/PriyaGhosa39968"><i
+                            class="fa-brands fa-x-twitter"></i></a>
+                    <a href="https://github.com/PriyaGhosal/BuddyTrail"><i class="fab fa-github"></i></a>
+                    <a href="https://www.linkedin.com/in/priya-ghosal-785771286/"><i class="fab fa-linkedin-in"></i></a>
+                </div>
+            </div>
         </div>
-      </div>
 
-      <div class="footer-bottom">
-        <p>&copy; 2024 Buddy Trail. All rights reserved.</p>
-      </div>
+        <div class="footer-bottom">
+            <p>&copy; 2024 Buddy Trail. All rights reserved.</p>
+        </div>
     </footer>
     <script>
-      function validateForm() {
-        let valid = true;
-
-        // Clear previous error messages
-        document.getElementById("placeError").innerText = "";
-        document.getElementById("datesError").innerText = "";
-        document.getElementById("transportError").innerText = "";
-
-        // Validate Place of Visit
-        const place = document.getElementById("place").value.trim();
-        if (place === "") {
-          document.getElementById("placeError").innerText =
-            "Please enter a place of visit.";
-          valid = false;
+        function validateForm() {
+            let valid = true;
+
+            // Clear previous error messages
+            document.getElementById("placeError").innerText = "";
+            document.getElementById("datesError").innerText = "";
+            document.getElementById("transportError").innerText = "";
+
+            // Validate Place of Visit
+            const place = document.getElementById("place").value.trim();
+            if (place === "") {
+                document.getElementById("placeError").innerText =
+                    "Please enter a place of visit.";
+                valid = false;
+            }
+
+            // Validate Dates of Staying
+            const dates = document.getElementById("dates").value;
+            if (dates === "") {
+                document.getElementById("datesError").innerText =
+                    "Please select your dates of stay.";
+                valid = false;
+            }
+
+            // Validate Mode of Transport
+            const transport = document.getElementById("transport").value;
+            if (transport === "") {
+                document.getElementById("transportError").innerText =
+                    "Please select a mode of transport.";
+                valid = false;
+            }
+
+            return valid;
         }
+    </script>
 
-        // Validate Dates of Staying
-        const dates = document.getElementById("dates").value;
-        if (dates === "") {
-          document.getElementById("datesError").innerText =
-            "Please select your dates of stay.";
-          valid = false;
-        }
+    <div class="gtranslate_wrapper"></div>
+
+    <script>
 
-        // Validate Mode of Transport
-        const transport = document.getElementById("transport").value;
-        if (transport === "") {
-          document.getElementById("transportError").innerText =
-            "Please select a mode of transport.";
-          valid = false;
+        window.gtranslateSettings = {
+            "default_language": "en",
+            "detect_browser_language": true,
+            "wrapper_selector": ".gtranslate_wrapper"
         }
 
-        return valid;
-      }
     </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
-    src="https://cdn.gtranslate.net/widgets/latest/float.js"
-    defer
-  ></script>
+</body>
 
-  </body>
 </html>

From 407134e220253d514d3d2454e6de303422b5fec6 Mon Sep 17 00:00:00 2001
From: Irtesaam <atfimdirtesaam@gmail.com>
Date: Sun, 27 Oct 2024 08:14:18 +0530
Subject: [PATCH 23/38] fixed warnings & errors in console due to google API

---
 index.html | 49 +++++++++++++++++++------------------------------
 script.js  |  1 -
 2 files changed, 19 insertions(+), 31 deletions(-)

diff --git a/index.html b/index.html
index 73e83eb3..ece0ae41 100644
--- a/index.html
+++ b/index.html
@@ -41,7 +41,7 @@
        border-radius:8px;
        padding: 10px 8px 4px 8px;
      }
-      
+
     /* Button Styling */
     .btn {
       background-color: #007bff; /* Primary button color */
@@ -230,7 +230,7 @@
 .card.inview {
   opacity: 1;
   transform: translateY(0);
-  
+
 }
 .card.inview header1 {
       padding: 10px 8px 4px 8px;
@@ -312,7 +312,7 @@
     background-color: rgba(0, 0, 0, 0.9);
     z-index: 1000;
   }
-  
+
   /* Wrapper for the logo and loader */
   .loader-wrapper {
     position: relative;
@@ -322,7 +322,7 @@
     justify-content: center;
     align-items: center;
   }
-  
+
   /* Logo Styling */
   #logo {
     width: 140px;
@@ -330,7 +330,7 @@
     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;
@@ -342,7 +342,7 @@
     border-right-color: white;
     animation: spin 2s linear infinite;
   }
-  
+
   /* Loading Text */
   #loading-text {
     margin-top: 20px;
@@ -352,18 +352,18 @@
     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); }
@@ -375,13 +375,13 @@
     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';
@@ -390,7 +390,7 @@
             }, 1000); // Match the transition duration
         }, 2000);  // Adjust to the length of your spinner animation
     });
-    
+
       </script>
 
     <!-- Google Translate Button -->
@@ -2140,16 +2140,16 @@ <h3>Share Your Experiences</h3>
               <textarea id="postContent" placeholder="Write your post here..." required></textarea>
               <button type="submit">Submit</button>
           </form>
-      </div> 
+      </div>
       <style>
 
     .post-container {
     background: linear-gradient(135deg, #f0cac0, #c7dcf7); /* Gradient background */
-    
-    border-radius: 8px; 
+
+    border-radius: 8px;
     color: white;
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); 
-    
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+
 }
 
 
@@ -2172,20 +2172,9 @@ <h2>Explore Popular Destinations</h2>
       <div id="map"></div>
     </section>
     <!-- Google Maps JavaScript API -->
-    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCYcdQdpiSF7BjZl6JF_pyucrblrUCZMxc&callback=initMap"
+    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCYcdQdpiSF7BjZl6JF_pyucrblrUCZMxc&loading=async&callback=initMap"
       async defer></script>
 
-
-
-      <!-- Map Section -->
-
-      <!-- Google Maps JavaScript API -->
-      <script
-        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCYcdQdpiSF7BjZl6JF_pyucrblrUCZMxc&callback=initMap"
-        async
-        defer
-      ></script>
-
     <!-- CONTACT US-->
     <style>
       .contact-section .container {
@@ -3085,4 +3074,4 @@ <h2>Exclusive Deals and Offers!</h2>
 
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/script.js b/script.js
index 409d2851..5a0c0266 100644
--- a/script.js
+++ b/script.js
@@ -595,4 +595,3 @@ if ('serviceWorker' in navigator) {
         });
     });
   }
-  
\ No newline at end of file

From d215e8f6490a1a59d65161b4aa061ced7c0a27e1 Mon Sep 17 00:00:00 2001
From: Irtesaam Atfi <atfimdirtesaam@gmail.com>
Date: Sun, 27 Oct 2024 08:31:31 +0530
Subject: [PATCH 24/38] Delete script.js

---
 script.js | 597 ------------------------------------------------------
 1 file changed, 597 deletions(-)
 delete mode 100644 script.js

diff --git a/script.js b/script.js
deleted file mode 100644
index 5a0c0266..00000000
--- a/script.js
+++ /dev/null
@@ -1,597 +0,0 @@
-// // Get the toggle button and the body element
-// const themeToggle = document.getElementById('theme-toggle');
-// const bodyElement = document.body;
-
-// // Function to update the button text
-// function updateButtonText(isDarkMode) {
-//     themeToggle.textContent = isDarkMode ? 'Switch to Bright Mode' : 'Switch to Dark Mode';
-// }
-
-// // Check if the user has a preferred theme
-// const userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-// if (userPrefersDark) {
-//     bodyElement.classList.add('dark-mode');
-//     updateButtonText(true);
-// }
-
-// // Toggle the theme on button click
-// themeToggle.addEventListener('click', () => {
-//     const isDarkMode = bodyElement.classList.toggle('dark-mode');
-//     updateButtonText(isDarkMode);
-
-//     // Save the user's preference in localStorage
-//     localStorage.setItem('theme', isDarkMode ? 'dark' : 'bright');
-// });
-
-// // Apply the saved theme on page load
-// const savedTheme = localStorage.getItem('theme');
-// if (savedTheme) {
-//     const isDarkMode = savedTheme === 'dark';
-//     bodyElement.classList.toggle('dark-mode', isDarkMode);
-//     updateButtonText(isDarkMode);
-// }
-
-
-// function initMap() {
-//     // Initialize the map centered around India
-//     var map = new google.maps.Map(document.getElementById('map'), {
-//         zoom: 5, // Zoom level to cover most of India
-//         center: {lat: 20.5937, lng: 78.9629} // Center of India (lat, lng)
-//     });
-
-//     // Delhi marker
-//     var delhi = new google.maps.Marker({
-//         position: {lat: 28.6139, lng: 77.2090},
-//         map: map,
-//         title: 'Delhi, India'
-//     });
-
-//     var delhiInfo = new google.maps.InfoWindow({
-//         content: '<h3>Delhi</h3><p>Capital of India, known for its rich history and monuments.</p>'
-//     });
-
-//     delhi.addListener('click', function() {
-//         delhiInfo.open(map, delhi);
-//     });
-
-//     // Mumbai marker
-//     var mumbai = new google.maps.Marker({
-//         position: {lat: 19.0760, lng: 72.8777},
-//         map: map,
-//         title: 'Mumbai, India'
-//     });
-
-//     var mumbaiInfo = new google.maps.InfoWindow({
-//         content: '<h3>Mumbai</h3><p>The financial capital of India, famous for Bollywood.</p>'
-//     });
-
-//     mumbai.addListener('click', function() {
-//         mumbaiInfo.open(map, mumbai);
-//     });
-
-//     // Jaipur marker
-//     var jaipur = new google.maps.Marker({
-//         position: {lat: 26.9124, lng: 75.7873},
-//         map: map,
-//         title: 'Jaipur, India'
-//     });
-
-//     var jaipurInfo = new google.maps.InfoWindow({
-//         content: '<h3>Jaipur</h3><p>The Pink City, known for its palaces and forts.</p>'
-//     });
-
-//     jaipur.addListener('click', function() {
-//         jaipurInfo.open(map, jaipur);
-//     });
-
-//     // Goa marker
-//     var goa = new google.maps.Marker({
-//         position: {lat: 15.2993, lng: 74.1240},
-//         map: map,
-//         title: 'Goa, India'
-//     });
-
-//     var goaInfo = new google.maps.InfoWindow({
-//         content: '<h3>Goa</h3><p>Famous for its beaches, nightlife, and Portuguese heritage.</p>'
-//     });
-
-//     goa.addListener('click', function() {
-//         goaInfo.open(map, goa);
-//     });
-
-//     // Kolkata marker
-//     var kolkata = new google.maps.Marker({
-//         position: {lat: 22.5726, lng: 88.3639},
-//         map: map,
-//         title: 'Kolkata, India'
-//     });
-
-//     var kolkataInfo = new google.maps.InfoWindow({
-//         content: '<h3>Kolkata</h3><p>Known for its colonial architecture, art galleries, and cultural festivals.</p>'
-//     });
-
-//     kolkata.addListener('click', function() {
-//         kolkataInfo.open(map, kolkata);
-//     });
-
-//     // Jammu & Kashmir marker
-//     var jammuKashmir = new google.maps.Marker({
-//         position: {lat: 34.0837, lng: 74.7973},
-//         map: map,
-//         title: 'Jammu & Kashmir, India'
-//     });
-
-//     var jammuKashmirInfo = new google.maps.InfoWindow({
-//         content: '<h3>Jammu & Kashmir</h3><p>Famous for its stunning landscapes and beautiful valleys.</p>'
-//     });
-
-//     jammuKashmir.addListener('click', function() {
-//         jammuKashmirInfo.open(map, jammuKashmir);
-//     });
-
-//     // Kerala marker
-//     var kerala = new google.maps.Marker({
-//         position: {lat: 10.8505, lng: 76.2711},
-//         map: map,
-//         title: 'Kerala, India'
-//     });
-
-//     var keralaInfo = new google.maps.InfoWindow({
-//         content: '<h3>Kerala</h3><p>Known as "God\'s Own Country," famous for its backwaters and lush greenery.</p>'
-//     });
-
-//     kerala.addListener('click', function() {
-//         keralaInfo.open(map, kerala);
-//     });
-
-//     // Odisha marker
-//     var odisha = new google.maps.Marker({
-//         position: {lat: 20.9517, lng: 85.0985},
-//         map: map,
-//         title: 'Odisha, India'
-//     });
-
-//     var odishaInfo = new google.maps.InfoWindow({
-//         content: '<h3>Odisha</h3><p>Known for its ancient temples and cultural heritage.</p>'
-//     });
-
-//     odisha.addListener('click', function() {
-//         odishaInfo.open(map, odisha);
-//     });
-
-//     // Gujarat marker
-//     var gujarat = new google.maps.Marker({
-//         position: {lat: 22.2587, lng: 71.1924},
-//         map: map,
-//         title: 'Gujarat, India'
-//     });
-
-//     var gujaratInfo = new google.maps.InfoWindow({
-//         content: '<h3>Gujarat</h3><p>Known for its diverse culture, vibrant festivals, and historical sites.</p>'
-//     });
-
-//     gujarat.addListener('click', function() {
-//         gujaratInfo.open(map, gujarat);
-//     });
-
-//     // Another Indian Place (e.g., Rishikesh)
-//     var rishikesh = new google.maps.Marker({
-//         position: {lat: 30.0869, lng: 78.2676},
-//         map: map,
-//         title: 'Rishikesh, India'
-//     });
-
-//     var rishikeshInfo = new google.maps.InfoWindow({
-//         content: '<h3>Rishikesh</h3><p>Known as the Yoga Capital of the World and for its spiritual significance.</p>'
-//     });
-
-//     rishikesh.addListener('click', function() {
-//         rishikeshInfo.open(map, rishikesh);
-//     });
-
-//     // Add markers for international destinations
-
-//             // Dubai marker
-//             var dubai = new google.maps.Marker({
-//                 position: {lat: 25.276987, lng: 55.296249},
-//                 map: map,
-//                 title: 'Dubai, UAE'
-//             });
-
-//             var dubaiInfo = new google.maps.InfoWindow({
-//                 content: '<h3>Dubai</h3><p>Known for its modern architecture, luxury shopping, and vibrant nightlife.</p>'
-//             });
-
-//             dubai.addListener('click', function() {
-//                 dubaiInfo.open(map, dubai);
-//             });
-
-//             // Paris marker
-//             var paris = new google.maps.Marker({
-//                 position: {lat: 48.8566, lng: 2.3522},
-//                 map: map,
-//                 title: 'Paris, France'
-//             });
-
-//             var parisInfo = new google.maps.InfoWindow({
-//                 content: '<h3>Paris</h3><p>The City of Light, famous for its art, fashion, and the iconic Eiffel Tower.</p>'
-//             });
-
-//             paris.addListener('click', function() {
-//                 parisInfo.open(map, paris);
-//             });
-
-//             // New York marker
-//             var newYork = new google.maps.Marker({
-//                 position: {lat: 40.7128, lng: -74.0060},
-//                 map: map,
-//                 title: 'New York, USA'
-//             });
-
-//             var newYorkInfo = new google.maps.InfoWindow({
-//                 content: '<h3>New York</h3><p>The Big Apple, known for its skyscrapers, Broadway, and Central Park.</p>'
-//             });
-
-//             newYork.addListener('click', function() {
-//                 newYorkInfo.open
-//                 newYorkInfo.open(map, newYork);
-//             });
-
-//             // London marker
-//             var london = new google.maps.Marker({
-//                 position: {lat: 51.5074, lng: -0.1278},
-//                 map: map,
-//                 title: 'London, UK'
-//             });
-
-//             var londonInfo = new google.maps.InfoWindow({
-//                 content: '<h3>London</h3><p>Known for its history, culture, and landmarks like Big Ben and the London Eye.</p>'
-//             });
-
-//             london.addListener('click', function() {
-//                 londonInfo.open(map, london);
-//             });
-
-//             // Bali marker
-//             var bali = new google.maps.Marker({
-//                 position: {lat: -8.3405, lng: 115.0920},
-//                 map: map,
-//                 title: 'Bali, Indonesia'
-//             });
-
-//             var baliInfo = new google.maps.InfoWindow({
-//                 content: '<h3>Bali</h3><p>A tropical paradise known for its beaches, temples, and vibrant culture.</p>'
-//             });
-
-//             bali.addListener('click', function() {
-//                 baliInfo.open(map, bali);
-//             });
-
-//             // Singapore marker
-//             var singapore = new google.maps.Marker({
-//                 position: {lat: 1.3521, lng: 103.8198},
-//                 map: map,
-//                 title: 'Singapore'
-//             });
-
-//             var singaporeInfo = new google.maps.InfoWindow({
-//                 content: '<h3>Singapore</h3><p>A global financial hub known for its cleanliness, Marina Bay Sands, and the Merlion.</p>'
-//             });
-
-//             singapore.addListener('click', function() {
-//                 singaporeInfo.open(map, singapore);
-//             });
-
-//             // Sydney marker
-//             var sydney = new google.maps.Marker({
-//                 position: {lat: -33.8688, lng: 151.2093},
-//                 map: map,
-//                 title: 'Sydney, Australia'
-//             });
-
-//             var sydneyInfo = new google.maps.InfoWindow({
-//                 content: '<h3>Sydney</h3><p>Famous for the Sydney Opera House, Harbour Bridge, and beautiful beaches.</p>'
-//             });
-
-//             sydney.addListener('click', function() {
-//                 sydneyInfo.open(map, sydney);
-//             });
-
-//             // Tokyo marker
-//             var tokyo = new google.maps.Marker({
-//                 position: {lat: 35.6762, lng: 139.6503},
-//                 map: map,
-//                 title: 'Tokyo, Japan'
-//             });
-
-//             var tokyoInfo = new google.maps.InfoWindow({
-//                 content: '<h3>Tokyo</h3><p>A bustling metropolis known for its skyscrapers, shopping, and cherry blossoms.</p>'
-//             });
-
-//             tokyo.addListener('click', function() {
-//                 tokyoInfo.open(map, tokyo);
-//             });
-
-
-
-// }
-
-/* Detect system default's theme */
-
-document.addEventListener('DOMContentLoaded', function() {
-    const modeToggle = document.getElementById('modeToggle');
-    const sunIcon = document.querySelector('.sun-icon');
-    const moonIcon = document.querySelector('.moon-icon');
-    const body = document.body;
-
-    // Function to apply the theme
-    function applyTheme(isDarkMode) {
-        if (isDarkMode) {
-            body.classList.add('dark-mode');
-            body.classList.remove('light-mode');
-            sunIcon.style.display = 'none';
-            moonIcon.style.display = 'inline-block';
-            localStorage.setItem('theme', 'dark');
-        } else {
-            body.classList.add('light-mode');
-            body.classList.remove('dark-mode');
-            sunIcon.style.display = 'inline-block';
-            moonIcon.style.display = 'none';
-            localStorage.setItem('theme', 'light');
-        }
-    }
-
-    // Check the system's color scheme preference
-    const userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-    const savedTheme = localStorage.getItem('theme');
-
-    if (savedTheme) {
-        applyTheme(savedTheme === 'dark');
-    } else {
-        applyTheme(userPrefersDark);
-    }
-
-    // Listen for changes to the system's color scheme
-    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
-        applyTheme(event.matches);
-    });
-
-    // Toggle the theme on button click
-    modeToggle.addEventListener('click', () => {
-        const isDarkMode = body.classList.toggle('dark-mode');
-        body.classList.toggle('light-mode', !isDarkMode);
-        localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
-        applyTheme(isDarkMode);
-    });
-});
-
-
-/*SOS*/
-
-function sendSOS() {
-    const statusDiv = document.getElementById("sos-status");
-
-    // Check if Geolocation is available
-    if ("geolocation" in navigator) {
-        navigator.geolocation.getCurrentPosition(function (position) {
-            const latitude = position.coords.latitude;
-            const longitude = position.coords.longitude;
-
-            // Generate a message with location data
-            const sosMessage = `Emergency! My current location is: Latitude: ${latitude}, Longitude: ${longitude}. Please send help immediately.`;
-
-            // Provide options to send the SOS message via Email or SMS
-            statusDiv.innerHTML = `
-                <p>Location acquired. Send your emergency message:</p>
-                <a href="mailto:?subject=Emergency SOS&body=${encodeURIComponent(sosMessage)}" target="_blank">
-                    <button>Email SOS</button>
-                </a>
-                <a href="sms:?body=${encodeURIComponent(sosMessage)}" target="_blank">
-                    <button>SMS SOS</button>
-                </a>
-            `;
-        }, function (error) {
-            statusDiv.innerHTML = `<p>Error retrieving location: ${error.message}</p>`;
-        });
-    } else {
-        statusDiv.innerHTML = "<p>Geolocation is not supported by your browser.</p>";
-    }
-}
-
-document.getElementById('postForm').addEventListener('submit', function (e) {
-    e.preventDefault();
-
-    const postContent = document.getElementById('postContent').value;
-    if (postContent.trim() === '') return;
-
-    const postContainer = document.getElementById('posts');
-    const newPost = document.createElement('div');
-    newPost.classList.add('post');
-    newPost.textContent = postContent;
-
-    postContainer.appendChild(newPost);
-    document.getElementById('postContent').value = ''; // Clear the textarea
-});
-const fileInput = document.getElementById('file-input');
-const uploadForm = document.getElementById('upload-form');
-const contentList = document.getElementById('content-list');
-
-uploadForm.addEventListener('submit', async (event) => {
-  event.preventDefault();
-
-  const file = fileInput.files[0];
-
-  if (!file) {
-    alert('Please select a file to upload.');
-    return;
-  }
-
-  const formData = new FormData();
-  formData.append('file', file);
-
-  try {
-    const response = await fetch('/upload', {
-      method: 'POST',
-      body: formData
-    });
-
-    if (!response.ok) {
-      throw new Error('Error uploading file: ' + response.statusText);
-    }
-
-    const data = await response.json();
-    console.log('File uploaded:', data.filename);
-
-    // Update content list with the new file
-    const listItem = document.createElement('li');
-    listItem.textContent = data.filename;
-    contentList.appendChild(listItem);
-  } catch (error) {
-    console.error('Error uploading file:', error);
-    alert('An error occurred while uploading the file.');
-  }
-});
-
-window.addEventListener("scroll", function () {
-    let navbar = document.getElementById("main-head");
-    if (window.scrollY > 100) navbar.classList.add("shadow");
-    else navbar.classList.remove("shadow");
-});
-
-function initMap() {
-    var map = new google.maps.Map(document.getElementById('map'), {
-        zoom: 2,
-        center: {lat: 20.5937, lng: 78.9629}
-    });
-
-    var destinations = [
-        {lat: 28.6139, lng: 77.2090, title: 'Delhi, India', content: '<h3>Delhi</h3><p>Capital of India, known for its rich history and monuments.</p>'},
-        {lat: 19.0760, lng: 72.8777, title: 'Mumbai, India', content: '<h3>Mumbai</h3><p>The financial capital of India, famous for Bollywood.</p>'},
-        {lat: 26.9124, lng: 75.7873, title: 'Jaipur, India', content: '<h3>Jaipur</h3><p>The Pink City, known for its palaces and forts.</p>'},
-        {lat: 15.2993, lng: 74.1240, title: 'Goa, India', content: '<h3>Goa</h3><p>Famous for its beaches, nightlife, and Portuguese heritage.</p>'},
-        {lat: 22.5726, lng: 88.3639, title: 'Kolkata, India', content: '<h3>Kolkata</h3><p>Known for its colonial architecture, art galleries, and cultural festivals.</p>'},
-        {lat: 34.0837, lng: 74.7973, title: 'Jammu & Kashmir, India', content: '<h3>Jammu & Kashmir</h3><p>Famous for its stunning landscapes and beautiful valleys.</p>'},
-        {lat: 10.8505, lng: 76.2711, title: 'Kerala, India', content: '<h3>Kerala</h3><p>Known as "God\'s Own Country," famous for its backwaters and lush greenery.</p>'},
-        {lat: 20.9517, lng: 85.0985, title: 'Odisha, India', content: '<h3>Odisha</h3><p>Known for its ancient temples and cultural heritage.</p>'},
-        {lat: 22.2587, lng: 71.1924, title: 'Gujarat, India', content: '<h3>Gujarat</h3><p>Known for its diverse culture, vibrant festivals, and historical sites.</p>'},
-        {lat: 25.276987, lng: 55.296249, title: 'Dubai, UAE', content: '<h3>Dubai</h3><p>Known for its modern architecture, luxury shopping, and vibrant nightlife.</p>'},
-        {lat: 48.8566, lng: 2.3522, title: 'Paris, France', content: '<h3>Paris</h3><p>The City of Light, famous for its art, fashion, and the iconic Eiffel Tower.</p>'},
-        {lat: 40.7128, lng: -74.0060, title: 'New York, USA', content: '<h3>New York</h3><p>The Big Apple, known for its skyscrapers, Broadway, and Central Park.</p>'},
-        {lat: 51.5074, lng: -0.1278, title: 'London, UK', content: '<h3>London</h3><p>Known for its history, culture, and landmarks like Big Ben and the London Eye.</p>'},
-        {lat: -8.3405, lng: 115.0920, title: 'Bali, Indonesia', content: '<h3>Bali</h3><p>A tropical paradise known for its beaches, temples, and vibrant culture.</p>'},
-        {lat: 1.3521, lng: 103.8198, title: 'Singapore', content: '<h3>Singapore</h3><p>A global financial hub known for its cleanliness, Marina Bay Sands, and the Merlion.</p>'},
-        {lat: -33.8688, lng: 151.2093, title: 'Sydney, Australia', content: '<h3>Sydney</h3><p>Famous for the Sydney Opera House, Harbour Bridge, and beautiful beaches.</p>'},
-        {lat: 35.6762, lng: 139.6503, title: 'Tokyo, Japan', content: '<h3>Tokyo</h3><p>A bustling metropolis known for its skyscrapers, shopping, and cherry blossoms.</p>'}
-    ];
-
-    destinations.forEach(function(destination) {
-        var marker = new google.maps.Marker({
-            position: {lat: destination.lat, lng: destination.lng},
-            map: map,
-            title: destination.title
-        });
-
-        var infoWindow = new google.maps.InfoWindow({
-            content: destination.content
-        });
-
-        marker.addListener('click', function() {
-            infoWindow.open(map, marker);
-        });
-    });
-}
-
-// Toggle dark and bright mode
-// modeToggle.addEventListener('click', function() {
-//     console.log('Toggle clicked'); // Log when the button is clicked
-//     document.body.classList.toggle('dark-mode');
-//     document.body.classList.toggle('light-mode');
-
-//     if (document.body.classList.contains('dark-mode')) {
-//         console.log('Switching to dark mode');
-//         sunIcon.style.display = 'none';  // Hide sun icon
-//         moonIcon.style.display = 'inline-block'; // Show moon icon
-//         localStorage.setItem('theme', 'dark');
-//     } else {
-//         console.log('Switching to light mode');
-//         sunIcon.style.display = 'inline-block';  // Show sun icon
-//         moonIcon.style.display = 'none';   // Hide moon icon
-//         localStorage.setItem('theme', 'light');
-//     }
-// });
-
-
-
-document.getElementById('contactForm').addEventListener('submit', function(e) {
-    e.preventDefault();
-    alert('Thank you for your message! We will get back to you soon.');
-    this.reset();
-});
-// discount pop_up
-document.addEventListener('DOMContentLoaded', function() {
-    // Show the popup after a slight delay
-    setTimeout(function() {
-        document.getElementById('dealsPopup').style.display = 'flex';
-    }, 1000); // Adjust the delay as needed (1000 ms = 1 second)
-
-    // Close the popup when the close button is clicked
-    document.getElementById('closePopup').addEventListener('click', function() {
-        document.getElementById('dealsPopup').style.display = 'none';
-    });
-
-    // Close the popup when the user clicks anywhere outside of the popup content
-    window.addEventListener('click', function(event) {
-        if (event.target === document.getElementById('dealsPopup')) {
-            document.getElementById('dealsPopup').style.display = 'none';
-        }
-    });
-});
-// adaptive background
-const modeToggle = document.getElementById('modeToggle');
-const body = document.body;
-
-modeToggle.addEventListener('click', () => {
-    body.classList.toggle('dark-mode');
-    body.classList.toggle('light-mode');
-
-    // Toggle the icon
-    if (body.classList.contains('dark-mode')) {
-        modeToggle.innerHTML = '<span class="sun-icon"><img src="crescent-moon.png"></span>';
-    } else {
-        modeToggle.innerHTML = '<span class="sun-icon glow"><img src="day-mode.png"></span>';
-    }
-});
-// google translator
-document.getElementById('languageToggle').addEventListener('click', function() {
-    var translateElement = document.getElementById('google_translate_element');
-
-    // Toggle visibility of the Google Translate element
-    if (translateElement.style.display === 'none' || translateElement.style.display === '') {
-        translateElement.style.display = 'block';
-        googleTranslateElementInit(); // Ensure it's initialized
-    } else {
-        translateElement.style.display = 'none';
-    }
-});
-
-
-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');
-}
-
-// Script to detect service workers for enabling PWA
-if ('serviceWorker' in navigator) {
-    window.addEventListener('load', () => {
-      navigator.serviceWorker.register('/service-worker.js')
-        .then((registration) => {
-          console.log('ServiceWorker registration successful with scope: ', registration.scope);
-        })
-        .catch((error) => {
-          console.log('ServiceWorker registration failed: ', error);
-        });
-    });
-  }

From 2b4afa456132bce6463c390a8104620afdb11edc Mon Sep 17 00:00:00 2001
From: Irtesaam <atfimdirtesaam@gmail.com>
Date: Sun, 27 Oct 2024 08:47:48 +0530
Subject: [PATCH 25/38] Restore script.js file

---
 script.js | 597 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 597 insertions(+)
 create mode 100644 script.js

diff --git a/script.js b/script.js
new file mode 100644
index 00000000..5a0c0266
--- /dev/null
+++ b/script.js
@@ -0,0 +1,597 @@
+// // Get the toggle button and the body element
+// const themeToggle = document.getElementById('theme-toggle');
+// const bodyElement = document.body;
+
+// // Function to update the button text
+// function updateButtonText(isDarkMode) {
+//     themeToggle.textContent = isDarkMode ? 'Switch to Bright Mode' : 'Switch to Dark Mode';
+// }
+
+// // Check if the user has a preferred theme
+// const userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+// if (userPrefersDark) {
+//     bodyElement.classList.add('dark-mode');
+//     updateButtonText(true);
+// }
+
+// // Toggle the theme on button click
+// themeToggle.addEventListener('click', () => {
+//     const isDarkMode = bodyElement.classList.toggle('dark-mode');
+//     updateButtonText(isDarkMode);
+
+//     // Save the user's preference in localStorage
+//     localStorage.setItem('theme', isDarkMode ? 'dark' : 'bright');
+// });
+
+// // Apply the saved theme on page load
+// const savedTheme = localStorage.getItem('theme');
+// if (savedTheme) {
+//     const isDarkMode = savedTheme === 'dark';
+//     bodyElement.classList.toggle('dark-mode', isDarkMode);
+//     updateButtonText(isDarkMode);
+// }
+
+
+// function initMap() {
+//     // Initialize the map centered around India
+//     var map = new google.maps.Map(document.getElementById('map'), {
+//         zoom: 5, // Zoom level to cover most of India
+//         center: {lat: 20.5937, lng: 78.9629} // Center of India (lat, lng)
+//     });
+
+//     // Delhi marker
+//     var delhi = new google.maps.Marker({
+//         position: {lat: 28.6139, lng: 77.2090},
+//         map: map,
+//         title: 'Delhi, India'
+//     });
+
+//     var delhiInfo = new google.maps.InfoWindow({
+//         content: '<h3>Delhi</h3><p>Capital of India, known for its rich history and monuments.</p>'
+//     });
+
+//     delhi.addListener('click', function() {
+//         delhiInfo.open(map, delhi);
+//     });
+
+//     // Mumbai marker
+//     var mumbai = new google.maps.Marker({
+//         position: {lat: 19.0760, lng: 72.8777},
+//         map: map,
+//         title: 'Mumbai, India'
+//     });
+
+//     var mumbaiInfo = new google.maps.InfoWindow({
+//         content: '<h3>Mumbai</h3><p>The financial capital of India, famous for Bollywood.</p>'
+//     });
+
+//     mumbai.addListener('click', function() {
+//         mumbaiInfo.open(map, mumbai);
+//     });
+
+//     // Jaipur marker
+//     var jaipur = new google.maps.Marker({
+//         position: {lat: 26.9124, lng: 75.7873},
+//         map: map,
+//         title: 'Jaipur, India'
+//     });
+
+//     var jaipurInfo = new google.maps.InfoWindow({
+//         content: '<h3>Jaipur</h3><p>The Pink City, known for its palaces and forts.</p>'
+//     });
+
+//     jaipur.addListener('click', function() {
+//         jaipurInfo.open(map, jaipur);
+//     });
+
+//     // Goa marker
+//     var goa = new google.maps.Marker({
+//         position: {lat: 15.2993, lng: 74.1240},
+//         map: map,
+//         title: 'Goa, India'
+//     });
+
+//     var goaInfo = new google.maps.InfoWindow({
+//         content: '<h3>Goa</h3><p>Famous for its beaches, nightlife, and Portuguese heritage.</p>'
+//     });
+
+//     goa.addListener('click', function() {
+//         goaInfo.open(map, goa);
+//     });
+
+//     // Kolkata marker
+//     var kolkata = new google.maps.Marker({
+//         position: {lat: 22.5726, lng: 88.3639},
+//         map: map,
+//         title: 'Kolkata, India'
+//     });
+
+//     var kolkataInfo = new google.maps.InfoWindow({
+//         content: '<h3>Kolkata</h3><p>Known for its colonial architecture, art galleries, and cultural festivals.</p>'
+//     });
+
+//     kolkata.addListener('click', function() {
+//         kolkataInfo.open(map, kolkata);
+//     });
+
+//     // Jammu & Kashmir marker
+//     var jammuKashmir = new google.maps.Marker({
+//         position: {lat: 34.0837, lng: 74.7973},
+//         map: map,
+//         title: 'Jammu & Kashmir, India'
+//     });
+
+//     var jammuKashmirInfo = new google.maps.InfoWindow({
+//         content: '<h3>Jammu & Kashmir</h3><p>Famous for its stunning landscapes and beautiful valleys.</p>'
+//     });
+
+//     jammuKashmir.addListener('click', function() {
+//         jammuKashmirInfo.open(map, jammuKashmir);
+//     });
+
+//     // Kerala marker
+//     var kerala = new google.maps.Marker({
+//         position: {lat: 10.8505, lng: 76.2711},
+//         map: map,
+//         title: 'Kerala, India'
+//     });
+
+//     var keralaInfo = new google.maps.InfoWindow({
+//         content: '<h3>Kerala</h3><p>Known as "God\'s Own Country," famous for its backwaters and lush greenery.</p>'
+//     });
+
+//     kerala.addListener('click', function() {
+//         keralaInfo.open(map, kerala);
+//     });
+
+//     // Odisha marker
+//     var odisha = new google.maps.Marker({
+//         position: {lat: 20.9517, lng: 85.0985},
+//         map: map,
+//         title: 'Odisha, India'
+//     });
+
+//     var odishaInfo = new google.maps.InfoWindow({
+//         content: '<h3>Odisha</h3><p>Known for its ancient temples and cultural heritage.</p>'
+//     });
+
+//     odisha.addListener('click', function() {
+//         odishaInfo.open(map, odisha);
+//     });
+
+//     // Gujarat marker
+//     var gujarat = new google.maps.Marker({
+//         position: {lat: 22.2587, lng: 71.1924},
+//         map: map,
+//         title: 'Gujarat, India'
+//     });
+
+//     var gujaratInfo = new google.maps.InfoWindow({
+//         content: '<h3>Gujarat</h3><p>Known for its diverse culture, vibrant festivals, and historical sites.</p>'
+//     });
+
+//     gujarat.addListener('click', function() {
+//         gujaratInfo.open(map, gujarat);
+//     });
+
+//     // Another Indian Place (e.g., Rishikesh)
+//     var rishikesh = new google.maps.Marker({
+//         position: {lat: 30.0869, lng: 78.2676},
+//         map: map,
+//         title: 'Rishikesh, India'
+//     });
+
+//     var rishikeshInfo = new google.maps.InfoWindow({
+//         content: '<h3>Rishikesh</h3><p>Known as the Yoga Capital of the World and for its spiritual significance.</p>'
+//     });
+
+//     rishikesh.addListener('click', function() {
+//         rishikeshInfo.open(map, rishikesh);
+//     });
+
+//     // Add markers for international destinations
+
+//             // Dubai marker
+//             var dubai = new google.maps.Marker({
+//                 position: {lat: 25.276987, lng: 55.296249},
+//                 map: map,
+//                 title: 'Dubai, UAE'
+//             });
+
+//             var dubaiInfo = new google.maps.InfoWindow({
+//                 content: '<h3>Dubai</h3><p>Known for its modern architecture, luxury shopping, and vibrant nightlife.</p>'
+//             });
+
+//             dubai.addListener('click', function() {
+//                 dubaiInfo.open(map, dubai);
+//             });
+
+//             // Paris marker
+//             var paris = new google.maps.Marker({
+//                 position: {lat: 48.8566, lng: 2.3522},
+//                 map: map,
+//                 title: 'Paris, France'
+//             });
+
+//             var parisInfo = new google.maps.InfoWindow({
+//                 content: '<h3>Paris</h3><p>The City of Light, famous for its art, fashion, and the iconic Eiffel Tower.</p>'
+//             });
+
+//             paris.addListener('click', function() {
+//                 parisInfo.open(map, paris);
+//             });
+
+//             // New York marker
+//             var newYork = new google.maps.Marker({
+//                 position: {lat: 40.7128, lng: -74.0060},
+//                 map: map,
+//                 title: 'New York, USA'
+//             });
+
+//             var newYorkInfo = new google.maps.InfoWindow({
+//                 content: '<h3>New York</h3><p>The Big Apple, known for its skyscrapers, Broadway, and Central Park.</p>'
+//             });
+
+//             newYork.addListener('click', function() {
+//                 newYorkInfo.open
+//                 newYorkInfo.open(map, newYork);
+//             });
+
+//             // London marker
+//             var london = new google.maps.Marker({
+//                 position: {lat: 51.5074, lng: -0.1278},
+//                 map: map,
+//                 title: 'London, UK'
+//             });
+
+//             var londonInfo = new google.maps.InfoWindow({
+//                 content: '<h3>London</h3><p>Known for its history, culture, and landmarks like Big Ben and the London Eye.</p>'
+//             });
+
+//             london.addListener('click', function() {
+//                 londonInfo.open(map, london);
+//             });
+
+//             // Bali marker
+//             var bali = new google.maps.Marker({
+//                 position: {lat: -8.3405, lng: 115.0920},
+//                 map: map,
+//                 title: 'Bali, Indonesia'
+//             });
+
+//             var baliInfo = new google.maps.InfoWindow({
+//                 content: '<h3>Bali</h3><p>A tropical paradise known for its beaches, temples, and vibrant culture.</p>'
+//             });
+
+//             bali.addListener('click', function() {
+//                 baliInfo.open(map, bali);
+//             });
+
+//             // Singapore marker
+//             var singapore = new google.maps.Marker({
+//                 position: {lat: 1.3521, lng: 103.8198},
+//                 map: map,
+//                 title: 'Singapore'
+//             });
+
+//             var singaporeInfo = new google.maps.InfoWindow({
+//                 content: '<h3>Singapore</h3><p>A global financial hub known for its cleanliness, Marina Bay Sands, and the Merlion.</p>'
+//             });
+
+//             singapore.addListener('click', function() {
+//                 singaporeInfo.open(map, singapore);
+//             });
+
+//             // Sydney marker
+//             var sydney = new google.maps.Marker({
+//                 position: {lat: -33.8688, lng: 151.2093},
+//                 map: map,
+//                 title: 'Sydney, Australia'
+//             });
+
+//             var sydneyInfo = new google.maps.InfoWindow({
+//                 content: '<h3>Sydney</h3><p>Famous for the Sydney Opera House, Harbour Bridge, and beautiful beaches.</p>'
+//             });
+
+//             sydney.addListener('click', function() {
+//                 sydneyInfo.open(map, sydney);
+//             });
+
+//             // Tokyo marker
+//             var tokyo = new google.maps.Marker({
+//                 position: {lat: 35.6762, lng: 139.6503},
+//                 map: map,
+//                 title: 'Tokyo, Japan'
+//             });
+
+//             var tokyoInfo = new google.maps.InfoWindow({
+//                 content: '<h3>Tokyo</h3><p>A bustling metropolis known for its skyscrapers, shopping, and cherry blossoms.</p>'
+//             });
+
+//             tokyo.addListener('click', function() {
+//                 tokyoInfo.open(map, tokyo);
+//             });
+
+
+
+// }
+
+/* Detect system default's theme */
+
+document.addEventListener('DOMContentLoaded', function() {
+    const modeToggle = document.getElementById('modeToggle');
+    const sunIcon = document.querySelector('.sun-icon');
+    const moonIcon = document.querySelector('.moon-icon');
+    const body = document.body;
+
+    // Function to apply the theme
+    function applyTheme(isDarkMode) {
+        if (isDarkMode) {
+            body.classList.add('dark-mode');
+            body.classList.remove('light-mode');
+            sunIcon.style.display = 'none';
+            moonIcon.style.display = 'inline-block';
+            localStorage.setItem('theme', 'dark');
+        } else {
+            body.classList.add('light-mode');
+            body.classList.remove('dark-mode');
+            sunIcon.style.display = 'inline-block';
+            moonIcon.style.display = 'none';
+            localStorage.setItem('theme', 'light');
+        }
+    }
+
+    // Check the system's color scheme preference
+    const userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const savedTheme = localStorage.getItem('theme');
+
+    if (savedTheme) {
+        applyTheme(savedTheme === 'dark');
+    } else {
+        applyTheme(userPrefersDark);
+    }
+
+    // Listen for changes to the system's color scheme
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
+        applyTheme(event.matches);
+    });
+
+    // Toggle the theme on button click
+    modeToggle.addEventListener('click', () => {
+        const isDarkMode = body.classList.toggle('dark-mode');
+        body.classList.toggle('light-mode', !isDarkMode);
+        localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
+        applyTheme(isDarkMode);
+    });
+});
+
+
+/*SOS*/
+
+function sendSOS() {
+    const statusDiv = document.getElementById("sos-status");
+
+    // Check if Geolocation is available
+    if ("geolocation" in navigator) {
+        navigator.geolocation.getCurrentPosition(function (position) {
+            const latitude = position.coords.latitude;
+            const longitude = position.coords.longitude;
+
+            // Generate a message with location data
+            const sosMessage = `Emergency! My current location is: Latitude: ${latitude}, Longitude: ${longitude}. Please send help immediately.`;
+
+            // Provide options to send the SOS message via Email or SMS
+            statusDiv.innerHTML = `
+                <p>Location acquired. Send your emergency message:</p>
+                <a href="mailto:?subject=Emergency SOS&body=${encodeURIComponent(sosMessage)}" target="_blank">
+                    <button>Email SOS</button>
+                </a>
+                <a href="sms:?body=${encodeURIComponent(sosMessage)}" target="_blank">
+                    <button>SMS SOS</button>
+                </a>
+            `;
+        }, function (error) {
+            statusDiv.innerHTML = `<p>Error retrieving location: ${error.message}</p>`;
+        });
+    } else {
+        statusDiv.innerHTML = "<p>Geolocation is not supported by your browser.</p>";
+    }
+}
+
+document.getElementById('postForm').addEventListener('submit', function (e) {
+    e.preventDefault();
+
+    const postContent = document.getElementById('postContent').value;
+    if (postContent.trim() === '') return;
+
+    const postContainer = document.getElementById('posts');
+    const newPost = document.createElement('div');
+    newPost.classList.add('post');
+    newPost.textContent = postContent;
+
+    postContainer.appendChild(newPost);
+    document.getElementById('postContent').value = ''; // Clear the textarea
+});
+const fileInput = document.getElementById('file-input');
+const uploadForm = document.getElementById('upload-form');
+const contentList = document.getElementById('content-list');
+
+uploadForm.addEventListener('submit', async (event) => {
+  event.preventDefault();
+
+  const file = fileInput.files[0];
+
+  if (!file) {
+    alert('Please select a file to upload.');
+    return;
+  }
+
+  const formData = new FormData();
+  formData.append('file', file);
+
+  try {
+    const response = await fetch('/upload', {
+      method: 'POST',
+      body: formData
+    });
+
+    if (!response.ok) {
+      throw new Error('Error uploading file: ' + response.statusText);
+    }
+
+    const data = await response.json();
+    console.log('File uploaded:', data.filename);
+
+    // Update content list with the new file
+    const listItem = document.createElement('li');
+    listItem.textContent = data.filename;
+    contentList.appendChild(listItem);
+  } catch (error) {
+    console.error('Error uploading file:', error);
+    alert('An error occurred while uploading the file.');
+  }
+});
+
+window.addEventListener("scroll", function () {
+    let navbar = document.getElementById("main-head");
+    if (window.scrollY > 100) navbar.classList.add("shadow");
+    else navbar.classList.remove("shadow");
+});
+
+function initMap() {
+    var map = new google.maps.Map(document.getElementById('map'), {
+        zoom: 2,
+        center: {lat: 20.5937, lng: 78.9629}
+    });
+
+    var destinations = [
+        {lat: 28.6139, lng: 77.2090, title: 'Delhi, India', content: '<h3>Delhi</h3><p>Capital of India, known for its rich history and monuments.</p>'},
+        {lat: 19.0760, lng: 72.8777, title: 'Mumbai, India', content: '<h3>Mumbai</h3><p>The financial capital of India, famous for Bollywood.</p>'},
+        {lat: 26.9124, lng: 75.7873, title: 'Jaipur, India', content: '<h3>Jaipur</h3><p>The Pink City, known for its palaces and forts.</p>'},
+        {lat: 15.2993, lng: 74.1240, title: 'Goa, India', content: '<h3>Goa</h3><p>Famous for its beaches, nightlife, and Portuguese heritage.</p>'},
+        {lat: 22.5726, lng: 88.3639, title: 'Kolkata, India', content: '<h3>Kolkata</h3><p>Known for its colonial architecture, art galleries, and cultural festivals.</p>'},
+        {lat: 34.0837, lng: 74.7973, title: 'Jammu & Kashmir, India', content: '<h3>Jammu & Kashmir</h3><p>Famous for its stunning landscapes and beautiful valleys.</p>'},
+        {lat: 10.8505, lng: 76.2711, title: 'Kerala, India', content: '<h3>Kerala</h3><p>Known as "God\'s Own Country," famous for its backwaters and lush greenery.</p>'},
+        {lat: 20.9517, lng: 85.0985, title: 'Odisha, India', content: '<h3>Odisha</h3><p>Known for its ancient temples and cultural heritage.</p>'},
+        {lat: 22.2587, lng: 71.1924, title: 'Gujarat, India', content: '<h3>Gujarat</h3><p>Known for its diverse culture, vibrant festivals, and historical sites.</p>'},
+        {lat: 25.276987, lng: 55.296249, title: 'Dubai, UAE', content: '<h3>Dubai</h3><p>Known for its modern architecture, luxury shopping, and vibrant nightlife.</p>'},
+        {lat: 48.8566, lng: 2.3522, title: 'Paris, France', content: '<h3>Paris</h3><p>The City of Light, famous for its art, fashion, and the iconic Eiffel Tower.</p>'},
+        {lat: 40.7128, lng: -74.0060, title: 'New York, USA', content: '<h3>New York</h3><p>The Big Apple, known for its skyscrapers, Broadway, and Central Park.</p>'},
+        {lat: 51.5074, lng: -0.1278, title: 'London, UK', content: '<h3>London</h3><p>Known for its history, culture, and landmarks like Big Ben and the London Eye.</p>'},
+        {lat: -8.3405, lng: 115.0920, title: 'Bali, Indonesia', content: '<h3>Bali</h3><p>A tropical paradise known for its beaches, temples, and vibrant culture.</p>'},
+        {lat: 1.3521, lng: 103.8198, title: 'Singapore', content: '<h3>Singapore</h3><p>A global financial hub known for its cleanliness, Marina Bay Sands, and the Merlion.</p>'},
+        {lat: -33.8688, lng: 151.2093, title: 'Sydney, Australia', content: '<h3>Sydney</h3><p>Famous for the Sydney Opera House, Harbour Bridge, and beautiful beaches.</p>'},
+        {lat: 35.6762, lng: 139.6503, title: 'Tokyo, Japan', content: '<h3>Tokyo</h3><p>A bustling metropolis known for its skyscrapers, shopping, and cherry blossoms.</p>'}
+    ];
+
+    destinations.forEach(function(destination) {
+        var marker = new google.maps.Marker({
+            position: {lat: destination.lat, lng: destination.lng},
+            map: map,
+            title: destination.title
+        });
+
+        var infoWindow = new google.maps.InfoWindow({
+            content: destination.content
+        });
+
+        marker.addListener('click', function() {
+            infoWindow.open(map, marker);
+        });
+    });
+}
+
+// Toggle dark and bright mode
+// modeToggle.addEventListener('click', function() {
+//     console.log('Toggle clicked'); // Log when the button is clicked
+//     document.body.classList.toggle('dark-mode');
+//     document.body.classList.toggle('light-mode');
+
+//     if (document.body.classList.contains('dark-mode')) {
+//         console.log('Switching to dark mode');
+//         sunIcon.style.display = 'none';  // Hide sun icon
+//         moonIcon.style.display = 'inline-block'; // Show moon icon
+//         localStorage.setItem('theme', 'dark');
+//     } else {
+//         console.log('Switching to light mode');
+//         sunIcon.style.display = 'inline-block';  // Show sun icon
+//         moonIcon.style.display = 'none';   // Hide moon icon
+//         localStorage.setItem('theme', 'light');
+//     }
+// });
+
+
+
+document.getElementById('contactForm').addEventListener('submit', function(e) {
+    e.preventDefault();
+    alert('Thank you for your message! We will get back to you soon.');
+    this.reset();
+});
+// discount pop_up
+document.addEventListener('DOMContentLoaded', function() {
+    // Show the popup after a slight delay
+    setTimeout(function() {
+        document.getElementById('dealsPopup').style.display = 'flex';
+    }, 1000); // Adjust the delay as needed (1000 ms = 1 second)
+
+    // Close the popup when the close button is clicked
+    document.getElementById('closePopup').addEventListener('click', function() {
+        document.getElementById('dealsPopup').style.display = 'none';
+    });
+
+    // Close the popup when the user clicks anywhere outside of the popup content
+    window.addEventListener('click', function(event) {
+        if (event.target === document.getElementById('dealsPopup')) {
+            document.getElementById('dealsPopup').style.display = 'none';
+        }
+    });
+});
+// adaptive background
+const modeToggle = document.getElementById('modeToggle');
+const body = document.body;
+
+modeToggle.addEventListener('click', () => {
+    body.classList.toggle('dark-mode');
+    body.classList.toggle('light-mode');
+
+    // Toggle the icon
+    if (body.classList.contains('dark-mode')) {
+        modeToggle.innerHTML = '<span class="sun-icon"><img src="crescent-moon.png"></span>';
+    } else {
+        modeToggle.innerHTML = '<span class="sun-icon glow"><img src="day-mode.png"></span>';
+    }
+});
+// google translator
+document.getElementById('languageToggle').addEventListener('click', function() {
+    var translateElement = document.getElementById('google_translate_element');
+
+    // Toggle visibility of the Google Translate element
+    if (translateElement.style.display === 'none' || translateElement.style.display === '') {
+        translateElement.style.display = 'block';
+        googleTranslateElementInit(); // Ensure it's initialized
+    } else {
+        translateElement.style.display = 'none';
+    }
+});
+
+
+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');
+}
+
+// Script to detect service workers for enabling PWA
+if ('serviceWorker' in navigator) {
+    window.addEventListener('load', () => {
+      navigator.serviceWorker.register('/service-worker.js')
+        .then((registration) => {
+          console.log('ServiceWorker registration successful with scope: ', registration.scope);
+        })
+        .catch((error) => {
+          console.log('ServiceWorker registration failed: ', error);
+        });
+    });
+  }

From 393a375c547144e6dadfb44e841fa19890ab8e12 Mon Sep 17 00:00:00 2001
From: Ankitha R <149484435+Ankitha2130@users.noreply.github.com>
Date: Sun, 27 Oct 2024 10:27:40 +0530
Subject: [PATCH 26/38] Update index.html

---
 index.html | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 73e83eb3..61613332 100644
--- a/index.html
+++ b/index.html
@@ -714,6 +714,17 @@ <h4>Fly</h4>
 </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");
@@ -3085,4 +3096,4 @@ <h2>Exclusive Deals and Offers!</h2>
 
 </body>
 
-</html>
\ No newline at end of file
+</html>

From 13177c496b26b3402012672cbd0547aebd0576bd Mon Sep 17 00:00:00 2001
From: Neeru <161798182+neeru24@users.noreply.github.com>
Date: Sun, 27 Oct 2024 15:36:52 +0530
Subject: [PATCH 27/38] Update README.md

---
 README.md | 34 +++++++++++++++++++---------------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/README.md b/README.md
index 4646dd7c..ed6ab7cc 100644
--- a/README.md
+++ b/README.md
@@ -191,14 +191,25 @@ You can find the project structure in the [Project Structure](project-structure.
 <!--Line-->
 <img src="https://user-images.githubusercontent.com/74038190/212284100-561aa473-3905-4a80-b561-0d28506553ee.gif" width="900">
 
+## 👥 Team
+
+| ![Priya Ghosal](https://avatars.githubusercontent.com/u/162816363?v=4&s=80) |
+|:--:|
+| **Priya Ghosal** <br> <sub>Project Admin</sub> | 
+| [![LinkedIn](https://img.icons8.com/fluency/32/000000/linkedin.png)](https://www.linkedin.com/in/priya-ghosal-785771286/) [![Discord](https://img.icons8.com/fluency/32/000000/discord.png)](https://discord.com/invite/priyaghosal) [![Twitter](https://img.icons8.com/fluency/32/000000/twitter.png)](https://twitter.com/PriyaGhosa39968) [![GitHub](https://img.icons8.com/fluency/32/000000/github.png)](https://github.com/PriyaGhosal/BuddyTrail) |
+
+
+
+For any inquiries or feedback, please contact. Happy Contributing 🫡
+
+<!--Line-->
+<img src="https://user-images.githubusercontent.com/74038190/212284100-561aa473-3905-4a80-b561-0d28506553ee.gif" width="900">
 <div>
   <h2 align="center"><img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Smilies/Red%20Heart.png" width="35" height="35"> Our Contributors</h2>
   <div align="center">
     <h3>Thank you for contributing to our repository</h3
 
 
-
-      
 <p align="center">
       <a href="https://github.com/PriyaGhosal/BuddyTrail/graphs/contributors">
         <img src="https://api.vaunt.dev/v1/github/entities/PriyaGhosal/repositories/BuddyTrail/contributors?format=svg&limit=54" width="700" height="250" />
@@ -229,27 +240,20 @@ You can find the project structure in the [Project Structure](project-structure.
 
 </div>
 
-
+<picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=PriyaGhosal/BuddyTrail&type=Date&theme=dark" />
+      <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=PriyaGhosal/BuddyTrail&type=Date" />
+      <img align="center" alt="Star History Chart" src="https://api.star-history.com/svg?repos=PriyaGhosal/BuddyTrail&type=Date" />
+    </picture>
+    
 <div align="right">
     <a href="#top">
         <img src="https://img.shields.io/badge/Back%20to%20Top-000000?style=for-the-badge&logo=github&logoColor=white" alt="Back to Top">
     </a>
 </div>
 
-<!--Line-->
-<img src="https://user-images.githubusercontent.com/74038190/212284100-561aa473-3905-4a80-b561-0d28506553ee.gif" width="900">
-
-## 👥 Team
-
-| ![Priya Ghosal](https://avatars.githubusercontent.com/u/162816363?v=4&s=80) |
-|:--:|
-| **Priya Ghosal** <br> <sub>Project Admin</sub> | 
-| [![LinkedIn](https://img.icons8.com/fluency/32/000000/linkedin.png)](https://www.linkedin.com/in/priya-ghosal-785771286/) [![Discord](https://img.icons8.com/fluency/32/000000/discord.png)](https://discord.com/invite/priyaghosal) [![Twitter](https://img.icons8.com/fluency/32/000000/twitter.png)](https://twitter.com/PriyaGhosa39968) [![GitHub](https://img.icons8.com/fluency/32/000000/github.png)](https://github.com/PriyaGhosal/BuddyTrail) |
 
 
-
-For any inquiries or feedback, please contact. Happy Contributing 🫡
-
 <!--Line-->
 <img src="https://user-images.githubusercontent.com/74038190/212284100-561aa473-3905-4a80-b561-0d28506553ee.gif" width="900">
 

From 91f910888d99668f69c18511cc75375f18a8ca9b Mon Sep 17 00:00:00 2001
From: sheezah <sheezahaseeb02@gmail.com>
Date: Sun, 27 Oct 2024 22:33:29 +0530
Subject: [PATCH 28/38] bug in recommendation

---
 index.html | 419 ++++++++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 348 insertions(+), 71 deletions(-)

diff --git a/index.html b/index.html
index 73e83eb3..d5f0491c 100644
--- a/index.html
+++ b/index.html
@@ -585,7 +585,6 @@ <h1>Ready for Your Next Adventure?</h1>
 
 <!-- JS to handle hamburger and close button -->
 <script>
-
   document.addEventListener("DOMContentLoaded", function () {
     const hamburger = document.getElementById("hamburger");
     const navList = document.getElementById("nav-list");
@@ -609,9 +608,10 @@ <h1>Ready for Your Next Adventure?</h1>
         mainHead.classList.remove("shadow");
       }
     });
-
+  }); // Added closing brace for DOMContentLoaded
 </script>
 
+
 <script src="./script/popup.js"></script>
 
 
@@ -1487,58 +1487,117 @@ <h1 style="color: white; font-size: xx-large;">Book a Cab or Auto</h1>
 
 
     <!-- recommendations -->
-    <section id="recommendations" class="recommendations-section">
-      <h2 id="h1darkbtn">Personalized Recommendations</h2>
-      <p>
-        We’ve picked these destinations, hotels, and activities just for you,
-        based on your preferences.
-      </p>
+    <style>
+/* Recommendations Section Styling */
+#recommendations {
+  background: linear-gradient(135deg, #9aecff 0%, #3b302d 100%);
+  padding: 40px;
+  border-radius: 10px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
 
-      <div class="recommendation-list">
-        <!-- Example Recommendation -->
-        <div class="recommendation-item">
-          <div class="header1">
-          <h3 id="h1darkbtn">Beach Resort in Goa</h3>
-          <p>
-            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>
+#recommendations h2 {
+  text-align: center;
+  color: #2c2b2b;
+  font-size: 4rem;
+  margin-bottom: 30px;
+}
 
-        <div class="recommendation-item">
-          <div class="header2">
-          <h3 id="h1darkbtn">Cultural Tour in Rajasthan</h3>
-          <p>
-            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>
+/* Recommendations List */
+.recommendation-list {
+  display: flex;
+  justify-content: space-between;
+  gap: 30px;
+  flex-wrap: wrap;
+}
 
-        <div class="recommendation-item">
-          <div class="header1">
-          <h3 id="h1darkbtn">Adventure Trek in Himachal</h3>
-          <p>
-            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>
+/* Recommendation Item */
+.recommendation-item {
+  background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
+  border-radius: 12px;
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
+  padding: 25px;
+  flex: 1 1 calc(33.333% - 30px);
+  transition: transform 0.4s ease, box-shadow 0.4s ease;
+  cursor: pointer;
+  height: 320px;
+  position: relative; /* Added for button positioning */
+  display: flex; /* Added for vertical alignment */
+  flex-direction: column; /* Added for vertical alignment */
+}
 
-    <style>
-      /* Recommendations Section Styling */
+.recommendation-item:nth-child(2) {
+  background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
+}
+
+.recommendation-item:nth-child(3) {
+  background: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%);
+}
+
+/* Content Container */
+.header1, .header2 {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+/* Hover Effects */
+.recommendation-item:hover {
+  transform: scale(1.08);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+}
+
+.recommendation-item h3 {
+  color: #1e293b;
+  font-size: 2.5rem;
+  margin-bottom: 15px;
+}
+
+.recommendation-item p {
+  color: #555555;
+  font-size: 1.5rem;
+  margin-bottom: 20px;
+  flex-grow: 1; /* Allows content to push button to bottom */
+}
+
+/* Buttons Styling */
+.recommendation-item button {
+  background-color: #3b82f6;
+  color: white;
+  padding: 12px 25px;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background-color 0.3s ease, transform 0.3s ease;
+  font-size: 1.5rem;
+  margin-top: auto; /* Pushes button to bottom */
+  align-self: flex-start; /* Aligns button to the left */
+}
+
+.recommendation-item button:hover {
+  background-color: #1e40af;
+  transform: translateY(-5px);
+}
+
+/* Section Responsiveness */
+@media (max-width: 768px) {
+  .recommendation-list {
+    flex-direction: column;
+  }
+
+  .recommendation-item {
+    margin-bottom: 20px;
+    height: auto;
+    min-height: 320px; /* Ensures minimum height while allowing expansion */
+  }
+}
+</style>
+<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 */
+  background: linear-gradient(135deg, #9aecff 0%, #3b302d 100%);
+  padding: 40px;
   border-radius: 10px;
   max-width: 1200px;
   margin: 0 auto;
@@ -1548,70 +1607,90 @@ <h3 id="h1darkbtn">Adventure Trek in Himachal</h3>
   text-align: center;
   color: #2c2b2b;
   font-size: 4rem;
-  margin-bottom: 30px; /* Increased margin for better spacing */
+  margin-bottom: 30px;
 }
 
 /* Recommendations List */
 .recommendation-list {
   display: flex;
   justify-content: space-between;
-  gap: 30px; /* Increased gap for larger cards */
+  gap: 30px;
   flex-wrap: wrap;
 }
 
-/* Recommendation Item with Gradient Background and Increased Size */
+/* Recommendation Item */
 .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 */
+  background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
+  border-radius: 12px;
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
+  padding: 25px;
+  flex: 1 1 calc(33.333% - 30px);
+  transition: transform 0.4s ease, box-shadow 0.4s ease;
   cursor: pointer;
-  height: 320px; /* Fixed height for consistency */
+  height: 320px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
 }
 
 .recommendation-item:nth-child(2) {
-  background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%); /* Gradient 2 */
+  background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
 }
 
 .recommendation-item:nth-child(3) {
-  background: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%); /* Gradient 3 */
+  background: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%);
 }
 
-/* Hover Effects: Larger scale and deeper shadow */
+/* Content Container */
+.header1, .header2 {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  align-items: center; /* Center content horizontally */
+  text-align: center; /* Center text content */
+}
+
+/* Hover Effects */
 .recommendation-item:hover {
-  transform: scale(1.08); /* Larger scaling effect */
-  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* More prominent shadow */
+  transform: scale(1.08);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
 }
 
 .recommendation-item h3 {
-  color: #1e293b; /* Darker text for readability */
-  font-size: 2.5rem; /* Slightly larger text */
+  color: #1e293b;
+  font-size: 2.5rem;
   margin-bottom: 15px;
+  width: 100%; /* Ensure full width for proper centering */
 }
 
 .recommendation-item p {
   color: #555555;
   font-size: 1.5rem;
   margin-bottom: 20px;
+  flex-grow: 1;
+  width: 100%; /* Ensure full width for proper centering */
 }
 
 /* Buttons Styling */
 .recommendation-item button {
   background-color: #3b82f6;
   color: white;
-  padding: 12px 25px; /* Increased button size */
+  padding: 12px 25px;
   border: none;
   border-radius: 6px;
   cursor: pointer;
   transition: background-color 0.3s ease, transform 0.3s ease;
   font-size: 1.5rem;
+  margin-top: auto;
+  /* Remove align-self and add these properties for center alignment */
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 .recommendation-item button:hover {
-  background-color: #1e40af; /* Darker button on hover */
-  transform: translateY(-5px); /* Slight lift effect */
+  background-color: #1e40af;
+  transform: translateY(-5px);
 }
 
 /* Section Responsiveness */
@@ -1622,14 +1701,212 @@ <h3 id="h1darkbtn">Adventure Trek in Himachal</h3>
 
   .recommendation-item {
     margin-bottom: 20px;
-    height: auto; /* Allow height to adjust */
+    height: auto;
+    min-height: 320px;
   }
 }
+</style>
+<style>
+/* Recommendations Section Styling */
+#recommendations {
+  background: linear-gradient(135deg, #9aecff 0%, #3b302d 100%);
+  padding: 60px; /* Increased padding */
+  border-radius: 15px; /* Slightly larger border radius */
+  max-width: 1400px; /* Increased max-width */
+  margin: 0 auto;
+}
 
-    </style>
+#recommendations h2 {
+  text-align: center;
+  color: #2c2b2b;
+  font-size: 5rem; /* Increased from 4rem */
+  margin-bottom: 40px; /* Increased margin */
+  font-weight: bold;
+}
 
+/* Recommendations List */
+.recommendation-list {
+  display: flex;
+  justify-content: space-between;
+  gap: 40px; /* Increased gap */
+  flex-wrap: wrap;
+}
 
+/* Recommendation Item */
+.recommendation-item {
+  background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
+  border-radius: 15px;
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+  padding: 35px; /* Increased padding */
+  flex: 1 1 calc(33.333% - 40px);
+  transition: transform 0.4s ease, box-shadow 0.4s ease;
+  cursor: pointer;
+  height: 450px; /* Increased height */
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
 
+.recommendation-item:nth-child(2) {
+  background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
+}
+
+.recommendation-item:nth-child(3) {
+  background: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%);
+}
+
+/* Content Container */
+.header1, .header2 {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  align-items: center;
+  text-align: center;
+}
+
+/* Hover Effects */
+.recommendation-item:hover {
+  transform: scale(1.08);
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
+}
+
+.recommendation-item h3 {
+  color: #1e293b;
+  font-size: 3.5rem; /* Increased from 2.5rem */
+  margin-bottom: 25px; /* Increased margin */
+  width: 100%;
+  font-weight: bold;
+  line-height: 1.2; /* Added for better readability */
+}
+
+.recommendation-item p {
+  color: #555555;
+  font-size: 2rem; /* Increased from 1.5rem */
+  margin-bottom: 30px;
+  flex-grow: 1;
+  width: 100%;
+  line-height: 1.5; /* Added for better readability */
+}
+
+/* Buttons Styling */
+.recommendation-item button {
+  background-color: #3b82f6;
+  color: white;
+  padding: 16px 35px; /* Increased padding */
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background-color 0.3s ease, transform 0.3s ease;
+  font-size: 2rem; /* Increased from 1.5rem */
+  margin-top: auto;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  font-weight: bold;
+}
+
+.recommendation-item button:hover {
+  background-color: #1e40af;
+  transform: translateY(-5px);
+}
+
+/* Section Responsiveness */
+@media (max-width: 1200px) {
+  #recommendations h2 {
+    font-size: 4rem;
+  }
+  
+  .recommendation-item h3 {
+    font-size: 3rem;
+  }
+  
+  .recommendation-item p {
+    font-size: 1.8rem;
+  }
+  
+  .recommendation-item button {
+    font-size: 1.8rem;
+  }
+}
+
+@media (max-width: 768px) {
+  .recommendation-list {
+    flex-direction: column;
+  }
+
+  .recommendation-item {
+    margin-bottom: 30px;
+    height: auto;
+    min-height: 400px;
+  }
+  
+  #recommendations h2 {
+    font-size: 3.5rem;
+  }
+  
+  .recommendation-item h3 {
+    font-size: 2.8rem;
+  }
+  
+  .recommendation-item p {
+    font-size: 1.6rem;
+  }
+  
+  .recommendation-item button {
+    font-size: 1.6rem;
+    padding: 14px 30px;
+  }
+}
+</style>
+
+<section id="recommendations" class="recommendations-section">
+  <h2 id="h1darkbtn">Personalized Recommendations</h2>
+  <p>
+    We've picked these destinations, hotels, and activities just for you,
+    based on your preferences.
+  </p>
+  
+  <div class="recommendation-list">
+    <div class="recommendation-item">
+      <div class="header1">
+        <h3 id="h1darkbtn">Beach Resort in Goa</h3>
+        <p>
+          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>
+          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>
+          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>
     <!--Emergency-->
     <div class="sos-container">
       <h2>Emergency SOS</h2>

From 41254e7baebcaff87a4a7cf1cd9eb7e1c313900b Mon Sep 17 00:00:00 2001
From: Neeru <161798182+neeru24@users.noreply.github.com>
Date: Sun, 27 Oct 2024 22:52:00 +0530
Subject: [PATCH 29/38] Update README.md

---
 README.md | 38 ++++++++++++++++++++++++++------------
 1 file changed, 26 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index 4646dd7c..f85fc949 100644
--- a/README.md
+++ b/README.md
@@ -160,18 +160,32 @@ All responses are in JSON format. Ensure to handle errors appropriately.
 Join the list. **We are waiting** <br/>
 Here's how you can contribute to the repository:
 
-1. Fork this Repository  🍴 
-2. Clone to your local machine 🧩 using:
-    git clone https://github.com/Your-Username/BuddyTrail.git
-3. Create a new branch:
-    git branch -c "Feature-Name"
-4. Navigate to the branch:
-    git checkout Feature-Name
-5. Add changes and Commit:
-    git commit -m "Add Changes message"
-6. Push to the branch:
-    git push origin Feature-Name
-7. Submit Pull Request 
+1. **Fork this Repository** 🍴 
+2. **Clone to your local machine** 🧩 using:
+```bash
+git clone https://github.com/Your-Username/BuddyTrail.git
+```
+3. **Create a new branch**:
+```bash
+git branch -c "Feature-Name"
+```
+
+4. **Navigate to the branch**:
+```bash
+git checkout Feature-Name
+```
+
+5. **Add changes and Commit**:
+```bash
+git commit -m "Add Changes message"
+```
+
+6. **Push to the branch**:
+```bash
+git push origin Feature-Name
+```
+
+7. **Submit Pull Request**
 
 We welcome all contributions to improve **BuddyTrail**! If you would like to contribute, please follow the [Contributing.md](./Contributing.md) for more details on how to get started.
 

From 82be445eea706222fb226afbf6f2bf5a972a2861 Mon Sep 17 00:00:00 2001
From: sheezah <sheezahaseeb02@gmail.com>
Date: Sun, 27 Oct 2024 23:15:47 +0530
Subject: [PATCH 30/38] resolve conflict

---
 index.html | 289 ++++++++++++++++++++++++++++++++++++-----------------
 1 file changed, 196 insertions(+), 93 deletions(-)

diff --git a/index.html b/index.html
index 012fd72f..3cd0b582 100644
--- a/index.html
+++ b/index.html
@@ -1488,101 +1488,204 @@ <h1 style="color: white; font-size: xx-large;">Book a Cab or Auto</h1>
 
 
     <!-- recommendations -->
-    <section id="recommendations" class="recommendations-section">
-      <h2 id="h1darkbtn">Personalized Recommendations</h2>
-      <p>
-        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>
-            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>
-            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>
-            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>
-
     <style>
       /* Recommendations Section Styling */
-#recommendations {
-  background: linear-gradient(135deg, #9aecff 0%, #3b302d 100%);
-  padding: 40px;
-  border-radius: 10px;
-  max-width: 1200px;
-  margin: 0 auto;
-}
-
-#recommendations h2 {
-  text-align: center;
-  color: #2c2b2b;
-  font-size: 4rem;
-  margin-bottom: 30px;
-}
-
-/* Recommendations List */
-.recommendation-list {
-  display: flex;
-  justify-content: space-between;
-  gap: 30px;
-  flex-wrap: wrap;
-}
-
-/* Recommendation Item */
-.recommendation-item {
-  background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
-  border-radius: 12px;
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
-  padding: 25px;
-  flex: 1 1 calc(33.333% - 30px);
-  transition: transform 0.4s ease, box-shadow 0.4s ease;
-  cursor: pointer;
-  height: 320px;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-}
-
-.recommendation-item:nth-child(2) {
-  background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
-}
-
-.recommendation-item:nth-child(3) {
-  background: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%);
-}
-
+      #recommendations {
+        background: linear-gradient(135deg, #9aecff 0%, #3b302d 100%);
+        padding: 40px;
+        border-radius: 10px;
+        max-width: 1200px;
+        margin: 0 auto;
+      }
+      
+      #recommendations h2 {
+        text-align: center;
+        color: #2c2b2b;
+        font-size: 4rem;
+        margin-bottom: 30px;
+        font-weight: bold;
+      }
+      
+      #recommendations > p {
+        text-align: center;
+        font-size: 1.8rem;
+        color: #2c2b2b;
+        margin-bottom: 40px;
+        max-width: 800px;
+        margin-left: auto;
+        margin-right: auto;
+      }
+      
+      /* Recommendations List */
+      .recommendation-list {
+        display: flex;
+        justify-content: space-between;
+        gap: 30px;
+        flex-wrap: wrap;
+      }
+      
+      /* Recommendation Item */
+      .recommendation-item {
+        background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
+        border-radius: 12px;
+        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
+        padding: 25px;
+        flex: 1 1 calc(33.333% - 30px);
+        transition: transform 0.4s ease, box-shadow 0.4s ease;
+        cursor: pointer;
+        height: 400px; /* Increased height */
+        position: relative;
+      }
+      
+      .recommendation-item:nth-child(2) {
+        background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
+      }
+      
+      .recommendation-item:nth-child(3) {
+        background: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%);
+      }
+      
+      /* Content Container */
+      .header1, .header2 {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+      }
+      
+      .recommendation-item h3 {
+        color: #1e293b;
+        font-size: 3rem;
+        margin-bottom: 20px;
+        font-weight: bold;
+        line-height: 1.2;
+      }
+      
+      .recommendation-item p {
+        color: #555555;
+        font-size: 1.8rem;
+        line-height: 1.5;
+        flex-grow: 1;
+        margin-bottom: 20px;
+      }
+      
+      /* Button Styling */
+      .recommendation-item button {
+        background-color: #3b82f6;
+        color: white;
+        padding: 15px 30px;
+        border: none;
+        border-radius: 8px;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        font-size: 1.8rem;
+        font-weight: 600;
+        margin-top: auto;
+        width: fit-content;
+      }
+      
+      .recommendation-item button:hover {
+        background-color: #1e40af;
+        transform: translateY(-5px);
+      }
+      
+      /* Hover Effects */
+      .recommendation-item:hover {
+        transform: scale(1.05);
+        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+      }
+      
+      /* Responsive Design */
+      @media (max-width: 1024px) {
+        #recommendations {
+          padding: 30px;
+        }
+        
+        .recommendation-item {
+          flex: 1 1 calc(50% - 20px);
+        }
+      }
+      
+      @media (max-width: 768px) {
+        #recommendations h2 {
+          font-size: 3rem;
+        }
+        
+        .recommendation-list {
+          flex-direction: column;
+        }
+        
+        .recommendation-item {
+          width: 100%;
+          margin-bottom: 20px;
+          height: auto;
+          min-height: 350px;
+        }
+        
+        .recommendation-item h3 {
+          font-size: 2.5rem;
+        }
+        
+        .recommendation-item p {
+          font-size: 1.6rem;
+        }
+        
+        .recommendation-item button {
+          font-size: 1.6rem;
+          padding: 12px 25px;
+        }
+      }
+      </style>
+      
+      <section id="recommendations" class="recommendations-section">
+        <h2 id="h1darkbtn">Personalized Recommendations</h2>
+        <p>
+          We've picked these destinations, hotels, and activities just for you,
+          based on your preferences.
+        </p>
+        
+        <div class="recommendation-list">
+          <div class="recommendation-item">
+            <div class="header1">
+              <h3 id="h1darkbtn">Beach Resort in Goa</h3>
+              <p>
+                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>
+                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>
+                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>
 /* Content Container */
 .header1, .header2 {
   display: flex;

From a5ac10ed303255668a8b281c4b51a477e61bf6fb Mon Sep 17 00:00:00 2001
From: Adarsh-Chaubey03 <adarsh03chaubey@gmail.com>
Date: Mon, 28 Oct 2024 11:14:59 +0530
Subject: [PATCH 31/38] added footer to disclaimer page.

---
 disclaimer.html | 55 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 55 insertions(+)

diff --git a/disclaimer.html b/disclaimer.html
index dd689c74..b900df73 100644
--- a/disclaimer.html
+++ b/disclaimer.html
@@ -284,6 +284,61 @@ <h2 id="section6">6. Contact Us</h2>
             <p>Phone: <a href="tel:+1234567890" style="color: rgb(103, 115, 212); text-decoration: none;">+123 456 7890</a></p>
         </div>
     </div>
+    <footer>
+        <div class="container2">
+          <div class="footer-content">
+            <div class="footer-column">
+              <h3>About Us</h3>
+              <p>
+                Discover and plan affordable trips with BuddyTrail's travel
+                companion tools.
+              </p>
+            </div>
+            <div class="footer-column">
+              <h3>Quick Links</h3>
+              <ul>
+                <li><a href="index.html">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="/#services">Services</a></li>
+                <li><a href="contact.html">Contact</a></li>
+                <li><a href="team.html">Team</a></li>
+                <li>
+                  <a href="contributor/contributor.html">Our Contributor</a>
+                </li>
+              </ul>
+            </div>
+            <div class="footer-column">
+              <h3>Contact Us</h3>
+              <p>Email: <a href="mailto:info@example.com" style="color: white; text-decoration: none;">info@example.com</a></p>
+              <p>Phone: <a href="tel:+1234567890" style="color: white; text-decoration: none;">+123 456 7890</a></p>
+              
+            </div>
+            <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://twitter.com/PriyaGhosa39968" target="_blank"
+                  ><i class="fab fa-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>
+          <p class="copyright">&copy; 2024 BuddyTrail | All rights reserved.</p>
+        </div>
+      </footer>
     <script>
         const modeToggle = document.getElementById('modeToggle');
         const body = document.body;

From 8ca4391e8ae7bc4b19af8228ec116cc3c3db6094 Mon Sep 17 00:00:00 2001
From: Adarsh-Chaubey03 <adarsh03chaubey@gmail.com>
Date: Mon, 28 Oct 2024 11:16:27 +0530
Subject: [PATCH 32/38] reduce footer size on copyright page

---
 copyright.html | 38 ++++++++++++++++++++++++++------------
 1 file changed, 26 insertions(+), 12 deletions(-)

diff --git a/copyright.html b/copyright.html
index f4411727..232d5878 100644
--- a/copyright.html
+++ b/copyright.html
@@ -259,11 +259,14 @@ <h2 id="contact">8. Contact Information</h2>
 
   </div>
   <footer>
-    <div class="container3">
+    <div class="container2">
       <div class="footer-content">
         <div class="footer-column">
           <h3>About Us</h3>
-          <p>Discover and plan affordable trips with BuddyTrail's travel companion tools.</p>
+          <p>
+            Discover and plan affordable trips with BuddyTrail's travel
+            companion tools.
+          </p>
         </div>
         <div class="footer-column">
           <h3>Quick Links</h3>
@@ -274,24 +277,36 @@ <h3>Quick Links</h3>
             <li><a href="/#services">Services</a></li>
             <li><a href="contact.html">Contact</a></li>
             <li><a href="team.html">Team</a></li>
-            <li><a href="contributor/contributor.html">Our Contributor</a></li>
+            <li>
+              <a href="contributor/contributor.html">Our Contributor</a>
+            </li>
           </ul>
         </div>
         <div class="footer-column">
           <h3>Contact Us</h3>
-          <p>Email: <a href="mailto:info@example.com" style="color: white; text-decoration: none;">info@example.com</a>
-          </p>
+          <p>Email: <a href="mailto:info@example.com" style="color: white; text-decoration: none;">info@example.com</a></p>
           <p>Phone: <a href="tel:+1234567890" style="color: white; text-decoration: none;">+123 456 7890</a></p>
-
+          
         </div>
         <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://twitter.com/PriyaGhosa39968" target="_blank"><i class="fab fa-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>
+            <a href="https://discord.com/invite/priyaghosal" target="_blank"
+              ><i class="fab fa-discord"></i
+            ></a>
+            <a href="https://twitter.com/PriyaGhosa39968" target="_blank"
+              ><i class="fab fa-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>
@@ -300,7 +315,6 @@ <h3>Follow Us</h3>
   </footer>
 
 
-
   <script>
     // Hamburger menu functionality
     document.addEventListener("DOMContentLoaded", function () {

From cbf1f166889912b0522543c34312e2b599207e48 Mon Sep 17 00:00:00 2001
From: Adarsh-Chaubey03 <adarsh03chaubey@gmail.com>
Date: Mon, 28 Oct 2024 11:20:22 +0530
Subject: [PATCH 33/38] made clickable on cookie policy

---
 cookie_policy.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/cookie_policy.html b/cookie_policy.html
index f6e0616f..f25f8edf 100644
--- a/cookie_policy.html
+++ b/cookie_policy.html
@@ -302,7 +302,7 @@ <h2 id="section6">6. Changes to This Cookie Policy</h2>
             <h2 id="section7">7. Contact Us</h2>
             <p>If you have any questions or concerns about this Cookie Policy, please contact us:</p>
             <p>Email: <a href="mailto:support@buddytrail.com">support@buddytrail.com</a></p>
-            <p>Phone: +1-800-555-1234</p>
+            <p>Phone: <a href="tel:+1234567890" style="color: rgb(90, 198, 245); text-decoration: none;">+123 456 7890</a></p>
         </div>
     </div>
 
@@ -332,8 +332,8 @@ <h3>Quick Links</h3>
             </div>
             <div class="footer-column">
               <h3>Contact Us</h3>
-              <p>Email: info@example.com</p>
-              <p>Phone: +123 456 7890</p>
+              <p>Email: <a href="mailto:info@example.com" style="color: white; text-decoration: none;">info@example.com</a></p>
+              <p>Phone: <a href="tel:+1234567890" style="color: white; text-decoration: none;">+123 456 7890</a></p>
             </div>
             <div class="footer-column">
               <h3>Follow Us</h3>

From 273653e04f7fbacca4bf152f2d1a8b9d8bcdb413 Mon Sep 17 00:00:00 2001
From: "V .SWATHI" <swathivemula07@gmail.com>
Date: Mon, 28 Oct 2024 13:22:14 +0530
Subject: [PATCH 34/38] Update index.html

---
 index.html | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/index.html b/index.html
index a79d910d..d60d1ba1 100644
--- a/index.html
+++ b/index.html
@@ -2516,11 +2516,13 @@ <h2 style="color: #0057B3;" id="h1darkbtn">Rate your experience</h2>
           <form class="form" id="reviewForm">
             <label for="name" id="darkbtn" style="color: black;">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" style="color: black;">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('')"/>
 

From 904a5c9cff0ccc4f6de92894cf94d6591f563824 Mon Sep 17 00:00:00 2001
From: Priya Ghosal <162816363+PriyaGhosal@users.noreply.github.com>
Date: Mon, 28 Oct 2024 13:23:05 +0530
Subject: [PATCH 35/38] =?UTF-8?q?Revert=20"=F0=9F=9B=A0=EF=B8=8FFix=20:=20?=
 =?UTF-8?q?Calendar=20Date=20Validation:=20Allows=20Selection=20of=20Past?=
 =?UTF-8?q?=20Dates"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 book.html | 33 ---------------------------------
 1 file changed, 33 deletions(-)

diff --git a/book.html b/book.html
index bc155e09..c3a3bb81 100644
--- a/book.html
+++ b/book.html
@@ -378,39 +378,6 @@ <h2>Book Your Trip</h2>
             <input type="date" id="dates" name="dates" required />
             <div class="error" id="datesError"></div>
           </div>
-
-          <script>
-            // Function to set the minimum date to today
-            function setMinDate() {
-                const today = new Date();
-                const dd = String(today.getDate()).padStart(2, '0');
-                const mm = String(today.getMonth() + 1).padStart(2, '0'); // January is 0!
-                const yyyy = today.getFullYear();
-        
-                // Format the date as YYYY-MM-DD
-                const minDate = yyyy + '-' + mm + '-' + dd;
-                document.getElementById("dates").setAttribute("min", minDate);
-            }
-        
-            // Call the function when the document is loaded
-            document.addEventListener("DOMContentLoaded", setMinDate);
-        
-            // Optional: Validate the date on form submission
-            document.querySelector("form").addEventListener("submit", function(event) {
-                const selectedDate = new Date(document.getElementById("dates").value);
-                const today = new Date();
-                today.setHours(0, 0, 0, 0); // Set time to midnight for comparison
-        
-                if (selectedDate < today) {
-                    event.preventDefault(); // Prevent form submission
-                    document.getElementById("datesError").innerText = "Please select a date that is today or in the future.";
-                } else {
-                    document.getElementById("datesError").innerText = ""; // Clear any previous error message
-                }
-            });
-        </script>
-
-
           <div class="form-group">
             <label for="transport">Mode of Transport:</label>
             <select id="transport" name="transport" required>

From 1660e9644f376a38286948c823787d16a660b041 Mon Sep 17 00:00:00 2001
From: Ayush <asharma7588@gmail.com>
Date: Mon, 28 Oct 2024 14:25:12 +0530
Subject: [PATCH 36/38] added rate limit api to login api

---
 backend/.gitignore           |  3 ++-
 backend/package-lock.json    | 16 ++++++++++++++++
 backend/package.json         |  1 +
 backend/routes/authRoutes.js | 27 +++++++++++++++++++++------
 4 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/backend/.gitignore b/backend/.gitignore
index 2eea525d..32c96c19 100644
--- a/backend/.gitignore
+++ b/backend/.gitignore
@@ -1 +1,2 @@
-.env
\ No newline at end of file
+.env
+/node_modules
\ No newline at end of file
diff --git a/backend/package-lock.json b/backend/package-lock.json
index 9b8b10b9..e334b780 100644
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -15,6 +15,7 @@
         "cors": "^2.8.5",
         "dotenv": "^16.4.5",
         "express": "^4.21.1",
+        "express-rate-limit": "^7.4.1",
         "jsonwebtoken": "^9.0.2",
         "mongoose": "^8.7.3"
       }
@@ -357,6 +358,21 @@
         "node": ">= 0.10.0"
       }
     },
+    "node_modules/express-rate-limit": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-7.4.1.tgz",
+      "integrity": "sha512-KS3efpnpIDVIXopMc65EMbWbUht7qvTCdtCR2dD/IZmi9MIkopYESwyRqLgv8Pfu589+KqDqOdzJWW7AHoACeg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/express-rate-limit"
+      },
+      "peerDependencies": {
+        "express": "4 || 5 || ^5.0.0-beta.1"
+      }
+    },
     "node_modules/express/node_modules/cookie": {
       "version": "0.7.1",
       "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.1.tgz",
diff --git a/backend/package.json b/backend/package.json
index 785be57c..e1319e4d 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -16,6 +16,7 @@
     "cors": "^2.8.5",
     "dotenv": "^16.4.5",
     "express": "^4.21.1",
+    "express-rate-limit": "^7.4.1",
     "jsonwebtoken": "^9.0.2",
     "mongoose": "^8.7.3"
   }
diff --git a/backend/routes/authRoutes.js b/backend/routes/authRoutes.js
index abafc6b2..5a667a3d 100644
--- a/backend/routes/authRoutes.js
+++ b/backend/routes/authRoutes.js
@@ -1,11 +1,26 @@
-const express = require('express');
-const { signup, login, logout, verifyToken } = require('../controllers/authController');
+const express = require("express");
+const rateLimit = require("express-rate-limit");
+const {
+  signup,
+  login,
+  logout,
+  verifyToken,
+} = require("../controllers/authController");
 
 const router = express.Router();
 
-router.post('/signup', signup);
-router.post('/login', login);
-router.post('/logout', logout);
-router.get('/verify', verifyToken); // New verification route
+// Set up rate limiter for the login route
+const loginRateLimiter = rateLimit({
+  windowMs: 5 * 60 * 1000, // 5 minutes
+  max: 5,
+  message: "Too many login attempts. Please try again in 5 minutes.",
+  standardHeaders: true,
+  legacyHeaders: false,
+});
+
+router.post("/signup", signup);
+router.post("/login", loginRateLimiter, login); // Apply the limiter here
+router.post("/logout", logout);
+router.get("/verify", verifyToken);
 
 module.exports = router;

From 150a351cb3bb0bbb1d74518b9f17a61d95b50895 Mon Sep 17 00:00:00 2001
From: Priya Ghosal <162816363+PriyaGhosal@users.noreply.github.com>
Date: Mon, 28 Oct 2024 14:54:11 +0530
Subject: [PATCH 37/38] Revert "Updated whole Blog page "

---
 blog.html | 1132 ++++++++++++++++++++++++-----------------------------
 1 file changed, 514 insertions(+), 618 deletions(-)

diff --git a/blog.html b/blog.html
index fcdcb4c0..1cbb68db 100644
--- a/blog.html
+++ b/blog.html
@@ -12,381 +12,496 @@
     <link
         href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Playfair+Display:wght@400;700&display=swap"
         rel="stylesheet">
+        <link rel="stylesheet" href="RatingStyle.css" />
+    <link rel="stylesheet" href="style.css" />
+    <link rel="stylesheet" href="./styles/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" />
+    <style>
+        :root {
+            --primary-color: #3498db;
+            --secondary-color: #2ecc71;
+            --background-color: #f4f4f4;
+            --text-color: #333;
+            --card-bg: #ffffff;
+            --header-bg: #1a1a2e;
+            --header-text: #ffffff;
+        }
 
-.logo {
-    display: flex;
-    align-items: center;
-    gap: 15px;
-}
-
-.logo img {
-    height: 45px;
-    transition: transform 0.3s ease;
-}
-
-.logo:hover img {
-    transform: scale(1.05);
-}
-
-#logo {
-    font-family: 'Inter', sans-serif;
-    font-size: 2rem;
-    font-weight: 800;
-    color: var(--header-text);
-    letter-spacing: -1px;
-    position: relative;
-}
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
 
-/* Enhanced Navigation */
-#nav-list {
-    display: flex;
-    list-style-type: none;
-    gap: 3rem;
-    align-items: center;
-}
+        body {
+            font-family: 'Poppins', sans-serif;
+            background-color: var(--background-color);
+            color: var(--text-color);
+            line-height: 1.6;
+        }
 
-#nav-list a {
-    color: var(--header-text);
-    text-decoration: none;
-    font-weight: 500;
-    font-size: 1.1rem;
-    position: relative;
-    padding: 0.5rem 0;
-}
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 20px;
+            margin-bottom: 85px;
+        }
 
-#nav-list a::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 50%;
-    width: 0;
-    height: 2px;
-    background-color: var(--header-text);
-    transition: all 0.3s ease;
-    transform: translateX(-50%);
-}
-
-#nav-list a:hover::after {
-    width: 100%;
-}
+        header {
+            background-color: var(--header-bg);
+            color: var(--header-text);
+            padding: 1rem 0;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+            position: fixed;
+            width: 100%;
+            top: 0;
+            z-index: 1000;
+            transition: background-color 0.3s ease;
+        }
 
-/* Enhanced Hero Section */
-.hero {
-    text-align: center;
-    padding: 6rem 2rem;
-    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
-    color: white;
-    margin: 2rem auto;
-    border-radius: 20px;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
-    max-width: 1200px;
-    position: relative;
-    overflow: hidden;
-}
+        header.scrolled {
+            background-color: rgba(26, 26, 46, 0.9);
+            backdrop-filter: blur(10px);
+        }
 
-.hero::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
-    pointer-events: none;
-}
-
-.hero h2 {
-    font-size: 3rem;
-    margin-bottom: 1.5rem;
-    font-weight: 800;
-    letter-spacing: -1px;
-}
-
-.hero p {
-    font-size: 1.25rem;
-    max-width: 700px;
-    margin: 0 auto;
-    opacity: 0.9;
-}
-
-/* Enhanced Blog Container */
-.blog-container {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
-    gap: 2.5rem;
-    padding: 2rem;
-    max-width: 1400px;
-    margin: 0 auto;
-}
-
-.blog-post {
-    background-color: var(--card-bg);
-    border: 1px solid var(--border-color);
-    border-radius: 15px;
-    padding: 2rem;
-    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-}
-
-.blog-post:hover {
-    transform: translateY(-8px);
-    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
-}
-
-.blog-post h2 {
-    color: var(--primary-color);
-    margin-bottom: 1.5rem;
-    font-size: 1.8rem;
-    font-weight: 700;
-    line-height: 1.3;
-}
-
-/* Enhanced Categories and Tags */
-.category {
-    display: inline-block;
-    background-color: var(--primary-color);
-    color: var(--header-text);
-    padding: 0.6rem 1.2rem;
-    border-radius: 25px;
-    font-size: 0.9rem;
-    font-weight: 500;
-    margin-bottom: 1rem;
-    transform: translateY(0);
-    transition: all 0.3s ease;
-}
-
-.category:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
-}
-
-.tags {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-    justify-content: center;
-    margin: 1rem 0;
-}
-
-.tag {
-    background-color: var(--hover-bg);
-    color: var(--text-color);
-    padding: 0.4rem 1rem;
-    border-radius: 20px;
-    font-size: 0.85rem;
-    transition: all 0.3s ease;
-}
-
-.tag:hover {
-    background-color: var(--secondary-color);
-    color: var(--header-text);
-    transform: translateY(-2px);
-}
-
-/* Enhanced Buttons */
-.cms-controls {
-    display: flex;
-    gap: 1rem;
-    justify-content: center;
-    margin: 2rem 0;
-}
-
-button {
-    background-color: var(--primary-color);
-    color: var(--header-text);
-    border: none;
-    padding: 0.8rem 1.8rem;
-    border-radius: 30px;
-    font-size: 1rem;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
-    position: relative;
-    overflow: hidden;
-}
+        nav {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 2rem;
+        }
 
-button:hover {
-    transform: translateY(-3px);
-    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
-}
+        .logo {
+            display: flex;
+            align-items: center;
+        }
 
-button::after {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 0;
-    height: 0;
-    background-color: rgba(255, 255, 255, 0.2);
-    border-radius: 50%;
-    transform: translate(-50%, -50%);
-    transition: width 0.6s ease, height 0.6s ease;
-}
-
-button:hover::after {
-    width: 300%;
-    height: 300%;
-}
-
-/* Enhanced Footer */
-footer {
-    background-color: var(--header-bg);
-    color: var(--header-text);
-    padding: 5rem 0 3rem;
-    margin-top: 6rem;
-    text-align: center;
-}
-
-.footer-container {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-    gap: 4rem;
-    max-width: 1400px;
-    margin: 0 auto;
-    padding: 0 2rem;
-}
-
-.footer-column {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
+        .logo img {
+            height: 40px;
+            margin-right: 10px;
+        }
 
-.footer-column h3 {
-    font-size: 1.4rem;
-    margin-bottom: 2rem;
-    position: relative;
-    padding-bottom: 1rem;
-    font-weight: 600;
-}
+        #logo {
+            font-family: 'Playfair Display', serif;
+            font-size: 1.8rem;
+            font-weight: 700;
+            color: var(--header-text);
+        }
 
-.footer-column h3::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 60px;
-    height: 3px;
-    background-color: var(--header-text);
-}
-
-.footer-column a {
-    color: rgba(255, 255, 255, 0.8);
-    text-decoration: none;
-    padding: 0.5rem;
-    transition: all 0.3s ease;
-    font-size: 1.1rem;
-}
-
-.footer-column a:hover {
-    color: var(--header-text);
-    transform: translateX(5px);
-}
-
-.social-icons {
-    display: flex;
-    gap: 2rem;
-    margin-top: 2rem;
-    justify-content: center;
-}
-
-.social-icons a {
-    color: var(--header-text);
-    font-size: 1.8rem;
-    transition: all 0.3s ease;
-}
-
-.social-icons a:hover {
-    transform: translateY(-5px);
-    color: var(--header-text);
-}
-
-/* Enhanced Modal */
-.modal-content {
-    background-color: var(--card-bg);
-    padding: 3rem;
-    border-radius: 20px;
-    max-width: 700px;
-    margin: 5% auto;
-    text-align: center;
-}
-
-.modal-form input,
-.modal-form textarea {
-    width: 100%;
-    padding: 1rem;
-    margin-bottom: 1.5rem;
-    border: 2px solid var(--border-color);
-    border-radius: 10px;
-    font-size: 1rem;
-    transition: all 0.3s ease;
-}
-
-.modal-form input:focus,
-.modal-form textarea:focus {
-    border-color: var(--primary-color);
-    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
-    outline: none;
-}
-
-/* Responsive Design */
-@media (max-width: 768px) {
-    .container {
-        padding: 0 20px;
-    }
+        #nav-list {
+            display: flex;
+            list-style-type: none;
+        }
 
-    nav {
-        padding: 0 1.5rem;
-    }
+        #nav-list li {
+            margin-left: 2rem;
+        }
 
-    .hero {
-        padding: 4rem 1.5rem;
-    }
+        #nav-list a {
+            color: var(--header-text);
+            text-decoration: none;
+            font-weight: 500;
+            transition: color 0.3s ease;
+        }
 
-    .hero h2 {
-        font-size: 2.5rem;
-    }
+        #nav-list a:hover,
+        #nav-list a.active {
+            color: var(--secondary-color);
+        }
 
-    .blog-container {
-        grid-template-columns: 1fr;
-        padding: 1.5rem;
-    }
+        .hamburger {
+            display: none;
+            background: none;
+            border: none;
+            font-size: 1.5rem;
+            color: var(--header-text);
+            cursor: pointer;
+        }
 
-    .footer-container {
-        grid-template-columns: 1fr;
-        gap: 3rem;
-    }
+        main {
+            margin-top: 80px;
+            padding: 2rem 0;
+        }
 
-    #nav-list {
-        background-color: var(--header-bg);
-        position: absolute;
-        top: 100%;
-        left: 0;
-        width: 100%;
-        flex-direction: column;
-        padding: 1rem 0;
-        gap: 1rem;
-        display: none;
-    }
+        .hero {
+            text-align: center;
+            padding: 4rem 0;
+            background: linear-gradient(135deg, #3498db, #2ecc71);
+            color: white;
+            margin-bottom: 2rem;
+            border-radius: 10px;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+            min-height: auto;
+        }
 
-    #nav-list.show {
-        display: flex;
-    }
+        .hero h2 {
 
-    .hamburger {
-        display: block;
-        font-size: 1.8rem;
-        color: var(--header-text);
-        background: none;
-        border: none;
-        cursor: pointer;
-    }
-}
+            font-size: 2.5rem;
+            margin-bottom: 1rem;
+            color: white;
+            -webkit-text-stroke: 0px;
+        }
+
+        .hero p {
+            font-size: 1.2rem;
+            max-width: 600px;
+            margin: 0 auto;
+            animation: fadeInUp 1s ease-out 0.3s;
+            opacity: 0;
+            animation-fill-mode: forwards;
+        }
+
+        @keyframes fadeInUp {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .cms-controls {
+            display: flex;
+            justify-content: center;
+            margin-bottom: 2rem;
+        }
+
+        .cms-controls button {
+            background-color: var(--secondary-color);
+            color: white;
+            border: none;
+            padding: 0.7rem 1.5rem;
+            margin: 0 0.5rem;
+            border-radius: 25px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            font-weight: 500;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+        }
+
+        .cms-controls button:hover {
+            background-color: #27ae60;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+        }
+
+        .blog-filters {
+            display: flex;
+            justify-content: center;
+            margin-bottom: 2rem;
+        }
+
+        .blog-filters select {
+            padding: 0.7rem;
+            margin: 0 0.5rem;
+            border: 1px solid #ddd;
+            border-radius: 25px;
+            background-color: white;
+            font-family: 'Poppins', sans-serif;
+            font-size: 0.9rem;
+            transition: all 0.3s ease;
+            cursor: pointer;
+        }
+
+        .blog-filters select:focus {
+            outline: none;
+            border-color: var(--primary-color);
+            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
+        }
+
+        .blog-container {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 2rem;
+        }
+
+        .blog-post {
+            background-color: var(--card-bg);
+            border-radius: 10px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            padding: 1.5rem;
+            transition: all 0.3s ease;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .blog-post:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+        }
+
+        .blog-post h2 {
+            color: var(--primary-color);
+            margin-bottom: 1rem;
+            font-family: 'Playfair Display', serif;
+            font-size: 1.5rem;
+        }
+
+        .meta {
+            font-size: 0.9rem;
+            color: #777;
+            margin-bottom: 1rem;
+        }
+
+        .category {
+            display: inline-block;
+            background-color: var(--primary-color);
+            color: white;
+            padding: 0.2rem 0.8rem;
+            border-radius: 15px;
+            font-size: 0.8rem;
+            margin-bottom: 0.5rem;
+        }
+
+        .tags {
+            margin-bottom: 1rem;
+        }
+
+        .tag {
+            display: inline-block;
+            background-color: #e0e0e0;
+            color: #333;
+            padding: 0.2rem 0.5rem;
+            border-radius: 15px;
+            font-size: 0.8rem;
+            margin-right: 0.5rem;
+            margin-bottom: 0.5rem;
+            transition: background-color 0.3s ease;
+        }
+
+        .tag:hover {
+            background-color: #d0d0d0;
+        }
+
+        .content {
+            margin-bottom: 1rem;
+        }
+
+        .read-more {
+            display: inline-block;
+            margin-top: auto;
+            color: var(--primary-color);
+            text-decoration: none;
+            font-weight: 500;
+            transition: color 0.3s ease;
+        }
+
+        .read-more:hover {
+            color: #2980b9;
+        }
+
+        .comments-section {
+            margin-top: 1.5rem;
+            border-top: 1px solid #eee;
+            padding-top: 1rem;
+        }
+
+        .comment {
+            background-color: #f9f9f9;
+            border-radius: 5px;
+            padding: 1rem;
+            margin-bottom: 1rem;
+            transition: all 0.3s ease;
+        }
+
+        .comment:hover {
+            background-color: #f0f0f0;
+        }
+
+        .comment-form textarea {
+            width: 100%;
+            padding: 0.8rem;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            resize: vertical;
+            font-family: 'Poppins', sans-serif;
+            transition: all 0.3s ease;
+        }
+
+        .comment-form textarea:focus {
+            outline: none;
+            border-color: var(--primary-color);
+            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
+        }
+
+        .comment-form button {
+            background-color: var(--primary-color);
+            color: white;
+            border: none;
+            padding: 0.7rem 1.5rem;
+            border-radius: 25px;
+            cursor: pointer;
+            margin-top: 0.5rem;
+            transition: all 0.3s ease;
+            font-weight: 500;
+        }
+
+        .comment-form button:hover {
+            background-color: #2980b9;
+            transform: translateY(-2px);
+        }
+
+        
+
+        /* New styles for modals */
+        .modal {
+            display: none;
+            position: fixed;
+            z-index: 1000;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            overflow: auto;
+            background-color: rgba(0, 0, 0, 0.4);
+            animation: fadeIn 0.3s;
+        }
+
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+            }
+
+            to {
+                opacity: 1;
+            }
+        }
+
+        .modal-content {
+            background-color: var(--card-bg);
+            margin: 10% auto;
+            padding: 2rem;
+            border-radius: 10px;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+            width: 80%;
+            max-width: 600px;
+            animation: slideIn 0.3s;
+        }
+
+        @keyframes slideIn {
+            from {
+                transform: translateY(-50px);
+                opacity: 0;
+            }
+
+            to {
+                transform: translateY(0);
+                opacity: 1;
+            }
+        }
+
+        .modal-content h2 {
+            color: var(--primary-color);
+            margin-bottom: 1.5rem;
+            font-family: 'Playfair Display', serif;
+        }
+
+        .close {
+            color: #aaa;
+            float: right;
+            font-size: 28px;
+            font-weight: bold;
+            cursor: pointer;
+            transition: color 0.3s ease;
+        }
+
+        .close:hover,
+        .close:focus {
+            color: var(--primary-color);
+            text-decoration: none;
+        }
+
+        /* Form styles */
+        .modal-form input[type="text"],
+        .modal-form textarea {
+            width: 100%;
+            padding: 0.7rem;
+            margin-bottom: 1rem;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            font-family: 'Poppins', sans-serif;
+            transition: border-color 0.3s ease;
+        }
+
+        .modal-form input[type="text"]:focus,
+        .modal-form textarea:focus {
+            outline: none;
+            border-color: var(--primary-color);
+            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
+        }
+
+        .modal-form button {
+            background-color: var(--primary-color);
+            color: white;
+            border: none;
+            padding: 0.7rem 1.5rem;
+            border-radius: 25px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            font-weight: 500;
+        }
+
+        .modal-form button:hover {
+            background-color: #2980b9;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        }
+
+        /* List styles for categories and tags */
+        .item-list {
+            list-style-type: none;
+            padding: 0;
+            margin-bottom: 1.5rem;
+        }
+
+        .item-list li {
+            background-color: #f9f9f9;
+            border-radius: 5px;
+            padding: 0.7rem 1rem;
+            margin-bottom: 0.5rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            transition: background-color 0.3s ease;
+        }
+
+        .item-list li:hover {
+            background-color: #f0f0f0;
+        }
+
+        .delete-btn {
+            background-color: #e74c3c;
+            color: white;
+            border: none;
+            padding: 0.3rem 0.7rem;
+            border-radius: 15px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            font-size: 0.8rem;
+        }
+
+        .delete-btn:hover {
+            background-color: #c0392b;
+            transform: translateY(-1px);
+        }
     </style>
 </head>
 
@@ -471,209 +586,6 @@
     50% { transform: scale(1.05); }
     100% { transform: scale(1); }
   }
-  /* Blog Card Styles */
-.blog-container {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    gap: 2rem;
-    padding: 2rem;
-}
-
-.blog-card {
-    background: white;
-    border-radius: 12px;
-    overflow: hidden;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-    position: relative;
-}
-
-.blog-card:hover {
-    transform: translateY(-8px);
-    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
-}
-
-/* Image Container */
-.image-container {
-    position: relative;
-    height: 240px;
-    overflow: hidden;
-}
-
-.post-image {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    filter: grayscale(100%);
-    transition: transform 0.5s ease, filter 0.5s ease;
-}
-
-.blog-card:hover .post-image {
-    transform: scale(1.1);
-    filter: grayscale(0%);
-}
-
-.image-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0.3);
-    transition: opacity 0.3s ease;
-}
-
-.blog-card:hover .image-overlay {
-    opacity: 0;
-}
-
-/* Category Badge */
-.category-badge {
-    position: absolute;
-    top: 1rem;
-    left: 1rem;
-    background: rgba(255, 255, 255, 0.9);
-    padding: 0.5rem 1rem;
-    border-radius: 20px;
-    font-weight: 600;
-    font-size: 0.875rem;
-    color: #333;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-/* Post Content */
-.post-content {
-    padding: 1.5rem;
-}
-
-.post-meta {
-    display: flex;
-    gap: 1rem;
-    font-size: 0.875rem;
-    color: #666;
-    margin-bottom: 1rem;
-}
-
-.post-meta i {
-    margin-right: 0.5rem;
-}
-
-.post-title {
-    font-size: 1.25rem;
-    font-weight: 700;
-    margin-bottom: 1rem;
-    color: #333;
-    transition: color 0.3s ease;
-}
-
-.blog-card:hover .post-title {
-    color: #2563eb;
-}
-
-.post-excerpt {
-    color: #666;
-    margin-bottom: 1rem;
-    line-height: 1.6;
-}
-
-/* Tags */
-.tags-container {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-    margin-bottom: 1rem;
-}
-
-.tag {
-    background: #f3f4f6;
-    padding: 0.25rem 0.75rem;
-    border-radius: 15px;
-    font-size: 0.875rem;
-    color: #666;
-    transition: background-color 0.3s ease;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-}
-
-.tag:hover {
-    background: #e5e7eb;
-}
-
-/* Read More Button */
-.read-more-btn {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    color: #2563eb;
-    font-weight: 600;
-    font-size: 0.875rem;
-    transition: gap 0.3s ease;
-    background: none;
-    border: none;
-    padding: 0;
-    cursor: pointer;
-}
-
-.read-more-btn i {
-    transition: transform 0.3s ease;
-}
-
-.read-more-btn:hover i {
-    transform: translateX(4px);
-}
-
-/* Comments Section */
-.comments-section {
-    padding: 1.5rem;
-    border-top: 1px solid #e5e7eb;
-}
-
-.comment {
-    background: #f9fafb;
-    padding: 1rem;
-    border-radius: 8px;
-    margin-bottom: 1rem;
-}
-
-.comment-form {
-    margin-top: 1rem;
-}
-
-.comment-form textarea {
-    width: 100%;
-    padding: 0.75rem;
-    border: 1px solid #e5e7eb;
-    border-radius: 8px;
-    margin-bottom: 1rem;
-    resize: vertical;
-}
-
-.comment-form button {
-    background: #2563eb;
-    color: white;
-    padding: 0.5rem 1rem;
-    border-radius: 6px;
-    border: none;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-}
-
-.comment-form button:hover {
-    background: #1d4ed8;
-}
-
-/* Responsive Design */
-@media (max-width: 768px) {
-    .blog-container {
-        grid-template-columns: 1fr;
-    }
-    
-    .post-meta {
-        flex-direction: column;
-        gap: 0.5rem;
-    }
-}
       </style>
       <script>
         // Function to hide preloader and show content once the page has fully loaded
@@ -948,70 +860,54 @@ <h3>Subscribe to Our Newsletter</h3>
         function setLocalData(key, data) {
             localStorage.setItem(key, JSON.stringify(data));
         }
+
         function renderPosts() {
-    const container = document.querySelector('.blog-container');
-    container.innerHTML = '';
-    const posts = getLocalData('blogPosts');
-
-    posts.forEach(post => {
-        const article = document.createElement('article');
-        article.className = 'blog-post';
-        article.innerHTML = `
-            <div class="blog-card">
-                <div class="image-container">
-                    <img src="https://source.unsplash.com/800x600/?${post.category.toLowerCase()}" alt="${post.title}" class="post-image">
-                    <div class="image-overlay"></div>
-                    <span class="category-badge">${post.category}</span>
-                </div>
-                <div class="post-content">
-                    <div class="post-meta">
-                        <span class="date"><i class="far fa-calendar"></i> ${post.date}</span>
-                        <span class="author"><i class="far fa-user"></i> ${post.author}</span>
-                        <span class="comments"><i class="far fa-comment"></i> ${post.comments.length} comments</span>
-                    </div>
-                    <h2 class="post-title">${post.title}</h2>
-                    <div class="post-excerpt">
-                        <p>${post.content.substring(0, 150)}...</p>
-                    </div>
-                    <div class="tags-container">
-                        ${post.tags.map(tag => `
-                            <span class="tag">
-                                <i class="fas fa-tag"></i> ${tag}
-                            </span>
-                        `).join('')}
-                    </div>
-                    <div class="post-footer">
-                        <button class="read-more-btn" data-id="${post.id}">
-                            Read More 
-                            <i class="fas fa-arrow-right"></i>
-                        </button>
-                    </div>
-                </div>
-                <div class="full-content" style="display: none;">
-                    <p>${marked(post.content)}</p>
-                </div>
-                <div class="comments-section">
-                    <h3>Comments (${post.comments.length})</h3>
-                    <div class="comments">
-                        ${post.comments.slice(0, 2).map(comment => `
-                            <div class="comment">
-                                <p>${comment.text}</p>
-                                <small>${comment.date}</small>
-                            </div>
-                        `).join('')}
-                    </div>
-                    <form class="comment-form" data-post-id="${post.id}">
-                        <textarea placeholder="Add a comment"></textarea>
-                        <button type="submit">Post Comment</button>
-                    </form>
+            const container = document.querySelector('.blog-container');
+            container.innerHTML = '';
+            const posts = getLocalData('blogPosts');
+
+            posts.forEach(post => {
+                const article = document.createElement('article');
+                article.className = 'blog-post';
+                article.innerHTML = `
+            <h2>${post.title}</h2>
+            <div class="meta">Posted on ${post.date} by ${post.author}</div>
+            <div class="category">${post.category}</div>
+            <div class="tags">${post.tags.map(tag => `<span class="tag">${tag}</span>`).join('')}</div>
+            <div class="content">
+                <p>${post.content.substring(0, 150)}...</p>
+             </div>
+            <div class="full-content" style="display: none;">
+                <p>${marked(post.content)}</p>
+            </div>
+
+            </div>
+            <div class="full-content" style="display: none;">
+                <p>${marked(post.content)}</p>
+            </div>
+            
+            <a href="#" class="read-more" data-id="${post.id}">Read More</a>
+            <div class="comments-section">
+                <h3>Comments (${post.comments.length})</h3>
+                <div class="comments">
+                    ${post.comments.slice(0, 2).map(comment => `
+                        <div class="comment">
+                            <p>${comment.text}</p>
+                            <small>${comment.date}</small>
+                        </div>
+                    `).join('')}
                 </div>
+                <form class="comment-form" data-post-id="${post.id}">
+                    <textarea placeholder="Add a comment"></textarea>
+                    <button type="submit">Post Comment</button>
+                </form>
             </div>
         `;
-        container.appendChild(article);
-    });
+                container.appendChild(article);
+ });
 
-    addEventListeners();
-}
+            addEventListeners();
+        }
 
         function addEventListeners() {
             // Add event listeners for read more links

From 19b479cc57ee0423f3aab8b001064669fcd62b36 Mon Sep 17 00:00:00 2001
From: Priya Ghosal <162816363+PriyaGhosal@users.noreply.github.com>
Date: Mon, 28 Oct 2024 15:07:24 +0530
Subject: [PATCH 38/38] Revert "Pull Request: Align "Explore More" Button and
 Increase Text Size #1495"

---
 index.html | 487 +++++++++--------------------------------------------
 1 file changed, 83 insertions(+), 404 deletions(-)

diff --git a/index.html b/index.html
index f8666692..cebf2953 100644
--- a/index.html
+++ b/index.html
@@ -585,6 +585,7 @@ <h1>Ready for Your Next Adventure?</h1>
 
 <!-- JS to handle hamburger and close button -->
 <script>
+
   document.addEventListener("DOMContentLoaded", function () {
     const hamburger = document.getElementById("hamburger");
     const navList = document.getElementById("nav-list");
@@ -608,9 +609,8 @@ <h1>Ready for Your Next Adventure?</h1>
         mainHead.classList.remove("shadow");
       }
     });
-  }); // Added closing brace for DOMContentLoaded
-</script>
 
+</script>
 
 <script src="./script/popup.js"></script>
 
@@ -1499,470 +1499,149 @@ <h1 style="color: white; font-size: xx-large;">Book a Cab or Auto</h1>
 
 
     <!-- recommendations -->
-    <style>
-      /* Recommendations Section Styling */
-      #recommendations {
-        background: linear-gradient(135deg, #9aecff 0%, #3b302d 100%);
-        padding: 40px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: 0 auto;
-      }
-      
-      #recommendations h2 {
-        text-align: center;
-        color: #2c2b2b;
-        font-size: 4rem;
-        margin-bottom: 30px;
-        font-weight: bold;
-      }
-      
-      #recommendations > p {
-        text-align: center;
-        font-size: 1.8rem;
-        color: #2c2b2b;
-        margin-bottom: 40px;
-        max-width: 800px;
-        margin-left: auto;
-        margin-right: auto;
-      }
-      
-      /* Recommendations List */
-      .recommendation-list {
-        display: flex;
-        justify-content: space-between;
-        gap: 30px;
-        flex-wrap: wrap;
-      }
-      
-      /* Recommendation Item */
-      .recommendation-item {
-        background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
-        border-radius: 12px;
-        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
-        padding: 25px;
-        flex: 1 1 calc(33.333% - 30px);
-        transition: transform 0.4s ease, box-shadow 0.4s ease;
-        cursor: pointer;
-        height: 400px; /* Increased height */
-        position: relative;
-      }
-      
-      .recommendation-item:nth-child(2) {
-        background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
-      }
-      
-      .recommendation-item:nth-child(3) {
-        background: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%);
-      }
-      
-      /* Content Container */
-      .header1, .header2 {
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        text-align: center;
-      }
-      
-      .recommendation-item h3 {
-        color: #1e293b;
-        font-size: 3rem;
-        margin-bottom: 20px;
-        font-weight: bold;
-        line-height: 1.2;
-      }
-      
-      .recommendation-item p {
-        color: #555555;
-        font-size: 1.8rem;
-        line-height: 1.5;
-        flex-grow: 1;
-        margin-bottom: 20px;
-      }
-      
-      /* Button Styling */
-      .recommendation-item button {
-        background-color: #3b82f6;
-        color: white;
-        padding: 15px 30px;
-        border: none;
-        border-radius: 8px;
-        cursor: pointer;
-        transition: all 0.3s ease;
-        font-size: 1.8rem;
-        font-weight: 600;
-        margin-top: auto;
-        width: fit-content;
-      }
-      
-      .recommendation-item button:hover {
-        background-color: #1e40af;
-        transform: translateY(-5px);
-      }
-      
-      /* Hover Effects */
-      .recommendation-item:hover {
-        transform: scale(1.05);
-        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
-      }
-      
-      /* Responsive Design */
-      @media (max-width: 1024px) {
-        #recommendations {
-          padding: 30px;
-        }
-        
-        .recommendation-item {
-          flex: 1 1 calc(50% - 20px);
-        }
-      }
-      
-      @media (max-width: 768px) {
-        #recommendations h2 {
-          font-size: 3rem;
-        }
-        
-        .recommendation-list {
-          flex-direction: column;
-        }
-        
-        .recommendation-item {
-          width: 100%;
-          margin-bottom: 20px;
-          height: auto;
-          min-height: 350px;
-        }
-        
-        .recommendation-item h3 {
-          font-size: 2.5rem;
-        }
-        
-        .recommendation-item p {
-          font-size: 1.6rem;
-        }
-        
-        .recommendation-item button {
-          font-size: 1.6rem;
-          padding: 12px 25px;
-        }
-      }
-      </style>
-      
-      <section id="recommendations" class="recommendations-section">
-        <h2 id="h1darkbtn">Personalized Recommendations</h2>
-        <p>
-          We've picked these destinations, hotels, and activities just for you,
-          based on your preferences.
-        </p>
-        
-        <div class="recommendation-list">
-          <div class="recommendation-item">
-            <div class="header1">
-              <h3 id="h1darkbtn">Beach Resort in Goa</h3>
-              <p>
-                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>
-                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>
-                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>
-/* Content Container */
-.header1, .header2 {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  align-items: center; /* Center content horizontally */
-  text-align: center; /* Center text content */
-}
-
-/* Hover Effects */
-.recommendation-item:hover {
-  transform: scale(1.08);
-  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
-}
-
-.recommendation-item h3 {
-  color: #1e293b;
-  font-size: 2.5rem;
-  margin-bottom: 15px;
-  width: 100%; /* Ensure full width for proper centering */
-}
-
-.recommendation-item p {
-  color: #555555;
-  font-size: 1.5rem;
-  margin-bottom: 20px;
-  flex-grow: 1;
-  width: 100%; /* Ensure full width for proper centering */
-}
+    <section id="recommendations" class="recommendations-section">
+      <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>
 
-/* Buttons Styling */
-.recommendation-item button {
-  background-color: #3b82f6;
-  color: white;
-  padding: 12px 25px;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  transition: background-color 0.3s ease, transform 0.3s ease;
-  font-size: 1.5rem;
-  margin-top: auto;
-  /* Remove align-self and add these properties for center alignment */
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-}
+      <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>
 
-.recommendation-item button:hover {
-  background-color: #1e40af;
-  transform: translateY(-5px);
-}
+        <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>
 
-/* Section Responsiveness */
-@media (max-width: 768px) {
-  .recommendation-list {
-    flex-direction: column;
-  }
+        <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>
 
-  .recommendation-item {
-    margin-bottom: 20px;
-    height: auto;
-    min-height: 320px;
-  }
-}
-</style>
-<style>
-/* Recommendations Section Styling */
+    <style>
+      /* Recommendations Section Styling */
 #recommendations {
-  background: linear-gradient(135deg, #9aecff 0%, #3b302d 100%);
-  padding: 60px; /* Increased padding */
-  border-radius: 15px; /* Slightly larger border radius */
-  max-width: 1400px; /* Increased max-width */
+  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: 5rem; /* Increased from 4rem */
-  margin-bottom: 40px; /* Increased margin */
-  font-weight: bold;
+  font-size: 4rem;
+  margin-bottom: 30px; /* Increased margin for better spacing */
 }
 
 /* Recommendations List */
 .recommendation-list {
   display: flex;
   justify-content: space-between;
-  gap: 40px; /* Increased gap */
+  gap: 30px; /* Increased gap for larger cards */
   flex-wrap: wrap;
 }
 
-/* Recommendation Item */
+/* Recommendation Item with Gradient Background and Increased Size */
 .recommendation-item {
-  background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
-  border-radius: 15px;
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
-  padding: 35px; /* Increased padding */
-  flex: 1 1 calc(33.333% - 40px);
-  transition: transform 0.4s ease, box-shadow 0.4s ease;
+  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: 450px; /* Increased height */
-  position: relative;
-  display: flex;
-  flex-direction: column;
+  height: 320px; /* Fixed height for consistency */
 }
 
 .recommendation-item:nth-child(2) {
-  background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
+  background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%); /* Gradient 2 */
 }
 
 .recommendation-item:nth-child(3) {
-  background: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%);
-}
-
-/* Content Container */
-.header1, .header2 {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  align-items: center;
-  text-align: center;
+  background: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%); /* Gradient 3 */
 }
 
-/* Hover Effects */
+/* Hover Effects: Larger scale and deeper shadow */
 .recommendation-item:hover {
-  transform: scale(1.08);
-  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
+  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;
-  font-size: 3.5rem; /* Increased from 2.5rem */
-  margin-bottom: 25px; /* Increased margin */
-  width: 100%;
-  font-weight: bold;
-  line-height: 1.2; /* Added for better readability */
+  color: #1e293b; /* Darker text for readability */
+  font-size: 2.5rem; /* Slightly larger text */
+  margin-bottom: 15px;
 }
 
 .recommendation-item p {
   color: #555555;
-  font-size: 2rem; /* Increased from 1.5rem */
-  margin-bottom: 30px;
-  flex-grow: 1;
-  width: 100%;
-  line-height: 1.5; /* Added for better readability */
+  font-size: 1.5rem;
+  margin-bottom: 20px;
 }
 
 /* Buttons Styling */
 .recommendation-item button {
   background-color: #3b82f6;
   color: white;
-  padding: 16px 35px; /* Increased padding */
+  padding: 12px 25px; /* Increased button size */
   border: none;
-  border-radius: 8px;
+  border-radius: 6px;
   cursor: pointer;
   transition: background-color 0.3s ease, transform 0.3s ease;
-  font-size: 2rem; /* Increased from 1.5rem */
-  margin-top: auto;
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-  font-weight: bold;
+  font-size: 1.5rem;
 }
 
 .recommendation-item button:hover {
-  background-color: #1e40af;
-  transform: translateY(-5px);
+  background-color: #1e40af; /* Darker button on hover */
+  transform: translateY(-5px); /* Slight lift effect */
 }
 
 /* Section Responsiveness */
-@media (max-width: 1200px) {
-  #recommendations h2 {
-    font-size: 4rem;
-  }
-  
-  .recommendation-item h3 {
-    font-size: 3rem;
-  }
-  
-  .recommendation-item p {
-    font-size: 1.8rem;
-  }
-  
-  .recommendation-item button {
-    font-size: 1.8rem;
-  }
-}
-
 @media (max-width: 768px) {
   .recommendation-list {
     flex-direction: column;
   }
 
   .recommendation-item {
-    margin-bottom: 30px;
-    height: auto;
-    min-height: 400px;
-  }
-  
-  #recommendations h2 {
-    font-size: 3.5rem;
-  }
-  
-  .recommendation-item h3 {
-    font-size: 2.8rem;
-  }
-  
-  .recommendation-item p {
-    font-size: 1.6rem;
-  }
-  
-  .recommendation-item button {
-    font-size: 1.6rem;
-    padding: 14px 30px;
+    margin-bottom: 20px;
+    height: auto; /* Allow height to adjust */
   }
 }
-</style>
 
-<section id="recommendations" class="recommendations-section">
-  <h2 id="h1darkbtn">Personalized Recommendations</h2>
-  <p>
-    We've picked these destinations, hotels, and activities just for you,
-    based on your preferences.
-  </p>
-  
-  <div class="recommendation-list">
-    <div class="recommendation-item">
-      <div class="header1">
-        <h3 id="h1darkbtn">Beach Resort in Goa</h3>
-        <p>
-          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>
-          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>
-          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>
+    </style>
+
+
+
     <!--Emergency-->
     <div class="sos-container">
       <h2>Emergency SOS</h2>