diff --git a/F&Q.html b/F&Q.html
index 5bcfc2cf..d67102a4 100644
--- a/F&Q.html
+++ b/F&Q.html
@@ -325,7 +325,7 @@ <h1 id="logo"><a href="#home">BuddyTrail</a></h1>
       style="
         position: absolute;
         width: 250px;
-        top: 450px;
+        top: 370px;
         right: 1250px;
         mix-blend-mode: multiply;
       "
@@ -383,15 +383,15 @@ <h2>Most Frequent Questions</h2>
 <!-- Suggestions/Questions Form Section -->
 <section id="suggestions-form">
     <h2>Suggestions/Questions</h2>
-    <form id="suggestionForm" action="/submit-suggestion" method="POST">
+    <form id="suggestionForm" >
         <label for="name">Name:</label>
-        <input type="text" id="name" name="name" required placeholder="Your Name"><br><br>
+        <input type="text" id="name"  required placeholder="Your Name"><br><br>
 
         <label for="email">Email:</label>
-        <input type="email" id="email" name="email" required placeholder="Your Email"><br><br>
+        <input type="email" id="email" required placeholder="Your Email"><br><br>
 
         <label for="message">Message:</label><br>
-        <textarea id="message" name="message" rows="5" required placeholder="Your Message"></textarea><br><br>
+        <textarea id="message" rows="5" required placeholder="Your Message"></textarea><br><br>
 
         <button type="submit">Submit</button>
     </form>
@@ -406,6 +406,38 @@ <h2>Suggestions/Questions</h2>
   </div>
 </section>
 
+<script>
+  document.getElementById("suggestionForm").addEventListener("submit", async function (event) {
+  event.preventDefault();
+
+  const name = document.getElementById("name").value;
+  const email = document.getElementById("email").value;
+  const message = document.getElementById("message").value;
+
+  console.log(name,email,message);
+  try {
+    const response = await fetch("http://localhost:5000/api/contact/suggestion", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ name, email, message }),
+    });
+
+    const data = await response.json();
+
+    if (data.success) {
+      alert("Suggestion recorded!");
+    } else {
+      alert(data.message);
+    }
+  } catch (error) {
+    console.error("Error:", error);
+    alert("Internal server error");
+  }
+});
+
+</script>
 
         <script>
     // Get elements
@@ -456,6 +488,8 @@ <h2>Suggestions/Questions</h2>
   })
 </script>
 
+
+
   
 
     <style>
@@ -604,9 +638,7 @@ <h2>Suggestions/Questions</h2>
       #about:hover {
         background-color: #ffe0b2;
       }
-    </style>
- main
- main
+    </style> 
   
 <!-- Circles -->
 <div class="circle"></div>
@@ -738,14 +770,7 @@ <h2>Suggestions/Questions</h2>
   });
   });
     </script>  
-  </body>
- main
-
- main
-
- 
- main
-    
+  </body> 
 
   <footer id="footer">
     <div class="footer-container">
@@ -753,6 +778,43 @@ <h2>Suggestions/Questions</h2>
       <div class="footer-column">
         <h3>About Us</h3>
         <p>Discover and plan affordable trips with BuddyTrail's travel companion tools.</p>
+              <!-- Newsletter Form Section -->
+      <style>
+        .footer-column.newsletter {
+            max-width: 300px;
+            margin: 0 auto;
+            text-align: center;
+        }
+        #newsletter-form {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        #email {
+            width: 100%;
+            margin-bottom: 10px;
+            padding: 8px;
+            box-sizing: border-box;
+        }
+        button[type="submit"] {
+            width: 100px;
+            padding: 6px;
+            font-size: 14px;
+            background-color: #007bff;
+        }
+        #subscription-message {
+            font-size: 14px;
+            margin-top: 10px;
+        }
+    </style>
+      <div class="footer-column newsletter" id="newsletter">
+        <h3>Subscribe to Our Newsletter</h3>
+        <form id="newsletter-form">
+          <input type="email" id="email" placeholder="Enter your email" required />
+          <button type="submit">Subscribe</button>
+        </form>
+        <p id="subscription-message"></p>
+      </div>
       </div>
   
       <!-- Quick Links Section -->
@@ -789,9 +851,7 @@ <h3>Legal Links</h3>
         <h3>Contact Us</h3>
         <p>Email: <a href="mailto:info@example.com">info@example.com</a></p>
         <p>Phone: <a href="tel:+1234567890">+123 456 7890</a></p>
-      </div>
-  
-      <!-- Follow Us Section -->
+        <!-- Follow Us Section -->
       <div class="footer-column">
         <h3>Follow Us</h3>
         <div class="social-icons">
@@ -801,42 +861,6 @@ <h3>Follow Us</h3>
           <a href="https://www.linkedin.com/in/priya-ghosal-785771286/" target="_blank"><i class="fab fa-linkedin-in"></i></a>
         </div>
       </div>
-  
-      <!-- Newsletter Form Section -->
-      <style>
-        .footer-column.newsletter {
-            max-width: 300px;
-            margin: 0 auto;
-            text-align: center;
-        }
-        #newsletter-form {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-        }
-        #email {
-            width: 100%;
-            margin-bottom: 10px;
-            padding: 8px;
-            box-sizing: border-box;
-        }
-        button[type="submit"] {
-            width: 100px;
-            padding: 6px;
-            font-size: 14px;
-        }
-        #subscription-message {
-            font-size: 14px;
-            margin-top: 10px;
-        }
-    </style>
-      <div class="footer-column newsletter" id="newsletter">
-        <h3>Subscribe to Our Newsletter</h3>
-        <form id="newsletter-form">
-          <input type="email" id="email" placeholder="Enter your email" required />
-          <button type="submit">Subscribe</button>
-        </form>
-        <p id="subscription-message"></p>
       </div>
     </div>
   
@@ -896,8 +920,8 @@ <h3>Subscribe to Our Newsletter</h3>
         sunIcon.style.display = "none";
         moonIcon.style.display = "inline-block";
         localStorage.setItem("theme", "dark");
-        document.getElementById("clipart-img1").style.visibility = "hidden";
-        document.getElementById("clipart-img2").style.visibility = "hidden";
+        // document.getElementById("clipart-img1").style.visibility = "hidden";
+        // document.getElementById("clipart-img2").style.visibility = "hidden";
     } else {
         sunIcon.style.display = "inline-block";
         moonIcon.style.display = "none";
@@ -907,7 +931,6 @@ <h3>Subscribe to Our Newsletter</h3>
     }
   });
 });
-  </script>
- main
+  </script> 
 </body>
 </html>
diff --git a/about.html b/about.html
index d3d37f8e..4a74f2c7 100644
--- a/about.html
+++ b/about.html
@@ -10,8 +10,7 @@
     
     <link rel="icon" href="/icons/airplane.svg" />
     <link rel="icon" href="https://img.icons8.com/?size=100&id=11808&format=png&color=000000">
- main
- main
+
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
 <style>
           /* circle styles */
@@ -26,14 +25,15 @@
             pointer-events: none;
             z-index: 99999999;
           }
+       
         </style>  
     </head>
 
- main
+
 
 
     <link rel="stylesheet" href= "style.css" />
- main
+
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
 </head>
 
@@ -46,7 +46,29 @@
         </div>
         <div id="loading-text">Ready to Explore the World...</div>
     </div>
-    <!-- <style>
+    <style>
+
+
+    .scroll-to-top {
+    position: fixed;
+    bottom: 30px;
+    right: 30px;
+    padding: 10px 15px;
+    font-size: 20px;
+    background-color: #007BFF;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    display: none; /* Hidden by default */
+    z-index: 1000;
+}
+
+.scroll-to-top:hover {
+    background-color: #0056b3;
+}
+
+
         /* Preloader Container */
         #preloader {
             position: fixed;
@@ -681,6 +703,9 @@ <h3>PRIYA Ghosal</h3>
         }
     </style>
 
+<button id="scrollToTopBtn" class="scroll-to-top">↑</button>
+
+
     <!-- Scroll to top button -->
     <button id="scrollToTopBtn" title="Go to top">
         <i class="fas fa-arrow-up"></i>
@@ -776,10 +801,10 @@ <h3>Office <div class="underline"><span></span></div>
                     <p>Near XYZ Mall, Sample City</p>
                     <p>Fake State, PIN 12345, India</p>
                    
-                    <h3>
+                    <h5>
                         <a href="mailto:info@example.com" style="color: white; text-decoration: none;">info@example.com</a><br>
-                        <a href="tel:+1234567890" style="color: white; text-decoration: none;">+123 456 7890</a>
-                    </h3>
+                      <br>  <a href="tel:+1234567890" style="color: white; text-decoration: none;">+123 456 7890</a>
+                    </h5>
                     
                 </div>
                 <div class="col">
@@ -853,6 +878,26 @@ <h3>Follow Us <div class="underline"><span></span></div>
         });
     </script>
 
+<script>
+    // Show the button when the user scrolls down 100px from the top
+window.onscroll = function() {
+    const scrollToTopBtn = document.getElementById('scrollToTopBtn');
+    if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
+        scrollToTopBtn.style.display = 'block';
+    } else {
+        scrollToTopBtn.style.display = 'none';
+    }
+};
+
+// Scroll to the top when the button is clicked
+document.getElementById('scrollToTopBtn').addEventListener('click', function() {
+    window.scrollTo({
+        top: 0,
+        behavior: 'smooth'
+    });
+});
+
+</script>
 
 <!-- Circles -->
 <div class="circle"></div>
diff --git a/backend/controllers/ContactController.js b/backend/controllers/ContactController.js
index 413f09d2..e95f734b 100644
--- a/backend/controllers/ContactController.js
+++ b/backend/controllers/ContactController.js
@@ -2,6 +2,8 @@ const ContactUs = require("../models/ContactUs");
 
 const FeedbackModal = require("../models/Feedback");
 
+const SuggestionModal = require("../models/suggestion");
+
 const nodemailer = require("nodemailer");
 
 exports.submitContactForm = async (req, res) => {
@@ -11,7 +13,6 @@ exports.submitContactForm = async (req, res) => {
     const newContact = new ContactUs({ name, email, message });
     await newContact.save();
     return res.status(201).json({ message: "Message sent successfully!" });
-
   } catch (error) {
     console.error("Error saving contact form:", error);
     return res
@@ -50,13 +51,6 @@ exports.userfeedback = async (req, res) => {
       success: false,
       message: "internal server error ",
     });
-=======
-  } catch (error) {
-    console.error("Error saving contact form:", error);
-    return res
-      .status(500)
-      .json({ message: "Failed to send message. Please try again later." });
-
   }
 };
 
@@ -90,3 +84,33 @@ exports.sendEmail = async (req, resp) => {
     }
   });
 };
+
+exports.suggestion = async (req, resp) => {
+  try {
+    const { name, email, message } = req.body;
+    if (!name || !email || !message) {
+      return resp.status(400).send({
+        success: false,
+        message: "all fields are required",
+      });
+    }
+
+    const suggestion = await new SuggestionModal({
+      name: name,
+      email: email,
+      message: message,
+    }).save();
+
+    if (suggestion) {
+      return resp.status(201).send({
+        success: true,
+        message: "suggestion recorded",
+      });
+    }
+  } catch (error) {
+    return resp.status(500).send({
+      success: false,
+      message: "intenral server error",
+    });
+  }
+};
diff --git a/backend/models/suggestion.js b/backend/models/suggestion.js
new file mode 100644
index 00000000..2a0e9da1
--- /dev/null
+++ b/backend/models/suggestion.js
@@ -0,0 +1,22 @@
+const mongoose = require("mongoose");
+
+const SuggestionSchema = new mongoose.Schema(
+  {
+    name: {
+      type: String,
+      required: true,
+      trim: true,
+    },
+    email: {
+      type: String,
+      trim: true,
+    },
+    message: {
+      type: String,
+      trim: true,
+    },
+  },
+  { timestamps: true }
+);
+
+module.exports = mongoose.model("Suggestion", SuggestionSchema);
diff --git a/backend/routes/ContactRoutes.js b/backend/routes/ContactRoutes.js
index 797c5cb6..d2d45999 100644
--- a/backend/routes/ContactRoutes.js
+++ b/backend/routes/ContactRoutes.js
@@ -5,16 +5,17 @@ const {
   userfeedback,
 
   sendEmail,
-
+  suggestion,
 } = require("../controllers/ContactController.js");
 
 const router = express.Router();
 
 router.post("/", submitContactForm);
 
-
 router.post("/feedback", userfeedback);
 
 router.post("/email", sendEmail);
 
+router.post("/suggestion", suggestion);
+
 module.exports = router;
diff --git a/blog.html b/blog.html
index caf9dd6e..0f28d38c 100644
--- a/blog.html
+++ b/blog.html
@@ -1,18 +1,21 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>BuddyTrail Blog - Discover Your Next Adventure</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
+    />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link rel="stylesheet" href="blog.css" />
     <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" />
+      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="icon" href="/icons/airplane.svg" />
@@ -34,476 +37,473 @@
     />
     <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;
-        }
-
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        body {
-            font-family: 'Poppins', sans-serif;
-            background-color: var(--background-color);
-            color: var(--text-color);
-            line-height: 1.6;
-        }
-
-        .container {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 0 20px;
-            margin-bottom: 85px;
-        }
-
-        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;
-        }
-
-        header.scrolled {
-            background-color: rgba(26, 26, 46, 0.9);
-            backdrop-filter: blur(10px);
-        }
-
-        nav {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 0 2rem;
-        }
-
-        .logo {
-            display: flex;
-            align-items: center;
-        }
-
-        .logo img {
-            height: 40px;
-            margin-right: 10px;
-        }
-
-        #logo {
-            font-family: 'Playfair Display', serif;
-            font-size: 1.8rem;
-            font-weight: 700;
-            color: var(--header-text);
-        }
-
-        #nav-list {
-            display: flex;
-            list-style-type: none;
-        }
-
-        #nav-list li {
-            margin-left: 2rem;
-        }
-
-        #nav-list a {
-            color: var(--header-text);
-            text-decoration: none;
-            font-weight: 500;
-            transition: color 0.3s ease;
-        }
-
-        #nav-list a:hover,
-        #nav-list a.active {
-            color: var(--secondary-color);
-        }
-
-        .hamburger {
-            display: none;
-            background: none;
-            border: none;
-            font-size: 1.5rem;
-            color: var(--header-text);
-            cursor: pointer;
-        }
-
-        main {
-            margin-top: 80px;
-            padding: 2rem 0;
-        }
-
-        .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;
-        }
-
-        .hero h2 {
-
-            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);
-        }
+      :root {
+        --primary-color: #3498db;
+        --secondary-color: #2ecc71;
+        --background-color: #f4f4f4;
+        --text-color: #333;
+        --card-bg: #ffffff;
+        --header-bg: #1a1a2e;
+        --header-text: #ffffff;
+      }
+
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      body {
+        font-family: "Poppins", sans-serif;
+        background-color: var(--background-color);
+        color: var(--text-color);
+        line-height: 1.6;
+      }
+
+      .container {
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 0 20px;
+        margin-bottom: 85px;
+      }
+
+      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;
+      }
+
+      header.scrolled {
+        background-color: rgba(26, 26, 46, 0.9);
+        backdrop-filter: blur(10px);
+      }
+
+      nav {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 2rem;
+      }
+
+      .logo {
+        display: flex;
+        align-items: center;
+      }
+
+      .logo img {
+        height: 40px;
+        margin-right: 10px;
+      }
+
+      #logo {
+        font-family: "Playfair Display", serif;
+        font-size: 1.8rem;
+        font-weight: 700;
+        color: var(--header-text);
+      }
+
+      #nav-list {
+        display: flex;
+        list-style-type: none;
+      }
+
+      #nav-list li {
+        margin-left: 2rem;
+      }
+
+      #nav-list a {
+        color: var(--header-text);
+        text-decoration: none;
+        font-weight: 500;
+        transition: color 0.3s ease;
+      }
+
+      #nav-list a:hover,
+      #nav-list a.active {
+        color: var(--secondary-color);
+      }
+
+      .hamburger {
+        display: none;
+        background: none;
+        border: none;
+        font-size: 1.5rem;
+        color: var(--header-text);
+        cursor: pointer;
+      }
+
+      main {
+        margin-top: 80px;
+        padding: 2rem 0;
+      }
+
+      .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;
+      }
+
+      .hero h2 {
+        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>
 <style>
           /* circle styles */
@@ -529,103 +529,121 @@
           <div class="loader-globe"></div>
         </div>
         <div id="loading-text">Ready to Explore the World...</div>
+
       </div>
-      <style>
+      <div id="loading-text">Ready to Explore the World...</div>
+    </div>
+    <style>
       /* Preloader Container */
       #preloader {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    background-color: rgba(0, 0, 0, 0.9);
-    z-index: 1000;
-  }
-  
-  /* Wrapper for the logo and loader */
-  .loader-wrapper {
-    position: relative;
-    width: 180px;
-    height: 180px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-  
-  /* Logo Styling */
-  #logo {
-    width: 140px;
-    position: relative;
-    z-index: 10; /* Ensures logo stays above the loader */
-    animation: pulse 2s infinite ease-in-out;
-  }
-  
-  /* Circular Loader surrounding the logo */
-  .loader-globe {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    border: 8px solid transparent;
-    border-left-color: white;
-    border-right-color: white;
-    animation: spin 2s linear infinite;
-  }
-  
-  /* Loading Text */
-  #loading-text {
-    margin-top: 20px;
-    font-size: 20px;
-    color: white;
-    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
-    letter-spacing: 1px;
-    animation: textGlow 2s ease-in-out infinite;
-  }
-  
-  /* Keyframes Animations */
-  @keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-  }
-  
-  @keyframes textGlow {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.5; }
-  }
-  
-  @keyframes pulse {
-    0% { transform: scale(1); }
-    50% { transform: scale(1.05); }
-    100% { transform: scale(1); }
-  }
-      </style>
-      <script>
-        // Function to hide preloader and show content once the page has fully loaded
-    window.addEventListener('load', function() {
-        const preloader = document.getElementById('preloader');
-        const content = document.getElementById('content');
-    
+        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>
+        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 class="main-head">
+
         <div class="logo">
           <img src="img/logo.png" id="logo-web" />
           <h1 id="logo"><a href="index.html">BuddyTrail</a></h1>
@@ -667,434 +685,103 @@ <h1 id="logo"><a href="index.html">BuddyTrail</a></h1>
       </header>
 
     <main>
-        <section class="hero">
-            <h2>Discover Travel Tips, Stories, and Inspiration</h2>
-            <p>Welcome to the BuddyTrail Blog, your go-to destination for all things travel!</p>
-        </section>
-
-        <div class="container">
-            <div class="cms-controls">
-                <button onclick="window.location='new_post.html'" id="newPostBtn">New Post</button>
-                <button id="manageCategoriesBtn">Manage Categories</button>
-                <button id="manageTagsBtn">Manage Tags</button>
-            </div>
+      <section class="hero">
+        <h2>Discover Travel Tips, Stories, and Inspiration</h2>
+        <p>
+          Welcome to the BuddyTrail Blog, your go-to destination for all things
+          travel!
+        </p>
+      </section>
+
+      <div class="container">
+        <div class="cms-controls">
+          <button onclick="window.location='new_post.html'" id="newPostBtn">
+            New Post
+          </button>
+          <button id="manageCategoriesBtn">Manage Categories</button>
+          <button id="manageTagsBtn">Manage Tags</button>
+        </div>
 
-            <div class="blog-filters">
-                <select id="categoryFilter">
-                    <option value="">All Categories</option>
-                </select>
-                <select id="tagFilter">
-                    <option value="">All Tags</option>
-                </select>
-            </div>
+        <div class="blog-filters">
+          <select id="categoryFilter">
+            <option value="">All Categories</option>
+          </select>
+          <select id="tagFilter">
+            <option value="">All Tags</option>
+          </select>
+        </div>
 
-            <div class="blog-container">
-                <!-- Blog posts will be dynamically generated here -->
-            </div>
+        <div class="blog-container">
+          <!-- Blog posts will be dynamically generated here -->
         </div>
+      </div>
     </main>
     <footer id="footer">
-        <div class="footer-container">
-          <!-- About Us Section -->
-          <div class="footer-column">
-            <h3>About Us</h3>
-            <p>Discover and plan affordable trips with BuddyTrail's travel companion tools.</p>
-          </div>
-      
-          <!-- Quick Links Section -->
-          <div class="footer-column">
-            <h3>Quick Links</h3>
-            <ul>
-              <li><a href="#home">Home</a></li>
-              <li><a href="about.html">About</a></li>
-              <li><a href="faq.html" class="faq-link">FAQs</a></li>
-              <li><a href="servicespage.html">Services</a></li>
-              <li><a href="contact.html">Contact</a></li>
-              <li><a href="team.html">Team</a></li>
-              <li><a href="contributor/contributor.html">Our Contributor</a></li>
-            </ul>
-          </div>
-      
-          <!-- Legal Links Section -->
-          <div class="footer-column">
-            <h3>Legal Links</h3>
-            <ul>
-              <li><a href="terms_of_service.html">Terms of Service</a></li>
-              <li><a href="privacypolicy.html">Privacy Policy</a></li>
-              <li><a href="copyright.html">Copyright Notice</a></li>
-              <li><a href="disclaimer.html">Disclaimer</a></li>
-              <li><a href="cookie_policy.html">Cookie Policy</a></li>
-      
-              
-      
-            </ul>
-          </div>
-      
-          <!-- Contact Us Section -->
-          <div class="footer-column">
-            <h3>Contact Us</h3>
-            <p>Email: <a href="mailto:info@example.com">info@example.com</a></p>
-            <p>Phone: <a href="tel:+1234567890">+123 456 7890</a></p>
-          </div>
-      
-          <!-- Follow Us Section -->
-          <div class="footer-column">
-            <h3>Follow Us</h3>
-            <div class="social-icons">
-              <a href="https://discord.com/invite/priyaghosal" target="_blank"><i class="fab fa-discord"></i></a>
-              <a href="https://x.com/https://twitter.com/PriyaGhosa39968" target="_blank"><i class="fa-brands fa-x-twitter"></i></a>
-              <a href="https://github.com/PriyaGhosal/BuddyTrail" target="_blank"><i class="fab fa-github"></i></a>
-              <a href="https://www.linkedin.com/in/priya-ghosal-785771286/" target="_blank"><i class="fab fa-linkedin-in"></i></a>
-            </div>
-          </div>
-      
+      <div class="footer-container">
+        <!-- About Us Section -->
+        <div class="footer-column">
+          <h3>About Us</h3>
+          <p>
+            Discover and plan affordable trips with BuddyTrail's travel
+            companion tools.
+          </p>
           <!-- Newsletter Form Section -->
           <style>
             .footer-column.newsletter {
-                max-width: 300px;
-                margin: 0 auto;
-                text-align: center;
+              max-width: 300px;
+              margin: 0 auto;
+              text-align: center;
             }
             #newsletter-form {
-                display: flex;
-                flex-direction: column;
-                align-items: center;
+              display: flex;
+              flex-direction: column;
+              align-items: center;
             }
             #email {
-                width: 100%;
-                margin-bottom: 10px;
-                padding: 8px;
-                box-sizing: border-box;
+              width: 100%;
+              margin-bottom: 10px;
+              padding: 8px;
+              box-sizing: border-box;
             }
             button[type="submit"] {
-                width: 100px;
-                padding: 6px;
-                font-size: 14px;
+              width: 100px;
+              padding: 6px;
+              font-size: 14px;
+              background-color: #007bff;
             }
             #subscription-message {
-                font-size: 14px;
-                margin-top: 10px;
+              font-size: 14px;
+              margin-top: 10px;
             }
-        </style>
+          </style>
           <div class="footer-column newsletter" id="newsletter">
             <h3>Subscribe to Our Newsletter</h3>
             <form id="newsletter-form">
-              <input type="email" id="email" placeholder="Enter your email" required />
+              <input
+                type="email"
+                id="email"
+                placeholder="Enter your email"
+                required
+              />
               <button type="submit">Subscribe</button>
             </form>
             <p id="subscription-message"></p>
           </div>
         </div>
-      
-        <!-- Footer Bottom Section -->
-        <div class="footer-bottom">
-          <p class="copyright-b">&copy; 2024 BuddyTrail. All rights reserved.</p>
-        </div>
-      </footer>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/2.1.3/marked.min.js"></script>
-    <script>
-        // Initialize data in localStorage if it doesn't exist
-        if (!localStorage.getItem('blogPosts')) {
-            localStorage.setItem('blogPosts', JSON.stringify([
-                {
-                    id: 1,
-                    title: "10 Must-Visit Destinations for 2024",
-                    content: "As we enter 2024, the world of travel continues to evolve. Here are our top picks for must-visit destinations:\n\n1. Kyoto, Japan: Experience the perfect blend of ancient traditions and modern innovations.\n2. Galapagos Islands, Ecuador: Witness unique wildlife in their natural habitat.\n3. Dubrovnik, Croatia: Explore the stunning medieval architecture and crystal-clear Adriatic waters.\n4. Machu Picchu, Peru: Discover the mysteries of this ancient Incan citadel.\n5. Santorini, Greece: Enjoy breathtaking sunsets and picturesque white-washed buildings.\n6. Banff National Park, Canada: Immerse yourself in the pristine wilderness of the Canadian Rockies.\n7. Marrakech, Morocco: Get lost in the vibrant souks and experience rich Moroccan culture.\n8. Reykjavik, Iceland: Chase the Northern Lights and relax in geothermal hot springs.\n9. Queenstown, New Zealand: Indulge in adrenaline-pumping activities amidst stunning landscapes.\n10. Petra, Jordan: Step back in time at this ancient wonder carved into rose-red cliffs.\n\nEach of these destinations offers unique experiences that will create lasting memories. Whether you're seeking cultural immersion, natural wonders, or adventure, these places have something special to offer every type of traveler in 2024.",
-                    author: "Travel Expert",
-                    date: "May 15, 2024",
-                    category: "Destinations",
-                    tags: ["2024", "travel", "destinations"],
-                    comments: []
-                },
-                {
-                    id: 2,
-                    title: "Exploring the Hidden Gems of Bali",
-                    content: "Bali, known for its stunning beaches and vibrant culture, offers much more than meets the eye. Venture beyond the popular tourist spots to discover hidden waterfalls, ancient temples, and serene rice terraces. Don't miss the sacred Tirta Empul temple or the breathtaking Sekumpul Waterfall. For a unique experience, visit the lesser-known Nusa Penida island for its dramatic cliffs and pristine beaches.",
-                    author: "Island Explorer",
-                    date: "June 1, 2024",
-                    category: "Destinations",
-                    tags: ["Bali", "hidden gems", "adventure"],
-                    comments: []
-                },
-                {
-                    id: 3,
-                    title: "The Majestic Landscapes of Patagonia",
-                    content: "Patagonia, straddling Chile and Argentina, is a must-visit destination for nature lovers and adventure seekers. Witness the towering peaks of Torres del Paine, trek on the massive Perito Moreno Glacier, and explore the enchanting Tierra del Fuego. The region's diverse wildlife, including guanacos and Andean condors, adds to its allure. Plan your visit between December and February for the best weather conditions.",
-                    author: "Adventure Junkie",
-                    date: "June 15, 2024",
-                    category: "Destinations",
-                    tags: ["Patagonia", "nature", "trekking"],
-                    comments: []
-                },
-                {
-                    id: 4,
-                    title: "Uncovering the Magic of Marrakech",
-                    content: "Marrakech, the Red City of Morocco, is a sensory delight that should be on every traveler's bucket list. Lose yourself in the winding alleys of the medina, bargain for treasures in the bustling souks, and marvel at the intricate architecture of the Bahia Palace. Don't miss the chance to experience a traditional hammam or enjoy a sunset camel ride in the nearby Agafay Desert. The vibrant Jardin Majorelle and the historic Koutoubia Mosque are also must-see attractions.",
-                    author: "Culture Enthusiast",
-                    date: "July 1, 2024",
-                    category: "Destinations",
-                    tags: ["Marrakech", "culture", "history"],
-                    comments: []
-                },
-                {
-                    id: 5,
-                    title: "The Natural Wonders of Iceland",
-                    content: "Iceland, the land of fire and ice, offers a unique landscape that seems almost otherworldly. From the ethereal Northern Lights to the powerful geysers and hot springs, nature's spectacles are on full display here. Take a dip in the Blue Lagoon, witness the beauty of Gullfoss waterfall, and explore the black sand beaches of Vik. For the adventurous, a trip to the Vatnajökull glacier or a tour of the Golden Circle is a must. Don't forget to visit in summer for the midnight sun or in winter for the best chances to see the aurora borealis.",
-                    author: "Nature Photographer",
-                    date: "July 15, 2024",
-                    category: "Destinations",
-                    tags: ["Iceland", "natural wonders", "photography"],
-                    comments: []
-                },
-                {
-                    id: 6,
-                    title: "The Ancient Wonders of Petra, Jordan",
-                    content: "Petra, the ancient city carved into rose-red cliffs, is a testament to human ingenuity and one of the world's most impressive archaeological sites. Walk through the narrow Siq to reach the iconic Treasury, then explore the vast complex of tombs, temples, and the Roman-style theatre. For a truly magical experience, visit Petra by Night when the site is illuminated by thousands of candles. Don't miss the opportunity to hike up to the Monastery for panoramic views of the surrounding landscape. Petra is not just a destination; it's a journey through time that will leave you in awe.",
-                    author: "History Buff",
-                    date: "August 1, 2024",
-                    category: "Destinations",
-                    tags: ["Petra", "archaeology", "history"],
-                    comments: []
-                }
-            ]));
-        }
-
-        if (!localStorage.getItem('categories')) {
-            localStorage.setItem('categories', JSON.stringify(["Destinations", "Sustainable Travel", "Budget Travel", "Solo Travel", "Food"]));
-        }
-
-        if (!localStorage.getItem('tags')) {
-            localStorage.setItem('tags', JSON.stringify(["2024", "travel", "destinations", "sustainable", "budget", "solo", "food", "Bali", "hidden gems", "adventure", "Patagonia", "nature", "trekking", "Marrakech", "culture", "history", "Iceland", "natural wonders", "photography", "Petra", "archaeology"]));
-        }
-
-        // Function to get data from localStorage
-        function getLocalData(key) {
-            return JSON.parse(localStorage.getItem(key));
-        }
-
-        // Function to set data in localStorage
-        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 = `
-            <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);
- });
-
-            addEventListeners();
-        }
-
-        function addEventListeners() {
-            // Add event listeners for read more links
-            document.querySelectorAll('.read-more').forEach(link => {
-                link.addEventListener('click', (e) => {
-                    e.preventDefault();
-                    const article = e.target.closest('.blog-post');
-                    const content = article.querySelector('.content');
-                    const fullContent = article.querySelector('.full-content');
-
-                    if (content.style.display !== 'none') {
-                        content.style.display = 'none';
-                        fullContent.style.display = 'block';
-                        e.target.textContent = 'Read Less';
-                    } else {
-                        content.style.display = 'block';
-                        fullContent.style.display = 'none';
-                        e.target.textContent = 'Read More';
-                    }
-                });
-            });
-
-            // Add event listeners for comment forms
-            document.querySelectorAll('.comment-form').forEach(form => {
-                form.addEventListener('submit', (e) => {
-                    e.preventDefault();
-                    const postId = parseInt(e.target.getAttribute('data-post-id'));
-                    const comment = e.target.querySelector('textarea').value;
-                    addComment(postId, comment);
-                    e.target.reset();
-                });
-            });
-        }
-
-        function populateFilters() {
-            const categoryFilter = document.getElementById('categoryFilter');
-            const tagFilter = document.getElementById('tagFilter');
-            const categories = getLocalData('categories');
-            const tags = getLocalData('tags');
-
-            categoryFilter.innerHTML = '<option value="">All Categories</option>';
-            tagFilter.innerHTML = '<option value="">All Tags</option>';
-
-            categories.forEach(category => {
-                const option = document.createElement('option');
-                option.value = category;
-                option.textContent = category;
-                categoryFilter.appendChild(option);
-            });
-
-            tags.forEach(tag => {
-                const option = document.createElement('option');
-                option.value = tag;
-                option.textContent = tag;
-                tagFilter.appendChild(option);
-            });
-
-            // Add event listeners for filters
-            categoryFilter.addEventListener('change', filterPosts);
-            tagFilter.addEventListener('change', filterPosts);
-        }
-
-        function filterPosts() {
-            const selectedCategory = document.getElementById('categoryFilter').value;
-            const selectedTag = document.getElementById('tagFilter').value;
-            const posts = getLocalData('blogPosts');
-
-            const filteredPosts = posts.filter(post => {
-                const categoryMatch = !selectedCategory || post.category === selectedCategory;
-                const tagMatch = !selectedTag || post.tags.includes(selectedTag);
-                return categoryMatch && tagMatch;
-            });
-
-            renderFilteredPosts(filteredPosts);
-        }
-
-        function renderFilteredPosts(filteredPosts) {
-            const container = document.querySelector('.blog-container');
-            container.innerHTML = '';
-
-            filteredPosts.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>
-            <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);
-            });
-
-            addEventListeners();
-        }
-
-        function viewFullPost(postId) {
-            const posts = getLocalData('blogPosts');
-            const post = posts.find(p => p.id === postId);
-            if (post) {
-                const modal = document.createElement('div');
-                modal.className = 'modal';
-                modal.innerHTML = `
-            <div class="modal-content">
-                <span class="close">&times;</span>
-                <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>${marked(post.content)}</p>
-                </div>
-                <div class="comments-section">
-                    <h3>Comments (${post.comments.length})</h3>
-                    <div class="comments">
-                        ${post.comments.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>
-            </div>
-        `;
-                document.body.appendChild(modal);
-
-                // Close modal when clicking on the close button or outside the modal
-                modal.querySelector('.close').addEventListener('click', () => {
-                    document.body.removeChild(modal);
-                });
-                modal.addEventListener('click', (e) => {
-                    if (e.target === modal) {
-                        document.body.removeChild(modal);
-                    }
-                });
-
-                // Add event listener for comment form in modal
-                modal.querySelector('.comment-form').addEventListener('submit', (e) => {
-                    e.preventDefault();
-                    const comment = e.target.querySelector('textarea').value;
-                    addComment(postId, comment);
-                    e.target.reset();
-                });
-            }
-        }
+        <!-- Quick Links Section -->
+        <div class="footer-column">
+          <h3>Quick Links</h3>
+          <ul>
+            <li><a href="#home">Home</a></li>
+            <li><a href="about.html">About</a></li>
+            <li><a href="faq.html" class="faq-link">FAQs</a></li>
+            <li><a href="servicespage.html">Services</a></li>
+            <li><a href="contact.html">Contact</a></li>
+            <li><a href="team.html">Team</a></li>
+            <li><a href="contributor/contributor.html">Our Contributor</a></li>
+          </ul>
+        </div>
 
 
             addEventListeners();
@@ -1212,136 +899,594 @@ <h3>Comments (${post.comments.length})</h3>
                 container.appendChild(article);
             });
 
-            addEventListeners();
-        }
+        <!-- Legal Links Section -->
+        <div class="footer-column">
+          <h3>Legal Links</h3>
+          <ul>
+            <li><a href="terms_of_service.html">Terms of Service</a></li>
+            <li><a href="privacypolicy.html">Privacy Policy</a></li>
+            <li><a href="copyright.html">Copyright Notice</a></li>
+            <li><a href="disclaimer.html">Disclaimer</a></li>
+            <li><a href="cookie_policy.html">Cookie Policy</a></li>
+          </ul>
+        </div>
 
-        function viewFullPost(postId) {
-            const posts = getLocalData('blogPosts');
-            const post = posts.find(p => p.id === postId);
-            if (post) {
-                const modal = document.createElement('div');
-                modal.className = 'modal';
-                modal.innerHTML = `
-            <div class="modal-content">
-                <span class="close">&times;</span>
-                <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>${marked(post.content)}</p>
-                </div>
-                <div class="comments-section">
-                    <h3>Comments (${post.comments.length})</h3>
-                    <div class="comments">
-                        ${post.comments.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>
+        <!-- Contact Us Section -->
+        <div class="footer-column">
+          <h3>Contact Us</h3>
+          <p>Email: <a href="mailto:info@example.com">info@example.com</a></p>
+          <p>Phone: <a href="tel:+1234567890">+123 456 7890</a></p>
+          <!-- Follow Us Section -->
+          <div class="footer-column">
+            <h3>Follow Us</h3>
+            <div class="social-icons">
+              <a href="https://discord.com/invite/priyaghosal" target="_blank"
+                ><i class="fab fa-discord"></i
+              ></a>
+              <a
+                href="https://x.com/https://twitter.com/PriyaGhosa39968"
+                target="_blank"
+                ><i class="fa-brands fa-x-twitter"></i
+              ></a>
+              <a
+                href="https://github.com/PriyaGhosal/BuddyTrail"
+                target="_blank"
+                ><i class="fab fa-github"></i
+              ></a>
+              <a
+                href="https://www.linkedin.com/in/priya-ghosal-785771286/"
+                target="_blank"
+                ><i class="fab fa-linkedin-in"></i
+              ></a>
             </div>
-        `;
-                document.body.appendChild(modal);
-
-                // Close modal when clicking on the close button or outside the modal
-                modal.querySelector('.close').addEventListener('click', () => {
-                    document.body.removeChild(modal);
-                });
-                modal.addEventListener('click', (e) => {
-                    if (e.target === modal) {
-                        document.body.removeChild(modal);
-                    }
-                });
-
-                // Add event listener for comment form in modal
-                modal.querySelector('.comment-form').addEventListener('submit', (e) => {
-                    e.preventDefault();
-                    const comment = e.target.querySelector('textarea').value;
-                    addComment(postId, comment);
-                    e.target.reset();
-                });
-            }
-        }
-        function addComment(postId, commentText) {
-            const posts = getLocalData('blogPosts');
-            const postIndex = posts.findIndex(p => p.id === postId);
-            if (postIndex !== -1) {
-                posts[postIndex].comments.push({
-                    text: commentText,
-                    date: new Date().toLocaleString()
-                });
-                setLocalData('blogPosts', posts);
-                renderPosts();
-            }
-        }
-
-        // Initialize the blog
-        function initializeBlog() {
-            renderPosts();
-        }
+          </div>
+        </div>
+      </div>
 
-        // Initialize the blog when the DOM is fully loaded
-        document.addEventListener('DOMContentLoaded', initializeBlog);
+      <!-- Footer Bottom Section -->
+      <div class="footer-bottom">
+        <p class="copyright-b">&copy; 2024 BuddyTrail. All rights reserved.</p>
+      </div>
+    </footer>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/2.1.3/marked.min.js"></script>
+    <script>
+              // Initialize data in localStorage if it doesn't exist
+              if (!localStorage.getItem('blogPosts')) {
+                  localStorage.setItem('blogPosts', JSON.stringify([
+                      {
+                          id: 1,
+                          title: "10 Must-Visit Destinations for 2024",
+                          content: "As we enter 2024, the world of travel continues to evolve. Here are our top picks for must-visit destinations:\n\n1. Kyoto, Japan: Experience the perfect blend of ancient traditions and modern innovations.\n2. Galapagos Islands, Ecuador: Witness unique wildlife in their natural habitat.\n3. Dubrovnik, Croatia: Explore the stunning medieval architecture and crystal-clear Adriatic waters.\n4. Machu Picchu, Peru: Discover the mysteries of this ancient Incan citadel.\n5. Santorini, Greece: Enjoy breathtaking sunsets and picturesque white-washed buildings.\n6. Banff National Park, Canada: Immerse yourself in the pristine wilderness of the Canadian Rockies.\n7. Marrakech, Morocco: Get lost in the vibrant souks and experience rich Moroccan culture.\n8. Reykjavik, Iceland: Chase the Northern Lights and relax in geothermal hot springs.\n9. Queenstown, New Zealand: Indulge in adrenaline-pumping activities amidst stunning landscapes.\n10. Petra, Jordan: Step back in time at this ancient wonder carved into rose-red cliffs.\n\nEach of these destinations offers unique experiences that will create lasting memories. Whether you're seeking cultural immersion, natural wonders, or adventure, these places have something special to offer every type of traveler in 2024.",
+                          author: "Travel Expert",
+                          date: "May 15, 2024",
+                          category: "Destinations",
+                          tags: ["2024", "travel", "destinations"],
+                          comments: []
+                      },
+                      {
+                          id: 2,
+                          title: "Exploring the Hidden Gems of Bali",
+                          content: "Bali, known for its stunning beaches and vibrant culture, offers much more than meets the eye. Venture beyond the popular tourist spots to discover hidden waterfalls, ancient temples, and serene rice terraces. Don't miss the sacred Tirta Empul temple or the breathtaking Sekumpul Waterfall. For a unique experience, visit the lesser-known Nusa Penida island for its dramatic cliffs and pristine beaches.",
+                          author: "Island Explorer",
+                          date: "June 1, 2024",
+                          category: "Destinations",
+                          tags: ["Bali", "hidden gems", "adventure"],
+                          comments: []
+                      },
+                      {
+                          id: 3,
+                          title: "The Majestic Landscapes of Patagonia",
+                          content: "Patagonia, straddling Chile and Argentina, is a must-visit destination for nature lovers and adventure seekers. Witness the towering peaks of Torres del Paine, trek on the massive Perito Moreno Glacier, and explore the enchanting Tierra del Fuego. The region's diverse wildlife, including guanacos and Andean condors, adds to its allure. Plan your visit between December and February for the best weather conditions.",
+                          author: "Adventure Junkie",
+                          date: "June 15, 2024",
+                          category: "Destinations",
+                          tags: ["Patagonia", "nature", "trekking"],
+                          comments: []
+                      },
+                      {
+                          id: 4,
+                          title: "Uncovering the Magic of Marrakech",
+                          content: "Marrakech, the Red City of Morocco, is a sensory delight that should be on every traveler's bucket list. Lose yourself in the winding alleys of the medina, bargain for treasures in the bustling souks, and marvel at the intricate architecture of the Bahia Palace. Don't miss the chance to experience a traditional hammam or enjoy a sunset camel ride in the nearby Agafay Desert. The vibrant Jardin Majorelle and the historic Koutoubia Mosque are also must-see attractions.",
+                          author: "Culture Enthusiast",
+                          date: "July 1, 2024",
+                          category: "Destinations",
+                          tags: ["Marrakech", "culture", "history"],
+                          comments: []
+                      },
+                      {
+                          id: 5,
+                          title: "The Natural Wonders of Iceland",
+                          content: "Iceland, the land of fire and ice, offers a unique landscape that seems almost otherworldly. From the ethereal Northern Lights to the powerful geysers and hot springs, nature's spectacles are on full display here. Take a dip in the Blue Lagoon, witness the beauty of Gullfoss waterfall, and explore the black sand beaches of Vik. For the adventurous, a trip to the Vatnajökull glacier or a tour of the Golden Circle is a must. Don't forget to visit in summer for the midnight sun or in winter for the best chances to see the aurora borealis.",
+                          author: "Nature Photographer",
+                          date: "July 15, 2024",
+                          category: "Destinations",
+                          tags: ["Iceland", "natural wonders", "photography"],
+                          comments: []
+                      },
+                      {
+                          id: 6,
+                          title: "The Ancient Wonders of Petra, Jordan",
+                          content: "Petra, the ancient city carved into rose-red cliffs, is a testament to human ingenuity and one of the world's most impressive archaeological sites. Walk through the narrow Siq to reach the iconic Treasury, then explore the vast complex of tombs, temples, and the Roman-style theatre. For a truly magical experience, visit Petra by Night when the site is illuminated by thousands of candles. Don't miss the opportunity to hike up to the Monastery for panoramic views of the surrounding landscape. Petra is not just a destination; it's a journey through time that will leave you in awe.",
+                          author: "History Buff",
+                          date: "August 1, 2024",
+                          category: "Destinations",
+                          tags: ["Petra", "archaeology", "history"],
+                          comments: []
+                      }
+                  ]));
+              }
+
+              if (!localStorage.getItem('categories')) {
+                  localStorage.setItem('categories', JSON.stringify(["Destinations", "Sustainable Travel", "Budget Travel", "Solo Travel", "Food"]));
+              }
+
+              if (!localStorage.getItem('tags')) {
+                  localStorage.setItem('tags', JSON.stringify(["2024", "travel", "destinations", "sustainable", "budget", "solo", "food", "Bali", "hidden gems", "adventure", "Patagonia", "nature", "trekking", "Marrakech", "culture", "history", "Iceland", "natural wonders", "photography", "Petra", "archaeology"]));
+              }
+
+              // Function to get data from localStorage
+              function getLocalData(key) {
+                  return JSON.parse(localStorage.getItem(key));
+              }
+
+              // Function to set data in localStorage
+              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 = `
+                  <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);
+       });
+
+                  addEventListeners();
+              }
+
+              function addEventListeners() {
+                  // Add event listeners for read more links
+                  document.querySelectorAll('.read-more').forEach(link => {
+                      link.addEventListener('click', (e) => {
+                          e.preventDefault();
+                          const article = e.target.closest('.blog-post');
+                          const content = article.querySelector('.content');
+                          const fullContent = article.querySelector('.full-content');
+
+                          if (content.style.display !== 'none') {
+                              content.style.display = 'none';
+                              fullContent.style.display = 'block';
+                              e.target.textContent = 'Read Less';
+                          } else {
+                              content.style.display = 'block';
+                              fullContent.style.display = 'none';
+                              e.target.textContent = 'Read More';
+                          }
+                      });
+                  });
+
+                  // Add event listeners for comment forms
+                  document.querySelectorAll('.comment-form').forEach(form => {
+                      form.addEventListener('submit', (e) => {
+                          e.preventDefault();
+                          const postId = parseInt(e.target.getAttribute('data-post-id'));
+                          const comment = e.target.querySelector('textarea').value;
+                          addComment(postId, comment);
+                          e.target.reset();
+                      });
+                  });
+              }
+
+              function populateFilters() {
+                  const categoryFilter = document.getElementById('categoryFilter');
+                  const tagFilter = document.getElementById('tagFilter');
+                  const categories = getLocalData('categories');
+                  const tags = getLocalData('tags');
+
+                  categoryFilter.innerHTML = '<option value="">All Categories</option>';
+                  tagFilter.innerHTML = '<option value="">All Tags</option>';
+
+                  categories.forEach(category => {
+                      const option = document.createElement('option');
+                      option.value = category;
+                      option.textContent = category;
+                      categoryFilter.appendChild(option);
+                  });
+
+                  tags.forEach(tag => {
+                      const option = document.createElement('option');
+                      option.value = tag;
+                      option.textContent = tag;
+                      tagFilter.appendChild(option);
+                  });
+
+                  // Add event listeners for filters
+                  categoryFilter.addEventListener('change', filterPosts);
+                  tagFilter.addEventListener('change', filterPosts);
+              }
+
+              function filterPosts() {
+                  const selectedCategory = document.getElementById('categoryFilter').value;
+                  const selectedTag = document.getElementById('tagFilter').value;
+                  const posts = getLocalData('blogPosts');
+
+                  const filteredPosts = posts.filter(post => {
+                      const categoryMatch = !selectedCategory || post.category === selectedCategory;
+                      const tagMatch = !selectedTag || post.tags.includes(selectedTag);
+                      return categoryMatch && tagMatch;
+                  });
+
+                  renderFilteredPosts(filteredPosts);
+              }
+
+              function renderFilteredPosts(filteredPosts) {
+                  const container = document.querySelector('.blog-container');
+                  container.innerHTML = '';
+
+                  filteredPosts.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>
+                  <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);
+                  });
+
+                  addEventListeners();
+              }
+
+              function viewFullPost(postId) {
+                  const posts = getLocalData('blogPosts');
+                  const post = posts.find(p => p.id === postId);
+                  if (post) {
+                      const modal = document.createElement('div');
+                      modal.className = 'modal';
+                      modal.innerHTML = `
+                  <div class="modal-content">
+                      <span class="close">&times;</span>
+                      <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>${marked(post.content)}</p>
+                      </div>
+                      <div class="comments-section">
+                          <h3>Comments (${post.comments.length})</h3>
+                          <div class="comments">
+                              ${post.comments.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>
+                  </div>
+              `;
+                      document.body.appendChild(modal);
+
+                      // Close modal when clicking on the close button or outside the modal
+                      modal.querySelector('.close').addEventListener('click', () => {
+                          document.body.removeChild(modal);
+                      });
+                      modal.addEventListener('click', (e) => {
+                          if (e.target === modal) {
+                              document.body.removeChild(modal);
+                          }
+                      });
+
+                      // Add event listener for comment form in modal
+                      modal.querySelector('.comment-form').addEventListener('submit', (e) => {
+                          e.preventDefault();
+                          const comment = e.target.querySelector('textarea').value;
+                          addComment(postId, comment);
+                          e.target.reset();
+                      });
+                  }
+              }
+
+      =
+                  });
+
+                  addEventListeners();
+              }
+
+              function addEventListeners() {
+                  // Add event listeners for read more links
+                  document.querySelectorAll('.read-more').forEach(link => {
+                      link.addEventListener('click', (e) => {
+                          e.preventDefault();
+                          const article = e.target.closest('.blog-post');
+                          const content = article.querySelector('.content');
+                          const fullContent = article.querySelector('.full-content');
+
+                          if (content.style.display !== 'none') {
+                              content.style.display = 'none';
+                              fullContent.style.display = 'block';
+                              e.target.textContent = 'Read Less';
+                          } else {
+                              content.style.display = 'block';
+                              fullContent.style.display = 'none';
+                              e.target.textContent = 'Read More';
+                          }
+                      });
+                  });
+
+                  // Add event listeners for comment forms
+                  document.querySelectorAll('.comment-form').forEach(form => {
+                      form.addEventListener('submit', (e) => {
+                          e.preventDefault();
+                          const postId = parseInt(e.target.getAttribute('data-post-id'));
+                          const comment = e.target.querySelector('textarea').value;
+                          addComment(postId, comment);
+                          e.target.reset();
+                      });
+                  });
+              }
+
+              function populateFilters() {
+                  const categoryFilter = document.getElementById('categoryFilter');
+                  const tagFilter = document.getElementById('tagFilter');
+                  const categories = getLocalData('categories');
+                  const tags = getLocalData('tags');
+
+                  categoryFilter.innerHTML = '<option value="">All Categories</option>';
+                  tagFilter.innerHTML = '<option value="">All Tags</option>';
+
+                  categories.forEach(category => {
+                      const option = document.createElement('option');
+                      option.value = category;
+                      option.textContent = category;
+                      categoryFilter.appendChild(option);
+                  });
+
+                  tags.forEach(tag => {
+                      const option = document.createElement('option');
+                      option.value = tag;
+                      option.textContent = tag;
+                      tagFilter.appendChild(option);
+                  });
+
+                  // Add event listeners for filters
+                  categoryFilter.addEventListener('change', filterPosts);
+                  tagFilter.addEventListener('change', filterPosts);
+              }
+
+              function filterPosts() {
+                  const selectedCategory = document.getElementById('categoryFilter').value;
+                  const selectedTag = document.getElementById('tagFilter').value;
+                  const posts = getLocalData('blogPosts');
+
+                  const filteredPosts = posts.filter(post => {
+                      const categoryMatch = !selectedCategory || post.category === selectedCategory;
+                      const tagMatch = !selectedTag || post.tags.includes(selectedTag);
+                      return categoryMatch && tagMatch;
+                  });
+
+                  renderFilteredPosts(filteredPosts);
+              }
+
+              function renderFilteredPosts(filteredPosts) {
+                  const container = document.querySelector('.blog-container');
+                  container.innerHTML = '';
+
+                  filteredPosts.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>
+                  <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);
+                  });
+
+                  addEventListeners();
+              }
+
+              function viewFullPost(postId) {
+                  const posts = getLocalData('blogPosts');
+                  const post = posts.find(p => p.id === postId);
+                  if (post) {
+                      const modal = document.createElement('div');
+                      modal.className = 'modal';
+                      modal.innerHTML = `
+                  <div class="modal-content">
+                      <span class="close">&times;</span>
+                      <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>${marked(post.content)}</p>
+                      </div>
+                      <div class="comments-section">
+                          <h3>Comments (${post.comments.length})</h3>
+                          <div class="comments">
+                              ${post.comments.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>
+                  </div>
+              `;
+                      document.body.appendChild(modal);
+
+                      // Close modal when clicking on the close button or outside the modal
+                      modal.querySelector('.close').addEventListener('click', () => {
+                          document.body.removeChild(modal);
+                      });
+                      modal.addEventListener('click', (e) => {
+                          if (e.target === modal) {
+                              document.body.removeChild(modal);
+                          }
+                      });
+
+                      // Add event listener for comment form in modal
+                      modal.querySelector('.comment-form').addEventListener('submit', (e) => {
+                          e.preventDefault();
+                          const comment = e.target.querySelector('textarea').value;
+                          addComment(postId, comment);
+                          e.target.reset();
+                      });
+                  }
+              }
+              function addComment(postId, commentText) {
+                  const posts = getLocalData('blogPosts');
+                  const postIndex = posts.findIndex(p => p.id === postId);
+                  if (postIndex !== -1) {
+                      posts[postIndex].comments.push({
+                          text: commentText,
+                          date: new Date().toLocaleString()
+                      });
+                      setLocalData('blogPosts', posts);
+                      renderPosts();
+                  }
+              }
+
+              // Initialize the blog
+              function initializeBlog() {
+                  renderPosts();
+              }
+
+              // Initialize the blog when the DOM is fully loaded
+              document.addEventListener('DOMContentLoaded', initializeBlog);
     </script>
 
     <div class="gtranslate_wrapper"></div>
 
     <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>
-    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");
+    <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');
+      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 {
             section.classList.remove('dark-mode');
         }
@@ -1436,4 +1581,4 @@ <h3>Comments (${post.comments.length})</h3>
 
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/book.html b/book.html
index d5b63e85..b394ec89 100644
--- a/book.html
+++ b/book.html
@@ -293,7 +293,7 @@ <h3>Goa</h3>
                 </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');
-            ">
+            " onclick="location.href='kerala.html'">
                     <h3>Kerala</h3>
                     <ul>
                         <li>Kerala Backwaters Package</li>
diff --git a/contact.html b/contact.html
index ee5fc8ed..123fb47a 100644
--- a/contact.html
+++ b/contact.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Contact Us Form</title>
     <link rel="stylesheet" href="./style.css">
     <link rel="stylesheet" href="./contact.css">
@@ -11,11 +11,8 @@
     <link rel="icon" href="https://img.icons8.com/?size=100&id=I24lanX6Nq71&format=png&color=000000">
     <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
     <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"
+      rel="icon"
+      href="https://img.icons8.com/?size=100&id=I24lanX6Nq71&format=png&color=000000"
     />
 <style>
           /* circle styles */
@@ -34,145 +31,220 @@
     </head>
 <style>
     .card {
-        width: 80%; 
-        margin: 30px auto; 
-        padding: 20px;
-        margin-bottom: 70px;
-        border: 1px solid #ccc;
-        border-radius: 8px;
-        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
-        background-color: #fff; 
+      width: 80%;
+      margin: 30px auto;
+      padding: 20px;
+      margin-bottom: 70px;
+      border: 1px solid #ccc;
+      border-radius: 8px;
+      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+      background-color: #fff;
     }
-    
-    .card-header h2{
-        color: #fff;
-        padding: 15px;
-        margin-bottom: 20px;
-        text-align: center;
-        width: 100%;
-        border-bottom: 1px solid #ddd;
-        border-radius: 6px;
-        text-shadow: 2px 2px 10px gray;
+
+    .card-header h2 {
+      color: #fff;
+      padding: 15px;
+      margin-bottom: 20px;
+      text-align: center;
+      width: 100%;
+      border-bottom: 1px solid #ddd;
+      border-radius: 6px;
+      text-shadow: 2px 2px 10px gray;
     }
-    
+
     .card-body {
-        display: flex;
-        justify-content: space-between;
-        align-items: flex-start;
-        flex-wrap: wrap; 
-        gap: 20px; 
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      flex-wrap: wrap;
+      gap: 20px;
     }
-    
+
     .form-section {
-        flex: 1;
-        min-width: 45%; 
-        color: #121111;
+      flex: 1;
+      min-width: 45%;
+      color: #121111;
     }
-    
+
     .image-section {
-        flex: 1;
-        min-width: 45%; 
-        display: flex;
-        justify-content: center;
-        align-items: center;
+      flex: 1;
+      min-width: 45%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
     }
-    
+
     .image-section img {
-        max-width: 100%;
-        height: auto;
-        max-height: 500px;
-        margin-top: 60px;
+      max-width: 100%;
+      height: auto;
+      max-height: 500px;
+      margin-top: 60px;
     }
-    
+
     .form-group {
-        margin-bottom: 20px;
-        color: #fff; 
+      margin-bottom: 20px;
+      color: #fff;
     }
-    
+
     label {
-        display: block;
-        margin-bottom: 10px;
-        color: #1e1e1e; 
+      display: block;
+      margin-bottom: 10px;
+      color: #1e1e1e;
     }
-    
-    input, textarea {
-        width: 100%;
-        padding: 12px;
-        border: 1px solid #ccc;
-        border-radius: 5px;
-        color: #121212; 
+
+    input,
+    textarea {
+      width: 100%;
+      padding: 12px;
+      border: 1px solid #ccc;
+      border-radius: 5px;
+      color: #121212;
     }
-    
+
     textarea {
-        height: 120px;
+      height: 120px;
     }
-    
+
     button[type="submit"] {
-        background-color: rgb(27, 27, 27);
-        color: #fff;
-        padding: 12px 20px;
-        border: none;
-        border-radius: 5px;
-        cursor: pointer;
-        font-size: 1.5rem;
+      background-color: rgb(27, 27, 27);
+      color: #fff;
+      padding: 12px 20px;
+      border: none;
+      border-radius: 5px;
+      cursor: pointer;
+      font-size: 1.5rem;
     }
-    
+
     button[type="submit"]:hover {
-        background-color: black;
+      background-color: black;
     }
 
     .error-message {
-        color: red;
-        font-size: 0.9em;
-        margin-top: 5px;
-        display: none;
+      color: red;
+      font-size: 0.9em;
+      margin-top: 5px;
+      display: none;
     }
+ .tooltip {
+            visibility: hidden;
+            background-color: black;
+            color: #fff;
+            width: 200px;
+            text-align: center;
+            padding: 5px;
+            border-radius: 5px;
+            position: absolute;
+            top: -25px;
+            left: 0;
+            transform: translateY(-100%);
+            opacity: 0;
+            transition: opacity 0.3s;
+            z-index: 1;
+            font-size: 12px;
+        }
 
-    @media (max-width: 768px) {
-        .card-body {
-            flex-direction: column; 
+        .form-group:hover .tooltip {
+            visibility: visible;
+            opacity: 1;
         }
 
-        .form-section, .image-section {
-            width: 100%; 
-            min-width: 100%;
+        .error-message {
+            color: red;
+            font-size: 0.9em;
+            margin-top: 5px;
+            display: none;
         }
-    }
-     /* .form-group { 
-    position: relative;
-}  */
-
-.tooltip {
-        visibility: hidden;
-        background-color: black;
-        color: #fff;
-        width: 200px;
-        text-align: center;
-        padding: 5px;
-        border-radius: 5px;
-        position: absolute;
-        top: -25px; /* Adjusts tooltip above input */
-        left: 0; /* Aligns tooltip to the input field */
-        transform: translateY(-100%); /* Ensures smooth positioning */
-        opacity: 0;
-        transition: opacity 0.3s;
-    }
 
-    .form-group:hover .tooltip {
-        visibility: visible;
-        opacity: 1;
-    }
-    .form-group {
-        position: relative; /* Ensure .tooltip positions relative to this */
-        margin-bottom: 20px;
-        color: #fff; 
-    }
+        /* Header Styles */
+        header {
+            background-color: black;
+            height: 85px;
+            position: relative;
+        }
 
-    .form-group:hover .tooltip {
-        visibility: visible; /* Show on hover */
-        opacity: 1; /* Fade in */
-    }
+        nav {
+            padding: 5px;
+            width: 90%;
+            margin: 0 auto;
+        }
 
+        .logo {
+            display: flex;
+            align-items: center;
+        }
+
+        #logo-web {
+            height: 50px;
+        }
+
+        #logo a {
+            margin-left: 18px;
+            margin-top: 5px;
+            color: white;
+            text-decoration: none;
+        }
+
+        /* Newsletter Styles */
+        .footer-column.newsletter {
+            max-width: 300px;
+            margin: 0 auto;
+            text-align: center;
+        }
+
+        #newsletter-form {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+
+        #email {
+            width: 100%;
+            margin-bottom: 10px;
+            padding: 8px;
+            box-sizing: border-box;
+        }
+
+        /* Responsive Design */
+        @media (max-width: 768px) {
+            .card-body {
+                flex-direction: column;
+            }
+
+            .form-section,
+            .image-section {
+                width: 100%;
+                min-width: 100%;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container-fluid">
+        <!-- Header -->
+        <header>
+            <nav>
+                <div class="logo">
+                    <img src="img/logo.png" id="logo-web" alt="BuddyTrail Logo">
+                    <h1 id="logo"><a href="#home">BuddyTrail</a></h1>
+                </div>
+
+                <button class="hamburger" id="hamburger">☰</button>
+
+          <ul id="nav-list">
+            <!-- Close button for dropdown -->
+            <span class="dropdown-close-btn" id="closeBtn">×</span>
+            <li><a href="./index.html" class="navhover">Home</a></li>
+            <li><a href="team.html" class="navhover">Team</a></li>
+            <li>
+              <a href="index.html#deals" class="navhover">Exclusive Deals</a>
+            </li>
+            <li><a href="index.html#benefits" class="navhover">Benefits</a></li>
+            <li><a href="about.html" class="navhover">About</a></li>
+            <li>
+              <a href="index.html#itineraries" class="navhover"
+                >Travel Itineraries</a
+              >
+            </li>
 </style>
 <body>
     <div class="container-fluid">
@@ -218,132 +290,167 @@ <h1 id="logo"><a href="#home" style="margin-left: 18px; margin-top: 5px;">BuddyT
                 <div class="card-header">
                     <h2>Contact Us</h2>
                 </div>
-                <div class="card-body">
-                    <div class="form-section">
-                        <form id="contactForm">
-                            <div class="form-group">
-                                <label for="name">Name</label>
-                                <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" 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" 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" 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>
-                        </form>
-                    </div>
-                    <div class="image-section">
-                        <img src="./image.png" alt="Contact Image" style="max-width: 80%; height: auto; max-height: 500px;">
-                    </div>
+                <div class="form-group">
+                  <label for="message">Message</label>
+                  <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>
+              </form>
             </div>
-        </section>
-    </div>
-
-<footer id="footer">
-<footer>
-  <div class="footer-container">
-    <!-- About Us Section -->
-    <div class="footer-column">
-      <h3>About Us</h3>
-      <p>
-        Discover budget-friendly destinations and easily create itineraries with BuddyTrail’s innovative travel companion tools. Start exploring today and make your next trip both enjoyable and economical!</p>
-    </div>
-
-    <!-- Quick Links Section -->
-    <div class="footer-column">
-      <h3>Quick Links</h3>
-      <ul>
-        <li><a href="#home">Home</a></li>
-        <li><a href="about.html">About</a></li>
-        <li><a href="faq.html" class="faq-link">FAQs</a></li>
-        <li><a href="#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>
-
-    <!-- Legal Links Section -->
-    <div class="footer-column">
-      <h3>Legal Links</h3>
-      <ul>
-        <li><a href="terms_of_service.html">Terms of Service</a></li>
-        <li><a href="privacypolicy.html">Privacy Policy</a></li>
-        <li><a href="copyright.html">Copyright Notice</a></li>
-        <li><a href="disclaimer.html">Disclaimer</a></li>
-        <li><a href="cookie_policy.html">Cookie Policy</a></li>
-      </ul>
-    </div>
-
-    <!-- Contact Us Section -->
-    <div class="footer-column">
-      <h3>Contact Us</h3>
-      <p>Email: <a href="mailto:info@buddytrail.com">info@buddytrail.com</a></p>
-      <p>Phone: <a href="tel:+1234567890">+123 456 7890</a></p>
+            <div class="image-section">
+              <img
+                src="./image.png"
+                alt="Contact Image"
+                style="max-width: 80%; height: auto; max-height: 500px"
+              />
+            </div>
+          </div>
+        </div>
+      </section>
     </div>
 
-    <!-- Follow Us Section -->
-    <div class="footer-column">
-      <h3>Follow Us</h3>
-      <div class="social-icons">
-        <a href="https://discord.com/invite/priyaghosal">
-          <i class="fab 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>
+    <footer id="footer">
+      <div class="footer-container">
+        <!-- About Us Section -->
+        <div class="footer-column">
+          <h3>About Us</h3>
+          <p>
+            Discover and plan affordable trips with BuddyTrail's travel
+            companion tools.
+          </p>
+          <!-- Newsletter Form Section -->
+          <style>
+            .footer-column.newsletter {
+              max-width: 300px;
+              margin: 0 auto;
+              text-align: center;
+            }
+            #newsletter-form {
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+            }
+            #email {
+              width: 100%;
+              margin-bottom: 10px;
+              padding: 8px;
+              box-sizing: border-box;
+            }
+            button[type="submit"] {
+              width: 100px;
+              padding: 6px;
+              font-size: 14px;
+              background-color: #007bff;
+            }
+            #subscription-message {
+              font-size: 14px;
+              margin-top: 10px;
+            }
+          </style>
+          <div class="footer-column newsletter" id="newsletter">
+            <h3>Subscribe to Our Newsletter</h3>
+            <form id="newsletter-form">
+              <input
+                type="email"
+                id="email"
+                placeholder="Enter your email"
+                required
+              />
+              <button type="submit">Subscribe</button>
+            </form>
+            <p id="subscription-message"></p>
+          </div>
+        </div>
+
+        <!-- Quick Links Section -->
+        <div class="footer-column">
+          <h3>Quick Links</h3>
+          <ul>
+            <li><a href="#home">Home</a></li>
+            <li><a href="about.html">About</a></li>
+            <li><a href="faq.html" class="faq-link">FAQs</a></li>
+            <li><a href="servicespage.html">Services</a></li>
+            <li><a href="contact.html">Contact</a></li>
+            <li><a href="team.html">Team</a></li>
+            <li><a href="contributor/contributor.html">Our Contributor</a></li>
+          </ul>
+        </div>
+
+        <!-- Legal Links Section -->
+        <div class="footer-column">
+          <h3>Legal Links</h3>
+          <ul>
+            <li><a href="terms_of_service.html">Terms of Service</a></li>
+            <li><a href="privacypolicy.html">Privacy Policy</a></li>
+            <li><a href="copyright.html">Copyright Notice</a></li>
+            <li><a href="disclaimer.html">Disclaimer</a></li>
+            <li><a href="cookie_policy.html">Cookie Policy</a></li>
+          </ul>
+        </div>
+
+        <!-- Contact Us Section -->
+        <div class="footer-column">
+          <h3>Contact Us</h3>
+          <p>Email: <a href="mailto:info@example.com">info@example.com</a></p>
+          <p>Phone: <a href="tel:+1234567890">+123 456 7890</a></p>
+          <!-- Follow Us Section -->
+          <div class="footer-column">
+            <h3>Follow Us</h3>
+            <div class="social-icons">
+              <a href="https://discord.com/invite/priyaghosal" target="_blank"
+                ><i class="fab fa-discord"></i
+              ></a>
+              <a
+                href="https://x.com/https://twitter.com/PriyaGhosa39968"
+                target="_blank"
+                ><i class="fa-brands fa-x-twitter"></i
+              ></a>
+              <a
+                href="https://github.com/PriyaGhosal/BuddyTrail"
+                target="_blank"
+                ><i class="fab fa-github"></i
+              ></a>
+              <a
+                href="https://www.linkedin.com/in/priya-ghosal-785771286/"
+                target="_blank"
+                ><i class="fab fa-linkedin-in"></i
+              ></a>
+            </div>
+          </div>
+        </div>
       </div>
-    </div>
-  </div>
-
-  <!-- Footer Bottom Section -->
-  <div class="footer-bottom">
-    <p>&copy; 2024 BuddyTrail. All rights reserved.</p>
-  </div>
-</footer>
 
-<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>
-<!-- Load Google Translate Script -->
-<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+      <!-- Footer Bottom Section -->
+      <div class="footer-bottom">
+        <p class="copyright-b">&copy; 2024 BuddyTrail. All rights reserved.</p>
+      </div>
+    </footer>
 
 <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
-<script src="./contact.js"></script>
+    <script src="./contact.js"></script>
+    <script>
+        // Google Translate Settings
+        window.gtranslateSettings = {
+            "default_language": "en",
+            "detect_browser_language": true,
+            "wrapper_selector": ".gtranslate_wrapper"
+        };
+
+
+    <script
+      src="https://cdn.gtranslate.net/widgets/latest/float.js"
+      defer
+    ></script>
+    <script src="./contact.js"></script>
 
 <script>
   window.onscroll = function() {
diff --git a/contributor/Contributors.css b/contributor/Contributors.css
index 7c167df0..8b82c991 100644
--- a/contributor/Contributors.css
+++ b/contributor/Contributors.css
@@ -2,12 +2,10 @@
     font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     margin: 0;
     padding: 0;
-    box-sizing: border-box;
   }
   
   .container {
     text-align: center;
-    background-color: #2193b0;
   }
 
   .title {
@@ -46,27 +44,20 @@
     flex-wrap: wrap;
     gap: 40px;
     padding: 20px;
-    display: grid;
-    grid-template-columns: repeat(7, minmax(100px,5fr));
+    display: flex;
   }
 
   .contributor-card {
-    /* width: auto;
-    height: auto; */
-    min-width: 200px;
     min-height: 300px;
     display: flex;
     justify-content: center; 
     position: relative;
-    overflow: hidden;
     max-width: calc(55% - 16px);
     display: flex;
     flex-direction: column;
     align-items: center;
-    background-color: #7cb9ff;
-    border: 1px solid #7cb9ff;
+    background-color: #253745;
     border-radius: 8px;
-    box-shadow: 0 0px 8px rgb(40, 119, 255);
     padding: 16px;
     transition: transform 0.5s ease-in-out, box-shadow 0.3s ease;
     text-decoration: none;
@@ -74,6 +65,7 @@
     /* margin-bottom: 16px;  */
     word-wrap: wrap;
     transition: transform 0.5s ease-in-out, box-shadow 0.3s ease;
+    width:14%;
 
   }
 
@@ -89,25 +81,6 @@
     cursor: pointer;
     transform: translateZ(50px); /* Moves the card forward in 3D space */
 
-  .contributor-card::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(132deg, #76ABAE 50%, rgb(206, 206, 206) 51%);
-    /* background: linear-gradient(130deg, #3b89ff 50%, #eef6ff 50%); */
-    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
-    transform: translate(-100%, -100%);
-    opacity: 0;
-    z-index: -1;
-  }
-
-  .contributor-card:hover::before {
-    transform: translate(0, 0);
-    opacity: 1;
-  }
 
   .contributor-card img {
     border-radius: 50%;
@@ -140,7 +113,6 @@
 
   .contributor-card p {
     font-size: 1.2em;
-    color: #040404;
     position: relative;
     z-index: 1;
     transition: text-shadow 0.3s ease-in-out, color 0.3s ease-in-out;
@@ -162,7 +134,7 @@
   }
 
   body {
-    background-color: #f8f9fa;
+    background-color:#2c394c;
     color: hsl(0, 0%, 100%);
   }
 
@@ -434,7 +406,7 @@
   }
 
   body {
-    background-color: #2193b0;    
+    background-color: #021024;    
     overflow-x: hidden;
     margin: 0;
 
@@ -569,10 +541,11 @@
 .contributor-stats {
   max-width: 1200px;
   margin: 0 auto;
-  padding: 3rem 0;
+  padding: 2rem 2rem;
   text-align: center;
-  background-color: #2193b0;
-
+  background-color: rgba(255,255,255,0.3);
+  border-radius: 25px;
+  margin-top: 60px;
 }
 
 .contributor-stats h2 {
@@ -587,8 +560,7 @@
 }
 
 .contributor-stat-card {
-  background-color: #7cb9ff;
-  border: 1px solid #2487d4;
+  background-color: rgba(0,0,0,0.4);
   border-radius: 10px;
   padding: 1.5rem;
   text-align: center;
@@ -606,4 +578,10 @@
 
 .contributor-stat-card p {
   color: #ffffff;
+}
+
+div#contributors{
+  gap: 2rem 7rem;
+  flex-wrap: wrap;
+  justify-content: center;
 }
\ No newline at end of file
diff --git a/contributor/Contributors.html b/contributor/Contributors.html
index 08233fdd..c860f473 100644
--- a/contributor/Contributors.html
+++ b/contributor/Contributors.html
@@ -60,8 +60,46 @@ <h3>348</h3>
 
   <div class="container">
     <h1 class="title">Our Contributors</h1>
-    <div id="contributors" class="contributors-grid"></div>
   </div>
+  <div id="contributors" class="contributors-grid"></div>
+  s<style>
+    @property --angle{
+      syntax: "<angle>";
+      initial-value: 0deg;
+      inherits: false;
+    }
+
+    .contributor-card::after, .contributor-card::before{
+      content: '';
+      position: absolute;
+      height: 100%;
+      width: 100%;
+      z-index: -1;
+      padding: 4px;
+      top: -1.5%;
+      border-radius: 10px;
+    }
+
+    .contributor-card:hover::before,
+    .contributor-card:hover::after {
+      animation: spin 0.75s linear infinite;
+      background-image: conic-gradient(from var(--angle),#00a5e3,#8dd7bf,#ff96c5,#ff5768,#ffbf65,#00a5e3)
+    }
+    
+    .contributor-card::before{
+      filter: blur(3rem);
+      opacity: 0.5;
+    }
+    
+    @keyframes spin{
+      from{
+        --angle:0deg;
+      }
+      to{
+        --angle:360deg;
+      }
+    }
+  </style>
 
   <script src="./contributors.js"></script>
 
diff --git a/cookie_policy.html b/cookie_policy.html
index 756c0f8b..4a4f766b 100644
--- a/cookie_policy.html
+++ b/cookie_policy.html
@@ -1,240 +1,13 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
- main
- main
-
- main
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <title>Cookie Policy - BuddyTrail</title>
-    <link rel="stylesheet" href="terms.css">
-    
-    <link rel="icon" href="/icons/airplane.svg" />
-    <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>
-        /* Resetting margin and padding */
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        /* Body styling */
-        body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background-color: #f8f9fa;
-            color: #333;
-            line-height: 1.6;
-        }
-
-        /* Full-width container for page */
-        .container {
-            display: flex;
-            width: 100%;
-            margin: 20px auto;
-            padding: 20px;
-            background-color: #fff;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-            border-radius: 8px;
-        }
-
-        /* Table of contents styling */
-        .toc {
-            flex-basis: 25%;
-            background-color: #e9ecef;
-            padding:70px 20px;
-            border-radius: 8px;
-            margin-right: 20px;
-            height: fit-content;
-            position: sticky;
-            top: 20px;
-        }
-
-        .toc h2 {
-            font-size: 1.5rem;
-            color: #004085;
-        }
-
-        .toc ul {
-            list-style: none;
-            padding: 0;
-        }
-
-        .toc ul li {
-            margin-bottom: 10px;
-        }
-
-        .toc ul li a {
-            text-decoration: none;
-            color: #007bff;
-            font-weight: bold;
-        }
-
-        .toc ul li a:hover {
-            text-decoration: underline;
-        }
-
-        /* Main content styling */
-        .main-content {
-            flex-basis: 75%;
-        }
-
-        h1, h2 {
-            color: #004085;
-        }
-
-        h1 {
-            font-size: 2.2rem;
-            text-align: center;
-            margin: 53px 0;
-            border-bottom: 2px solid #004085;
-            padding-bottom: 10px;
-        }
-
-        h2 {
-            font-size: 1.8rem;
-            margin-top: 40px;
-            margin-bottom: 20px;
-            border-bottom: 1px solid #ddd;
-            padding-bottom: 10px;
-        }
-
-        p {
-            font-size: 1rem;
-            color: #555;
-            margin-bottom: 20px;
-        }
-
-        ul {
-            margin-left: 20px;
-            padding-left: 20px;
-            list-style: disc;
-        }
-
-        li {
-            margin-bottom: 10px;
-        }
-
-        /* Button styling for links */
-        a {
-            color: #007bff;
-            text-decoration: none;
-        }
-
-        a:hover {
-            text-decoration: underline;
-        }
-
-        /* Smooth scrolling for anchor links */
-        html {
-            scroll-behavior: smooth;
-        }
-
-        /* Responsive adjustments */
-        @media (max-width: 768px) {
-            .container {
-                flex-direction: column;
-            }
-
-            .toc {
-                margin-bottom: 20px;
-                margin-right: 0;
-                width: 100%;
-                position: relative; /* Changed to relative to make TOC non-sticky */
-            }
-
-            .main-content {
-                width: 100%;
-            }
-
-            h1 {
-                font-size: 1.8rem;
-            }
-
-            h2 {
-                font-size: 1.4rem;
-            }
-
-            p {
-                font-size: 0.95rem;
-            }
-        }
- main
-    </style>
-<style>
-          /* circle styles */
-          .circle {
-            height: 24px;
-            width: 24px;
-            border-radius: 24px;
-            background-color: rgb(255, 0, 0);
-            position: fixed;
-            top: 0;
-            left: 0;
-            pointer-events: none;
-            z-index: 99999999;
-          }
-        </style>  
-    </head>
-<body>
-    <header>
-        <div class="container3">
-          <nav>
-            <div class="logo">
-              <img src="img/logo.png" id="logo-web" alt="BuddyTrail Logo" />
-              <h1 id="logo">BuddyTrail</h1>
-            </div>
-            <button class="hamburger" id="hamburger">☰</button>
-            <ul class="nav-links" id="nav-links">
-              <button class="dropdown-close-btn" id="closeBtn">✖</button>
-              <li><a href="index.html" class="nav-link">Home</a></li>
-              <li><a href="about.html" class="nav-link active">About Us</a></li>
-              <li><a href="team.html" class="nav-link">Team</a></li>
-              <li><a href="contact.html" class="nav-link">Contact</a></li>
-              <li><a href="auth.html" class="btn-primary">Sign In</a></li>
-            </ul>
-            <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>
-          </nav>
-        </div>
-      </header>
-
-    <div class="container">
-        
-        <!-- Table of contents on the left side -->
-        <div class="toc">
-            <h2>Table of Contents</h2>
-            <ul>
-                <li><a href="#section1">1. What Are Cookies?</a></li>
-                <li><a href="#section2">2. How We Use Cookies</a></li>
-                <li><a href="#section3">3. Types of Cookies We Use</a></li>
-                <li><a href="#section4">4. Managing Cookies</a></li>
-                <li><a href="#section5">5. Third-Party Cookies</a></li>
-                <li><a href="#section6">6. Changes to This Cookie Policy</a></li>
-                <li><a href="#section7">7. Contact Us</a></li>
-            </ul>
-        </div>
 
+<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>Cookie Policy - BuddyTrail</title>
   <link rel="stylesheet" href="terms.css">
+  <link rel="icon" href="/icons/airplane.svg" />
   <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>
@@ -361,310 +134,204 @@ <h2>Table of Contents</h2>
     @media (max-width: 768px) {
       .container {
         flex-direction: column;
-
-        :root {
-          --bg-color: #fff;
-          --text-color: #333;
-          --toc-bg: #e9ecef;
-          --link-color: #007bff;
- main
-      }
-      
-      body {
-          background-color: var(--bg-color);
-          color: var(--text-color);
-      }
-      
-      a {
-          color: var(--link-color);
-      }
-      
-      /* Dark Mode Variables */
-      body.dark-mode {
-          --bg-color: #000;
-          --text-color: #fff;
-          --toc-bg: #333;
-          --link-color: #90caf9;
-      }
-      
-      .dark-mode .container {
-          background-color: var(--bg-color);
-      }
-      
-      .dark-mode-toc {
-          background-color: var(--toc-bg);
-      }
-      
-      .dark-mode-toc ul li a,
-      .dark-mode h1,
-      .dark-mode h2,
-      .dark-mode p,
-      .dark-mode ul li {
-          color: var(--text-color);
-      }
-      
-      .dark-mode-content {
-          background-color: var(--bg-color);
-      }
-      
-      .dark-mode-content h1,
-      .dark-mode-content h2,
-      .dark-mode-content p,
-      .dark-mode-content li {
-          color: var(--text-color);
       }
-      
-    </style>
-</head>
- main
- main
-
-
- main
-<body>
-    <header>
-        <div class="container3">
-          <nav>
-            <div class="logo">
-              <img src="img/logo.png" id="logo-web" alt="BuddyTrail Logo" />
-              <h1 id="logo">BuddyTrail</h1>
-            </div>
-            <button class="hamburger" id="hamburger">☰</button>
-            <ul class="nav-links" id="nav-links">
-              <button class="dropdown-close-btn" id="closeBtn">✖</button>
-              <li><a href="index.html" class="nav-link">Home</a></li>
-              <li><a href="about.html" class="nav-link active">About Us</a></li>
-              <li><a href="team.html" class="nav-link">Team</a></li>
-              <li><a href="contact.html" class="nav-link">Contact</a></li>
-              <li><a href="auth.html" class="btn-primary">Sign In</a></li>
-            </ul>
-            <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>
-          </nav>
-        </div>
-      </header>
-
-    <div class="container">
-        
-        <!-- Table of contents on the left side -->
-        <div class="toc">
-            <h2>Table of Contents</h2>
-            <ul>
-                <li><a href="#section1">1. What Are Cookies</a></li>
-                <li><a href="#section2">2. How We Use Cookies</a></li>
-                <li><a href="#section3">3. Types of Cookies We Use</a></li>
-                <li><a href="#section4">4. Managing Cookies</a></li>
-                <li><a href="#section5">5. Third-Party Cookies</a></li>
-                <li><a href="#section6">6. Changes to This Cookie Policy</a></li>
-                <li><a href="#section7">7. Contact Us</a></li>
-            </ul>
-        </div>
+    }
 
-        <!-- Main content on the right side -->
-        <div class="main-content">
-            <h1>BuddyTrail - Cookie Policy</h1>
+    /* Dark Mode Styles */
+    :root {
+      --bg-color: #fff;
+      --text-color: #333;
+      --toc-bg: #e9ecef;
+      --link-color: #007bff;
+    }
 
-            <!-- Cookie Policy sections -->
-            <h2 id="section1">1. What Are Cookies?</h2>
-            <p>Cookies are small text files that are stored on your device when you visit a website. They help the website remember information about your visit, which can make it easier to visit the site again and make the site more useful to you.</p>
+    body {
+      background-color: var(--bg-color);
+      color: var(--text-color);
+    }
 
-            <h2 id="section2">2. How We Use Cookies</h2>
-            <p>We use cookies to enhance your browsing experience by:</p>
-            <ul>
-                <li>Recognizing you when you return to our website.</li>
-                <li>Understanding how you use our website, which helps us improve our services.</li>
-                <li>Displaying personalized content or ads based on your preferences.</li>
-            </ul>
+    a {
+      color: var(--link-color);
+    }
 
-            <h2 id="section3">3. Types of Cookies We Use</h2>
-            <p>We use both session cookies and persistent cookies on BuddyTrail:</p>
-            <ul>
-                <li><strong>Session Cookies:</strong> These cookies are temporary and expire once you close your browser.</li>
-                <li><strong>Persistent Cookies:</strong> These cookies remain on your device for a set period or until you manually delete them.</li>
-            </ul>
+    /* Dark Mode Variables */
+    body.dark-mode {
+      --bg-color: #000;
+      --text-color: #fff;
+      --toc-bg: #333;
+      --link-color: #90caf9;
+    }
 
-            <h2 id="section4">4. Managing Cookies</h2>
-            <p>You can control how cookies are used on your device by adjusting your browser settings. Most browsers allow you to:</p>
-            <ul>
-                <li>View the cookies that are stored on your device.</li>
-                <li>Delete all or individual cookies.</li>
-                <li>Block cookies from specific websites.</li>
-                <li>Block all cookies from being stored on your device.</li>
-            </ul>
-            <p>Please note that if you block cookies, some features of our website may not function as intended.</p>
+    .dark-mode .container {
+      background-color: var(--bg-color);
+    }
 
-            <h2 id="section5">5. Third-Party Cookies</h2>
-            <p>We may use third-party services, such as analytics or advertising partners, that set their own cookies on your device when you interact with BuddyTrail. These third-party cookies are subject to their respective privacy policies, and we encourage you to review them.</p>
+    .dark-mode .toc {
+      background-color: var(--toc-bg);
+    }
 
-            <h2 id="section6">6. Changes to This Cookie Policy</h2>
-            <p>We reserve the right to modify this Cookie Policy at any time. Any changes will be posted on this page, and the updated policy will take effect upon posting. We encourage you to check this page periodically to stay informed about our use of cookies.</p>
+    .dark-mode .container * {
+      color: var(--text-color);
+    }
+  </style>
+</head>
 
-            <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: <a href="tel:+1234567890" style="color: rgb(90, 198, 245); text-decoration: none;">+123 456 7890</a></p>
+<body>
+  <header>
+    <div class="container3">
+      <nav>
+        <div class="logo">
+          <img src="img/logo.png" id="logo-web" alt="BuddyTrail Logo" />
+          <h1 id="logo">BuddyTrail</h1>
         </div>
+        <button class="hamburger" id="hamburger">☰</button>
+        <ul class="nav-links" id="nav-links">
+          <button class="dropdown-close-btn" id="closeBtn">✖</button>
+          <li><a href="index.html" class="nav-link">Home</a></li>
+          <li><a href="about.html" class="nav-link active">About Us</a></li>
+          <li><a href="team.html" class="nav-link">Team</a></li>
+          <li><a href="contact.html" class="nav-link">Contact</a></li>
+          <li><a href="auth.html" class="btn-primary">Sign In</a></li>
+        </ul>
+        <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>
+      </nav>
+    </div>
+  </header>
+
+  <div class="container">
+    <!-- Table of contents on the left side -->
+    <div class="toc">
+      <h2>Table of Contents</h2>
+      <ul>
+        <li><a href="#section1">1. What Are Cookies?</a></li>
+        <li><a href="#section2">2. How We Use Cookies</a></li>
+        <li><a href="#section3">3. Types of Cookies We Use</a></li>
+        <li><a href="#section4">4. Managing Cookies</a></li>
+        <li><a href="#section5">5. Third-Party Cookies</a></li>
+        <li><a href="#section6">6. Changes to This Cookie Policy</a></li>
+        <li><a href="#section7">7. Contact Us</a></li>
+      </ul>
     </div>
 
- main
- main
-<!-- Circles -->
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-
-<script>
-    // coordinates for the cursor :
-    const coords = { x: 0, y: 0 };
-    const circles = document.querySelectorAll(".circle");
-
-    const colors = [
-      "#fc5720", "#fc6532", "#fc6532","#fd8b65", "#d5585c", "#fac3b1", "#f4d5cb", "#fefefe", "#fefefe", "#cdf2c5", "#b2eca5", "#95e283", "#7dda68", "#4adc2d", "#69d451", "#54c939", "#34b916", "#28b309", "#1e9c02", 
-    ];
-
-    circles.forEach(function (circle, index) {
-      circle.x = 0;
-      circle.y = 0;
-      circle.style.backgroundColor = colors[index % colors.length];
-    });
-
-    // update the coordinates when the mouse moves:
-    window.addEventListener("mousemove", function (e) {
-      coords.x = e.clientX;
-      coords.y = e.clientY;
-    });
-
-    // animation function to move the circles:
-    function animateCircles() {
-      let x = coords.x;
-      let y = coords.y;
-
-      circles.forEach(function (circle, index) {
-       
-
-        circle.style.left = x - 12 + "px";
-        circle.style.top = y - 12 + "px";
-        circle.style.scale = (circles.length - index) / circles.length;
-
-        circle.x = x;
-        circle.y = y;
-
-        const nextCircle = circles[index + 1] || circles[0];
-        x += (nextCircle.x - x) * 0.3;
-        y += (nextCircle.y - y) * 0.3;
-      });
-
-      requestAnimationFrame(animateCircles);
-    }
-    
-    animateCircles();
-  </script>
-
-
- main
+    <!-- Main content -->
+    <div class="main-content">
+      <h2 id="section1">1. What Are Cookies?</h2>
+      <p>Cookies are small text files that are stored on your device when you visit a website. They help the website
+        remember information about your visit, which can make it easier to visit the site again and make the site more
+        useful to you.</p>
+
+      <h2 id="section2">2. How We Use Cookies</h2>
+      <p>We use cookies to enhance your browsing experience by:</p>
+      <ul>
+        <li>Recognizing you when you return to our website.</li>
+        <li>Understanding how you use our website, which helps us improve our services.</li>
+        <li>Displaying personalized content or ads based on your preferences.</li>
+      </ul>
+
+      <h2 id="section3">3. Types of Cookies We Use</h2>
+      <p>We use both session cookies and persistent cookies on BuddyTrail:</p>
+      <ul>
+        <li><strong>Session Cookies:</strong> These cookies are temporary and expire once you close your browser.</li>
+        <li><strong>Persistent Cookies:</strong> These cookies remain on your device for a set period or until you
+          manually delete them.</li>
+      </ul>
+
+      <h2 id="section4">4. Managing Cookies</h2>
+      <p>You can control how cookies are used on your device by adjusting your browser settings. Most browsers allow you
+        to:</p>
+      <ul>
+        <li>View the cookies that are stored on your device.</li>
+        <li>Delete all or individual cookies.</li>
+        <li>Block cookies from specific websites.</li>
+        <li>Block all cookies from being stored on your device.</li>
+      </ul>
+      <p>Please note that if you block cookies, some features of our website may not function as intended.</p>
+
+      <h2 id="section5">5. Third-Party Cookies</h2>
+      <p>We may use third-party services, such as analytics or advertising partners, that set their own cookies on your
+        device when you interact with BuddyTrail. These third-party cookies are subject to their respective privacy
+        policies, and we encourage you to review them.</p>
+
+      <h2 id="section6">6. Changes to This Cookie Policy</h2>
+      <p>We reserve the right to modify this Cookie Policy at any time. Any changes will be posted on this page, and the
+        updated policy will take effect upon posting. We encourage you to check this page periodically to stay informed
+        about our use of cookies.</p>
+
+      <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: <a href="tel:+1234567890" style="color: rgb(90, 198, 245); text-decoration: none;">+123 456 7890</a></p>
+    </div>
+  </div>
 
+  <footer>
     <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"
-                class="x-logo-link" >
-                  <!-- <i class="fab fa-twitter"></i > -->
-                    <img src="img/x-logo.png" alt="X Logo" width="40px" height="40px" class="x-logo-image">
-                  </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 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"
+              class="x-logo-link" >
+                <!-- <i class="fab fa-twitter"></i > -->
+                  <img src="img/x-logo.png" alt="X Logo" width="40px" height="40px" class="x-logo-image">
+                </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>
-
-    <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>
-        const modeToggle = document.getElementById('modeToggle');
-        const body = document.body;
-        const toc = document.querySelector('.toc');
-        const mainContent = document.querySelector('.main-content');
-    
-        modeToggle.addEventListener('click', () => {
-            body.classList.toggle('dark-mode');
-            toc.classList.toggle('dark-mode-toc');
-            mainContent.classList.toggle('dark-mode-content');
-        });
-    </script>
-    
- main
+        <p class="copyright">&copy; 2024 BuddyTrail | All rights reserved.</p>
+      </div>
+    </footer>
+  <script>
+    // Dark mode toggle
+    const modeToggle = document.getElementById("modeToggle");
+    const body = document.body;
+    modeToggle.addEventListener("click", () => {
+      body.classList.toggle("dark-mode");
+    });
+  </script>
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/copyright.html b/copyright.html
index f1db4c79..7cdf8661 100644
--- a/copyright.html
+++ b/copyright.html
@@ -303,39 +303,6 @@ <h2 id="contact">8. Contact Information</h2>
     </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>
- main
-
- main
-    </div>
- main
 
 <!-- Circles -->
 <div class="circle"></div>
@@ -407,75 +374,62 @@ <h3>Contact Us</h3>
   </script>
 
 
-    <footer>
-        <div class="container3">
-            <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: 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" 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>
-
- main
-
-          
- main
-        </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>
+<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"
+          class="x-logo-link" >
+            <!-- <i class="fab fa-twitter"></i > -->
+              <img src="img/x-logo.png" alt="X Logo" width="40px" height="40px" class="x-logo-image">
+            </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>
 
   <script>
     // Hamburger menu functionality
@@ -543,8 +497,8 @@ <h3>Follow Us</h3>
             });
         });
     </script>
- main
-
+ 
+<script>
       modeToggle.addEventListener("click", () => {
         document.body.classList.toggle("dark-mode");
         const isDarkMode = document.body.classList.contains("dark-mode");
@@ -583,7 +537,7 @@ <h3>Follow Us</h3>
       });
     });
   </script>
- main
+
 </body>
 
 </html>
\ No newline at end of file
diff --git a/forgot_password.html b/forgot_password.html
index 6598f199..f913d17f 100644
--- a/forgot_password.html
+++ b/forgot_password.html
@@ -87,7 +87,7 @@ <h3>One of us ?</h3>
     </a>
     <script>
         document.getElementById('login-btn').addEventListener('click', function() {
-          window.location.href = '/auth.html';
+          window.location.href = 'auth.html';
         });
       </script>
 
diff --git a/himachal.css b/himachal.css
index be841ad3..b2f7c7cb 100644
--- a/himachal.css
+++ b/himachal.css
@@ -38,7 +38,8 @@ body {
 }
 
 .trek-card img {
-    height: 200px;
+    width: 100%;
+    aspect-ratio: 3/2;
     object-fit: cover;
 }
 
diff --git a/himachal.html b/himachal.html
index 57537708..1186e938 100644
--- a/himachal.html
+++ b/himachal.html
@@ -1,16 +1,15 @@
-
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Himachal Pradesh Adventure Treks</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="himachal.html">
- main
-<style>
-          /* circle styles */
-          .circle {
+    <link rel="stylesheet" href="himachal.css">
+    <style>
+        /* circle styles */
+        .circle {
             height: 24px;
             width: 24px;
             border-radius: 24px;
@@ -20,13 +19,13 @@
             left: 0;
             pointer-events: none;
             z-index: 99999999;
-          }
-        </style>  
-    </head>
+        }
+    </style>
+</head>
 
-    <link rel="stylesheet" href="Booknow.css">
+<link rel="stylesheet" href="Booknow.css">
 </head>
- main
+
 <body>
     <div class="container-fluid py-5 trek-header">
         <h1 class="text-center text-white mb-4">Himachal Pradesh Adventure Treks</h1>
@@ -74,44 +73,53 @@ <h1 class="text-center text-white mb-4">Himachal Pradesh Adventure Treks</h1>
                     <img src="triundtrek.jpg" class="card-img-top" alt="Triund Trek">
                     <div class="card-body">
                         <h5 class="card-title">Triund Trek</h5>
-                        <p class="card-text">A beautiful 2-day trek near Dharamshala with stunning views of the Dhauladhar range.</p>
+                        <p class="card-text">A beautiful 2-day trek near Dharamshala with stunning views of the
+                            Dhauladhar range.</p>
                         <ul class="list-group list-group-flush mb-3">
                             <li class="list-group-item"><strong>Duration:</strong> 2 days</li>
                             <li class="list-group-item"><strong>Difficulty:</strong> Easy to Moderate</li>
-                            <li class="list-group-item"><strong>Best Time:</strong> March to June, September to November</li>
+                            <li class="list-group-item"><strong>Best Time:</strong> March to June, September to November
+                            </li>
                         </ul>
                     </div>
-                    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#trekModal">View Details</button>
+                    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#trekModal">View
+                        Details</button>
                 </div>
             </div>
             <div class="col-md-4 mb-4">
                 <div class="card h-100 trek-card">
-                    <img src="https://images.unsplash.com/photo-1515876305430-f06edab8282a" class="card-img-top" alt="Hampta Pass Trek">
+                    <img src="https://images.unsplash.com/photo-1515876305430-f06edab8282a" class="card-img-top"
+                        alt="Hampta Pass Trek">
                     <div class="card-body">
                         <h5 class="card-title">Hampta Pass Trek</h5>
-                        <p class="card-text">A diverse 5-day trek crossing from lush Kullu Valley to the arid Spiti region.</p>
+                        <p class="card-text">A diverse 5-day trek crossing from lush Kullu Valley to the arid Spiti
+                            region.</p>
                         <ul class="list-group list-group-flush mb-3">
                             <li class="list-group-item"><strong>Duration:</strong> 5 days</li>
                             <li class="list-group-item"><strong>Difficulty:</strong> Moderate</li>
                             <li class="list-group-item"><strong>Best Time:</strong> June to September</li>
                         </ul>
                     </div>
-                    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#trekModal">View Details</button>
+                    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#trekModal">View
+                        Details</button>
                 </div>
             </div>
             <div class="col-md-4 mb-4">
                 <div class="card h-100 trek-card">
-                    <img src="https://images.unsplash.com/photo-1544198365-f5d60b6d8190" class="card-img-top" alt="Bhrigu Lake Trek">
+                    <img src="https://images.unsplash.com/photo-1544198365-f5d60b6d8190" class="card-img-top"
+                        alt="Bhrigu Lake Trek">
                     <div class="card-body">
                         <h5 class="card-title">Bhrigu Lake Trek</h5>
-                        <p class="card-text">A 4-day trek to a high-altitude glacial lake near Manali with panoramic views.</p>
+                        <p class="card-text">A 4-day trek to a high-altitude glacial lake near Manali with panoramic
+                            views.</p>
                         <ul class="list-group list-group-flush mb-3">
                             <li class="list-group-item"><strong>Duration:</strong> 4 days</li>
                             <li class="list-group-item"><strong>Difficulty:</strong> Moderate to Difficult</li>
                             <li class="list-group-item"><strong>Best Time:</strong> May to October</li>
                         </ul>
                     </div>
-                    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#trekModal">View Details</button>
+                    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#trekModal">View
+                        Details</button>
                 </div>
             </div>
         </div>
@@ -131,17 +139,21 @@ <h5 class="modal-title" id="trekModalLabel">Trek Details</h5>
                                 <img src="triundtrek.jpg" class="d-block w-100" alt="Trek Image 1">
                             </div>
                             <div class="carousel-item">
-                                <img src="https://images.unsplash.com/photo-1515876305430-f06edab8282a" class="d-block w-100" alt="Trek Image 2">
+                                <img src="https://images.unsplash.com/photo-1515876305430-f06edab8282a"
+                                    class="d-block w-100" alt="Trek Image 2">
                             </div>
                             <div class="carousel-item">
-                                <img src="https://images.unsplash.com/photo-1544198365-f5d60b6d8190" class="d-block w-100" alt="Trek Image 3">
+                                <img src="https://images.unsplash.com/photo-1544198365-f5d60b6d8190"
+                                    class="d-block w-100" alt="Trek Image 3">
                             </div>
                         </div>
-                        <button class="carousel-control-prev" type="button" data-bs-target="#trekCarousel" data-bs-slide="prev">
+                        <button class="carousel-control-prev" type="button" data-bs-target="#trekCarousel"
+                            data-bs-slide="prev">
                             <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                             <span class="visually-hidden">Previous</span>
                         </button>
-                        <button class="carousel-control-next" type="button" data-bs-target="#trekCarousel" data-bs-slide="next">
+                        <button class="carousel-control-next" type="button" data-bs-target="#trekCarousel"
+                            data-bs-slide="next">
                             <span class="carousel-control-next-icon" aria-hidden="true"></span>
                             <span class="visually-hidden">Next</span>
                         </button>
@@ -178,23 +190,23 @@ <h4>Exclusions</h4>
                             <div class="modal-header1">Trek Booking Form</div>
                             <div class="modal-body1">
                                 <p>Please fill in your details:</p>
-                
+
                                 <!-- User Details Form -->
                                 <div class="input-field">
                                     <label for="name">Full Name</label>
                                     <input type="text" id="name" placeholder="Enter your name" required>
                                 </div>
-                
+
                                 <div class="input-field">
                                     <label for="email">Email</label>
                                     <input type="email" id="email" placeholder="Enter your email" required>
                                 </div>
-                
+
                                 <div class="input-field">
                                     <label for="phone">Phone Number</label>
                                     <input type="tel" id="phone" placeholder="Enter your phone number" required>
                                 </div>
-                
+
                                 <div class="dropdown">
                                     <label for="trekSelection">Select a Trek</label>
                                     <select id="trekSelection" onchange="updateTrekDetails()">
@@ -203,12 +215,12 @@ <h4>Exclusions</h4>
                                         <option value="Bhrigu Lake Trek">Bhrigu Lake Trek</option>
                                     </select>
                                 </div>
-                
+
                                 <!-- Trek Details Section -->
                                 <div id="trekDetails" class="trek-details">
                                     <!-- Trek details will be populated here based on the selection -->
                                 </div>
-                
+
                                 <button class="form-button" onclick="confirmBooking()">Confirm Booking</button>
                             </div>
                             <button class="close-btn1" onclick="closeModal()">Close</button>
@@ -290,74 +302,75 @@ <h4>Exclusions</h4>
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
 
-<!-- Circles -->
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-
-<script>
-    // coordinates for the cursor :
-    const coords = { x: 0, y: 0 };
-    const circles = document.querySelectorAll(".circle");
-
-    const colors = [
-      "#fc5720", "#fc6532", "#fc6532","#fd8b65", "#d5585c", "#fac3b1", "#f4d5cb", "#fefefe", "#fefefe", "#cdf2c5", "#b2eca5", "#95e283", "#7dda68", "#4adc2d", "#69d451", "#54c939", "#34b916", "#28b309", "#1e9c02", 
-    ];
-
-    circles.forEach(function (circle, index) {
-      circle.x = 0;
-      circle.y = 0;
-      circle.style.backgroundColor = colors[index % colors.length];
-    });
-
-    // update the coordinates when the mouse moves:
-    window.addEventListener("mousemove", function (e) {
-      coords.x = e.clientX;
-      coords.y = e.clientY;
-    });
-
-    // animation function to move the circles:
-    function animateCircles() {
-      let x = coords.x;
-      let y = coords.y;
-
-      circles.forEach(function (circle, index) {
-       
-
-        circle.style.left = x - 12 + "px";
-        circle.style.top = y - 12 + "px";
-        circle.style.scale = (circles.length - index) / circles.length;
-
-        circle.x = x;
-        circle.y = y;
-
-        const nextCircle = circles[index + 1] || circles[0];
-        x += (nextCircle.x - x) * 0.3;
-        y += (nextCircle.y - y) * 0.3;
-      });
-
-      requestAnimationFrame(animateCircles);
-    }
-    
-    animateCircles();
-  </script>
+    <!-- Circles -->
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+
+    <script>
+        // coordinates for the cursor :
+        const coords = { x: 0, y: 0 };
+        const circles = document.querySelectorAll(".circle");
+
+        const colors = [
+            "#fc5720", "#fc6532", "#fc6532", "#fd8b65", "#d5585c", "#fac3b1", "#f4d5cb", "#fefefe", "#fefefe", "#cdf2c5", "#b2eca5", "#95e283", "#7dda68", "#4adc2d", "#69d451", "#54c939", "#34b916", "#28b309", "#1e9c02",
+        ];
+
+        circles.forEach(function (circle, index) {
+            circle.x = 0;
+            circle.y = 0;
+            circle.style.backgroundColor = colors[index % colors.length];
+        });
+
+        // update the coordinates when the mouse moves:
+        window.addEventListener("mousemove", function (e) {
+            coords.x = e.clientX;
+            coords.y = e.clientY;
+        });
+
+        // animation function to move the circles:
+        function animateCircles() {
+            let x = coords.x;
+            let y = coords.y;
+
+            circles.forEach(function (circle, index) {
+
+
+                circle.style.left = x - 12 + "px";
+                circle.style.top = y - 12 + "px";
+                circle.style.scale = (circles.length - index) / circles.length;
+
+                circle.x = x;
+                circle.y = y;
+
+                const nextCircle = circles[index + 1] || circles[0];
+                x += (nextCircle.x - x) * 0.3;
+                y += (nextCircle.y - y) * 0.3;
+            });
+
+            requestAnimationFrame(animateCircles);
+        }
+
+        animateCircles();
+    </script>
 
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/hotel.html b/hotel.html
index b45b0c6f..5cb94139 100644
--- a/hotel.html
+++ b/hotel.html
@@ -2,7 +2,7 @@
 <html lang="en">
 
 <head>
- main
+
     <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">
@@ -45,7 +45,6 @@
   <title>Hotel Booking - BuddyTrail</title>
 </head>
 
- main
 <body>
   <header class="main-head">
     <nav>
diff --git a/img/family-vacation.avif b/img/family-vacation.avif
new file mode 100644
index 00000000..bcefec59
Binary files /dev/null and b/img/family-vacation.avif differ
diff --git a/img/romantic-travel3.jpg b/img/romantic-travel3.jpg
new file mode 100644
index 00000000..3621b66a
Binary files /dev/null and b/img/romantic-travel3.jpg differ
diff --git a/img/solo-travel.jpg b/img/solo-travel.jpg
new file mode 100644
index 00000000..ec2c727a
Binary files /dev/null and b/img/solo-travel.jpg differ
diff --git a/index.html b/index.html
index 453b397a..0fe7f16d 100644
--- a/index.html
+++ b/index.html
@@ -274,6 +274,7 @@
 .itinerary.inview, .service-card.inview {
   opacity: 1;
   transform: translateY(0);
+  max-width: 95%;
 }
 
  main
@@ -1082,7 +1083,7 @@ <h3>Wildlife Safari in Kenya</h3>
         </script>
 
     <!-- travel itineraries -->
-    <section id="itineraries" class="itineraries-section" style="height: 100%;border: 2px solid #FFFFFF;" >
+    <!-- <section id="itineraries" class="itineraries-section" style="height: 100%;border: 2px solid #FFFFFF;" >
       <h2 id="h1darkbtn">TRAVEL ITINERARIES</h2> 
       
       <p id="darkbtn">
@@ -1143,7 +1144,125 @@ <h3>Romantic Getaway</h3>
       .dark-mode .itinerary p{
         color: #2c2fdf;
       }
-    </style>
+    </style> -->
+
+       <!-- Travel Itineraries Section -->
+<section id="itineraries" class="itineraries-section" style="height: 100%; border: 2px solid #FFFFFF; position: relative;">
+  <h2 id="h1darkbtn">TRAVEL ITINERARIES</h2>
+
+  <p id="darkbtn">
+      Plan your trips effortlessly with our curated travel itineraries tailored for different types of adventures. Whether you're planning a family vacation, a solo adventure, or a romantic getaway, we’ve got you covered!
+  </p>
+
+  <div class="itinerary-list" style="height: 1200px;">
+      <div class="itinerary" id="itinerary1">
+          <div class="header1">
+              <h3 style="color: white; font-weight: 900; font-size: large;">Family Vacation</h3>
+              <p style="color: black; font-size: 18px; font-weight: 500;">Explore the best family-friendly destinations with day-by-day guides that include must-see attractions and activities for all ages.</p>
+              <a href="./Travel-Itineraries.html"><button>View Itinerary</button></a>
+          </div>
+      </div>
+
+      <div class="itinerary" id="itinerary2">
+          <div class="header1">
+              <h3 style="color: white; font-weight: 900; font-size: large;">Solo Adventure</h3>
+              <p style="color: black; font-size: 18px; font-weight: 500;">Embark on a solo journey with our handpicked itineraries, offering exciting experiences and peaceful retreats just for you.</p>
+              <a href="./solo-adventure.html"><button>View Itinerary</button></a>
+          </div>
+      </div>
+
+      <div class="itinerary" id="itinerary3">
+          <div class="header1">
+              <h3 style="color: white; font-weight: 900; font-size: large;">Romantic Getaway</h3>
+              <p style="color: black; font-size: 18px; font-weight: 500;">Plan the perfect romantic escape with itineraries that include serene locations, romantic dinners, and memorable experiences.</p>
+              <a href="./romantic-gateway.html"><button>View Itinerary</button></a>
+          </div>
+      </div>
+  </div>
+</section>
+
+<style>
+  /* Itineraries Section Styling */
+  .itineraries-section {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 20px;
+      color: #ffffff;
+  }
+
+
+
+  .itineraries-section h2, .itineraries-section p, .itinerary-list {
+      position: relative;
+      z-index: 2;
+  }
+
+  /* Itinerary Styling */
+  .itinerary-list {
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+      width: 90%;
+      
+  }
+
+  .itinerary {
+        position: relative;
+        width: 100%;
+        max-width: 600px;
+        padding: 20px;
+        border-radius: 8px;
+        overflow: hidden;
+        text-align: center;
+        margin-bottom: 20px;
+        
+    }
+
+    #itinerary1 {
+      background-image: linear-gradient(to right, rgb(35, 34, 34), rgba(238, 230, 230, 0)), url('/img/family-vacation.avif');
+        background-size: cover;
+        background-position: center;
+
+    }
+    #itinerary2 {
+      background-image: linear-gradient(to right, rgb(35, 34, 34), rgba(238, 230, 230, 0)), url('/img/solo-travel.jpg');
+        background-size: cover;
+        background-position: center;
+    }
+    #itinerary3 {
+      background-image: linear-gradient(to right, rgb(35, 34, 34), rgba(238, 230, 230, 0)), url('/img/romantic-travel3.jpg');
+        background-size: cover;
+        background-position: center;
+    }
+
+  .itinerary button {
+      background-color: #ffa500;
+      border: none;
+      color: #fff;
+      padding: 10px 15px;
+      cursor: pointer;
+      border-radius: 5px;
+  }
+
+  /* Dark Mode Styling */
+  .dark-mode #itineraries h2 {
+      color: #ffa500;
+  }
+  .dark-mode #itineraries h3 {
+      color: #ffa500;
+  }
+  .dark-mode #itineraries p {
+      color: #fff;
+  }
+  .dark-mode .itinerary {
+      background-color: #0e0e0e;
+  }
+  .dark-mode .itinerary p {
+      color: #2c2fdf;
+  }
+</style>
+
     <!-- Our Services Section -->
     <section class="services" id="services" style="border: 2px solid #FFFFFF;">
       <h2>Our Services</h2>
@@ -1781,7 +1900,7 @@ <h2>Packing Checklist</h2>
 
 
     <!--Emergency-->
-    <section class="services" id="services">
+    <section class="service" id="services">
     <div class="sos-container">
       <h2>Emergency SOS</h2>
       <p id="emergency-text" style="color: whitesmoke;">In case of an emergency, press the button to send your current location to your emergency contacts.</p>
@@ -1789,6 +1908,78 @@ <h2>Emergency SOS</h2>
       <div id="sos-status"></div>
     </div>
     </section>
+
+    <style>
+.sos-container h2{
+  color: white;
+  font-size: 3.0rem;
+  text-decoration:underline;
+}
+      /* General Section Styling */
+.service {
+    padding: 40px;
+    background-color: #1a2a3a; /* Eye-comfort background color */
+    color: #f1f1f1; /* Text color for readability */
+    border-radius: 12px;
+    text-align: center;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+    transition: background-color 0.3s ease;
+    border: 10px solid white;
+}
+
+.service:hover {
+    background-color: #2b3b4c; /* Slightly darker on hover */
+}
+
+/* SOS Button Styling */
+#sosButton {
+  width: 150px;
+  height: 60px;
+    margin-top: 40px;
+    background-color: #ff5555;
+    color: #fff;
+    padding: 12px 24px;
+    border: none;
+    border-radius: 8px;
+    font-size: 1.1em;
+    font-weight: bolder;
+    cursor: pointer;
+    transition: background-color 0.3s ease, transform 0.2s ease;
+}
+
+#sosButton:hover {
+    background-color: #ff3333;
+    transform: scale(1.05); /* Slight scaling effect on hover */
+}
+
+#sosButton:active {
+    background-color: #ff1111;
+    transform: scale(0.98); /* Pressed button effect */
+}
+
+/* SOS Status and Emergency Text Styling */
+#emergency-text {
+    margin-top: 40px;
+    font-size: 1em;
+    margin-bottom: 16px;
+}
+
+#sos-status {
+    margin-top: 20px;
+    font-size: 1em;
+    font-weight: bold;
+    color: #eef2f5; /* Color to signify emergency status */
+}
+
+/* sos-container for additional styling */
+.sos-container {
+    max-width: 500px;
+    margin: 0 auto;
+}
+
+    </style>
+
+
     <!--posts section-->
     <div id="posts">
       <header class="posts_blog">
@@ -2394,15 +2585,18 @@ <h3>About BuddyTrail</h3>
                         <h3>Send Us a Message</h3>
                         <form id="contactForm">
                             <div class="form-group">
-                                <input type="text" id="name" class="form-control" placeholder="Your Name" required pattern="[a-zA-Z ]+"
+                              <i class="fas fa-user"></i>
+                              <input type="text" id="name" class="form-control" placeholder="Your Name" required pattern="[a-zA-Z ]+"
                                 oninvalid="this.setCustomValidity('Numbers and Symbols are not allowed')"
                                 oninput="this.setCustomValidity('')">
                             </div>
                             <div class="form-group">
-                              <input type="email" id="email" class="form-control" placeholder="Your Email" required>
+                              <i class="fas fa-envelope"></i>
+                              <input type="email" id="email" class="form-control" placeholder="      Your Email" required>
 
                             </div>
                             <div class="form-group">
+                              <i class="fas fa-message"></i>
                                 <textarea id="message" class="form-control" rows="4" placeholder="Your Message" required></textarea>
                             </div>
                             <button class="book-btn" type="submit">Send Message</button>
@@ -2603,7 +2797,7 @@ <h2>Thank You!</h2>
   </main>
 
   <section id="testimonials" class="testimonials-section">
-    <h2 class="testimonials-heading"  style="color: rgba(255, 255, 248, 0.953)">Testimonials</h2>
+    <h2 class="testimonials-heading"  >Testimonials</h2>
 
     <div class="testimonials-container">
       <div class="header1 test">
@@ -2645,6 +2839,100 @@ <h4>Traveller</h4>
     </div>
   </section>
 
+ <style>
+
+.testimonials-heading {
+    font-size: 3.8rem;
+    margin-bottom: 40px;
+    color: rgba(251, 253, 255, 0.95);
+    font-weight: bold;
+}
+
+/* Testimonials Container */
+.testimonials-container {
+    display: flex;
+    justify-content: center;
+    gap: 30px;
+    flex-wrap: wrap;
+}
+
+/* Card Styling */
+.snip1533 {
+    background-color: #ffffff;
+    border-radius: 10%;
+    padding: 25px;
+    max-width: 320px;
+    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+    cursor: pointer;
+    perspective: 1000px;
+   
+    position: relative;
+}
+
+/* 3D Rotation and Shadow Effects */
+.snip1533:hover {
+ 
+    transform: scale(1.05) rotateX(5deg) rotateY(5deg);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+    background: linear-gradient(135deg, #e0f7fa, #80deea);
+}
+
+/* Inner Shadow and Text Effect */
+.snip1533::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: rgba(255, 255, 255, 0.4);
+    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.2);
+    border-radius: 15px;
+    transition: opacity 0.3s ease;
+    opacity: 0;
+}
+
+.snip1533:hover::before {
+    opacity: 1;
+}
+
+/* Text Styling */
+.snip1533 blockquote p {
+    font-size: 1.1rem;
+    color: #34495e;
+    line-height: 1.6;
+    font-style: italic;
+}
+
+.snip1533 h3 {
+    font-size: 1.2em;
+    margin-top: 20px;
+    color: #00a894;
+    font-weight: bold;
+}
+
+.snip1533 h4 {
+    font-size: 1rem;
+    color: #34495e;
+}
+
+/* Hover Text Color Effect */
+.snip1533:hover h3 {
+    color: #7a15be;
+}
+
+.snip1533:hover h4 {
+    color: #004d40;
+}
+
+/* Glowing Border Animation */
+.snip1533:hover {
+    border: 2px solid rgba(0, 150, 136, 0.2);
+    box-shadow: 0 0 15px rgba(0, 150, 136, 0.4), 0 0 25px rgba(0, 150, 136, 0.2);
+}
+
+ </style>
+
+
+
   <section id="reviews" class="reviews-section">
     <div class="review">
       <div class="review-form">
@@ -2913,6 +3201,42 @@ <h2 style="color: #0057B3;" id="h1darkbtn">Rate your experience</h2>
     <div class="footer-column">
       <h3>About Us</h3>
       <p>Discover and plan affordable trips with BuddyTrail's travel companion tools.</p>
+      <!-- Newsletter Form Section -->
+    <style>
+      .footer-column.newsletter {
+          max-width: 300px;
+          margin: 0 auto;
+          text-align: center;
+      }
+      #newsletter-form {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+      }
+      #email {
+          width: 100%;
+          margin-bottom: 10px;
+          padding: 8px;
+          box-sizing: border-box;
+      }
+      button[type="submit"] {
+          width: 100px;
+          padding: 6px;
+          font-size: 14px;
+      }
+      #subscription-message {
+          font-size: 14px;
+          margin-top: 10px;
+      }
+  </style>
+    <div class="footer-column newsletter" id="newsletter">
+      <h3>Subscribe to Our Newsletter</h3>
+      <form id="newsletter-form">
+        <input type="email" id="email" placeholder="Enter your email" required />
+        <button type="submit">Subscribe</button>
+      </form>
+      <p id="subscription-message"></p>
+    </div>
     </div>
 
     <!-- Quick Links Section -->
@@ -2950,9 +3274,7 @@ <h3>Legal Links</h3>
       <h3>Contact Us</h3>
       <p>Email: <a href="mailto:info@example.com">info@example.com</a></p>
       <p>Phone: <a href="tel:+1234567890">+123 456 7890</a></p>
-    </div>
-
-    <!-- Follow Us Section -->
+      <!-- Follow Us Section -->
     <div class="footer-column">
       <h3>Follow Us</h3>
       <div class="social-icons">
@@ -2962,42 +3284,6 @@ <h3>Follow Us</h3>
         <a href="https://www.linkedin.com/in/priya-ghosal-785771286/" target="_blank"><i class="fab fa-linkedin-in"></i></a>
       </div>
     </div>
-
-    <!-- Newsletter Form Section -->
-    <style>
-      .footer-column.newsletter {
-          max-width: 300px;
-          margin: 0 auto;
-          text-align: center;
-      }
-      #newsletter-form {
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-      }
-      #email {
-          width: 100%;
-          margin-bottom: 10px;
-          padding: 8px;
-          box-sizing: border-box;
-      }
-      button[type="submit"] {
-          width: 100px;
-          padding: 6px;
-          font-size: 14px;
-      }
-      #subscription-message {
-          font-size: 14px;
-          margin-top: 10px;
-      }
-  </style>
-    <div class="footer-column newsletter" id="newsletter">
-      <h3>Subscribe to Our Newsletter</h3>
-      <form id="newsletter-form">
-        <input type="email" id="email" placeholder="Enter your email" required />
-        <button type="submit">Subscribe</button>
-      </form>
-      <p id="subscription-message"></p>
     </div>
   </div>
 
diff --git a/kerala.html b/kerala.html
new file mode 100644
index 00000000..d311cf44
--- /dev/null
+++ b/kerala.html
@@ -0,0 +1,234 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Kerala Travel - Hotels</title>
+
+    <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"
+    />
+    <script src="https://kit.fontawesome.com/c4254e24a8.js" crossorigin="anonymous"></script>
+    <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"
+    />
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        background-color: #f4f4f4;
+        margin: 0;
+        width: 100vw;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        overflow-x: hidden;
+      }
+
+      .main-image {
+        width: 100%;
+        height: 300px;
+        object-fit: cover;
+        background-image: url('https://images.pexels.com/photos/1273246/pexels-photo-1273246.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2');
+        background-position: bottom;
+      }
+
+      .main-heading {
+        font-size: 48px;
+        color: white;
+        text-align: center;
+        height: 500px;
+        padding-top: 120px;
+      }
+
+      .container {
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin: auto;
+        width: 100vw;
+      }
+
+      .card-container {
+        display: flex;
+        flex-direction: row;
+        width: 100vw;
+        height: 590px;
+        align-items: center;
+        margin: auto;
+        margin-left: 100px;
+        margin-bottom: 50px;
+      }
+
+      h1 {
+        color: #2c3e50;
+        margin-bottom: 30px;
+        font-size: 5em;
+      }
+
+      .hotel-card {
+        background-color: #ffffff;
+        border: 1px solid #ddd;
+        border-radius: 8px;
+        padding: 20px;
+        margin: 15px 40px;
+        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+        width: 450px;
+        height: 100%;
+      }
+
+      .hotel-image {
+        width: 100%;
+        max-height: 400px;
+        border-radius: 8px;
+        object-fit: cover;
+        height: 100%;
+      }
+
+      .hotel-card h2 {
+        color: #2980b9;
+        margin: 10px 0 10px;
+        font-size: 3rem;
+      }
+
+      .hotel-card p {
+        color: #7f8c8d;
+        font-size: 18px;
+      }
+
+      .book-button {
+        background-color: #2980b9;
+        color: white;
+        border: none;
+        border-radius: 5px;
+        padding: 10px 20px;
+        font-size: 16px;
+        cursor: pointer;
+        transition: background-color 0.3s;
+      }
+
+      .book-button:hover {
+        background-color: #1a6d99;
+      }
+    </style>
+</head>
+<body>
+    <div class="main-image">
+        <h1 class="main-heading">Kerala</h1>
+    </div>
+    <br>
+    <br>
+    <h1>Top Hotels in Kerala</h1>
+
+    <div class="container">
+        <div class="card-container">
+            <div class="hotel-card">
+                <img
+                  src="https://cdn.sanity.io/images/ocl5w36p/production/ba1279f6e9e1a5185142623b0dee9559d752ba98-1720x1112.jpg"
+                  alt="Taj Kumarakom Resort & Spa, Kumarakom"
+                  class="hotel-image"
+                />
+                <h2>Taj Kumarakom Resort</h2>
+                <p>Price per night: ₹12,000</p>
+                <button class="book-button">Book Now</button>
+              </div>
+              <div class="hotel-card">
+                <img
+                  src="https://www.oberoihotels.com/-/media/oberoi-hotels/home-detail/bangaluru.png"
+                  alt="The Oberoi, Kochi"
+                  class="hotel-image"
+                />
+                <h2>The Oberoi, Kochi</h2>
+                <p>Price per night: ₹15,000</p>
+                <button class="book-button">Book Now</button>
+              </div>
+              <div class="hotel-card">
+                <img
+                  src="https://www.fortekochi.in/images/bg.jpg"
+                  alt="The Forage Hotel, Kochi"
+                  class="hotel-image"
+                />
+                <h2>The Forage Hotel, Kochi</h2>
+                <p>Price per night: ₹10,000</p>
+                <button class="book-button">Book Now</button>
+              </div>
+          </div>
+
+          <div class="card-container">
+            <div class="hotel-card">
+              <img
+                src="https://www.kumarakomlakeresort.in/assets/images/luxury-dining/vembanad-the-seafood-bar/vembanad-the-seafood-bar.jpg"
+                alt="Kumarakom Lake Resort, Kumarakom"
+                class="hotel-image"
+              />
+              <h2>Kumarakom Lake Resort</h2>
+              <p>Price per night: ₹8,000</p>
+              <button class="book-button">Book Now</button>
+            </div>
+            <div class="hotel-card">
+              <img
+                src="https://www.lemontreehotels.com/uploads/hotelslider/29_26_2023_05_26_27Facade.jpg"
+                alt="Lemon Tree Hotel, Kochi"
+                class="hotel-image"
+              />
+              <h2>Lemon Tree Hotel, Kochi</h2>
+              <p>Price per night: ₹6,000</p>
+              <button class="book-button">Book Now</button>
+            </div>
+            <div class="hotel-card">
+              <img
+                src="https://www.itchotels.com/content/dam/itchotels/in/umbrella/fortune/head-mast-desktop/fortune%20park%20panchwati%20kolkata.png"
+                alt="Fortune Hotel, Kochi"
+                class="hotel-image"
+              />
+              <h2>Fortune Hotel, Kochi</h2>
+              <p>Price per night: ₹7,000</p>
+              <button class="book-button">Book Now</button>
+            </div>
+          </div>
+
+        <div class="card-container">
+            <div class="hotel-card">
+              <img
+                src="https://www.pauljohnhotels.com/images/gallery/fk/bright-yellow-ambience-with-pool.jpg"
+                alt="The Paul, Kochi"
+                class="hotel-image"
+              />
+              <h2>The Paul, Kochi</h2>
+              <p>Price per night: ₹9,000</p>
+              <button class="book-button">Book Now</button>
+            </div>
+            <div class="hotel-card">
+              <img
+                src="https://lh3.googleusercontent.com/p/AF1QipOwoFwSe8uEQoxGFuXfePaOSy-xFhFAU9W3zf2j=s1360-w1360-h1020"
+                alt="Xandari Resort, Thekkady"
+                class="hotel-image"
+              />
+              <h2>Xandari Resort, Thekkady</h2>
+              <p>Price per night: ₹11,000</p>
+              <button class="book-button">Book Now</button>
+            </div>
+            <div class="hotel-card">
+              <img
+                src="https://r2imghtlak.ibcdn.com/r2-mmt-htl-image/htl-imgs/202308161732012633-cd9da5667cad11ee83d00a58a9feac02.jpg?downsize=1920:1080"
+                alt="Esterel Hotel, Kochi"
+                class="hotel-image"
+              />
+              <h2>Esterel Hotel, Kochi</h2>
+              <p>Price per night: ₹8,500</p>
+              <button class="book-button">Book Now</button>
+            </div>
+          </div>
+    </div>
+  </body>
+</html>
diff --git a/project-structure.md b/project-structure.md
index 15530aaf..35d20b67 100644
--- a/project-structure.md
+++ b/project-structure.md
@@ -31,7 +31,8 @@
 │   │   ├── ContactUs.js
 │   │   ├── Feedback.js
 │   │   ├── Rating.js
-│   │   └── User.js
+│   │   ├── User.js
+│   │   └── suggestion.js
 │   ├── package-lock.json
 │   ├── package.json
 │   ├── routes
@@ -121,6 +122,7 @@
 │   ├── df1.jpg
 │   ├── df2.jpg
 │   ├── download.jpeg
+│   ├── family-vacation.avif
 │   ├── google.png
 │   ├── googleLogo.png
 │   ├── gssocextd1.jpg
@@ -143,10 +145,12 @@
 │   ├── popup1.jpg
 │   ├── popup2.jpg
 │   ├── popup3.jpg
+│   ├── romantic-travel3.jpg
 │   ├── safety.jpg
 │   ├── safety1.jpg
 │   ├── safety2.jpg
 │   ├── safety3.jpeg
+│   ├── solo-travel.jpg
 │   ├── u1.jpg
 │   ├── u2.jpg
 │   ├── u4.jpg
@@ -154,6 +158,7 @@
 │   └── x-logo.png
 ├── index.html
 ├── italy.html
+├── kerala.html
 ├── manifest.json
 ├── moon.png
 ├── new_post.html
diff --git a/project_structure.txt b/project_structure.txt
index 6a57f1b0..7b553c1f 100644
--- a/project_structure.txt
+++ b/project_structure.txt
@@ -29,7 +29,8 @@
 │   │   ├── ContactUs.js
 │   │   ├── Feedback.js
 │   │   ├── Rating.js
-│   │   └── User.js
+│   │   ├── User.js
+│   │   └── suggestion.js
 │   ├── package-lock.json
 │   ├── package.json
 │   ├── routes
@@ -119,6 +120,7 @@
 │   ├── df1.jpg
 │   ├── df2.jpg
 │   ├── download.jpeg
+│   ├── family-vacation.avif
 │   ├── google.png
 │   ├── googleLogo.png
 │   ├── gssocextd1.jpg
@@ -141,10 +143,12 @@
 │   ├── popup1.jpg
 │   ├── popup2.jpg
 │   ├── popup3.jpg
+│   ├── romantic-travel3.jpg
 │   ├── safety.jpg
 │   ├── safety1.jpg
 │   ├── safety2.jpg
 │   ├── safety3.jpeg
+│   ├── solo-travel.jpg
 │   ├── u1.jpg
 │   ├── u2.jpg
 │   ├── u4.jpg
@@ -152,6 +156,7 @@
 │   └── x-logo.png
 ├── index.html
 ├── italy.html
+├── kerala.html
 ├── manifest.json
 ├── moon.png
 ├── new_post.html
diff --git a/rajasthan.css b/rajasthan.css
index e55dfa28..1836fd51 100644
--- a/rajasthan.css
+++ b/rajasthan.css
@@ -36,6 +36,11 @@ h1, h2 {
     height: 400px;
     object-fit: cover;
 }
+.card-img-top {
+    width: 100%;
+    aspect-ratio: 3/2;
+    object-fit: cover;
+}
 
 .modal-content {
     background-color: #ffffff;
diff --git a/style.css b/style.css
index d52a39dd..8526452c 100644
--- a/style.css
+++ b/style.css
@@ -321,11 +321,11 @@ a {
 .main-head {
   position: fixed;
   width: 98%;
-  top: 20px;
+  top: 5px;
   left: 1%;
   right: 0;
   z-index: 5;
-  padding: 17px;
+  padding: 17px 0;
   background-color: #00000087; /* Initially black */
   color: white;
   display: flex;
@@ -1161,16 +1161,13 @@ body {
   color: black;
 }
 
- issue
 
-h2 {
-main
 
+h2 {
   font-size:  2.5em;
   font-weight:  700;
   margin:  10px 0; /* Margin adjustment */
-  color:  #007bff;
-
+  color: #007bff;
 }
 
 p {
@@ -1617,7 +1614,7 @@ Light mode styles body.light-mode {
 }
 
 #itineraries {
-  background-color: #f9f9f9; /* Light background */
+  background-color: #e1b7ed; /* Light background */
   border: 1px solid #007bff; /* Blue border */
 }
 
@@ -3056,3 +3053,35 @@ body {
   border-radius: 50%; /* Optional: make it circular */
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Optional: shadow */
 }
+
+
+
+/* fa form contact-form icon */
+.form-group .form-control{
+  padding-left: 6%;
+}
+.fa-user{
+  position: absolute;
+  left:2.7rem;
+  top:3.50rem;
+  font-size: 14px;
+  color: grey;
+}
+.fa-envelope{
+  position: absolute;
+  left: 2.7rem;
+  top: 3.6rem;
+  font-size: 14px;
+  color: grey;
+}
+.fa-message{
+  position: absolute;
+  left: 2.7rem;
+  top: 3.8rem;
+  font-size: 14px;
+  color: grey;
+}
+.email-padding input[type="email"]{
+  padding-left: 30px; /* get in touch padding for icon*/
+}
+/* fa icon end */
diff --git a/team.html b/team.html
index 7f815af9..67f97a06 100644
--- a/team.html
+++ b/team.html
@@ -434,6 +434,104 @@ <h1 id="logo"><a href="#home">BuddyTrail</a></h1>
 <div class="footer-column">
   <h3>About Us</h3>
   <p>Discover and plan affordable trips with BuddyTrail's travel companion tools.</p>
+  <!-- Newsletter Form Section -->
+  <style>
+    .social-icons {
+        display: flex;
+        gap: 1rem;
+        margin-top: 0.5rem;
+    }
+
+    .social-icons a {
+        color: #E2E8F0;
+        transition: color 0.3s ease, transform 0.2s ease;
+    }
+
+    .social-icons a:hover {
+        color: #4C51BF;
+        transform: translateY(-2px);
+    }
+
+/* for facebook */
+.social-icons .fa-discord {
+transition: color 0.3s ease, transform 0.3s ease;
+}
+.social-icons .fa-discord:hover {
+color: #4267b2;
+transform: scale(1.1);
+transform: scale(1.2) translateY(-5px);
+}
+
+/* for twitter */
+.social-icons .fa-x-twitter {
+transition: color 0.3s ease, transform 0.3s ease;
+}
+.social-icons .fa-x-twitter:hover {
+color: black;
+transform: scale(1.1);
+transform: scale(1.2) translateY(-5px);
+}
+/* for instagram */
+.social-icons .fa-github {
+transition: color 0.3s ease, transform 0.3s ease;
+}
+.social-icons .fa-github:hover {
+color: #c32aa3;
+transform: scale(1.1);
+transform: scale(1.2) translateY(-5px);
+}
+
+/* for instagram */
+.social-icons .fa-linkedin-in {
+transition: color 0.3s ease, transform 0.3s ease;
+}
+.social-icons .fa-linkedin-in:hover {
+color: #0a66c2;
+transform: scale(1.1);
+transform: scale(1.2) translateY(-5px);
+}
+
+    
+    .footer-column.newsletter {
+        max-width: 300px;
+        margin: 0 auto;
+        text-align: center;
+    }
+    #newsletter-form {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+    #email {
+        width: 100%;
+        margin-bottom: 10px;
+        padding: 8px;
+        box-sizing: border-box;
+    }
+    button[type="submit"] {
+        width: 100px;
+        padding: 6px;
+        font-size: 14px;
+        height: 50px;
+        background-color: #007bff;
+    }
+    #subscription-message {
+        font-size: 14px;
+        margin-top: 10px;
+    }
+  
+</style>
+<button class="go-top-btn">
+  <img height="45px" width="50px" src="arrow_upper.png " alt="arrow up">
+</button>
+  <div class="footer-column newsletter" id="newsletter">
+    <h3>Subscribe to Our Newsletter</h3>
+    <form id="newsletter-form">
+      <input type="email" id="email" placeholder="Enter your email" required />
+      <button type="submit">Subscribe</button>
+    </form>
+    <p id="subscription-message"></p>
+  </div>
 </div>
 
 <!-- Quick Links Section -->
@@ -467,9 +565,7 @@ <h3>Legal Links</h3>
   <h3>Contact Us</h3>
   <p>Email: <a href="mailto:info@example.com">info@example.com</a></p> <!-- Used anchor tags for better functionality -->
   <p>Phone: <a href="tel:+1234567890">+123 456 7890</a></p>
-</div>
-
-<!-- Follow Us Section -->
+  <!-- Follow Us Section -->
 <div class="footer-column">
   <h3>Follow Us</h3>
   <div class="social-icons">
@@ -479,108 +575,14 @@ <h3>Follow Us</h3>
     <a href="https://www.linkedin.com/in/priya-ghosal-785771286/"><i class="fab fa-linkedin-in"></i></a>
   </div>
 </div>
+</div>
+
+
 
             </div>
           </div>
       
-          <!-- Newsletter Form Section -->
-          <style>
-            .social-icons {
-                display: flex;
-                gap: 1rem;
-                margin-top: 0.5rem;
-            }
-    
-            .social-icons a {
-                color: #E2E8F0;
-                transition: color 0.3s ease, transform 0.2s ease;
-            }
-    
-            .social-icons a:hover {
-                color: #4C51BF;
-                transform: translateY(-2px);
-            }
-
-/* for facebook */
-.social-icons .fa-discord {
-    transition: color 0.3s ease, transform 0.3s ease;
-  }
-  .social-icons .fa-discord:hover {
-    color: #4267b2;
-    transform: scale(1.1);
-    transform: scale(1.2) translateY(-5px);
-  }
-  
-  /* for twitter */
-  .social-icons .fa-x-twitter {
-    transition: color 0.3s ease, transform 0.3s ease;
-  }
-  .social-icons .fa-x-twitter:hover {
-    color: black;
-    transform: scale(1.1);
-    transform: scale(1.2) translateY(-5px);
-  }
-  /* for instagram */
-  .social-icons .fa-github {
-    transition: color 0.3s ease, transform 0.3s ease;
-  }
-  .social-icons .fa-github:hover {
-    color: #c32aa3;
-    transform: scale(1.1);
-    transform: scale(1.2) translateY(-5px);
-  }
-  
-  /* for instagram */
-  .social-icons .fa-linkedin-in {
-    transition: color 0.3s ease, transform 0.3s ease;
-  }
-  .social-icons .fa-linkedin-in:hover {
-    color: #0a66c2;
-    transform: scale(1.1);
-    transform: scale(1.2) translateY(-5px);
-  }
-    
-            
-            .footer-column.newsletter {
-                max-width: 300px;
-                margin: 0 auto;
-                text-align: center;
-            }
-            #newsletter-form {
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-            }
-            #email {
-                width: 100%;
-                margin-bottom: 10px;
-                padding: 8px;
-                box-sizing: border-box;
-            }
-            button[type="submit"] {
-                width: 100px;
-                padding: 6px;
-                font-size: 14px;
-                height: 50px;
-                background-color: #007bff;
-            }
-            #subscription-message {
-                font-size: 14px;
-                margin-top: 10px;
-            }
           
-        </style>
-        <button class="go-top-btn">
-          <img height="45px" width="50px" src="arrow_upper.png " alt="arrow up">
-        </button>
-          <div class="footer-column newsletter" id="newsletter">
-            <h3>Subscribe to Our Newsletter</h3>
-            <form id="newsletter-form">
-              <input type="email" id="email" placeholder="Enter your email" required />
-              <button type="submit">Subscribe</button>
-            </form>
-            <p id="subscription-message"></p>
-          </div>
         </div>
       
         <!-- Footer Bottom Section -->