From 678d74d96682bf4ca7f5fbbbfbf20549e8c7db8e Mon Sep 17 00:00:00 2001
From: Sumit Kumar <98510898+07sumit1002@users.noreply.github.com>
Date: Sun, 27 Oct 2024 12:05:40 +0530
Subject: [PATCH] Revert "added dark mode in about us page and services page"

---
 about.html | 456 +++++++++++++++--------------------------------------
 serv.html  | 300 +++++++----------------------------
 2 files changed, 189 insertions(+), 567 deletions(-)

diff --git a/about.html b/about.html
index 2dd2c54..79bbcb0 100644
--- a/about.html
+++ b/about.html
@@ -18,15 +18,6 @@
     </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>
-          <label class="theme-switch" for="checkbox">
-            <input type="checkbox" id="checkbox" />
-            <div class="slider round"></div>
-        </label>
-
           <li><a href="ride.html">Ride</a></li>
           <li><a href="serv.html">Services</a></li>
           <li><a href="#about.html">About</a></li>
@@ -40,14 +31,11 @@
           <li>
             <div class="theme-switch" id="theme-switch"></div>
           </li>
-
       </ul>
   </nav>
   
   
     <style>
-
-      
       .logo img {
             height: 60px;
             padding-right: 40px;
@@ -99,314 +87,157 @@
         background-color: #eeeff1; /* Background color for the navbar */
     }
 
-body {
-    transition: background-color 0.5s, color 0.5s;
-}
-
-.theme-switch-wrapper {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
-}
-
-.theme-switch {
-    display: inline-block;
-    height: 34px;
-    position: relative;
-    width: 60px;
-}
-
-.theme-switch input {
-    display: none;
-}
-
-.slider {
-    background-color: #ccc;
-    border-radius: 34px;
-    bottom: 0;
-    cursor: pointer;
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-    transition: 0.4s;
-}
-
-.slider:before {
-    background-color: white;
-    border-radius: 50%;
-    bottom: 4px;
-    content: "";
-    height: 26px;
-    left: 4px;
-    position: absolute;
-    transition: 0.4s;
-    width: 26px;
-}
-
-/* Toggle effect */
-input:checked + .slider {
-    background-color: #2196F3;
-}
+    .navbar ul li {
+        margin: 0 10px; /* Spacing between individual links */
+    }
 
-/* Move the slider to the right when checked */
-input:checked + .slider:before {
-    transform: translateX(26px);
-}
+    .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")
+          no-repeat center center/cover;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: #fff;
+        text-align: center;
+        position: relative;
+        box-shadow: inset 0 0 10px #000;
+      }
 
-/* Dark mode styles */
-body.dark-mode {
-    background-color: #121212;
-    color: #ffffff;
-}
+      .hero::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.5);
+      }
 
-/* Custom icon for the dark mode */
-.slider:after {
-    content: '🌙';
-    position: absolute;
-    right: 10px;
-    top: 7px;
-    font-size: 18px;
-    color: #ffffff;
-}
+      .hero h1 {
+        font-size: 4em;
+        margin: 0;
+        position: relative;
+        z-index: 1;
+        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
+        color: #e64825;
+        text-align: center;
+      }
 
-input:checked + .slider:after {
-    content: '☀️';
-    position: absolute;
-    left: 10px;
-    color: #000000;
-}
+      .container {
+        max-width: 1000px; /* Adjusted for smaller width */
+        margin: 0 auto;
+        padding: 20px 10px; /* Reduced padding */
+      }
 
-/* Dark mode styles */
-body.dark-mode {
-    background-color: #121212;
-    color: #ffffff;
-}
+      h2 {
+        color: #333;
+        margin-bottom: 20px;
+        text-align: center; /* Center-aligned headings */
+        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+      }
 
-/* Dark mode for navbar */
-body.dark-mode .navbar {
-    background-color: #000000; /* Dark background for navbar */
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); /* Darker shadow */
-}
+      p {
+        color: #555;
+        margin-bottom: 20px;
+        text-align: justify; /* Justify text */
+      }
 
-body.dark-mode .navbar ul {
-    background-color: #000000; /* Dark background for navbar menu */
-}
+      ul {
+        list-style: none;
+        padding: 0;
+      }
 
-body.dark-mode .navbar ul li a {
-    color: #ffffff; /* Light text color for navbar links */
-}
+      .values-principles ul li {
+        background: linear-gradient(145deg, #b8e7af, hsl(129, 28%, 73%));
+        margin: 10px 0;
+        padding: 15px 20px;
+        border-radius: 5px;
+        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1),
+          inset 0 1px 3px rgba(255, 255, 255, 0.1);
+        transition: transform 0.3s, box-shadow 0.3s;
+      }
 
-body.dark-mode .navbar ul li a:hover {
-    background-color: #090909; /* Slightly lighter background on hover */
-    color: #ffffff; /* Ensure text color stays light */
-}
+      ul li:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2),
+          inset 0 1px 3px rgba(255, 255, 255, 0.3);
+      }
 
-body.dark-mode .navbar ul li a:active,
-body.dark-mode .navbar ul li a:focus {
-    border-bottom: 3px solid white; /* White border for active link */
-}
+      .section-img {
+        margin: 40px 0;
+        text-align: center;
+      }
 
+      .section-img img {
+        max-width: 90%; /* Adjusted for smaller width */
+        height: auto;
+        border-radius: 10px;
+        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+        transition: transform 0.3s, box-shadow 0.3s;
+      }
 
+      .section-img img:hover {
+        transform: scale(1.05);
+        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+      }
 
+      .highlight {
+        color: #d32f2f;
+        font-weight: bold;
+      }
+      .container section {
+        margin-bottom: 50px; /* Space between sections */
+        padding: 20px;
+        border-radius: 5px;
+        border-top: 2px solid #ddd; /* Line between sections */
+      }
       
-body {
-  font-family: "Poppins", sans-serif;
-  margin: 0;
-  padding: 0;
-  background-color: #f9f9f9;
-  color: #1f1e1e;
-  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 {
-  display: flex;
-  justify-content: space-around;
-  list-style: none;
-  padding: 10px;
-  background-color: #e6e4e4;
-}
-
-.navbar ul li {
-  margin: 0 10px;
-}
-
-
-/* Light Mode (default) */
-.navbar ul li a {
-    color: #000000; /* Black text */
-    background-color: #ffffff; /* White background */
-    text-decoration: none;
-    border-radius: 5px;
-    padding: 10px;
-    transition: background-color 0.3s, color 0.3s, transform 0.3s;
-}
-
-.navbar ul li a:hover {
-    background-color: #f7f5f4; /* Slightly different white on hover */
-    color: #000000; /* Keep black text on hover in light mode */
-    transform: scale(1.1);
-}
-
-/* Dark Mode */
-body.dark-mode .navbar ul li a {
-    color: #ffffff; /* White text */
-    background-color: #000000; /* Black background */
-}
-
-body.dark-mode .navbar ul li a:hover {
-    color: #007bff; /* Blue text on hover in dark mode */
-    background-color: #000000; /* Keep black background */
-    transform: scale(1.1);
-}
-
-
-.navbar ul li a:active,
-.navbar ul li a:focus {
-  border-bottom: 3px solid black;
-}
-
-.hero {
-  height: 60vh;
-  background: url("https://autotrans.com/wp-content/uploads/2021/04/AdobeStock_95320493-2048x1367.jpeg")
-    no-repeat center center/cover;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: #fff;
-  text-align: center;
-  position: relative;
-  box-shadow: inset 0 0 10px #000;
-}
-
-.hero::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-}
-
-.hero h1 {
-  font-size: 4em;
-  margin: 0;
-  position: relative;
-  z-index: 1;
-  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
-  color: #e64825;
-  text-align: center;
+      #company-overview {
+        background-color: #557d80;
+      }
+      
+      #mission-vision {
+        background-color: #d4c6c6;
+      }
+      #company-overview p,
+      #mission-vision p {
+  font-weight: bold;
+  color: #080101;
 }
 
 .about-us-img {
-  width: 1200px;
+  width: 1200px; /* Adjust size as needed */
   height: 400px;
-  border-radius: 10px;
-  position: absolute;
-  bottom: 10px;
-  box-shadow: 0 4px 10px rgba(12, 10, 10, 0.2);
+  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;
-}
-
-.container {
-  max-width: 1000px;
-  margin: 0 auto;
-  padding: 20px 10px;
-}
-
-h2 {
-  color: #333232;
-  margin-bottom: 20px;
-  text-align: center;
-  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-}
-
-p {
-  color: #555;
-  margin-bottom: 20px;
-  text-align: justify;
-}
-
-ul {
-  list-style: none;
-  padding: 0;
-}
-
-.values-principles ul li {
-  background: linear-gradient(145deg, #b8e7af, hsl(129, 28%, 73%));
-  margin: 10px 0;
-  padding: 15px 20px;
-  border-radius: 5px;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1),
-    inset 0 1px 3px rgba(255, 255, 255, 0.1);
-  transition: transform 0.3s, box-shadow 0.3s;
-}
-
-ul li:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2),
-    inset 0 1px 3px rgba(255, 255, 255, 0.3);
-}
-
-.section-img {
-  margin: 40px 0;
-  text-align: center;
-}
-
-.section-img img {
-  max-width: 90%;
-  height: auto;
-  border-radius: 10px;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
-  transition: transform 0.3s, box-shadow 0.3s;
-}
-
-.section-img img:hover {
-  transform: scale(1.05);
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
-}
-
-.highlight {
-  color: #d32f2f;
-  font-weight: bold;
-}
-
-.container section {
-  margin-bottom: 50px;
-  padding: 20px;
-  border-radius: 5px;
-  border-top: 2px solid #ddd;
-}
-
-#company-overview {
-  background-color: #557d80;
-}
-
-#mission-vision {
-  background-color: #d4c6c6;
-}
-
-#company-overview p,
-#mission-vision p {
-  font-weight: bold;
-  color: #080101;
+  z-index: -1; /* Ensures it stays above the overlay */
 }
-
     </style>
   </head>
   <body>
@@ -506,30 +337,5 @@ <h3 style="margin: 0;">CabRental</h3>
     </div>
   </div>
 </footer>
-<script>
-const toggleSwitch = document.querySelector('#checkbox');
-const currentTheme = localStorage.getItem('theme');
-
-// Load saved theme
-if (currentTheme) {
-    document.body.classList.add(currentTheme);
-
-    if (currentTheme === 'dark-mode') {
-        toggleSwitch.checked = true;
-    }
-}
-
-// Toggle between dark and light mode
-toggleSwitch.addEventListener('change', function() {
-    if (this.checked) {
-        document.body.classList.add('dark-mode');
-        localStorage.setItem('theme', 'dark-mode');
-    } else {
-        document.body.classList.remove('dark-mode');
-        localStorage.setItem('theme', 'light-mode');
-    }
-});
-
-</script>
   </body>
 </html>
diff --git a/serv.html b/serv.html
index 7cb154d..28b20da 100644
--- a/serv.html
+++ b/serv.html
@@ -1,12 +1,5 @@
 <!DOCTYPE html>
 <html lang="en">
-
-
-<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>
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -14,81 +7,13 @@
     <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" />
-
     <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:hover {
-            transform: translateY(-10px);
-            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
-        }
-
-        .logo {
-            height: 40px;
-            width: auto;
-        }
-
-        .text-lg {
-            padding-left: 10px;
-        }
-
-        .bg-gradient-to-r {
-            background: linear-gradient(90deg, #6d28d9 0%, #4f46e5 100%);
-        }
-
-        .rating-star {
-            color: #fbbf24;
-        }
+      /* Add some basic styling for smooth scrolling */
+      html {
+        scroll-behavior: smooth;
+      }
     </style>
   </head>
-
-<body class="bg-gray-100 font-sans leading-normal tracking-normal">
-
-    <!-- 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>
-=======
-  </head>
   <body>
     <header>
       <a href="index.html" class="logo"><img src="img/logo.png" alt=""></a>
@@ -138,172 +63,60 @@ <h2>City Transfers</h2>
         <div class="head2">
           <h2>Hourly Rentals</h2>
         </div>
-    </nav>
-
-    <!-- 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>
+        <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.
+        </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>Affordable rates with no hidden fees</li>
+        </ul>
+        <div class="card-footer">
+          <a href="#" class="cta-button">Get a Quote</a>
         </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>
-            <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>
-            <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>
-            <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>
-            <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>
-            <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>
+      
+      <div id="special-occasions" class="specially">
+        <div class="occassion">
+          <h2>Special Occasions</h2>
         </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>
+        <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.
+        </p>
+        <ul class="key-features2">
+          <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>On-time arrivals and impeccable service from start to finish</li>
+        </ul>
+        <div class="card-footer">
+          <a href="#" class="cta-button">Contact Us</a>
         </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>
       </div>
-  </footer>
-
-    <script>
-        // 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('cancelButton').addEventListener('click', function () {
-            document.getElementById('reviewModal').classList.add('hidden');
-        });
+    </main>
+    <footer>
+      <p>&copy; 2024 CabRental. All rights reserved.</p>
+      <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 */
+        }
 
-        // 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!');
 
         body {
             margin: 0;
@@ -329,6 +142,9 @@ <h2 class="text-xl font-bold">Leave a Review</h2>
             lastScrollTop = currentScroll <= 0 ? 0 : currentScroll;
         });
     </script>
-</body>
-
+    </footer>
+    <div id="topbtn" class="topbtn">
+      <a class="gotopbtn" href="#"><i class="fa-solid fa-angles-up"></i></a>
+  </div>
+  </body>
 </html>