From 15d828ba1b758995e1a79feffce286224ad15346 Mon Sep 17 00:00:00 2001
From: Subin Shakya <subin12.shakya@gmail.com>
Date: Tue, 15 Oct 2024 13:15:52 +0545
Subject: [PATCH 1/2] uniform navbar across the pages

---
 about.html  | 181 +++++++++----------
 index.html  |   6 +-
 review.html | 512 +++++++++++++++++++++++++++++++---------------------
 ride.html   |   6 +-
 serv.html   | 136 ++++++++------
 style.css   | 129 ++++++-------
 6 files changed, 533 insertions(+), 437 deletions(-)

diff --git a/about.html b/about.html
index 20656c6..1417b5c 100644
--- a/about.html
+++ b/about.html
@@ -8,18 +8,8 @@
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css"
     />
-    <nav class="navbar">
-      <div class="logo">
-        <img src="img/cabz.png.png" alt="Logo" class="navbar-logo" />
-    </div>
-      <ul>
-          <li><a href="index.html">Home</a></li>
-          <li><a href="#company-overview">Company Overview</a></li>
-          <li><a href="#mission-vision">Mission & Vision</a></li>
-          <li><a href="#values-principles">Values & Principles</a></li>
-      </ul>
-  </nav>
-  
+    <link rel="stylesheet" href="style.css" />
+
     <style>
       body {
         font-family: "Poppins", sans-serif;
@@ -30,57 +20,6 @@
         line-height: 1.6;
       }
 
-      .navbar {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        background-color: #fff;
-        padding: 20px;
-        position: sticky;
-        top: 0;
-        z-index: 1000;
-        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-      }
-
-      .navbar ul li a:hover {
-        background-color: #8f6883;
-        transform: scale(1.1);
-      }
-
-      .navbar ul {
-        display: flex;
-        justify-content: space-around; /* Spacing between links */
-        list-style: none;
-        padding: 10px; /* Padding for the group of links */
-        background-color: #e6e4e4; /* Background color for the navbar */
-    }
-
-    .navbar ul li {
-        margin: 0 10px; /* Spacing between individual links */
-    }
-
-    .navbar ul li a {
-        color: #0c0101;
-        background-color: #e6e4e4;
-        text-decoration: none;
-        border-radius: 5px;
-        padding: 10px; /* Padding around each link */
-        transition: background-color 0.3s, transform 0.3s;
-    }
-    .navbar ul li a:hover {
-      background-color: #f7f5f4;
-      transform: scale(1.1);
-      border-bottom: 3px solid black; /* Black underline on hover */
-  }
-    
-    .navbar ul li a:active {
-      border-bottom: 3px solid black; /* Black underline when clicked */
-  }
-
-    .navbar ul li a:focus {
-      border-bottom: 3px solid black; /* Black underline on focus */
-  }
-
       .hero {
         height: 60vh;
         background: url("https://autotrans.com/wp-content/uploads/2021/04/AdobeStock_95320493-2048x1367.jpeg")
@@ -182,39 +121,56 @@
         border-radius: 5px;
         border-top: 2px solid #ddd; /* Line between sections */
       }
-      
+
       #company-overview {
         background-color: #557d80;
       }
-      
+
       #mission-vision {
         background-color: #d4c6c6;
       }
       #company-overview p,
       #mission-vision p {
-  font-weight: bold;
-  color: #080101;
-}
+        font-weight: bold;
+        color: #080101;
+      }
 
-.about-us-img {
-  width: 1200px; /* Adjust size as needed */
-  height: 400px;
-  border-radius: 10px; /* Optional: Adds rounded corners */
-  position: absolute; /* Positioning the image inside hero */
-  bottom: 10px; /* Adjusts position within the hero section */
-  box-shadow: 0 4px 10px rgba(12, 10, 10, 0.2); /* Adds a shadow for better visibility */
-  right: 80px;
-  z-index: -1; /* Ensures it stays above the overlay */
-}
+      .about-us-img {
+        width: 1200px; /* Adjust size as needed */
+        height: 400px;
+        border-radius: 10px; /* Optional: Adds rounded corners */
+        position: absolute; /* Positioning the image inside hero */
+        bottom: 10px; /* Adjusts position within the hero section */
+        box-shadow: 0 4px 10px rgba(12, 10, 10, 0.2); /* Adds a shadow for better visibility */
+        right: 80px;
+        z-index: -1; /* Ensures it stays above the overlay */
+      }
     </style>
   </head>
   <body>
-    
+    <header>
+      <a href="#" class="logo"><img src="img/logo.png" alt="" /></a>
+      <a href="#" class="CabRental_logo"
+        ><img src="img/cabz.png.png" alt=""
+      /></a>
+      <div class="bx bx-menu" id="menu-icon"></div>
+      <ul class="navbar">
+        <li><a href="index.html">Home</a></li>
+        <li><a href="ride.html">Ride</a></li>
+        <li><a href="serv.html">Services</a></li>
+        <li><a href="about.html">About</a></li>
+        <li><a href="review.html">Reviews</a></li>
+        <li><a href="contactus.html">Contact</a></li>
+      </ul>
+      <div class="header-btn">
+        <a href="login.html" class="sign-up">Login</a>
+      </div>
+      <div class="theme-switch" id="theme-switch"></div>
+    </header>
+
     <!-- Hero Section -->
     <section class="hero">
       <h1>About Us</h1>
-
-
     </section>
 
     <div class="container">
@@ -285,25 +241,50 @@ <h2>Values and Principles</h2>
       </section>
     </div>
     <!-- Footer -->
-<footer style="background-color: #333; color: #fff; padding: 20px 0;">
-  <div class="container">
-    <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;">
-      <div>
-        <h3 style="margin: 0;">CabRental</h3>
-        <p>&copy; 2024 CabRental. All rights reserved.</p>
-      </div>
-      <ul style="list-style: none; display: flex; padding: 0; margin: 0;">
-        <li style="margin-right: 15px;"><a href="#" style="color: #fff; text-decoration: none;">Privacy Policy</a></li>
-        <li style="margin-right: 15px;"><a href="#" style="color: #fff; text-decoration: none;">Terms of Service</a></li>
-        <li style="margin-right: 15px;"><a href="#" style="color: #fff; text-decoration: none;">Contact Us</a></li>
-      </ul>
-      <div>
-        <a href="#" style="color: #fff; margin-right: 10px;"><i class="bx bxl-facebook"></i></a>
-        <a href="#" style="color: #fff; margin-right: 10px;"><i class="bx bxl-twitter"></i></a>
-        <a href="#" style="color: #fff; margin-right: 10px;"><i class="bx bxl-instagram"></i></a>
+    <footer style="background-color: #333; color: #fff; padding: 20px 0">
+      <div class="container">
+        <div
+          style="
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            flex-wrap: wrap;
+          "
+        >
+          <div>
+            <h3 style="margin: 0">CabRental</h3>
+            <p>&copy; 2024 CabRental. All rights reserved.</p>
+          </div>
+          <ul style="list-style: none; display: flex; padding: 0; margin: 0">
+            <li style="margin-right: 15px">
+              <a href="#" style="color: #fff; text-decoration: none"
+                >Privacy Policy</a
+              >
+            </li>
+            <li style="margin-right: 15px">
+              <a href="#" style="color: #fff; text-decoration: none"
+                >Terms of Service</a
+              >
+            </li>
+            <li style="margin-right: 15px">
+              <a href="#" style="color: #fff; text-decoration: none"
+                >Contact Us</a
+              >
+            </li>
+          </ul>
+          <div>
+            <a href="#" style="color: #fff; margin-right: 10px"
+              ><i class="bx bxl-facebook"></i
+            ></a>
+            <a href="#" style="color: #fff; margin-right: 10px"
+              ><i class="bx bxl-twitter"></i
+            ></a>
+            <a href="#" style="color: #fff; margin-right: 10px"
+              ><i class="bx bxl-instagram"></i
+            ></a>
+          </div>
+        </div>
       </div>
-    </div>
-  </div>
-</footer>
+    </footer>
   </body>
 </html>
diff --git a/index.html b/index.html
index 2a533b3..32a90b0 100644
--- a/index.html
+++ b/index.html
@@ -26,14 +26,14 @@
         crossorigin="anonymous"></script>
     <style>
         /* Base styles */
-        header {
+        /* header {
             display: flex;
             justify-content: space-between;
             align-items: center;
             padding: 10px 20px;
             background-color: #fff;
             box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
-        }
+        } */
 
         .logo img {
             height: 50px;
@@ -474,7 +474,7 @@
 
 <body>
     <!-- Header -->
-    <header>
+    <header >
         <a href="#" class="logo"><img src="img/logo.png" alt=""></a>
         <a href="#" class="CabRental_logo"><img src="img/cabz.png.png" alt=""></a>
         <div class="bx bx-menu" id="menu-icon"></div>
diff --git a/review.html b/review.html
index d706c02..2daf974 100644
--- a/review.html
+++ b/review.html
@@ -1,251 +1,347 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Cabrental Reviews</title>
     <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="style.css" />
     <style>
-        .nav-container {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            height: 80px;
-        }
-
-        .nav-items {
-            flex-grow: 1;
-            text-align: center;
-        }
-
-        .nav-items a {
-            margin: 0 1rem;
-            transition: color 0.3s ease;
-        }
-
-        .nav-items a:hover {
-            color: #6d28d9;
-        }
+      .card {
+        transition: transform 0.3s ease, box-shadow 0.3s ease;
+      }
 
-        .card {
-            transition: transform 0.3s ease, box-shadow 0.3s ease;
-        }
+      .card:hover {
+        transform: translateY(-10px);
+        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
+      }
 
-        .card:hover {
-            transform: translateY(-10px);
-            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
-        }
+      .logo {
+        height: 40px;
+        width: auto;
+      }
 
-        .logo {
-            height: 40px;
-            width: auto;
-        }
+      .text-lg {
+        padding-left: 10px;
+      }
 
-        .text-lg {
-            padding-left: 10px;
-        }
+      .bg-gradient-to-r {
+        background: linear-gradient(90deg, #6d28d9 0%, #4f46e5 100%);
+      }
 
-        .bg-gradient-to-r {
-            background: linear-gradient(90deg, #6d28d9 0%, #4f46e5 100%);
-        }
-
-        .rating-star {
-            color: #fbbf24;
-        }
+      .rating-star {
+        color: #fbbf24;
+      }
     </style>
-</head>
-
-<body class="bg-gray-100 font-sans leading-normal tracking-normal">
+  </head>
 
-    <!-- Navbar -->
-    <nav class="bg-white shadow-md">
-        <div class="container mx-auto px-4 nav-container">
-            <div class="flex items-center">
-                <img src="img/logo.png" alt="Logo" class="logo">
-                <div class="text-lg font-bold text-purple-800">
-                    Cabrental
-                </div>
-            </div>
-            <div class="nav-items">
-                <a href="index.html" class="text-gray-800 hover:text-purple-800">Home</a>
-                <a href="ride.html" class="text-gray-800 hover:text-purple-800">Ride</a>
-                <a href="serv.html" class="text-gray-800 hover:text-purple-800">Service</a>
-                <a href="about.html" class="text-gray-800 hover:text-purple-800">About</a>
-                <a href="review.html" class="text-gray-800 hover:text-purple-800">Reviews</a>
-                <a href="contactus.html" class="text-gray-800 hover:text-purple-800">Contact</a>
-            </div>
-            <div>
-                <button class="bg-purple-500 text-white px-4 py-2 rounded shadow hover:bg-purple-600" onclick="window.location.href='login.html'">Login</button>
-            </div>
-        </div>
-    </nav>
+  <body class="bg-gray-100 font-sans leading-normal tracking-normal">
+    <!-- Header -->
+    <header>
+      <a href="#" class="logo"><img src="img/logo.png" alt="" /></a>
+      <a href="#" class="CabRental_logo"
+        ><img src="img/cabz.png.png" alt=""
+      /></a>
+      <div class="bx bx-menu" id="menu-icon"></div>
+      <ul class="navbar">
+        <li><a href="index.html">Home</a></li>
+        <li><a href="ride.html">Ride</a></li>
+        <li><a href="serv.html">Services</a></li>
+        <li><a href="about.html">About</a></li>
+        <li><a href="review.html">Reviews</a></li>
+        <li><a href="contactus.html">Contact</a></li>
+      </ul>
+      <div class="header-btn">
+        <a href="login.html" class="sign-up">Login</a>
+      </div>
+      <div class="theme-switch" id="theme-switch"></div>
+    </header>
 
     <!-- Hero Section -->
-    <section class="bg-gradient-to-r from-purple-500 to-indigo-600 text-white py-20">
-        <div class="container mx-auto text-center">
-            <h1 class="text-4xl font-bold mb-2">Cabrental Reviews</h1>
-            <p class="text-lg mb-6">Read what our customers have to say about our car rental service!</p>
-            <button id="reviewButton" class="bg-white text-purple-800 px-4 py-2 rounded shadow hover:bg-gray-200">Leave a Review</button>
-        </div>
+    <section
+      class="bg-gradient-to-r from-purple-500 to-indigo-600 text-white py-20"
+    >
+      <div class="container mx-auto text-center">
+        <h1 class="text-4xl font-bold mb-2">Cabrental Reviews</h1>
+        <p class="text-lg mb-6">
+          Read what our customers have to say about our car rental service!
+        </p>
+        <button
+          id="reviewButton"
+          class="bg-white text-purple-800 px-4 py-2 rounded shadow hover:bg-gray-200"
+        >
+          Leave a Review
+        </button>
+      </div>
     </section>
 
     <!-- Reviews Section -->
     <section class="container mx-auto px-4 py-16">
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-            <!-- Review Cards -->
-            <div class="bg-white p-6 rounded-lg shadow-lg card">
-                <div class="flex items-center mb-4">
-                    <img class="w-12 h-12 rounded-full mr-4" src="./images/images (1).jpeg" alt="User Avatar">
-                    <div>
-                        <p class="text-xl font-bold">John Doe</p>
-                        <p class="text-gray-600">March 25, 2024</p>
-                    </div>
-                </div>
-                <p class="text-gray-800 mb-4">The car rental service was excellent! The car was in perfect condition, and the process was smooth and hassle-free.</p>
-                <div class="text-yellow-500">
-                    <span class="mr-1 rating-star">★</span><span class="mr-1 rating-star">★</span><span class="mr-1 rating-star">★</span><span class="mr-1 rating-star">★</span><span class="rating-star">★</span>
-                </div>
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+        <!-- Review Cards -->
+        <div class="bg-white p-6 rounded-lg shadow-lg card">
+          <div class="flex items-center mb-4">
+            <img
+              class="w-12 h-12 rounded-full mr-4"
+              src="./images/images (1).jpeg"
+              alt="User Avatar"
+            />
+            <div>
+              <p class="text-xl font-bold">John Doe</p>
+              <p class="text-gray-600">March 25, 2024</p>
             </div>
-            <div class="bg-white p-6 rounded-lg shadow-lg card">
-                <div class="flex items-center mb-4">
-                    <img class="w-12 h-12 rounded-full mr-4" src="./images/images (2).jpeg" alt="User Avatar">
-                    <div>
-                        <p class="text-xl font-bold">Jane Smith</p>
-                        <p class="text-gray-600">April 10, 2024</p>
-                    </div>
-                </div>
-                <p class="text-gray-800 mb-4">Great service and friendly staff! I will definitely rent a car from Cabrental again in the future.</p>
-                <div class="text-yellow-500">
-                    <span class="mr-1 rating-star">★</span><span class="mr-1 rating-star">★</span><span class="mr-1 rating-star">★</span><span class="mr-1 rating-star">★</span><span>☆</span>
-                </div>
+          </div>
+          <p class="text-gray-800 mb-4">
+            The car rental service was excellent! The car was in perfect
+            condition, and the process was smooth and hassle-free.
+          </p>
+          <div class="text-yellow-500">
+            <span class="mr-1 rating-star">★</span
+            ><span class="mr-1 rating-star">★</span
+            ><span class="mr-1 rating-star">★</span
+            ><span class="mr-1 rating-star">★</span
+            ><span class="rating-star">★</span>
+          </div>
+        </div>
+        <div class="bg-white p-6 rounded-lg shadow-lg card">
+          <div class="flex items-center mb-4">
+            <img
+              class="w-12 h-12 rounded-full mr-4"
+              src="./images/images (2).jpeg"
+              alt="User Avatar"
+            />
+            <div>
+              <p class="text-xl font-bold">Jane Smith</p>
+              <p class="text-gray-600">April 10, 2024</p>
             </div>
-            <div class="bg-white p-6 rounded-lg shadow-lg card">
-                <div class="flex items-center mb-4">
-                    <img class="w-12 h-12 rounded-full mr-4" src="./images/istockphoto-1158014305-612x612.jpg" alt="User Avatar">
-                    <div>
-                        <p class="text-xl font-bold">Mark Wilson</p>
-                        <p class="text-gray-600">May 5, 2024</p>
-                    </div>
-                </div>
-                <p class="text-gray-800 mb-4">I had an amazing experience with Cabrental. The car was clean and the booking process was seamless.</p>
-                <div class="text-yellow-500">
-                    <span class="mr-1 rating-star">★</span><span class="mr-1 rating-star">★</span><span class="mr-1 rating-star">★</span><span class="mr-1 rating-star">★</span><span class="rating-star">★</span>
-                </div>
+          </div>
+          <p class="text-gray-800 mb-4">
+            Great service and friendly staff! I will definitely rent a car from
+            Cabrental again in the future.
+          </p>
+          <div class="text-yellow-500">
+            <span class="mr-1 rating-star">★</span
+            ><span class="mr-1 rating-star">★</span
+            ><span class="mr-1 rating-star">★</span
+            ><span class="mr-1 rating-star">★</span><span>☆</span>
+          </div>
+        </div>
+        <div class="bg-white p-6 rounded-lg shadow-lg card">
+          <div class="flex items-center mb-4">
+            <img
+              class="w-12 h-12 rounded-full mr-4"
+              src="./images/istockphoto-1158014305-612x612.jpg"
+              alt="User Avatar"
+            />
+            <div>
+              <p class="text-xl font-bold">Mark Wilson</p>
+              <p class="text-gray-600">May 5, 2024</p>
             </div>
-            <div class="bg-white p-6 rounded-lg shadow-lg card">
-                <div class="flex items-center mb-4">
-                    <img class="w-12 h-12 rounded-full mr-4" src="./images/images (4).jpeg" alt="User Avatar">
-                    <div>
-                        <p class="text-xl font-bold">Alice Johnson</p>
-                        <p class="text-gray-600">June 14, 2024</p>
-                    </div>
-                </div>
-                <p class="text-gray-800 mb-4">I love the convenience of renting a car from Cabrental. Their service is always reliable and efficient.</p>
-                <div class="text-yellow-500">
-                    <span class="mr-1 rating-star">★</span><span class="mr-1 rating-star">★</span><span class="mr-1 rating-star">★</span><span class="mr-1 rating-star">★</span><span class="rating-star">★</span>
-                </div>
+          </div>
+          <p class="text-gray-800 mb-4">
+            I had an amazing experience with Cabrental. The car was clean and
+            the booking process was seamless.
+          </p>
+          <div class="text-yellow-500">
+            <span class="mr-1 rating-star">★</span
+            ><span class="mr-1 rating-star">★</span
+            ><span class="mr-1 rating-star">★</span
+            ><span class="mr-1 rating-star">★</span
+            ><span class="rating-star">★</span>
+          </div>
+        </div>
+        <div class="bg-white p-6 rounded-lg shadow-lg card">
+          <div class="flex items-center mb-4">
+            <img
+              class="w-12 h-12 rounded-full mr-4"
+              src="./images/images (4).jpeg"
+              alt="User Avatar"
+            />
+            <div>
+              <p class="text-xl font-bold">Alice Johnson</p>
+              <p class="text-gray-600">June 14, 2024</p>
             </div>
-            <div class="bg-white p-6 rounded-lg shadow-lg card">
-                <div class="flex items-center mb-4">
-                    <img class="w-12 h-12 rounded-full mr-4" src="./images/download.jpeg" alt="User Avatar">
-                    <div>
-                        <p class="text-xl font-bold">Chris Brown</p>
-                        <p class="text-gray-600">July 20, 2024</p>
-                    </div>
-                </div>
-                <p class="text-gray-800 mb-4">Cabrental has been my go-to car rental service for years. They always provide top-notch service and quality cars.</p>
-                <div class="text-yellow-500">
-                    <span class="mr-1 rating-star">★</span><span class="mr-1 rating-star">★</span><span class="mr-1 rating-star">★</span><span class="mr-1 rating-star">★</span><span class="rating-star">★</span>
-                </div>
+          </div>
+          <p class="text-gray-800 mb-4">
+            I love the convenience of renting a car from Cabrental. Their
+            service is always reliable and efficient.
+          </p>
+          <div class="text-yellow-500">
+            <span class="mr-1 rating-star">★</span
+            ><span class="mr-1 rating-star">★</span
+            ><span class="mr-1 rating-star">★</span
+            ><span class="mr-1 rating-star">★</span
+            ><span class="rating-star">★</span>
+          </div>
+        </div>
+        <div class="bg-white p-6 rounded-lg shadow-lg card">
+          <div class="flex items-center mb-4">
+            <img
+              class="w-12 h-12 rounded-full mr-4"
+              src="./images/download.jpeg"
+              alt="User Avatar"
+            />
+            <div>
+              <p class="text-xl font-bold">Chris Brown</p>
+              <p class="text-gray-600">July 20, 2024</p>
             </div>
-            <div class="bg-white p-6 rounded-lg shadow-lg card">
-                <div class="flex items-center mb-4">
-                    <img class="w-12 h-12 rounded-full mr-4" src="./images/images.jpeg" alt="User Avatar">
-                    <div>
-                        <p class="text-xl font-bold">Emily Davis</p>
-                        <p class="text-gray-600">August 15, 2024</p>
-                    </div>
-                </div>
-                <p class="text-gray-800 mb-4">The customer service at Cabrental is outstanding! They go above and beyond to ensure a great experience.</p>
-                <div class="text-yellow-500">
-                    <span class="mr-1 rating-star">★</span><span class="mr-1 rating-star">★</span><span class="mr-1 rating-star">★</span><span class="mr-1 rating-star">★</span><span>☆</span>
-                </div>
+          </div>
+          <p class="text-gray-800 mb-4">
+            Cabrental has been my go-to car rental service for years. They
+            always provide top-notch service and quality cars.
+          </p>
+          <div class="text-yellow-500">
+            <span class="mr-1 rating-star">★</span
+            ><span class="mr-1 rating-star">★</span
+            ><span class="mr-1 rating-star">★</span
+            ><span class="mr-1 rating-star">★</span
+            ><span class="rating-star">★</span>
+          </div>
+        </div>
+        <div class="bg-white p-6 rounded-lg shadow-lg card">
+          <div class="flex items-center mb-4">
+            <img
+              class="w-12 h-12 rounded-full mr-4"
+              src="./images/images.jpeg"
+              alt="User Avatar"
+            />
+            <div>
+              <p class="text-xl font-bold">Emily Davis</p>
+              <p class="text-gray-600">August 15, 2024</p>
             </div>
+          </div>
+          <p class="text-gray-800 mb-4">
+            The customer service at Cabrental is outstanding! They go above and
+            beyond to ensure a great experience.
+          </p>
+          <div class="text-yellow-500">
+            <span class="mr-1 rating-star">★</span
+            ><span class="mr-1 rating-star">★</span
+            ><span class="mr-1 rating-star">★</span
+            ><span class="mr-1 rating-star">★</span><span>☆</span>
+          </div>
         </div>
+      </div>
     </section>
 
     <!-- Review Form Modal -->
-    <div id="reviewModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
-        <div class="bg-white rounded-lg p-6 w-full max-w-lg">
-            <div class="flex justify-between items-center mb-4">
-                <h2 class="text-xl font-bold">Leave a Review</h2>
-                <button id="closeModal" class="text-gray-600 hover:text-gray-900">&times;</button>
-            </div>
-            <form>
-                <div class="mb-4">
-                    <label for="name" class="block text-sm font-medium text-gray-700">Name</label>
-                    <input type="text" id="name" class="mt-1 p-2 border border-gray-300 rounded-md w-full" required>
-                </div>
-                <div class="mb-4">
-                    <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
-                    <input type="email" id="email" class="mt-1 p-2 border border-gray-300 rounded-md w-full" required>
-                </div>
-                <div class="mb-4">
-                    <label for="rating" class="block text-sm font-medium text-gray-700">Rating</label>
-                    <select id="rating" class="mt-1 p-2 border border-gray-300 rounded-md w-full" required>
-                        <option value="5">★★★★★ - 5 Stars</option>
-                        <option value="4">★★★★☆ - 4 Stars</option>
-                        <option value="3">★★★☆☆ - 3 Stars</option>
-                        <option value="2">★★☆☆☆ - 2 Stars</option>
-                        <option value="1">★☆☆☆☆ - 1 Star</option>
-                    </select>
-                </div>
-                <div class="mb-4">
-                    <label for="review" class="block text-sm font-medium text-gray-700">Review</label>
-                    <textarea id="review" class="mt-1 p-2 border border-gray-300 rounded-md w-full" rows="4" required></textarea>
-                </div>
-                <div class="flex justify-end">
-                    <button type="button" class="bg-gray-500 text-white px-4 py-2 rounded shadow hover:bg-gray-600 mr-2"
-                        id="cancelButton">Cancel</button>
-                    <button type="submit" class="bg-purple-500 text-white px-4 py-2 rounded shadow hover:bg-purple-600">Submit</button>
-                </div>
-            </form>
+    <div
+      id="reviewModal"
+      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden"
+    >
+      <div class="bg-white rounded-lg p-6 w-full max-w-lg">
+        <div class="flex justify-between items-center mb-4">
+          <h2 class="text-xl font-bold">Leave a Review</h2>
+          <button id="closeModal" class="text-gray-600 hover:text-gray-900">
+            &times;
+          </button>
         </div>
+        <form>
+          <div class="mb-4">
+            <label for="name" class="block text-sm font-medium text-gray-700"
+              >Name</label
+            >
+            <input
+              type="text"
+              id="name"
+              class="mt-1 p-2 border border-gray-300 rounded-md w-full"
+              required
+            />
+          </div>
+          <div class="mb-4">
+            <label for="email" class="block text-sm font-medium text-gray-700"
+              >Email</label
+            >
+            <input
+              type="email"
+              id="email"
+              class="mt-1 p-2 border border-gray-300 rounded-md w-full"
+              required
+            />
+          </div>
+          <div class="mb-4">
+            <label for="rating" class="block text-sm font-medium text-gray-700"
+              >Rating</label
+            >
+            <select
+              id="rating"
+              class="mt-1 p-2 border border-gray-300 rounded-md w-full"
+              required
+            >
+              <option value="5">★★★★★ - 5 Stars</option>
+              <option value="4">★★★★☆ - 4 Stars</option>
+              <option value="3">★★★☆☆ - 3 Stars</option>
+              <option value="2">★★☆☆☆ - 2 Stars</option>
+              <option value="1">★☆☆☆☆ - 1 Star</option>
+            </select>
+          </div>
+          <div class="mb-4">
+            <label for="review" class="block text-sm font-medium text-gray-700"
+              >Review</label
+            >
+            <textarea
+              id="review"
+              class="mt-1 p-2 border border-gray-300 rounded-md w-full"
+              rows="4"
+              required
+            ></textarea>
+          </div>
+          <div class="flex justify-end">
+            <button
+              type="button"
+              class="bg-gray-500 text-white px-4 py-2 rounded shadow hover:bg-gray-600 mr-2"
+              id="cancelButton"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              class="bg-purple-500 text-white px-4 py-2 rounded shadow hover:bg-purple-600"
+            >
+              Submit
+            </button>
+          </div>
+        </form>
+      </div>
     </div>
     <footer class="bg-gray-800 text-white py-6">
       <div class="container mx-auto text-center">
-          <p class="mb-2">© 2024 Cabrental. All rights reserved.</p>
-          <div class="flex justify-center space-x-4">
-              <a href="#" class="hover:text-purple-500">Privacy Policy</a>
-              <a href="#" class="hover:text-purple-500">Terms of Service</a>
-              <a href="contactus.html" class="hover:text-purple-500">Contact Us</a>
-          </div>
+        <p class="mb-2">© 2024 Cabrental. All rights reserved.</p>
+        <div class="flex justify-center space-x-4">
+          <a href="#" class="hover:text-purple-500">Privacy Policy</a>
+          <a href="#" class="hover:text-purple-500">Terms of Service</a>
+          <a href="contactus.html" class="hover:text-purple-500">Contact Us</a>
+        </div>
       </div>
-  </footer>
+    </footer>
 
     <script>
-        // JavaScript to handle modal functionality
-        document.getElementById('reviewButton').addEventListener('click', function () {
-            document.getElementById('reviewModal').classList.remove('hidden');
+      // JavaScript to handle modal functionality
+      document
+        .getElementById("reviewButton")
+        .addEventListener("click", function () {
+          document.getElementById("reviewModal").classList.remove("hidden");
         });
 
-        document.getElementById('closeModal').addEventListener('click', function () {
-            document.getElementById('reviewModal').classList.add('hidden');
+      document
+        .getElementById("closeModal")
+        .addEventListener("click", function () {
+          document.getElementById("reviewModal").classList.add("hidden");
         });
 
-        document.getElementById('cancelButton').addEventListener('click', function () {
-            document.getElementById('reviewModal').classList.add('hidden');
+      document
+        .getElementById("cancelButton")
+        .addEventListener("click", function () {
+          document.getElementById("reviewModal").classList.add("hidden");
         });
 
-        // Optionally, handle form submission here
-        document.querySelector('form').addEventListener('submit', function (e) {
-            e.preventDefault();
-            // Process form data and close modal
-            document.getElementById('reviewModal').classList.add('hidden');
-            alert('Thank you for your review!');
-        });
+      // Optionally, handle form submission here
+      document.querySelector("form").addEventListener("submit", function (e) {
+        e.preventDefault();
+        // Process form data and close modal
+        document.getElementById("reviewModal").classList.add("hidden");
+        alert("Thank you for your review!");
+      });
     </script>
-</body>
-
+  </body>
 </html>
diff --git a/ride.html b/ride.html
index d21b825..76c9cf2 100644
--- a/ride.html
+++ b/ride.html
@@ -188,9 +188,6 @@
               font-size: 18px;
           }
 
-          header {
-              flex-direction: column;
-          }
 
           .navbar {
               flex-direction: column;
@@ -216,8 +213,9 @@
     <div class="video-container">
     <script src="main.js"></script>
     <!-- Header -->
-    <header style="display: flex !important;">
+    <header>
         <a href="#" class="logo"><img src="img/logo.png" alt=""></a>
+        <a href="#" class="CabRental_logo"><img src="img/cabz.png.png" alt=""></a>
         <div class="bx bx-menu" id="menu-icon"></div>
         <ul class="navbar">
             <li><a href="index.html">Home</a></li>
diff --git a/serv.html b/serv.html
index 844758f..64d5d7c 100644
--- a/serv.html
+++ b/serv.html
@@ -5,7 +5,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>CabRental Services</title>
     <link rel="stylesheet" href="serv.css" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
+      integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
+    <link rel="stylesheet" href="style.css" />
     <style>
       /* Add some basic styling for smooth scrolling */
       html {
@@ -15,27 +22,39 @@
   </head>
   <body>
     <header>
-      <h1>CabRental Services</h1>
-    </header>
-    <nav>
-      <ul>
+      <a href="#" class="logo"><img src="img/logo.png" alt="" /></a>
+      <a href="#" class="CabRental_logo"
+        ><img src="img/cabz.png.png" alt=""
+      /></a>
+      <div class="bx bx-menu" id="menu-icon"></div>
+      <ul class="navbar">
         <li><a href="index.html">Home</a></li>
-        <li><a href="#city-transfers">City Transfers</a></li>
-        <li><a href="#hourly-rentals">Hourly Rentals</a></li>
-        <li><a href="#special-occasions">Special Occasions</a></li>
-        <li><a href="contactus.html">Contact Us</a></li>
+        <li><a href="ride.html">Ride</a></li>
+        <li><a href="serv.html">Services</a></li>
+        <li><a href="about.html">About</a></li>
+        <li><a href="review.html">Reviews</a></li>
+        <li><a href="contactus.html">Contact</a></li>
       </ul>
-    </nav>
+      <div class="header-btn">
+        <a href="login.html" class="sign-up">Login</a>
+      </div>
+      <div class="theme-switch" id="theme-switch"></div>
+    </header>
     <main>
       <div id="city-transfers" class="citytransfer">
         <div class="head1">
           <h2>City Transfers</h2>
         </div>
         <p class="citypara">
-          Our city transfer services ensure convenient and reliable transportation to and from airports, hotels, and various locations within the city. We guarantee punctuality and comfort throughout your journey.
+          Our city transfer services ensure convenient and reliable
+          transportation to and from airports, hotels, and various locations
+          within the city. We guarantee punctuality and comfort throughout your
+          journey.
         </p>
         <ul class="key-features">
-          <li>Modern fleet of vehicles including sedans, SUVs, and luxury cars</li>
+          <li>
+            Modern fleet of vehicles including sedans, SUVs, and luxury cars
+          </li>
           <li>Experienced and professional drivers</li>
           <li>Flexible scheduling to suit your travel plans</li>
           <li>Competitive pricing and transparent billing</li>
@@ -44,43 +63,56 @@ <h2>City Transfers</h2>
           <a href="#" class="cta-button">Book Now</a>
         </div>
       </div>
-      
+
       <div class="video">
         <video autoplay muted loop id="background-video">
           <source src="service.mp4" type="video/mp4" />
           Your browser does not support the video tag.
         </video>
       </div>
-      
+
       <div id="hourly-rentals" class="rentally">
         <div class="head2">
           <h2>Hourly Rentals</h2>
         </div>
         <p class="hour">
-          Whether you need transportation for a few hours or an entire day, our hourly rental service provides flexibility and peace of mind. Perfect for business meetings, sightseeing tours, or personal errands.
+          Whether you need transportation for a few hours or an entire day, our
+          hourly rental service provides flexibility and peace of mind. Perfect
+          for business meetings, sightseeing tours, or personal errands.
         </p>
         <ul class="key-features1">
           <li>Choose from a variety of vehicles tailored to your needs</li>
           <li>Customizable routes and stops according to your itinerary</li>
-          <li>Experienced drivers familiar with local routes and attractions</li>
+          <li>
+            Experienced drivers familiar with local routes and attractions
+          </li>
           <li>Affordable rates with no hidden fees</li>
         </ul>
         <div class="card-footer">
           <a href="#" class="cta-button">Get a Quote</a>
         </div>
       </div>
-      
+
       <div id="special-occasions" class="specially">
         <div class="occassion">
           <h2>Special Occasions</h2>
         </div>
         <p class="key-features2">
-          Celebrate your special events in style with our tailored transportation solutions. Whether it's a wedding, anniversary, corporate event, or night out, we ensure a memorable and luxurious experience.
+          Celebrate your special events in style with our tailored
+          transportation solutions. Whether it's a wedding, anniversary,
+          corporate event, or night out, we ensure a memorable and luxurious
+          experience.
         </p>
         <ul class="key-features2">
-          <li>Premium selection of vehicles including limousines and executive vans</li>
+          <li>
+            Premium selection of vehicles including limousines and executive
+            vans
+          </li>
           <li>Personalized service to meet your specific event requirements</li>
-          <li>Professional chauffeurs dressed in attire appropriate for the occasion</li>
+          <li>
+            Professional chauffeurs dressed in attire appropriate for the
+            occasion
+          </li>
           <li>On-time arrivals and impeccable service from start to finish</li>
         </ul>
         <div class="card-footer">
@@ -93,50 +125,50 @@ <h2>Special Occasions</h2>
       <style>
         /* Styling the footer */
         footer {
-            background-color: #ee6d6d;
-            color: white;
-            text-align: center;
-            padding: 5px;
-            display: flex;  /* Flexbox */
-            justify-content: center;  /* Center horizontally */
-            align-items: center; 
-            position: center;
-            bottom: 0;
-            width: 100%;
-            font-size: 14px;
-            height: 30px;
-            line-height: 30px;
-            transform: translateY(100%);  /* Initially hidden */
-            transition: transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);  /* Smooth animation */
+          background-color: #ee6d6d;
+          color: white;
+          text-align: center;
+          padding: 5px;
+          display: flex; /* Flexbox */
+          justify-content: center; /* Center horizontally */
+          align-items: center;
+          position: center;
+          bottom: 0;
+          width: 100%;
+          font-size: 14px;
+          height: 30px;
+          line-height: 30px;
+          transform: translateY(100%); /* Initially hidden */
+          transition: transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smooth animation */
         }
 
-
         body {
-            margin: 0;
-            padding-bottom: 80px;  /* Space for the footer */
+          margin: 0;
+          padding-bottom: 80px; /* Space for the footer */
         }
-    </style>
+      </style>
       <script>
-       let lastScrollTop = 0;
+        let lastScrollTop = 0;
         const footer = document.querySelector("footer");
 
-        window.addEventListener("scroll", function() {
-            let currentScroll = window.pageYOffset || document.documentElement.scrollTop;
+        window.addEventListener("scroll", function () {
+          let currentScroll =
+            window.pageYOffset || document.documentElement.scrollTop;
 
-            if (currentScroll > lastScrollTop) {
-                // Scrolling down - footer should appear smoothly
-                footer.style.transform = "translateY(0)";
-            } else {
-                // Scrolling up - hide the footer smoothly
-                footer.style.transform = "translateY(100%)";
-            }
+          if (currentScroll > lastScrollTop) {
+            // Scrolling down - footer should appear smoothly
+            footer.style.transform = "translateY(0)";
+          } else {
+            // Scrolling up - hide the footer smoothly
+            footer.style.transform = "translateY(100%)";
+          }
 
-            lastScrollTop = currentScroll <= 0 ? 0 : currentScroll;
+          lastScrollTop = currentScroll <= 0 ? 0 : currentScroll;
         });
-    </script>
+      </script>
     </footer>
     <div id="topbtn" class="topbtn">
       <a class="gotopbtn" href="#"><i class="fa-solid fa-angles-up"></i></a>
-  </div>
+    </div>
   </body>
 </html>
diff --git a/style.css b/style.css
index c8e99fc..426a53d 100644
--- a/style.css
+++ b/style.css
@@ -52,22 +52,20 @@ header {
 }
 
 .logo img {
-    width: 60px;
-    border-radius: 10px; /* This creates 10px rounded corners */
-  }
-  .CabRental_logo img {
-       margin: 9px 30px 0px 0px;
-  }
-
+  width: 60px;
+  border-radius: 10px; /* This creates 10px rounded corners */
+}
+.CabRental_logo img {
+  margin: 9px 30px 0px 0px;
+}
 
-  /* header nav {
+/* header nav {
 
   width: 60px;
   border-radius: 60px;
    This creates 10px rounded corners 
 }*/
 
-
 /* header nav {
 
     padding: 20px 40px 20px 100px;
@@ -131,7 +129,7 @@ header nav .nav-right .header-btn > div input {
   outline: none;
   cursor: pointer;
   font-size: 16px;
-  transition: all .5s ease-in-out;
+  transition: all 0.5s ease-in-out;
 }
 
 .sign-up {
@@ -199,7 +197,6 @@ header nav .nav-right .header-btn > div input {
     background: rgb(211, 10, 10);
 }*/
 
-
 .navbar {
   display: flex;
 }
@@ -234,24 +231,21 @@ header nav .nav-right .header-btn > div input {
 Added hover and color changes in footer 
 */
 li a {
-  color: inherit;  /* Default color (will inherit the parent's color) */
-  text-decoration: none;  /* Removes underline from the link */
-  transition: color 0.3s ease;  /* Adds a smooth transition effect */
+  color: inherit; /* Default color (will inherit the parent's color) */
+  text-decoration: none; /* Removes underline from the link */
+  transition: color 0.3s ease; /* Adds a smooth transition effect */
 }
 
 li a:hover {
-  color: rgb(182, 170, 170);  /* Changes the text color to black on hover */
+  color: rgb(182, 170, 170); /* Changes the text color to black on hover */
 }
 
-
-
-
 .navbar {
   display: flex;
   justify-content: space-between;
   /* Adjust alignment as needed */
   align-items: center;
-  background: #eeeff1;
+  /* background: #fff; */
   /* Example background color */
   padding: 15px 100px;
   /* Example padding */
@@ -278,7 +272,7 @@ li a:hover {
 }
 
 .navbar a::after {
-  content: '';
+  content: "";
   position: absolute;
   left: 0;
   bottom: -3px;
@@ -286,7 +280,7 @@ li a:hover {
   height: 2px;
   background: #1e1e1e;
   /* Example underline color */
-  transition: width .3s ease-in-out;
+  transition: width 0.3s ease-in-out;
 }
 
 .navbar a:hover::after {
@@ -332,7 +326,6 @@ li a:hover {
   background: rgb(211, 10, 10);
 }
 
-
 .home {
   width: 100%;
   min-height: 100vh;
@@ -423,7 +416,6 @@ li a:hover {
 #bookNow:hover {
   background-color: orangered;
   transform: scale(1.1);
-
 }
 
 /* .form-container form {
@@ -477,7 +469,7 @@ li a:hover {
   background: rgb(211, 15, 15);
 }
 
-.icon{
+.icon {
   max-width: 4rem;
   max-height: 4rem;
 }
@@ -568,30 +560,26 @@ li a:hover {
 }
 
 .ride {
-
-
-    display: flex;
-    align-items: center;
-    grid-template-columns: repeat(auto-fit, minmax(250px, auto));
-    gap: 1rem;
-    margin-top: 0rem;
-
-
+  display: flex;
+  align-items: center;
+  grid-template-columns: repeat(auto-fit, minmax(250px, auto));
+  gap: 1rem;
+  margin-top: 0rem;
 }
-.ride span{
+.ride span {
   font-size: 40px;
   font-weight: 800;
 }
-.ride h1{
+.ride h1 {
   font-size: 30px;
   font-weight: 500;
   color: rgb(211, 15, 15);
 }
-.ride h2{
+.ride h2 {
   font-size: 30px;
-  font-family:Arial, Helvetica, sans-serif;
+  font-family: Arial, Helvetica, sans-serif;
 }
-.ride p{
+.ride p {
   font-size: 18px;
   padding-top: 20px;
 }
@@ -1158,7 +1146,7 @@ FAQ Section */ .container_1 {
   justify-content: center;
   align-items: center;
   border-radius: 50%;
-  color:black;
+  color: black;
   flex-shrink: 0;
   font-weight: 900;
 }
@@ -1182,8 +1170,6 @@ FAQ Section */ .container_1 {
 footer p {
   margin: 10px 0 0 0;
   text-align: center;
-
-
 }
 
 .topbtn {
@@ -1197,10 +1183,9 @@ footer p {
   line-height: 50px;
   user-select: none;
   font-size: 22px;
-  border-radius: 50%
+  border-radius: 50%;
 }
 
-
 /* Here are the styles for the theme toggel  */
 .theme-switch {
   display: inline-block;
@@ -1215,7 +1200,7 @@ footer p {
 }
 
 .theme-switch::before {
-  content: '';
+  content: "";
   position: absolute;
   top: 3px;
   left: 3px;
@@ -1225,7 +1210,7 @@ footer p {
   background-repeat: no-repeat;
   background-position: center;
   transition: left 0.3s ease-in-out, background-image 0.3s ease-in-out;
-  background-image: url('Assets/moon.png');
+  background-image: url("Assets/moon.png");
 }
 
 .theme-switch.dark-theme {
@@ -1234,7 +1219,7 @@ footer p {
 
 .theme-switch.dark-theme::before {
   left: 33px;
-  background-image: url('Assets/sun.png');
+  background-image: url("Assets/sun.png");
 }
 /* Index..html dark styles */
 .dark-mode * {
@@ -1264,7 +1249,7 @@ footer p {
 .dark-mode .header-btn .sign-up:hover {
   background: #474fa1;
 }
-.dark-mode .carweb{
+.dark-mode .carweb {
   content: url("Car\ Website\ dark\ –\ 1@2x.png\ .png");
   left: 1400px;
   width: 100%;
@@ -1275,10 +1260,10 @@ footer p {
 .dark-mode .services-container .box {
   box-shadow: 1px 4px 41px rgb(200 99 99);
 }
-.dark-mode .services-container .box  h2{
+.dark-mode .services-container .box h2 {
   color: #474fa0;
 }
-.dark-mode .services-container .box  .btn{
+.dark-mode .services-container .box .btn {
   background: rgb(211, 15, 15);
 }
 .dark-mode .services-container .box .btn:hover {
@@ -1305,20 +1290,24 @@ footer p {
 .dark-mode .feature p {
   color: #ffebeb;
 }
-.dark-mode .accordion__title, .faq h1{
+.dark-mode .accordion__title,
+.faq h1 {
   color: #b1c4fa;
 }
-.dark-mode .accordion__wrapper{
+.dark-mode .accordion__wrapper {
   box-shadow: 11px 1px 56px 0px rgb(153 173 255 / 95%);
 }
-.dark-mode [class^="ri-"], [class*=" ri-"] {
+.dark-mode [class^="ri-"],
+[class*=" ri-"] {
   color: white;
   background-color: black;
 }
 .dark-mode .accordion__header:hover {
   background-color: #000000;
 }
-.dark-mode input[type="text"], input[type="email"], input[type="tel"] {
+.dark-mode input[type="text"],
+input[type="email"],
+input[type="tel"] {
   width: 100%;
   padding: 10px;
   margin-bottom: 20px;
@@ -1339,36 +1328,36 @@ footer p {
 
 .booking-form .form-group input,
 .booking-form .form-group select {
-    width: 100%;
-    padding: 10px;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    font-size: 16px;
-    background-color: var(--input-bg-color);
-    color: var(--input-text-color);
-    transition: background-color 0.3s, color 0.3s;
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-size: 16px;
+  background-color: var(--input-bg-color);
+  color: var(--input-text-color);
+  transition: background-color 0.3s, color 0.3s;
 }
 
 /* Dark mode styles */
 body.dark-mode {
-    --input-bg-color: #333;
-    --input-text-color: #fff;
+  --input-bg-color: #333;
+  --input-text-color: #fff;
 }
 
 body:not(.dark-mode) {
-    --input-bg-color: #fff;
-    --input-text-color: #000;
+  --input-bg-color: #fff;
+  --input-text-color: #000;
 }
 
 /* Additional dark mode styles for input fields */
 body.dark-mode .booking-form .form-group input,
 body.dark-mode .booking-form .form-group select {
-    background-color: #333;
-    color: #fff;
-    border-color: #555;
+  background-color: #333;
+  color: #fff;
+  border-color: #555;
 }
 
 body.dark-mode .booking-form .form-group input::placeholder,
 body.dark-mode .booking-form .form-group select::placeholder {
-    color: #aaa;
-}
\ No newline at end of file
+  color: #aaa;
+}

From 347cf173bfd30fd4a5900a0bad99c7ce3bdbd8a5 Mon Sep 17 00:00:00 2001
From: Subin Shakya <subin12.shakya@gmail.com>
Date: Tue, 15 Oct 2024 13:16:49 +0545
Subject: [PATCH 2/2] added uniform navbar across pages

---
 review.html | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/review.html b/review.html
index 2daf974..ae929cf 100644
--- a/review.html
+++ b/review.html
@@ -227,8 +227,7 @@ <h1 class="text-4xl font-bold mb-2">Cabrental Reviews</h1>
     <!-- Review Form Modal -->
     <div
       id="reviewModal"
-      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden"
-    >
+      class="fixed inset-0 bg-black bg-opacity-50 items-center justify-center "    >
       <div class="bg-white rounded-lg p-6 w-full max-w-lg">
         <div class="flex justify-between items-center mb-4">
           <h2 class="text-xl font-bold">Leave a Review</h2>