diff --git a/about.html b/about.html
index 909370b..e1d1d37 100644
--- a/about.html
+++ b/about.html
@@ -1,478 +1,302 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>About Us - Ticket Booking</title>
-    <link rel="shortcut icon" href="images/4.jpeg" type="image/x-icon">
-
-    <link rel="stylesheet" href="styles.css">
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
-    <link rel="stylesheet" href="styles.css">
-    <link rel="stylesheet" href="index.css">
-    <link rel="stylesheet" href="about.css">
-    <link rel="stylesheet" href="main.css">
-    <link rel="stylesheet" href="footer.css"> 
-    <link rel="stylesheet" href="faq.css">
-    <link rel="stylesheet" href="styles.css">
-    <link rel="stylesheet" href="index.css">
-    <link rel="stylesheet" href="navbar.css">
-    <link rel="stylesheet" href="why-us.css">
-    <script src="chatbot.js"></script>
-    <style>
-        .nav-container{
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>About Us - Ticket Booking</title>
+  <link rel="shortcut icon" href="images/4.jpeg" type="image/x-icon">
+
+  <link rel="stylesheet" href="styles.css">
+  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
+  <link rel="stylesheet" href="styles.css">
+  <link rel="stylesheet" href="index.css">
+  <link rel="stylesheet" href="about.css">
+  <link rel="stylesheet" href="main.css">
+  <link rel="stylesheet" href="footer.css">
+  <link rel="stylesheet" href="faq.css">
+  <link rel="stylesheet" href="styles.css">
+  <link rel="stylesheet" href="index.css">
+  <link rel="stylesheet" href="navbar.css">
+  <link rel="stylesheet" href="why-us.css">
+  <script src="chatbot.js"></script>
+</head>
+<style>
+
+.nav-container {
       display: flex;
-} 
+    }
 
-/* cursor */
 
-/* cursor */
-    </style>
-</head>
-<style>
-/* code for chatbot button */
-         #chatbotBtn {
-            position: fixed;
-            bottom: 65px;
-            right: 30px;
-            z-index: 99;
-            border: none;
-            outline: none;
-            /* background-color: #1fb899; */
-            background-image: url('./images/bot.jpg');
-            background-size: cover;
-            background-position: center;
-            border: none;
-            padding: 0;
-            color: white;
-            cursor: pointer;
-            /* padding: 10px 6px; */
-            width: 50px !important;
-            height: 50px !important;
-            border-radius: 100%;
-        }
-        
-        .chatbot-container {
-            display: none;
-            width: 370px;
-            max-width: 100%;
-            position: fixed;
-            bottom: 75px;
-            right: 30px;
-            margin: 50px auto;
-            padding: 20px;
-            z-index: 1001;
-            border-radius: 10px;
-            box-shadow: #64646f33 0px 7px 29px 0px;
-            background: #31363F;
-        }
+  /* code for chatbot button */
+  #chatbotBtn {
+    position: fixed;
+    bottom: 65px;
+    right: 30px;
+    z-index: 99;
+    border: none;
+    outline: none;
+    /* background-color: #1fb899; */
+    background-image: url('./images/bot.jpg');
+    background-size: cover;
+    background-position: center;
+    border: none;
+    padding: 0;
+    color: white;
+    cursor: pointer;
+    /* padding: 10px 6px; */
+    width: 50px !important;
+    height: 50px !important;
+    border-radius: 100%;
+  }
 
-        .chatbot-container.chatbot-show {
-            display: block;
-        }
+  .chatbot-container {
+    display: none;
+    width: 370px;
+    max-width: 100%;
+    position: fixed;
+    bottom: 75px;
+    right: 30px;
+    margin: 50px auto;
+    padding: 20px;
+    z-index: 1001;
+    border-radius: 10px;
+    box-shadow: #64646f33 0px 7px 29px 0px;
+    background: #31363F;
+  }
 
-        .chatbot-title {
-            text-align: center;
-            font-size: 24px;
-            font-weight: bold;
-            color: #edf1f3;
-        }
+  .chatbot-container.chatbot-show {
+    display: block;
+  }
 
-        .chatbot-chat {
-            height: 250px;
-            overflow-y: scroll;
-            margin: 20px 0;
-            padding: 10px;
-            border: 2px solid #545250;
-            border-radius: 5px;
-            background: #222831;
-        }
+  .chatbot-title {
+    text-align: center;
+    font-size: 24px;
+    font-weight: bold;
+    color: #edf1f3;
+  }
 
-        .chatbot-message {
-            display: flex;
-            align-items: center;
-            margin: 10px 0;
-        }
+  .chatbot-chat {
+    height: 250px;
+    overflow-y: scroll;
+    margin: 20px 0;
+    padding: 10px;
+    border: 2px solid #545250;
+    border-radius: 5px;
+    background: #222831;
+  }
 
-        .chatbot-user {
-            justify-content: flex-end;
-        }
+  .chatbot-message {
+    display: flex;
+    align-items: center;
+    margin: 10px 0;
+  }
 
-        .chatbot-bot {
-            justify-content: flex-start;
-        }
+  .chatbot-user {
+    justify-content: flex-end;
+  }
 
-        .chatbot-avatar {
-            width: 50px;
-            height: 50px;
-            border-radius: 50%;
-            margin: 0 10px;
-        }
+  .chatbot-bot {
+    justify-content: flex-start;
+  }
 
-        .chatbot-user .chatbot-avatar {
-            order: 2;
-            background: url("./images/avatar.jpg");
-            background-size: cover;
-        }
+  .chatbot-avatar {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    margin: 0 10px;
+  }
 
-        .chatbot-bot .chatbot-avatar {
-            order: 1;
-            background: url("./images/bot.jpg");
-            background-size: cover;
-        }
+  .chatbot-user .chatbot-avatar {
+    order: 2;
+    background: url("./images/avatar.jpg");
+    background-size: cover;
+  }
 
-        .chatbot-text {
-            max-width: 70%;
-            padding: 10px;
-            border-radius: 10px;
-            font-size: 12px;
-            color: white;
-        }
+  .chatbot-bot .chatbot-avatar {
+    order: 1;
+    background: url("./images/bot.jpg");
+    background-size: cover;
+  }
 
-        .chatbot-user .chatbot-text {
-            background: #4a4d52;
-        }
+  .chatbot-text {
+    max-width: 70%;
+    padding: 10px;
+    border-radius: 10px;
+    font-size: 12px;
+    color: white;
+  }
 
-        .chatbot-bot .chatbot-text {
-            background: #8c8c8e;
-        }
+  .chatbot-user .chatbot-text {
+    background: #4a4d52;
+  }
 
-        .chatbot-input {
-            position: relative;
-            width: 100%;
-            padding: 10px;
-            border: 2px solid #cbcbce;
-            border-radius: 5px;
-            outline: none;
-            font-size: 15px;
-        
-        }
+  .chatbot-bot .chatbot-text {
+    background: #8c8c8e;
+  }
 
-        .chatbot-input:focus {
-            border-color: #8296d0;
-            color: #1e1f1f;
-        }
+  .chatbot-input {
+    position: relative;
+    width: 100%;
+    padding: 10px;
+    border: 2px solid #cbcbce;
+    border-radius: 5px;
+    outline: none;
+    font-size: 15px;
 
-        .chatbot-button {
-            position: absolute;
-            width: 80px;
-            border: none;
-            border-radius: 0%;
-            padding: 1px;
-            background: #31363F;
-            color: white;
-            font-size: 15px;
-            font-weight: bold;
-            cursor: pointer;
-            margin-top: -1.02rem;
-            margin-left: -4.1rem;
-            outline: none;
-            border-radius: 100%;
-        }
-        .chatbot-button i{
-        font-size: 3rem;
-        }
-        .chatbot-button:hover {
-            box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
-        }
+  }
 
-        .chatbot-chat::-webkit-scrollbar {
-            width: 10px;
-        }
+  .chatbot-input:focus {
+    border-color: #8296d0;
+    color: #1e1f1f;
+  }
 
-        .chatbot-chat::-webkit-scrollbar-thumb {
-            background: #bcbdc0;
-            border-radius: 10px;
-        }
-        .progress-bar {
+  .chatbot-button {
+    position: absolute;
+    width: 80px;
+    border: none;
+    border-radius: 0%;
+    padding: 1px;
+    background: #31363F;
+    color: white;
+    font-size: 15px;
+    font-weight: bold;
+    cursor: pointer;
+    margin-top: -1.02rem;
+    margin-left: -4.1rem;
+    outline: none;
+    border-radius: 100%;
+  }
+
+  .chatbot-button i {
+    font-size: 3rem;
+  }
+
+  .chatbot-button:hover {
+    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
+  }
+
+  .chatbot-chat::-webkit-scrollbar {
+    width: 10px;
+  }
+
+  .chatbot-chat::-webkit-scrollbar-thumb {
+    background: #bcbdc0;
+    border-radius: 10px;
+  }
+
+  .progress-bar {
     position: fixed;
     top: 0;
     left: 0;
     height: 5px;
-    background: #1fb899; /* You can change this color */
+    background: #1fb899;
+    /* You can change this color */
     width: 0;
     transition: width 0.1s ease-in-out;
-    z-index: 9999; /* Make sure it's above other content */
-}
-        /* chatbot css end */
-  </style>
-<body>
-  <button onclick="toggleChatbot()" id="chatbotBtn" title="chat bot"></button>
-    
-  <div class="chatbot-container" id="chatbot-container">
-      <div class="chatbot-title">Ticket Bot</div>
-      <div class="chatbot-chat" id="chatbot-chat"></div>
-      <input type="text" class="chatbot-input" id="chatbot-input" placeholder="Type your message here...." />
-      <button class="chatbot-button" id="chatbot-button"><i class="fa-brands fa-telegram"></i></button>
-    </div>
-  <!-- cursor -->
-
-  <!-- cursor ends -->
-
-
-  <nav class="navbar">
-    <!-- <img src="https://ticket-booking-blue.vercel.app/images/4.jpeg" alt="" style="border-radius: 50%; height: 35px; width: 35px;"> -->
-    <!-- <div class="logo" style="font-size: 20px;">Ticket Marketplace</div> -->
+    z-index: 9999;
+    /* Make sure it's above other content */
+  }
 
-    <!-- Toggle Button (Visible on Small Screens) -->
-    <button id="navToggle">☰</button>
+  /* chatbot css end */
 
-    <!-- Navbar Links -->
-    <!-- <div id="navLinks"> -->
-    <!-- <a href="index.html" style="display: flex; align-items: center; text-decoration: none; white-space: nowrap; margin-right: -250px;"> -->
-      <img src="https://ticket-booking-blue.vercel.app/images/4.jpeg" alt="" style="border-radius: 50%; height: 35px; width: 35px;">
-      <div class="logo" style="font-size: 20px; margin-left: 8px;">Ticket Marketplace</div>
-  </a><div>
-        <a href="index.html"><i class="fas fa-home"></i> Home</a>
-        <a href="about.html" class="active"><i class="fas fa-info-circle"></i> About</a>
-        <a href="buy.html"><i class="fas fa-ticket-alt"></i> Buy Ticket</a>
-        <a href="sell.html"><i class="fas fa-tags"></i> Sell</a>
-        <a href="contactus.html"><i class="fas fa-envelope"></i> Contact</a>
-        <a href="contributor.html"><i class="fas fa-users"></i> Contributors</a>
-        <a href="client/login.html"><i class="fas fa-sign-in-alt"></i> Login</a>
-    </div>
 
-    <!-- Dark Mode Button -->
-    <button id="darkModeToggle" style="width: 40px; height: 40px;">🌙</button>
-</nav>
-    <script>
 
-    // cursor 
+  body {
+    font-family: 'Arial', sans-serif;
+    background: linear-gradient(135deg, #cf9aff, #95c0ff);
+    /* Light blue-gray background */
+    color: #333;
+    /* Dark text for contrast */
+    margin: 0;
+    padding: 0;
+    line-height: 1.6;
+  }
 
-    const coords = { x: 0, y: 0 };
-const circles = document.querySelectorAll(".circle");
-
-const colors = [
-
-"#BCE954",
-"#98FF98",
-"#9CB071",
-"#90C209",
-"#B2C248",
-"#85BB65",
-"#99C68E",
-"#6CBB3C",
-"#3ea055",
-"#41a317",
-"#4AA02C",
-"#6AA121",
-"#347C2C",
-"#387C44",
-"#437C17",
-"#306754",
-"#254117",
-"#667C26",
-"#728C00",
-"#008000"
-
-];
-
-circles.forEach(function (circle, index) {
-circle.x = 0;
-circle.y = 0;
-circle.style.backgroundColor = colors[index % colors.length];
-});
-
-window.addEventListener("mousemove", function(e){
-coords.x = e.clientX;
-coords.y = e.clientY;
-
-});
-
-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.6;
-});
-
-requestAnimationFrame(animateCircles);
-}
-
-animateCircles();
-      
-      
-      // cursor ends
-
-              const darkModeToggle = document.getElementById('darkModeToggle');
-        const body = document.querySelector('body');
-        if (darkModeToggle) {
-            darkModeToggle.addEventListener('click', () => {
-                document.body.classList.toggle('dark-mode');
-                if (body.classList.contains('dark-mode')) {
-                    darkModeToggle.innerHTML = "🔆";
-                }
-                else {
-                    darkModeToggle.innerHTML = "🌙";
-                }
-            });
-        }
-        // change icon of the dark/light mode
-      // Change icon of the dark/light mode
-const menuToggle = document.querySelector('.menu-toggle');
-const navLinks = document.querySelector('.nav-links');
-
-if (menuToggle && navLinks) {
-  menuToggle.addEventListener('click', () => {
-    navLinks.classList.toggle('active');
-    menuToggle.classList.toggle('active');
-
-    // Special effect for hamburger icon
-    const bars = menuToggle.querySelectorAll('.bar');
-    bars.forEach((bar, index) => {
-      if (menuToggle.classList.contains('active')) {
-        bar.style.transform = index === 1 ? 'scale(0)' : `rotate(${index === 0 ? '45deg' : '-45deg'})`;
-      } else {
-        bar.style.transform = '';
-      }
-    });
-  });
-}
-
-        // Close menu when clicking outside
-        document.addEventListener('click', (event) => {
-            if (!navLinks.contains(event.target) && !menuToggle.contains(event.target)) {
-                navLinks.classList.remove('active');
-                menuToggle.classList.remove('active');
-                menuToggle.querySelectorAll('.bar').forEach(bar => {
-                    bar.style.transform = 'none';
-                });
-            }
-        });
-    </script>
-     <script>
-      // Toggle Navbar Links
-      const navToggle = document.getElementById('navToggle');
-      const navlinks = document.getElementById('navLinks');
-
-      navToggle.addEventListener('click', () => {
-          navlinks.style.display = navlinks.style.display === 'flex' ? 'none' : 'flex';
-      });
+  #about-us {
+    padding: 50px 20px;
+    /* Spacious padding */
+    background: linear-gradient(135deg, #d3cbdc, #a9bfdf);
+    border-radius: 12px;
+    /* Rounded corners */
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+    /* Subtle shadow for depth */
+    max-width: 1200px;
+    /* Limit width */
+    margin: 50px auto;
+    /* Centered with margin */
+    transition: box-shadow 0.3s ease;
+    /* Smooth shadow transition */
+  }
 
-      // Ensure navbar links are visible on large screens
-      window.addEventListener('resize', () => {
-          if (window.innerWidth > 768) {
-              navlinks.style.display = 'flex'; // Show links on large screens
-          } else {
-              navlinks.style.display = 'none'; // Hide links on small screens
-          }
-      });
+  #about-us:hover {
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
+    /* Enhanced shadow on hover */
+  }
 
-      // Set initial state based on the current window size
-      if (window.innerWidth > 768) {
-          navlinks.style.display = 'flex'; // Show links if starting on a large screen
-      } else {
-          navlinks.style.display = 'none'; // Hide links if starting on a small screen
-      }
-  </script>
-    <section id="about-us">
-      <div class="about-container">
-          <h1>About Us 🚀</h1>
-          <p style="color: #333;">
-              Welcome to Ticket Booking! 🎟️ Your one-stop solution for booking bus and train tickets with ease. Our platform offers
-              a seamless experience for travelers, providing access to various transportation options. We strive to make your
-              journey hassle-free, whether you're planning a short trip or a long adventure. With 24/7 customer support and
-              real-time updates, we ensure that you're always informed and comfortable on the go. 🚌💨
-          </p>
-          <p style="color: #333;">
-              At Ticket Booking, we believe in providing the best travel experience. 🌍 We partner with multiple travel providers to
-              offer a wide range of routes, schedules, and prices, making travel accessible to everyone. Our team is dedicated
-              to innovation and constantly improving our platform to serve you better. 💡✨
-          </p>
-      </div>
-  </section>
-  
-    <style>
-    body {
-        font-family: 'Arial', sans-serif;
-        background: linear-gradient(135deg,#cf9aff,#95c0ff); /* Light blue-gray background */
-        color: #333; /* Dark text for contrast */
-        margin: 0;
-        padding: 0;
-        line-height: 1.6;
-    }
+  .about-container h1 {
+    font-size: 10em;
+    /* Clear, large heading */
+    color: #3498db;
+    /* Bright blue for emphasis */
+    text-align: center;
+    /* Center the heading */
+    margin-bottom: 20px;
+    /* Space below the heading */
+    text-transform: uppercase;
+    /* Uppercase for impact */
+    letter-spacing: 1px;
+    /* Slight spacing */
+  }
 
-    #about-us {
-        padding: 50px 20px ; /* Spacious padding */
-        background: linear-gradient(135deg,#d3cbdc,#a9bfdf);
-        border-radius: 12px; /* Rounded corners */
-        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
-        max-width: 1200px; /* Limit width */
-        margin: 50px auto; /* Centered with margin */
-        transition: box-shadow 0.3s ease; /* Smooth shadow transition */
-    }
+  .about-container p {
+    font-size: 1.5em;
+    /* Comfortable reading size */
+    margin: 15px 0;
+    /* Space between paragraphs */
+    padding: 20px;
+    /* Padding for text */
+    background-color: #ecf6fd;
+    /* Light blue background for paragraphs */
+    border-left: 5px solid #3498db;
+    /* Left border for visual interest */
+    border-radius: 8px;
+    /* Rounded corners */
+    transition: background-color 0.3s ease;
+    /* Transition for hover effect */
+  }
 
-    #about-us:hover {
-        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); /* Enhanced shadow on hover */
-    }
+  .about-container p:hover {
+    background-color: #d1e9fd;
+    /* Slightly darker background on hover */
+  }
 
+  @media (max-width: 600px) {
     .about-container h1 {
-        font-size:  10em; /* Clear, large heading */
-        color: #3498db; /* Bright blue for emphasis */
-        text-align: center; /* Center the heading */
-        margin-bottom: 20px; /* Space below the heading */
-        text-transform: uppercase; /* Uppercase for impact */
-        letter-spacing: 1px; /* Slight spacing */
+      font-size: 2em;
+      /* Smaller font size for smaller screens */
     }
 
     .about-container p {
-        font-size: 1.5em; /* Comfortable reading size */
-        margin: 15px 0; /* Space between paragraphs */
-        padding: 20px; /* Padding for text */
-        background-color: #ecf6fd; /* Light blue background for paragraphs */
-        border-left: 5px solid #3498db; /* Left border for visual interest */
-        border-radius: 8px; /* Rounded corners */
-        transition: background-color 0.3s ease; /* Transition for hover effect */
-    }
-
-    .about-container p:hover {
-        background-color: #d1e9fd; /* Slightly darker background on hover */
+      font-size: 1em;
+      /* Adjust paragraph size */
     }
+  }
 
-    @media (max-width: 600px) {
-        .about-container h1 {
-            font-size: 2em; /* Smaller font size for smaller screens */
-        }
-
-        .about-container p {
-            font-size: 1em; /* Adjust paragraph size */
-        }
-    }
-</style>
 
-  </style>
-    <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>
-    <button id="scrollToTopBtn" class="scroll-to-top" title="Go to top">
-      &#8593; <!-- This is the up arrow -->
-    </button>
-    <style>
-      body {
+  body {
     font-family: Arial, sans-serif;
     margin: 0;
     padding: 0;
-}
+  }
 
-.content {
+  .content {
     padding: 20px;
-}
+  }
 
-.scroll-to-top {
+  .scroll-to-top {
     position: fixed;
     bottom: 120px;
     right: 35px;
@@ -484,110 +308,17 @@ <h1>About Us 🚀</h1>
     height: 50px;
     font-size: 24px;
     cursor: pointer;
-    display: none; /* Initially hidden */
+    display: none;
+    /* Initially hidden */
     align-items: center;
     justify-content: center;
-}
-
-.scroll-to-top:hover {
-    background-color: darkred; /* Darker red on hover */
-}
-
-    </style>
-    <script>
-// toggle chatbot function
-function toggleChatbot() {
-        const chatbotContainer = document.getElementById("chatbot-container");
-        chatbotContainer.classList.toggle("chatbot-show");
-    }
-    window.addEventListener('scroll', () => {
-    const scrollProgressBar = document.getElementById('scrollProgressBar');
-    const totalHeight = document.documentElement.scrollHeight - window.innerHeight;
-    const progressHeight = (window.scrollY / totalHeight) * 100;
-    scrollProgressBar.style.width = progressHeight + '%';
-});
-    </script>
-    
-    <button onclick="moveToTop()" id="topBtn" title="Go to top" style="display:flex; position: fixed;  right: 30px; z-index: 100000;">
-      <i class="fa fa-arrow-up" aria-hidden="true"></i>
-  </button>
+  }
+
+  .scroll-to-top:hover {
+    background-color: darkred;
+    /* Darker red on hover */
+  }
 
-    <footer class="footer-container">
-        <div class="footer-top">
-          
-          <div class="footer-logo-section">
-            <a href="#"> <img src="./images/3.jpeg" alt="easyJet holidays logo" class="footer-logo"></a>
-            <p style="color: #b5fdf4;" >Affordable adventures, unforgettable memories—explore with ease.</p>
-            <p style="color: #dcfffa;" class="follow-us">FOLLOW US ON HERE:</p>
-            <div class="social-icons">
-              <a href="https://www.facebook.com"><i class="fab fa-facebook"></i></a>
-              <a href="https://www.instagram.com"><i class="fab fa-instagram"></i></a>
-              <a href="https://www.twitter.com"><i class="fab fa-twitter"></i></a>
-              <a href="https://www.linkedin.com"><i class="fab fa-linkedin"></i></a>
-              <a href="https://www.youtube.com"><i class="fab fa-youtube"></i></a>
-          </div>
-          
-          </div>
-      
-          
-          <div class="footer-links">
-            <div class="footer-column">
-              <h4>HELPFUL LINKS</h4>
-              <ul>
-                <li><a href="help.html">Help Centre</a></li>
-                <li><a href="#">Special Assistance</a></li>
-                <li><a href="#">Download The App</a></li>
-                <li><a href="book_condition.html">Booking Conditions</a></li>
-                <li><a href="Faq.html">FAQ</a></li>
-
-              </ul>
-            </div>
-      
-            <div class="footer-column">
-              <h4>ABOUT US</h4>
-              <ul>
-                <li><a href="#">Media Center</a></li>
-                <li><a href="#">Investors</a></li>
-                <li><a href="ModernSlaveryAct.html">Modern Slavery Act</a></li>
-                <li><a href="terms.html">Terms Of Use</a></li>
-
-              </ul>
-            </div>
-      
-            <div class="footer-column">
-              <h4>KEEPING SAFE</h4>
-              <ul>
-                <li><a href="#">ATOL Protected</a></li>
-                <li><a href="travelAware.html">Travel Aware</a></li>
-                <li><a href="fcdoTravel.html">FCDO Travel Advice</a></li>
-                <li><a href="#">ABTA</a></li>
-              </ul>
-            </div>
-      
-            <div class="footer-column">
-              <h4>FIND US</h4>
-              <ul>
-                <li><a href="contact.html">Contact Us</a></li>
-                <li><a href="GroupCookieNotice.html">Group Cookie Notice</a></li>
-                <li><a href="privacy.html">Privacy And Policy</a></li>
-                <li><a href="sitemap.html">Sitemap</a></li>
-              </ul>
-            </div>
-          </div>
-        </div>
-      
-        
-        <div class="footer-bottom">
-          <ul>
-            <li><a href="#">Holiday Type</a></li>
-            <li><a href="#">Holiday Deals</a></li>
-            <li><a href="#">Popular Counters</a></li>
-            <!-- <li><a href="#">Flight Only</a></li> -->
-            <li><a href="#">Top Hotels</a></li>
-          </ul>
-        </div>
-      </footer>
-<style>
   /* General Footer Styling */
   .footer-container {
     background-color: #1f2937;
@@ -601,15 +332,18 @@ <h4>FIND US</h4>
     text-align: center;
     margin-bottom: 30px;
   }
+
   .footer-logo {
     max-width: 150px;
     margin-bottom: 10px;
     border-radius: 50px;
   }
+
   .footer-logo-section p {
     margin: 5px 0;
     font-size: 0.95rem;
   }
+
   .follow-us {
     margin-top: 10px;
     font-weight: bold;
@@ -623,6 +357,7 @@ <h4>FIND US</h4>
     font-size: 1.5rem;
     text-decoration: none;
   }
+
   .social-icons a:hover {
     color: #76b2ab;
   }
@@ -634,27 +369,33 @@ <h4>FIND US</h4>
     flex-wrap: wrap;
     margin: 20px 100px;
   }
+
   .footer-column {
     flex-basis: 20%;
     margin-bottom: 10px;
   }
+
   .footer-column h4 {
     font-size: 1rem;
     margin-bottom: 10px;
     color: #12e9cc;
   }
+
   .footer-column ul {
     list-style: none;
     padding: 0;
   }
+
   .footer-column ul li {
     margin-bottom: 8px;
   }
+
   .footer-column ul li a {
     color: #ffffff;
     text-decoration: none;
     font-size: 0.95rem;
   }
+
   .footer-column ul li a:hover {
     text-decoration: underline;
   }
@@ -665,20 +406,24 @@ <h4>FIND US</h4>
     border-top: 1px solid #ddd;
     padding-top: 20px;
   }
+
   .footer-bottom ul {
     list-style: none;
     padding: 0;
     margin: 0;
   }
+
   .footer-bottom ul li {
     display: inline-block;
     margin: 0 15px;
   }
+
   .footer-bottom ul li a {
     color: #12e9cc;
     text-decoration: none;
     font-size: 0.95rem;
   }
+
   .footer-bottom ul li a:hover {
     text-decoration: underline;
   }
@@ -689,71 +434,398 @@ <h4>FIND US</h4>
       flex-direction: column;
       align-items: center;
     }
+
     .footer-column {
       flex-basis: 100%;
       text-align: center;
     }
   }
-</style>
 
-</body>
 
-</html>
-<style>
-    * {
+  * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
-}
+  }
 
-body {
+  body {
     font-family: 'Arial', sans-serif;
     line-height: 1.6;
-}
+  }
 
-#about-us {
+  #about-us {
     background-image: url('your-background-image.jpg');
     background-size: cover;
     background-position: center;
     color: #fff;
     padding: 80px 0;
     text-align: center;
-}
+  }
 
-.about-container {
+  .about-container {
     max-width: 800px;
     margin: 0 auto;
     background-color: rgba(0, 0, 0, 0.7);
     padding: 40px;
     border-radius: 10px;
-}
+  }
 
-#about-us h1 {
+  #about-us h1 {
     font-size: 3rem;
     margin-bottom: 20px;
     text-transform: uppercase;
     letter-spacing: 3px;
     color: #f0a500;
-}
+  }
 
-#about-us p {
+  #about-us p {
     color: #fff;
     font-size: 1.2rem;
     margin-bottom: 20px;
-}
+  }
 
 
 
-@media (max-width: 768px) {
+  @media (max-width: 768px) {
     #about-us h1 {
-        font-size: 2.5rem;
+      font-size: 2.5rem;
     }
 
     #about-us p {
-        font-size: 1rem;
+      font-size: 1rem;
+    }
+
+
+
+  }
+</style>
+
+<body>
+  <button onclick="toggleChatbot()" id="chatbotBtn" title="chat bot"></button>
+
+  <!-- cursor -->
+  <div class="circle"></div>
+  <div class="circle"></div>
+  <div class="circle"></div>
+  <div class="circle"></div>
+  <div class="circle"></div>
+  <div class="circle"></div>
+  <div class="circle"></div>
+  <div class="circle"></div>
+  <div class="circle"></div>
+  <div class="circle"></div>
+  <div class="circle"></div>
+  <div class="circle"></div>
+  <div class="circle"></div>
+  <div class="circle"></div>
+  <div class="circle"></div>
+  <div class="circle"></div>
+  <div class="circle"></div>
+  <div class="circle"></div>
+  <div class="circle"></div>
+  <div class="circle"></div>
+
+  <div class="chatbot-container" id="chatbot-container">
+    <div class="chatbot-title">Ticket Bot</div>
+    <div class="chatbot-chat" id="chatbot-chat"></div>
+    <input type="text" class="chatbot-input" id="chatbot-input" placeholder="Type your message here...." />
+    <button class="chatbot-button" id="chatbot-button"><i class="fa-brands fa-telegram"></i></button>
+  </div>
+
+
+  <nav class="navbar">
+    <!-- <img src="https://ticket-booking-blue.vercel.app/images/4.jpeg" alt="" style="border-radius: 50%; height: 35px; width: 35px;"> -->
+    <!-- <div class="logo" style="font-size: 20px;">Ticket Marketplace</div> -->
+
+    <!-- Toggle Button (Visible on Small Screens) -->
+    <button id="navToggle">☰</button>
+
+    <!-- Navbar Links -->
+    <!-- <div id="navLinks"> -->
+    <!-- <a href="index.html" style="display: flex; align-items: center; text-decoration: none; white-space: nowrap; margin-right: -250px;"> -->
+    <img src="https://ticket-booking-blue.vercel.app/images/4.jpeg" alt=""
+      style="border-radius: 50%; height: 35px; width: 35px;">
+    <div class="logo" style="font-size: 20px; margin-left: 8px;">Ticket Marketplace</div>
+    </a>
+    <div>
+      <a href="index.html"><i class="fas fa-home"></i> Home</a>
+      <a href="about.html" class="active"><i class="fas fa-info-circle"></i> About</a>
+      <a href="buy.html"><i class="fas fa-ticket-alt"></i> Buy Ticket</a>
+      <a href="sell.html"><i class="fas fa-tags"></i> Sell</a>
+      <a href="contactus.html"><i class="fas fa-envelope"></i> Contact</a>
+      <a href="contributor.html"><i class="fas fa-users"></i> Contributors</a>
+      <a href="client/login.html"><i class="fas fa-sign-in-alt"></i> Login</a>
+    </div>
+
+    <!-- Dark Mode Button -->
+    <button id="darkModeToggle" style="width: 40px; height: 40px;">🌙</button>
+  </nav>
+  <script>
+
+    // cursor 
+
+    const coords = { x: 0, y: 0 };
+    const circles = document.querySelectorAll(".circle");
+
+    const colors = [
+
+      "#BCE954",
+      "#98FF98",
+      "#9CB071",
+      "#90C209",
+      "#B2C248",
+      "#85BB65",
+      "#99C68E",
+      "#6CBB3C",
+      "#3ea055",
+      "#41a317",
+      "#4AA02C",
+      "#6AA121",
+      "#347C2C",
+      "#387C44",
+      "#437C17",
+      "#306754",
+      "#254117",
+      "#667C26",
+      "#728C00",
+      "#008000"
+
+    ];
+
+    circles.forEach(function (circle, index) {
+      circle.x = 0;
+      circle.y = 0;
+      circle.style.backgroundColor = colors[index % colors.length];
+    });
+
+    window.addEventListener("mousemove", function (e) {
+      coords.x = e.clientX;
+      coords.y = e.clientY;
+
+    });
+
+    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.6;
+      });
+
+      requestAnimationFrame(animateCircles);
+    }
+
+    animateCircles();
+
+
+    // cursor ends
+
+    const darkModeToggle = document.getElementById('darkModeToggle');
+    const body = document.querySelector('body');
+    if (darkModeToggle) {
+      darkModeToggle.addEventListener('click', () => {
+        document.body.classList.toggle('dark-mode');
+        if (body.classList.contains('dark-mode')) {
+          darkModeToggle.innerHTML = "🔆";
+        }
+        else {
+          darkModeToggle.innerHTML = "🌙";
+        }
+      });
+    }
+    // change icon of the dark/light mode
+    // Change icon of the dark/light mode
+    const menuToggle = document.querySelector('.menu-toggle');
+    const navLinks = document.querySelector('.nav-links');
+
+    if (menuToggle && navLinks) {
+      menuToggle.addEventListener('click', () => {
+        navLinks.classList.toggle('active');
+        menuToggle.classList.toggle('active');
+
+        // Special effect for hamburger icon
+        const bars = menuToggle.querySelectorAll('.bar');
+        bars.forEach((bar, index) => {
+          if (menuToggle.classList.contains('active')) {
+            bar.style.transform = index === 1 ? 'scale(0)' : `rotate(${index === 0 ? '45deg' : '-45deg'})`;
+          } else {
+            bar.style.transform = '';
+          }
+        });
+      });
+    }
+
+    // Close menu when clicking outside
+    document.addEventListener('click', (event) => {
+      if (!navLinks.contains(event.target) && !menuToggle.contains(event.target)) {
+        navLinks.classList.remove('active');
+        menuToggle.classList.remove('active');
+        menuToggle.querySelectorAll('.bar').forEach(bar => {
+          bar.style.transform = 'none';
+        });
+      }
+    });
+  </script>
+  <script>
+    // Toggle Navbar Links
+    const navToggle = document.getElementById('navToggle');
+    const navlinks = document.getElementById('navLinks');
+
+    navToggle.addEventListener('click', () => {
+      navlinks.style.display = navlinks.style.display === 'flex' ? 'none' : 'flex';
+    });
+
+    // Ensure navbar links are visible on large screens
+    window.addEventListener('resize', () => {
+      if (window.innerWidth > 768) {
+        navlinks.style.display = 'flex'; // Show links on large screens
+      } else {
+        navlinks.style.display = 'none'; // Hide links on small screens
+      }
+    });
+
+    // Set initial state based on the current window size
+    if (window.innerWidth > 768) {
+      navlinks.style.display = 'flex'; // Show links if starting on a large screen
+    } else {
+      navlinks.style.display = 'none'; // Hide links if starting on a small screen
     }
+  </script>
+  <section id="about-us">
+    <div class="about-container">
+      <h1>About Us 🚀</h1>
+      <p style="color: #333;">
+        Welcome to Ticket Booking! 🎟️ Your one-stop solution for booking bus and train tickets with ease. Our platform
+        offers
+        a seamless experience for travelers, providing access to various transportation options. We strive to make your
+        journey hassle-free, whether you're planning a short trip or a long adventure. With 24/7 customer support and
+        real-time updates, we ensure that you're always informed and comfortable on the go. 🚌💨
+      </p>
+      <p style="color: #333;">
+        At Ticket Booking, we believe in providing the best travel experience. 🌍 We partner with multiple travel
+        providers to
+        offer a wide range of routes, schedules, and prices, making travel accessible to everyone. Our team is dedicated
+        to innovation and constantly improving our platform to serve you better. 💡✨
+      </p>
+    </div>
+  </section>
+
+
+
+  <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>
+  <button id="scrollToTopBtn" class="scroll-to-top" title="Go to top">
+    &#8593; <!-- This is the up arrow -->
+  </button>
 
-   
+  <script>
+    // toggle chatbot function
+    function toggleChatbot() {
+      const chatbotContainer = document.getElementById("chatbot-container");
+      chatbotContainer.classList.toggle("chatbot-show");
+    }
+    window.addEventListener('scroll', () => {
+      const scrollProgressBar = document.getElementById('scrollProgressBar');
+      const totalHeight = document.documentElement.scrollHeight - window.innerHeight;
+      const progressHeight = (window.scrollY / totalHeight) * 100;
+      scrollProgressBar.style.width = progressHeight + '%';
+    });
+  </script>
+
+  <button onclick="moveToTop()" id="topBtn" title="Go to top"
+    style="display:flex; position: fixed;  right: 30px; z-index: 100000;">
+    <i class="fa fa-arrow-up" aria-hidden="true"></i>
+  </button>
+
+  <footer class="footer-container">
+    <div class="footer-top">
+
+      <div class="footer-logo-section">
+        <a href="#"> <img src="./images/3.jpeg" alt="easyJet holidays logo" class="footer-logo"></a>
+        <p style="color: #b5fdf4;">Affordable adventures, unforgettable memories—explore with ease.</p>
+        <p style="color: #dcfffa;" class="follow-us">FOLLOW US ON HERE:</p>
+        <div class="social-icons">
+          <a href="https://www.facebook.com"><i class="fab fa-facebook"></i></a>
+          <a href="https://www.instagram.com"><i class="fab fa-instagram"></i></a>
+          <a href="https://www.twitter.com"><i class="fab fa-twitter"></i></a>
+          <a href="https://www.linkedin.com"><i class="fab fa-linkedin"></i></a>
+          <a href="https://www.youtube.com"><i class="fab fa-youtube"></i></a>
+        </div>
+
+      </div>
+
+
+      <div class="footer-links">
+        <div class="footer-column">
+          <h4>HELPFUL LINKS</h4>
+          <ul>
+            <li><a href="help.html">Help Centre</a></li>
+            <li><a href="#">Special Assistance</a></li>
+            <li><a href="#">Download The App</a></li>
+            <li><a href="book_condition.html">Booking Conditions</a></li>
+            <li><a href="Faq.html">FAQ</a></li>
+
+          </ul>
+        </div>
+
+        <div class="footer-column">
+          <h4>ABOUT US</h4>
+          <ul>
+            <li><a href="#">Media Center</a></li>
+            <li><a href="#">Investors</a></li>
+            <li><a href="ModernSlaveryAct.html">Modern Slavery Act</a></li>
+            <li><a href="terms.html">Terms Of Use</a></li>
+
+          </ul>
+        </div>
+
+        <div class="footer-column">
+          <h4>KEEPING SAFE</h4>
+          <ul>
+            <li><a href="#">ATOL Protected</a></li>
+            <li><a href="travelAware.html">Travel Aware</a></li>
+            <li><a href="fcdoTravel.html">FCDO Travel Advice</a></li>
+            <li><a href="#">ABTA</a></li>
+          </ul>
+        </div>
+
+        <div class="footer-column">
+          <h4>FIND US</h4>
+          <ul>
+            <li><a href="contact.html">Contact Us</a></li>
+            <li><a href="GroupCookieNotice.html">Group Cookie Notice</a></li>
+            <li><a href="privacy.html">Privacy And Policy</a></li>
+            <li><a href="sitemap.html">Sitemap</a></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+
+
+    <div class="footer-bottom">
+      <ul>
+        <li><a href="#">Holiday Type</a></li>
+        <li><a href="#">Holiday Deals</a></li>
+        <li><a href="#">Popular Counters</a></li>
+        <!-- <li><a href="#">Flight Only</a></li> -->
+        <li><a href="#">Top Hotels</a></li>
+      </ul>
+    </div>
+  </footer>
+
+
+</body>
 
-}
-</style>
\ No newline at end of file
+</html>
\ No newline at end of file
