diff --git a/README.md b/README.md
index 2e0cd1dd..2764a2a7 100644
--- a/README.md
+++ b/README.md
@@ -154,6 +154,13 @@ A heartfelt thank you to the following individuals for their valuable contributi
                     <sub><b>Akhand Pratap Singh</b></sub>
                 </a>
             </td>
+            <td align="center">
+                <a href="https://github.com/yashksaini-coder">
+                    <img src="https://avatars.githubusercontent.com/u/115717039?v=4" width="100;" alt="yashksaini-coder"/>
+                    <br />
+                    <sub><b>Yash Kumar Saini</b></sub>
+                </a>
+            </td>
             <td align="center">
                 <a href="https://github.com/Bhum-ika">
                     <img src="https://avatars.githubusercontent.com/u/91523494?v=4" width="100;" alt="Bhum-ika"/>
@@ -175,6 +182,8 @@ A heartfelt thank you to the following individuals for their valuable contributi
                     <sub><b>Devarshee Gaunekar</b></sub>
                 </a>
             </td>
+		</tr>
+		<tr>
             <td align="center">
                 <a href="https://github.com/Archisman141">
                     <img src="https://avatars.githubusercontent.com/u/121884549?v=4" width="100;" alt="Archisman141"/>
@@ -182,8 +191,6 @@ A heartfelt thank you to the following individuals for their valuable contributi
                     <sub><b>Archisman Khanra</b></sub>
                 </a>
             </td>
-		</tr>
-		<tr>
             <td align="center">
                 <a href="https://github.com/Aarnachauhan">
                     <img src="https://avatars.githubusercontent.com/u/175851904?v=4" width="100;" alt="Aarnachauhan"/>
@@ -219,6 +226,8 @@ A heartfelt thank you to the following individuals for their valuable contributi
                     <sub><b>Aditi Prabakaran</b></sub>
                 </a>
             </td>
+		</tr>
+		<tr>
             <td align="center">
                 <a href="https://github.com/riyaaryan2004">
                     <img src="https://avatars.githubusercontent.com/u/145834658?v=4" width="100;" alt="riyaaryan2004"/>
@@ -226,8 +235,6 @@ A heartfelt thank you to the following individuals for their valuable contributi
                     <sub><b>Riya Aryan</b></sub>
                 </a>
             </td>
-		</tr>
-		<tr>
             <td align="center">
                 <a href="https://github.com/Kavish-Paraswar">
                     <img src="https://avatars.githubusercontent.com/u/162621258?v=4" width="100;" alt="Kavish-Paraswar"/>
@@ -235,6 +242,13 @@ A heartfelt thank you to the following individuals for their valuable contributi
                     <sub><b>Kavish Paraswar</b></sub>
                 </a>
             </td>
+            <td align="center">
+                <a href="https://github.com/Ishika-Gupta06">
+                    <img src="https://avatars.githubusercontent.com/u/118624573?v=4" width="100;" alt="Ishika-Gupta06"/>
+                    <br />
+                    <sub><b>Ishika Gupta</b></sub>
+                </a>
+            </td>
             <td align="center">
                 <a href="https://github.com/hritika2409">
                     <img src="https://avatars.githubusercontent.com/u/117531823?v=4" width="100;" alt="hritika2409"/>
@@ -256,6 +270,8 @@ A heartfelt thank you to the following individuals for their valuable contributi
                     <sub><b>D K</b></sub>
                 </a>
             </td>
+		</tr>
+		<tr>
             <td align="center">
                 <a href="https://github.com/poorvikaa08">
                     <img src="https://avatars.githubusercontent.com/u/152640996?v=4" width="100;" alt="poorvikaa08"/>
@@ -270,8 +286,6 @@ A heartfelt thank you to the following individuals for their valuable contributi
                     <sub><b>Anurag Verma</b></sub>
                 </a>
             </td>
-		</tr>
-		<tr>
             <td align="center">
                 <a href="https://github.com/swamimalode07">
                     <img src="https://avatars.githubusercontent.com/u/139348491?v=4" width="100;" alt="swamimalode07"/>
@@ -300,6 +314,8 @@ A heartfelt thank you to the following individuals for their valuable contributi
                     <sub><b>Harshada Girase</b></sub>
                 </a>
             </td>
+		</tr>
+		<tr>
             <td align="center">
                 <a href="https://github.com/Ananya-vastare">
                     <img src="https://avatars.githubusercontent.com/u/116643029?v=4" width="100;" alt="Ananya-vastare"/>
@@ -307,15 +323,6 @@ A heartfelt thank you to the following individuals for their valuable contributi
                     <sub><b>Ananya Ravikiran Vastare</b></sub>
                 </a>
             </td>
-            <td align="center">
-                <a href="https://github.com/yashksaini-coder">
-                    <img src="https://avatars.githubusercontent.com/u/115717039?v=4" width="100;" alt="yashksaini-coder"/>
-                    <br />
-                    <sub><b>Yash Kumar Saini</b></sub>
-                </a>
-            </td>
-		</tr>
-		<tr>
             <td align="center">
                 <a href="https://github.com/tarunkumar2005">
                     <img src="https://avatars.githubusercontent.com/u/158801564?v=4" width="100;" alt="tarunkumar2005"/>
@@ -351,6 +358,8 @@ A heartfelt thank you to the following individuals for their valuable contributi
                     <sub><b>Krishnam Verma</b></sub>
                 </a>
             </td>
+		</tr>
+		<tr>
             <td align="center">
                 <a href="https://github.com/ShrishtiSingh26">
                     <img src="https://avatars.githubusercontent.com/u/142707684?v=4" width="100;" alt="ShrishtiSingh26"/>
@@ -358,8 +367,6 @@ A heartfelt thank you to the following individuals for their valuable contributi
                     <sub><b>Shrishti</b></sub>
                 </a>
             </td>
-		</tr>
-		<tr>
             <td align="center">
                 <a href="https://github.com/shashankgoud18">
                     <img src="https://avatars.githubusercontent.com/u/142642917?v=4" width="100;" alt="shashankgoud18"/>
@@ -395,6 +402,8 @@ A heartfelt thank you to the following individuals for their valuable contributi
                     <sub><b>Risheendra183</b></sub>
                 </a>
             </td>
+		</tr>
+		<tr>
             <td align="center">
                 <a href="https://github.com/neeru24">
                     <img src="https://avatars.githubusercontent.com/u/161798182?v=4" width="100;" alt="neeru24"/>
@@ -402,8 +411,20 @@ A heartfelt thank you to the following individuals for their valuable contributi
                     <sub><b>Neeru </b></sub>
                 </a>
             </td>
-		</tr>
-		<tr>
+            <td align="center">
+                <a href="https://github.com/kushal7201">
+                    <img src="https://avatars.githubusercontent.com/u/86069454?v=4" width="100;" alt="kushal7201"/>
+                    <br />
+                    <sub><b>Kushal Bansal</b></sub>
+                </a>
+            </td>
+            <td align="center">
+                <a href="https://github.com/IshaRawat7">
+                    <img src="https://avatars.githubusercontent.com/u/139321266?v=4" width="100;" alt="IshaRawat7"/>
+                    <br />
+                    <sub><b>Isha Rawat</b></sub>
+                </a>
+            </td>
             <td align="center">
                 <a href="https://github.com/Geet2002">
                     <img src="https://avatars.githubusercontent.com/u/129830187?v=4" width="100;" alt="Geet2002"/>
@@ -425,6 +446,8 @@ A heartfelt thank you to the following individuals for their valuable contributi
                     <sub><b>Anurag Bansal</b></sub>
                 </a>
             </td>
+		</tr>
+		<tr>
             <td align="center">
                 <a href="https://github.com/Antima2004">
                     <img src="https://avatars.githubusercontent.com/u/114092138?v=4" width="100;" alt="Antima2004"/>
@@ -446,8 +469,6 @@ A heartfelt thank you to the following individuals for their valuable contributi
                     <sub><b>Ahina Gangopadhyay</b></sub>
                 </a>
             </td>
-		</tr>
-		<tr>
             <td align="center">
                 <a href="https://github.com/Raj-Aditya-27">
                     <img src="https://avatars.githubusercontent.com/u/138434890?v=4" width="100;" alt="Raj-Aditya-27"/>
diff --git a/index.html b/index.html
index d0b74d01..92f05be9 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,213 @@
 <!DOCTYPE html>
 <html lang="en">
+
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="description"
+    content="BuddyTrail is a travel agency website that helps you pick out your holiday vacation" />
+  <meta name="robots" content="index,follow" />
+  <link rel="stylesheet" href="RatingStyle.css">
+  <link rel="stylesheet" href="style.css" />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Pattaya&family=Poppins:wght@400;500&display=swap"
+    rel="stylesheet" />
+  <link rel="icon" href="/icons/airplane.svg" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
+    integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
+    crossorigin="anonymous" referrerpolicy="no-referrer" />
+
+  <title>BuddyTrail</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    .container {
+      display: flex;
+      align-items: flex-start;
+      /* Align items at the start of the container */
+      justify-content: space-between;
+      /* Space between elements */
+      gap: 20px;
+      /* Optional gap between form and rating section */
+      height: auto;
+      /* Adjust height if necessary */
+    }
+
+    .form-section {
+      width: 70%;
+      /* Adjust width as needed */
+    }
+
+    .rating-wrap {
+      width: 30%;
+      /* Adjust width as needed */
+      text-align: left;
+    }
+
+    .center {
+      width: auto;
+      display: inline-flex;
+      /* Align stars and rating count in a row */
+      align-items: center;
+      gap: 10px;
+      /* Add some space between the stars and the count */
+    }
+
+
+    #rating-value {
+      font-size: 1.2rem;
+      /* Adjust font size */
+      font-weight: bold;
+      color: black;
+      /* Optional: change the color to match the theme */
+    }
+
+    .rating {
+      border: none;
+      float: right;
+    }
+
+    .rating>input {
+      display: none;
+    }
+
+    .rating>label:before {
+      content: '\f005';
+      font-family: FontAwesome;
+      margin: 5px;
+      font-size: 1.5rem;
+      display: inline-block;
+      cursor: pointer;
+    }
+
+    .rating>.half:before {
+      content: '\f089';
+      position: absolute;
+      cursor: pointer;
+    }
+
+    .rating>label {
+      color: #ddd;
+      /* Empty stars initially */
+      float: right;
+      cursor: pointer;
+    }
+
+    /* Filled stars on hover and selection */
+    .rating>input:checked~label,
+    .rating:not(:checked)>label {
+      color: #ddd;
+      /* Keep stars empty until interaction */
+    }
+
+    .rating>input:checked~label,
+    .rating>input:checked~label:hover,
+    .rating>input:checked~label:hover~label {
+      color: rgb(230, 166, 17);
+      /* Green for filled stars */
+    }
+
+    .rating>label:hover~label,
+    .rating>label:hover {
+      color: rgb(230, 166, 17);
+      /* Green hover effect */
+    }
+
+    .chatbot-container {
+      position: fixed;
+      bottom: 20px;
+      /* Adjust as needed */
+      right: 20px;
+      /* Adjust as needed */
+      z-index: 1000;
+      /* Ensure it appears above other elements */
+    }
+
+    .chatbot-button {
+      background-color: #007bff;
+      /* Change to your preferred color */
+      border: none;
+      border-radius: 50%;
+      padding: 5px;
+      /* Smaller padding */
+      cursor: pointer;
+      position: relative;
+      width: 50px;
+      /* Adjusted size */
+      height: 50px;
+      /* Adjusted size */
+    }
+
+    .chatbot-button img {
+      width: 30px;
+      /* Adjusted image size */
+      height: 30px;
+      /* Adjusted image size */
+    }
+
+    .tooltip-text {
+      display: none;
+      /* Hide by default */
+      position: absolute;
+      bottom: 100%;
+      /* Position above the button */
+      right: 200%;
+      transform: translateX(50%);
+      background-color: #333;
+      /* Background color for tooltip */
+      color: #fff;
+      /* Tooltip text color */
+      padding: 5px;
+      border-radius: 5px;
+      white-space: nowrap;
+      /* Prevent text from wrapping */
+    }
+
+    .chatbot-button:hover .tooltip-text {
+      display: block;
+      /* Show on hover */
+    }
+  </style>
+
+</head>
+
+<body class="light-mode">
+  <button id="scrollTopBtn" class="scroll-top-btn">
+    <i class="fa-solid fa-arrow-up"></i>
+  </button>
+
+  <!-- Google Translate Button -->
+  <div class="translate-container">
+    <button class="language-toggle" id="languageToggle">🌐</button>
+    <div id="google_translate_element"></div>
+  </div>
+
+  <script>
+    // Initialization function
+    function googleTranslateElementInit() {
+      new google.translate.TranslateElement(
+        {
+          pageLanguage: "en",
+          includedLanguages:
+            "en,es,fr,de,it,pt,ja,zh-CN,hi,bn,ml,te,ta,gu,kn,or",
+          layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
+        },
+        "google_translate_element"
+      );
+    }
+
+    // Toggle button event
+    document
+      .getElementById("languageToggle")
+      .addEventListener("click", function () {
+        var translateElement = document.getElementById(
+
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -180,9 +388,70 @@
               "en,es,fr,de,it,pt,ja,zh-CN,hi,bn,ml,te,ta,gu,kn,or",
             layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
           },
+
           "google_translate_element"
         );
-      }
+
+
+        // Toggle visibility
+        if (
+          translateElement.style.display === "none" ||
+          translateElement.style.display === ""
+        ) {
+          translateElement.style.display = "block";
+        } else {
+          translateElement.style.display = "none";
+        }
+      });
+  </script>
+
+  <script src="script.js"></script>
+  <header class="main-head">
+    <nav>
+      <img src="img\logo.png" id="logo-web">
+      <h1 id="logo">BuddyTrail</h1>
+      <ul>
+        <li><a href="#home" class='navhover '>Home</a></li>
+        <li><a href="#locations" class='navhover '>Location</a></li>
+        <li><a href="#itineraries " class='navhover'>Travel Itineraries</a></li>
+        <li><a href="#reviews" class='navhover'>Reviews</a></li>
+        <li><a href="#benefits" class='navhover'>Benefits</a></li>
+        <li><a href="#contact" class='navhover'>Contact</a></li>
+        <li><a href="signUp.html" class='navhover'>Sign In</a></li>
+
+      </ul>
+      <!-- Toggle Button -->
+      <button class="mode-toggle" id="modeToggle">
+        <span class="sun-icon glow">☀️</span>
+      </button>
+    </nav>
+  </header>
+  <div id="progress-bar"></div>
+  <!-- funcioning of progress bar -->
+  <script>
+    window.addEventListener('scroll', function () {
+      // Calculate the scroll progress
+      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+      const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+      const scrollPercent = (scrollTop / scrollHeight) * 100;
+
+      // Update the width of the progress bar
+      document.getElementById('progress-bar').style.width = scrollPercent + '%';
+    });
+  </script>
+  <main>
+    <section class="hero">
+      <h2>Travel Beyond Limits</h2>
+      <h3>
+        Connect, Explore, and Discover Together. <br />
+        BuddyTrail: Your Journey Begins with the Perfect Travel Companion.
+      </h3>
+      <button id="btn"><a href="book.html ">Book now</a></button>
+    </section>
+
+    <section id="locations">
+      <header class="locations-head">
+        <h2>The Perfect Travel Experience!</h2>
 
       // Toggle button event
       document
@@ -250,183 +519,195 @@ <h1 id="logo">BuddyTrail</h1>
     <main>
       <section class="hero">
         <h2>Travel Beyond Limits</h2>
+
         <h3>
-          Connect, Explore, and Discover Together. <br />
-          BuddyTrail: Your Journey Begins with the Perfect Travel Companion.
+          We handle everything, from finding the ideal travel buddy to
+          selecting your perfect hotel, flight, and destination.
         </h3>
-        <button id="btn"><a href="book.html ">Book now</a></button>
-      </section>
-
-      <section id="locations">
-        <header class="locations-head">
-          <h2>The Perfect Travel Experience!</h2>
-          <h3>
-            We handle everything, from finding the ideal travel buddy to
-            selecting your perfect hotel, flight, and destination.
-          </h3>
-          <img src="/img/cloud.png" class="moving-cloud-1 cloud" />
-          <img src="/img/cloud.png" class="moving-cloud-2 cloud" />
-        </header>
-      </section>
-      <section id="benefits">
-        <header class="benefits-head">
-          <h2>The Perfect travel</h2>
-          <h3>
-            we cover everything from picking the perfect hotel, <br />to flight
-            and destination
-          </h3>
-        </header>
-        <div class="cards">
-          <div class="card">
-            <div class="card-icon">
-              <img src="/icons/route-solid.svg" />
-            </div>
-            <h4>Travel</h4>
-            <p>
-              Discover budget-friendly getaways for families and friends! From
-              serene mountains to sunny beaches, find your next adventure
-              without breaking the bank. Start exploring now!
-            </p>
+        <img src="/img/cloud.png" class="moving-cloud-1 cloud" />
+        <img src="/img/cloud.png" class="moving-cloud-2 cloud" />
+      </header>
+    </section>
+    <section id="benefits">
+      <header class="benefits-head">
+        <h2>The Perfect travel</h2>
+        <h3>
+          we cover everything from picking the perfect hotel, <br />to flight
+          and destination
+        </h3>
+      </header>
+      <div class="cards">
+        <div class="card">
+          <div class="card-icon">
+            <img src="/icons/route-solid.svg" />
           </div>
-          <div class="card">
-            <div class="card-icon">
-              <img src="/icons/bed-solid.svg" />
-            </div>
-            <h4>Hotel</h4>
-            <p>
-              We've handpicked top-rated options that offer exceptional value.
-              Book your perfect stay today and enjoy premium accommodations
-              without the premium price tag!
-            </p>
+          <h4>Travel</h4>
+          <p>
+            Discover budget-friendly getaways for families and friends! From
+            serene mountains to sunny beaches, find your next adventure
+            without breaking the bank. Start exploring now!
+          </p>
+        </div>
+        <div class="card">
+          <div class="card-icon">
+            <img src="/icons/bed-solid.svg" />
           </div>
-          <div class="card">
-            <div class="card-icon">
-              <img src="/icons/plane-departure-solid.svg" />
-            </div>
-            <h4>Fly</h4>
-            <p>
-              Fly to your dream destination without breaking the bank! We offers
-              the best flight deals, combining comfort and affordability for
-              perfect journey. Book now and take off for less!
-            </p>
+          <h4>Hotel</h4>
+          <p>
+            We've handpicked top-rated options that offer exceptional value.
+            Book your perfect stay today and enjoy premium accommodations
+            without the premium price tag!
+          </p>
+        </div>
+        <div class="card">
+          <div class="card-icon">
+            <img src="/icons/plane-departure-solid.svg" />
           </div>
+          <h4>Fly</h4>
+          <p>
+            Fly to your dream destination without breaking the bank! We offers
+            the best flight deals, combining comfort and affordability for
+            perfect journey. Book now and take off for less!
+          </p>
         </div>
-      </section>
-      <!-- deals -->
-      <section id="deals" class="deals-section">
-        <h2>Exclusive Deals and Offers</h2>
-        <p>
-          Explore our best deals on flights, hotels, and travel packages. Save
-          big on your next adventure!
-        </p>
+      </div>
+    </section>
+    <!-- deals -->
+    <section id="deals" class="deals-section">
+      <h2>Exclusive Deals and Offers</h2>
+      <p>
+        Explore our best deals on flights, hotels, and travel packages. Save
+        big on your next adventure!
+      </p>
 
-        <div class="deals-list">
-          <!-- Deal 1: Flight Offer -->
-          <div class="deal-item">
-            <h3>Flight to Dubai</h3>
-            <p>Save 20% on round-trip flights to Dubai. Limited time offer!</p>
-            <p>
-              <strong>Price:</strong> ₹20,000
-              <span class="discount">₹25,000 </span>
-            </p>
-            <button onclick="window.location.href='#book-now'">Book Now</button>
-          </div>
+      <div class="deals-list">
+        <!-- Deal 1: Flight Offer -->
+        <div class="deal-item">
+          <h3>Flight to Dubai</h3>
+          <p>Save 20% on round-trip flights to Dubai. Limited time offer!</p>
+          <p>
+            <strong>Price:</strong> ₹20,000
+            <span class="discount">₹25,000 </span>
+          </p>
+          <button onclick="window.location.href='#book-now'">Book Now</button>
+        </div>
 
-          <!-- Deal 2: Hotel Offer -->
-          <div class="deal-item">
-            <h3>Luxury Stay in Goa</h3>
-            <p>
-              Get 30% off on a 5-star hotel stay in Goa. Enjoy the best of
-              luxury at an affordable price!
-            </p>
-            <p>
-              <strong>Price:</strong> ₹10,500 
-              <span class="discount"> ₹15,000</span> per night
-            </p>
-            <button onclick="window.location.href='#book-now'">Book Now</button>
-          </div>
+        <!-- Deal 2: Hotel Offer -->
+        <div class="deal-item">
+          <h3>Luxury Stay in Goa</h3>
+          <p>
+            Get 30% off on a 5-star hotel stay in Goa. Enjoy the best of
+            luxury at an affordable price!
+          </p>
+          <p>
+            <strong>Price:</strong> ₹10,500
+            <span class="discount"> ₹15,000</span> per night
+          </p>
+          <button onclick="window.location.href='#book-now'">Book Now</button>
+        </div>
 
-          <!-- Deal 3: Travel Package -->
-          <div class="deal-item">
-            <h3>Kerala Backwaters Package</h3>
-            <p>
-              Experience the serene beauty of Kerala's backwaters with a 4-day,
-              3-night package. All-inclusive deal!
-            </p>
-            <p>
-              <strong>Price:</strong> ₹40,000 
-              <span class="discount">₹50,000</span>
-            </p>
-            <button onclick="window.location.href='#book-now'">Book Now</button>
-          </div>
+        <!-- Deal 3: Travel Package -->
+        <div class="deal-item">
+          <h3>Kerala Backwaters Package</h3>
+          <p>
+            Experience the serene beauty of Kerala's backwaters with a 4-day,
+            3-night package. All-inclusive deal!
+          </p>
+          <p>
+            <strong>Price:</strong> ₹40,000
+            <span class="discount">₹50,000</span>
+          </p>
+          <button onclick="window.location.href='#book-now'">Book Now</button>
+        </div>
 
-          <!-- Deal 4: International Trip -->
-          <div class="deal-item">
-            <h3>Paris Romantic Getaway</h3>
-            <p>
-              Enjoy a romantic trip to Paris with your loved one. Special
-              package for couples!
-            </p>
-            <p>
-              <strong>Price:</strong> ₹1,20,000
-              <span class="discount"> ₹1,50,000</span> per couple
-            </p>
-            <button onclick="window.location.href='#book-now'">Book Now</button>
-          </div>
+        <!-- Deal 4: International Trip -->
+        <div class="deal-item">
+          <h3>Paris Romantic Getaway</h3>
+          <p>
+            Enjoy a romantic trip to Paris with your loved one. Special
+            package for couples!
+          </p>
+          <p>
+            <strong>Price:</strong> ₹1,20,000
+            <span class="discount"> ₹1,50,000</span> per couple
+          </p>
+          <button onclick="window.location.href='#book-now'">Book Now</button>
+        </div>
 
-          <!-- Deal 5: Adventure Trip -->
-          <div class="deal-item">
-            <h3>Adventure in Bali</h3>
-            <p>
-              Book an adventure trip to Bali with activities like snorkeling,
-              trekking, and more. Discount available for groups!
-            </p>
-            <p>
-              <strong>Price:</strong> ₹48,000  
-              <span class="discount">₹60,000</span> per person
-            </p>
-            <button onclick="window.location.href='#book-now'">Book Now</button>
-          </div>
+        <!-- Deal 5: Adventure Trip -->
+        <div class="deal-item">
+          <h3>Adventure in Bali</h3>
+          <p>
+            Book an adventure trip to Bali with activities like snorkeling,
+            trekking, and more. Discount available for groups!
+          </p>
+          <p>
+            <strong>Price:</strong> ₹48,000
+            <span class="discount">₹60,000</span> per person
+          </p>
+          <button onclick="window.location.href='#book-now'">Book Now</button>
         </div>
-      </section>
+      </div>
+    </section>
 
-      <!-- travel itineraries -->
-      <section id="itineraries" class="itineraries-section">
-        <h2>Travel Itineraries</h2>
-        <p>
-          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>
+    <!-- travel itineraries -->
+    <section id="itineraries" class="itineraries-section">
+      <h2>Travel Itineraries</h2>
+      <p>
+        Plan your trips effortlessly with our curated travel itineraries
+        tailored for different types of adventures. Whether you're planning a
+        family vacation, a solo adventure, or a romantic getaway, we’ve got
+        you covered!
+      </p>
 
-        <div class="itinerary-list">
-          <div class="itinerary">
-            <h3>Family Vacation</h3>
-            <p>
-              Explore the best family-friendly destinations with day-by-day
-              guides that include must-see attractions and activities for all
-              ages.
-            </p>
-            <button>View Itinerary</button>
-          </div>
-          <div class="itinerary">
-            <h3>Solo Adventure</h3>
-            <p>
-              Embark on a solo journey with our handpicked itineraries, offering
-              exciting experiences and peaceful retreats just for you.
-            </p>
-            <button>View Itinerary</button>
+      <div class="itinerary-list">
+        <div class="itinerary">
+          <h3>Family Vacation</h3>
+          <p>
+            Explore the best family-friendly destinations with day-by-day
+            guides that include must-see attractions and activities for all
+            ages.
+          </p>
+          <button>View Itinerary</button>
+        </div>
+
+        <div class="itinerary">
+          <h3>Solo Adventure</h3>
+          <p>
+            Embark on a solo journey with our handpicked itineraries, offering
+            exciting experiences and peaceful retreats just for you.
+          </p>
+          <button>View Itinerary</button>
+        </div>
+        <div class="itinerary">
+          <h3>Romantic Getaway</h3>
+          <p>
+            Plan the perfect romantic escape with itineraries that include
+            serene locations, romantic dinners, and memorable experiences.
+          </p>
+          <button>View Itinerary</button>
+        </div>
+      </div>
+    </section>
+
+    <!-- Cab or Auto Booking -->
+    <section id="cab-booking" class="cab-booking-section light-mode">
+      <div class="booking-container">
+        <h2>Book a Cab or Auto</h2>
+        <p>Book a cab or auto with ease</p>
+        <form action="/book-cab" method="POST">
+          <div class="form-group">
+            <label for="pickup-location">Pickup Location:</label>
+            <input type="text" id="pickup-location" name="pickup-location" placeholder="Enter pickup location" required />
           </div>
-          <div class="itinerary">
-            <h3>Romantic Getaway</h3>
-            <p>
-              Plan the perfect romantic escape with itineraries that include
-              serene locations, romantic dinners, and memorable experiences.
-            </p>
-            <button>View Itinerary</button>
+          <div class="form-group">
+            <label for="drop-location">Drop Location:</label>
+            <input type="text" id="drop-location" name="drop-location" placeholder="Enter drop location" required />
           </div>
-        </div>
+          <div class="form-group">
+            <label for="vehicle-type">Vehicle Type:</label>
+            <select id="vehicle-type" name="vehicle-type" required>
+=======
       </section>
 
       <!-- Cab or Auto Booking -->
@@ -504,10 +785,22 @@ <h3>Romantic Getaway</h3>
             style="width: 150px; height: 29px; padding: 5px;" 
             required 
             >
+
               <option value="cab">Cab</option>
-              <option value="auto">Auto</option></select
-            ><br /><br />
+              <option value="auto">Auto</option>
+            </select>
+          </div>
+
+          <div class="form-group">
+            <label for="travel-date">Travel Date:</label>
+            <input type="date" id="travel-date" name="travel-date" required />
+          </div>
+          <div class="form-group">
+            <label for="travel-time">Travel Time:</label>
+            <input type="time" id="travel-time" name="travel-time" required />
           </div>
+          <button class="book-btn" type="submit">Book now</button>
+
 
           <div style="margin-bottom: 20px;">
             <label style="font-size: 1.5em; margin-right: 35px;" for="travel-date"
@@ -555,51 +848,86 @@ <h3>Romantic Getaway</h3>
           >
             Book now
           </button>
+
         </form>
-      </section>
+      </div>
+    </section>
+    
 
-      <!-- recommendations -->
-      <section id="recommendations" class="recommendations-section">
-        <h2>Personalized Recommendations</h2>
-        <p>
-          We’ve picked these destinations, hotels, and activities just for you,
-          based on your preferences.
-        </p>
 
-        <div class="recommendation-list">
-          <!-- Example Recommendation -->
-          <div class="recommendation-item">
-            <h3>Beach Resort in Goa</h3>
-            <p>
-              Based on your love for sunny destinations, we recommend this
-              beachfront resort in Goa for a perfect getaway.
-            </p>
-            <button onclick="window.location.href='#book-now'">
-              Explore More
-            </button>
-          </div>
+    <!-- recommendations -->
+    <section id="recommendations" class="recommendations-section">
+      <h2>Personalized Recommendations</h2>
+      <p>
+        We’ve picked these destinations, hotels, and activities just for you,
+        based on your preferences.
+      </p>
+
+      <div class="recommendation-list">
+        <!-- Example Recommendation -->
+        <div class="recommendation-item">
+          <h3>Beach Resort in Goa</h3>
+          <p>
+            Based on your love for sunny destinations, we recommend this
+            beachfront resort in Goa for a perfect getaway.
+          </p>
+          <button onclick="window.location.href='#book-now'">
+            Explore More
+          </button>
+        </div>
+
+        <div class="recommendation-item">
+          <h3>Cultural Tour in Rajasthan</h3>
+          <p>
+            Explore the rich cultural heritage of Rajasthan. This tour is
+            highly recommended based on your interest in historical places.
+          </p>
+          <button onclick="window.location.href='#book-now'">
+            Explore More
+          </button>
+        </div>
 
-          <div class="recommendation-item">
-            <h3>Cultural Tour in Rajasthan</h3>
-            <p>
-              Explore the rich cultural heritage of Rajasthan. This tour is
-              highly recommended based on your interest in historical places.
-            </p>
-            <button onclick="window.location.href='#book-now'">
-              Explore More
-            </button>
+        <div class="recommendation-item">
+          <h3>Adventure Trek in Himachal</h3>
+          <p>
+            For the adventure lover in you, we recommend a thrilling trek in
+            the mountains of Himachal Pradesh.
+          </p>
+          <button onclick="window.location.href='#book-now'">
+            Explore More
+          </button>
+        </div>
+      </div>
+    </section>
+
+    <!-- Map Section -->
+    <section class="map-section">
+      <h2>Explore Popular Destinations</h2>
+      <p>Click on the markers to learn more about each destination.</p>
+      <div id="map"></div>
+    </section>
+    <!-- Google Maps JavaScript API -->
+    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCYcdQdpiSF7BjZl6JF_pyucrblrUCZMxc&callback=initMap"
+      async defer></script>
+
+    <section id="contact">
+      <div class="form-wrapper">
+        <header class="form-head">
+          <h2>Contact US</h2>
+        </header>
+        <form id="contactForm" action="https://formspree.io/f/mqkvkayy" method="POST">
+          <div class="name-form">
+            <label for="name">Name : </label>
+            <input id="name" type="text" name="name" required />
           </div>
 
-          <div class="recommendation-item">
-            <h3>Adventure Trek in Himachal</h3>
-            <p>
-              For the adventure lover in you, we recommend a thrilling trek in
-              the mountains of Himachal Pradesh.
-            </p>
-            <button onclick="window.location.href='#book-now'">
-              Explore More
-            </button>
+          <div class="email-form">
+            <label for="email">Email :</label>
+            <input id="email" type="email" name="email" required />
           </div>
+          <button type="submit">Submit</button>
+        </form>
+
         </div>
       </section>
 
@@ -695,26 +1023,35 @@ <h2>Thank You!</h2>
           <button onclick="closePopup()">Close</button>
         </div>
       </div>
-    </main>
-    <!-- ratings by user -->
-    <section id="reviews" class="reviews-section">
-      <div class="revieww">
+    </section>
+
+    <!-- Add this custom popup HTML -->
+    <div id="confirmationPopup" class="popup" style="display: none;">
+      <div class="popup-content">
+        <h2>Thank You!</h2>
+        <p>Your message has been sent successfully. We will get back to you soon.</p>
+        <button onclick="closePopup()">Close</button>
+      </div>
+    </div>
+  </main>
+  <section id="reviews" class="reviews-section">
+    <div class="revieww">
       <div class="review-form">
         <h2>Rate your experience</h2>
-        <p class="review-p"> 
+        <p class="review-p">
           Read what others have to say about their experiences with various
           destinations, hotels, flights, and activities. Share your own reviews
           and help fellow travelers make informed decisions.
         </p>
-  
-        <div  style="margin-top: 20px">
-          <form class="form">
+
+        <div style="margin-top: 20px">
+          <form class="form" id="reviewForm">
             <label for="name">Your Name:</label>
             <input type="text" id="name" name="name" required />
-  
+
             <label for="destination">Destination/Service:</label>
             <input type="text" id="destination" name="destination" required />
-  
+
             <label for="rating">Rating:</label>
             <select id="rating" name="rating">
               <option value="5">⭐⭐⭐⭐⭐</option>
@@ -723,113 +1060,29 @@ <h2>Rate your experience</h2>
               <option value="2">⭐⭐</option>
               <option value="1">⭐</option>
             </select>
-  
+
             <label for="review">Your Review:</label>
             <textarea id="review" name="review" rows="4" required></textarea>
             <label for="complaint">Complaint (if any):</label>
-            <textarea
-              id="complaint"
-              name="complaint"
-              rows="3"
-              placeholder="Describe any issue with the staff here. Please explain every single detail ex:location,name of the person"
-            ></textarea>
-  
-<div class="form-button">            <button type="submit">Send</button>
-</div>          </form>
-        </div>
-      </div>
-      </div>
+            <textarea id="complaint" name="complaint" rows="3"
+              placeholder="Describe any issue with the staff here. Please explain every single detail ex:location,name of the person"></textarea>
 
-      <div class="reviews-container">
-        <h2 class="reviews-title">What Others Are Saying</h2>
-        <div class="reviews-list">
-          <div class="review-card">
-            <div class="review-header">
-              <img src="https://i.pravatar.cc/100?img=1" alt="John Doe" class="reviewer-avatar">
-              <div class="reviewer-info">
-                <h3 class="reviewer-name">John Doe</h3>
-                <p class="reviewer-location">Paris</p>
-              </div>
-            </div>
-            <div class="review-rating">
-              <span class="star-rating" aria-label="5 out of 5 stars">★★★★★</span>
-            </div>
-            <p class="review-text">
-              Amazing experience in Paris! The Eiffel Tower was breathtaking, and
-              the food was incredible. Highly recommend!
-            </p>
-          </div>
-      
-          <div class="review-card">
-            <div class="review-header">
-              <img src="https://i.pravatar.cc/100?img=2" alt="Rahul Mehta" class="reviewer-avatar">
-              <div class="reviewer-info">
-                <h3 class="reviewer-name">Rahul Mehta</h3>
-                <p class="reviewer-location">Dubai</p>
-              </div>
-            </div>
-            <div class="review-rating">
-              <span class="star-rating" aria-label="4 out of 5 stars">★★★★☆</span>
-            </div>
-            <p class="review-text">
-              Dubai is a must-visit destination! The Burj Khalifa and desert
-              safari were highlights of the trip. Just a bit expensive.
-            </p>
-          </div>
-      
-          <div class="review-card">
-            <div class="review-header">
-              <img src="https://i.pravatar.cc/100?img=3" alt="Emily Johnson" class="reviewer-avatar">
-              <div class="reviewer-info">
-                <h3 class="reviewer-name">Emily Johnson</h3>
-                <p class="reviewer-location">London</p>
-              </div>
-            </div>
-            <div class="review-rating">
-              <span class="star-rating" aria-label="5 out of 5 stars">★★★★★</span>
-            </div>
-            <p class="review-text">
-              London's history and architecture are stunning. The Tower of London
-              and Buckingham Palace were fascinating to explore.
-            </p>
-          </div>
-      
-          <div class="review-card">
-            <div class="review-header">
-              <img src="https://i.pravatar.cc/100?img=4" alt="Michael Lee" class="reviewer-avatar">
-              <div class="reviewer-info">
-                <h3 class="reviewer-name">Michael Lee</h3>
-                <p class="reviewer-location">Goa</p>
-              </div>
-            </div>
-            <div class="review-rating">
-              <span class="star-rating" aria-label="4 out of 5 stars">★★★★☆</span>
+            <div class="form-button">
+              <button type="submit">Send</button>
             </div>
-            <p class="review-text">
-              Goa's beaches are beautiful, and the nightlife is vibrant. Great
-              place for a fun and laid-back vacation.
-            </p>
-          </div>
-      
-          <div class="review-card">
-            <div class="review-header">
-              <img src="https://i.pravatar.cc/100?img=5" alt="Aditi Patel" class="reviewer-avatar">
-              <div class="reviewer-info">
-                <h3 class="reviewer-name">Aditi Patel</h3>
-                <p class="reviewer-location">New York</p>
-              </div>
-            </div>
-            <div class="review-rating">
-              <span class="star-rating" aria-label="5 out of 5 stars">★★★★★</span>
-            </div>
-            <p class="review-text">
-              New York City is amazing! Central Park, Times Square, and the Statue
-              of Liberty were all incredible. Highly recommend!
-            </p>
+          </form>
+
+          <!-- Thank You Message -->
+          <div id="thankYouMessage" style="display: none; margin-top: 20px;">
+            <p>Thank you! We use CustomerSure to collect and manage all your feedback because we are absolutely
+              committed to making you a happy customer. We will read your feedback, and we'll take it seriously.</p>
           </div>
         </div>
       </div>
-    </section>
+    </div>
+  </section>
+
+
 
     <a href="chatbot.html">
       <div class="fixed bottom-0 right-2 chatbot-container">
@@ -843,7 +1096,15 @@ <h3 class="reviewer-name">Aditi Patel</h3>
       </div>
     </a>
 
-    <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
+
+  <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
+
+
+  <footer>
+    <div class="footer-container">
+      <div class="footer-column">
+        <h3>About Us</h3>
+        <p>We are a team of passionate developers creating amazing web experiences.</p>
 
     <footer>
       <div class="footer-container">
@@ -874,27 +1135,71 @@ <h3>Follow Us</h3>
                   <a href="#"><i class="fab fa-linkedin-in"></i></a>
               </div>
           </div>
+
       </div>
-      <div class="footer-bottom">
-          <p>&copy; 2024 Buddy Trail. All rights reserved.</p>
+      <div class="footer-column">
+        <h3>Quick Links</h3>
+        <ul>
+          <li><a href="#">Home</a></li>
+          <li><a href="#">About</a></li>
+          <li><a href="#">Services</a></li>
+          <li><a href="#">Contact</a></li>
+        </ul>
       </div>
-  </footer>
-    <!-- Deals and Offers Popup -->
-    <div id="dealsPopup" class="popup">
-      <div class="popup-content">
-        <span class="close-btn" id="closePopup">&times;</span>
-        <h2>Exclusive Deals and Offers!</h2>
-        <p>
-          Get the best deals on flights, hotels, and travel packages. Don't miss
-          out on our limited-time discounts. Plan your trip now!
-        </p>
-        <button
-          onclick="document.getElementById('dealsPopup').style.display = 'none'; window.location.href='#deals'"
-        >
-          Check Out Deals
-        </button>
+      <div 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="#"><i class="fab fa-facebook-f"></i></a>
+          <a href="#"><i class="fa-brands fa-x-twitter"></i></i></a>
+          <a href="#"><i class="fab fa-instagram"></i></a>
+          <a href="#"><i class="fab fa-linkedin-in"></i></a>
+        </div>
       </div>
     </div>
+
+    <div class="footer-bottom">
+      <p>&copy; 2024 Buddy Trail. All rights reserved.</p>
+    </div>
+  </footer>
+  <!-- Deals and Offers Popup -->
+  <div id="dealsPopup" class="popup">
+    <div class="popup-content">
+      <span class="close-btn" id="closePopup">&times;</span>
+      <h2>Exclusive Deals and Offers!</h2>
+      <p>
+        Get the best deals on flights, hotels, and travel packages. Don't miss
+        out on our limited-time discounts. Plan your trip now!
+      </p>
+      <button onclick="document.getElementById('dealsPopup').style.display = 'none'; window.location.href='#deals'">
+        Check Out Deals
+      </button>
+    </div>
+  </div>
+  <!-- this script is for twitter icon  starts -->
+  <script src="https://kit.fontawesome.com/856f4a44d7.js" crossorigin="anonymous"></script>
+  <!-- this script is for twitter icon  ends -->
+  <script>
+    // script.js
+    window.onscroll = function () {
+      toggleScrollTopButton();
+    };
+
+    const scrollTopBtn = document.getElementById("scrollTopBtn");
+
+    function toggleScrollTopButton() {
+      if (
+        document.body.scrollTop > 100 ||
+        document.documentElement.scrollTop > 100
+      ) {
+        scrollTopBtn.style.display = "block"; // Show button after scrolling down
+      } else {
+        scrollTopBtn.style.display = "none"; // Hide button when at the top
+
     <!-- this script is for twitter icon  starts -->
  <script src="https://kit.fontawesome.com/856f4a44d7.js" crossorigin="anonymous"></script>
  <!-- this script is for twitter icon  ends -->
@@ -927,35 +1232,62 @@ <h2>Exclusive Deals and Offers!</h2>
         } else {
           scrollTopBtn.style.display = "none"; // Hide button when at the top
         }
+
       }
+    }
 
-      scrollTopBtn.onclick = function () {
-        window.scrollTo({ top: 0, behavior: "smooth" }); // Smooth scroll to top
-      };
-    </script>
-    <!-- Add this at the end of the body, just before the closing </body> tag -->
-    <script>
-      document.getElementById('contactForm').addEventListener('submit', function(e) {
-        e.preventDefault();
-        
-        // Submit the form data using fetch
-        fetch(this.action, {
-          method: 'POST',
-          body: new FormData(this),
-          headers: {
-            'Accept': 'application/json'
-          }
-        }).then(response => {
-          // Show the confirmation popup
-          document.getElementById('confirmationPopup').style.display = 'block';
-          // Reset the form
-          this.reset();
-        }).catch(error => {
-          console.error('Error:', error);
-          // Still show the confirmation popup even if there's an error
-          document.getElementById('confirmationPopup').style.display = 'block';
-        });
+    scrollTopBtn.onclick = function () {
+      window.scrollTo({ top: 0, behavior: "smooth" }); // Smooth scroll to top
+    };
+  </script>
+  <!-- Add this at the end of the body, just before the closing </body> tag -->
+  <script>
+    document.getElementById('contactForm').addEventListener('submit', function (e) {
+      e.preventDefault();
+
+      // Submit the form data using fetch
+      fetch(this.action, {
+        method: 'POST',
+        body: new FormData(this),
+        headers: {
+          'Accept': 'application/json'
+        }
+      }).then(response => {
+        // Show the confirmation popup
+        document.getElementById('confirmationPopup').style.display = 'block';
+        // Reset the form
+        this.reset();
+      }).catch(error => {
+        console.error('Error:', error);
+        // Still show the confirmation popup even if there's an error
+        document.getElementById('confirmationPopup').style.display = 'block';
       });
+    });
+
+
+    function closePopup() {
+      document.getElementById('confirmationPopup').style.display = 'none';
+    }
+  </script>
+  <script>
+  document.getElementById('reviewForm').addEventListener('submit', function(event) {
+  event.preventDefault(); // Prevents form submission
+
+  // Show custom alert message
+  const customAlert = document.createElement('div');
+  customAlert.className = 'custom-alert';
+  customAlert.innerHTML = `
+    <p><b>Thank you! </b><br>We use BuddyTrail to collect and manage all your feedback because we are absolutely committed to making you a happy customer.<br>We will read your feedback, and we'll take it seriously.</p>
+  `;
+  document.body.appendChild(customAlert);
+
+  // Remove alert on click
+  customAlert.addEventListener('click', () => {
+    customAlert.remove();
+  });
+
+  this.reset(); // Clears the form fields
+});
 
       function closePopup() {
         document.getElementById('confirmationPopup').style.display = 'none';
@@ -992,26 +1324,69 @@ <h2>Exclusive Deals and Offers!</h2>
         z-index: 1000;
       }
 
-      .popup-content {
-        background-color: white;
-        padding: 20px;
-        border-radius: 5px;
-        text-align: center;
-      }
 
-      .popup-content h2 {
-        margin-top: 0;
-      }
+  </script>
+  <style>
+    .popup {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(24, 23, 24, 0.5);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      z-index: 1000;
+    }
 
-      .popup-content button {
-        margin-top: 10px;
-        padding: 5px 10px;
-        background-color: #007bff;
-        color: white;
-        border: none;
-        border-radius: 3px;
-        cursor: pointer;
-      }
-    </style>
-  </body>
-</html>
+    .popup-content {
+      background-color: white;
+      padding: 20px;
+      border-radius: 5px;
+      text-align: center;
+    }
+
+    .popup-content h2 {
+      margin-top: 0;
+    }
+
+    .popup-content button {
+      margin-top: 10px;
+      padding: 5px 10px;
+      background-color: #007bff;
+      color: white;
+      border: none;
+      border-radius: 3px;
+      cursor: pointer;
+    }
+
+    .custom-alert {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  max-width: 400px;
+  padding: 20px;
+  background-color: rgba(51, 51, 51, 0.8); /* Adds translucency */
+  color: #fff;
+  font-size: 16px;
+  border-radius: 8px;
+  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
+  text-align: center;
+  z-index: 1000;
+  cursor: pointer; /* Changes cursor to pointer to indicate it's clickable */
+  opacity: 1;
+  transition: opacity 0.5s ease-in-out;
+}
+
+.custom-alert p {
+  margin: 0;
+  line-height: 1.5;
+}
+
+    
+  </style>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/project-structure.md b/project-structure.md
index 6ffbe869..454b9e25 100644
--- a/project-structure.md
+++ b/project-structure.md
@@ -1,8 +1,8 @@
 <!-- START_STRUCTURE -->
 ```
-├── BuddyTrail
 ├── Code_of_Conduct.md
 ├── README.md
+├── RatingStyle.css
 ├── book.html
 ├── boy.png
 ├── chatbot.gif
@@ -18,19 +18,22 @@
 │   ├── twitter.svg
 │   └── youtube.svg
 ├── img
-│   ├── banner.png
 │   ├── cloud.png
 │   ├── contact-mountain.png
 │   ├── googleLogo.png
 │   ├── landing-page.jpg
+│   ├── logo.png
+│   ├── logo2.png
 │   └── new-york-page.png
 ├── index.html
 ├── login.css
 ├── login.html
 ├── project-structure.md
+├── project_structure.txt
 ├── script.js
 ├── signUp.css
 ├── signUp.html
+├── star-rating.js
 └── style.css
 ```
 <!-- END_STRUCTURE -->
\ No newline at end of file
diff --git a/project_structure.txt b/project_structure.txt
new file mode 100644
index 00000000..77fa87a5
--- /dev/null
+++ b/project_structure.txt
@@ -0,0 +1,35 @@
+├── Code_of_Conduct.md
+├── README.md
+├── RatingStyle.css
+├── book.html
+├── boy.png
+├── chatbot.gif
+├── chatbot.html
+├── firebase.js
+├── icons
+│   ├── airplane.svg
+│   ├── bed-solid.svg
+│   ├── instagram.svg
+│   ├── plane-departure-solid.svg
+│   ├── route-solid.svg
+│   ├── twitter-x.svg
+│   ├── twitter.svg
+│   └── youtube.svg
+├── img
+│   ├── cloud.png
+│   ├── contact-mountain.png
+│   ├── googleLogo.png
+│   ├── landing-page.jpg
+│   ├── logo.png
+│   ├── logo2.png
+│   └── new-york-page.png
+├── index.html
+├── login.css
+├── login.html
+├── project-structure.md
+├── project_structure.txt
+├── script.js
+├── signUp.css
+├── signUp.html
+├── star-rating.js
+└── style.css
\ No newline at end of file
diff --git a/style.css b/style.css
index 7aef00a1..4989c83a 100644
--- a/style.css
+++ b/style.css
@@ -396,6 +396,91 @@ nav ul {
   padding: 1rem 3rem;
 }
 
+/* Cab Booking Section Styles */
+.cab-booking-section  {
+  display: flex;
+  justify-content: center; /* Center the content horizontally */
+  align-items: center; /* Center the content vertically */
+  min-height: 100vh; /* Minimum height to fill the viewport */
+  padding: 20px; /* Padding around the section */
+  background-color: rgba(255, 255, 255, 0.738); /* Translucent background for section */
+}
+
+.booking-container {
+  width: 100%;
+  max-width: 500px; /* Set a max width for the container */
+  text-align: center; /* Centering the text */
+  padding: 20px; /* Add padding inside the container */
+  border: 2px solid #007bff; /* Border color */
+  border-radius: 10px; /* Rounded corners */
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Slight shadow for depth */
+  background-color: rgba(255, 255, 255, 0.8); /* Translucent white background */
+}
+
+h2 {
+  font-size: 2.5em;
+  font-weight: 700;
+  margin: 10px 0; /* Margin adjustment */
+  color: #333; /* Heading color */
+}
+
+p {
+  font-size: 1.5em;
+  margin-bottom: 20px;
+  color: #666; /* Paragraph color */
+}
+
+/* Form Group Styles */
+.form-group {
+  margin-bottom: 15px;
+  text-align: left; /* Align labels and inputs to the left */
+}
+
+label {
+  font-size: 1.2em;
+  color: #333; /* Label color */
+}
+
+input,
+select {
+  height: 35px;
+  width: 100%; /* Full width */
+  padding: 5px;
+  border: 1px solid #ccc; /* Border for inputs */
+  border-radius: 5px; /* Rounded corners */
+  font-size: 1em;
+  margin-top: 5px;
+}
+
+input[type="text"],
+input[type="date"],
+input[type="time"] {
+  transition: border 0.3s; /* Smooth transition */
+}
+
+input:focus {
+  border: 1px solid #007bff; /* Border color on focus */
+}
+
+/* Button Styles */
+.book-btn {
+  background-color: #007bff; /* Button background color */
+  color: white; /* Button text color */
+  border: none; /* No border */
+  border-radius: 5px; /* Rounded corners */
+  padding: 10px 20px; /* Padding for button */
+  cursor: pointer; /* Pointer cursor on hover */
+  font-size: 1.2em; /* Button text size */
+  width: 100%; /* Full width */
+  max-width: 300px; /* Max width for button */
+  margin-top: 10px; /* Margin above button */
+}
+
+.book-btn:hover {
+  background-color: #0056b3; /* Darker shade on hover */
+}
+
+
 /**** FOOTER ****/
 
 /* Footer Styles */