From b05a93e1d43c03cc5ed1dd00d729f09c2cfc1f96 Mon Sep 17 00:00:00 2001
From: unknown <shraddha.dagdu11@gmail.com>
Date: Mon, 15 Jul 2024 08:40:00 +0530
Subject: [PATCH 1/2] The FAQ link in services section now correctly redirects
 to the FAQ section.

---
 Html-files/services.html | 754 +++++++++++++-------------------
 index.html               | 379 +++++++----------
 style.css                | 900 ++++++++++++++++++++-------------------
 3 files changed, 919 insertions(+), 1114 deletions(-)
diff --git a/Html-files/services.html b/Html-files/services.html
index 9697819f..d8764451 100644
--- a/Html-files/services.html
+++ b/Html-files/services.html
@@ -1,39 +1,19 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+
+<head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Services - Food Ordering Website</title>
     <link rel="shortcut icon" href="https://pnghq.com/wp-content/uploads/foodie-logo-png-clear-background-768x275.png" type="image/x-icon">
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
-      integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
-      crossorigin="anonymous"
-      referrerpolicy="no-referrer"
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer"
     />
     <!-- <link rel="icon" href="../Foodie_Favicon.png" type="image/x-icon" /> -->
 
-    <link
-      href="https://fonts.googleapis.com/css2?family=Fuggles&family=Mooli&family=Oswald:wght@600&family=Roboto:wght@100;300&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css?family=Baloo+Bhai|Bree+Serif&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
-      rel="stylesheet"
-      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
-      crossorigin="anonymous"
-    />
-    <script
-      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
-      integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
-      crossorigin="anonymous"
-      defer
-    ></script>
+    <link href="https://fonts.googleapis.com/css2?family=Fuggles&family=Mooli&family=Oswald:wght@600&family=Roboto:wght@100;300&display=swap" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css?family=Baloo+Bhai|Bree+Serif&display=swap" rel="stylesheet" />
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" />
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous" defer></script>
     <link rel="stylesheet" href="../Css-files/content.css" />
     <link rel="stylesheet" href="../Css-files/services.css" />
     <link rel="stylesheet" href="../Css-files/services1.css" />
@@ -43,7 +23,7 @@
     <link rel="stylesheet" type="text/css" href="../Css-files/services1.css" />
     <link rel="stylesheet" href="../Css-files/scroll-top-button.css" />
     <style>
-         #progressBar {
+        #progressBar {
             position: fixed;
             top: 0;
             left: 0;
@@ -53,321 +33,238 @@
             z-index: 9999;
         }
     </style>
-  </head>
+</head>
+
+<body>
+    <!-- Progress bar -->
+    <div id="progressBar"></div>
+    <script>
+        window.onscroll = function() {
+            var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
+            var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+            var scrolled = (winScroll / height) * 100;
+            document.getElementById("progressBar").style.width = scrolled + "%";
+        };
+    </script>
+    <!-- end -->
 
-  <body>
-        <!-- Progress bar -->
-        <div id="progressBar"></div>
-        <script>
-            window.onscroll = function () {
-                var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
-                var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
-                var scrolled = (winScroll / height) * 100;
-                document.getElementById("progressBar").style.width = scrolled + "%";
-            };
-        </script>
-        <!-- end -->
-    
     <div class="head_container">
-      <div id="loader-wrapper">
-        <div id="loader"></div>
-        <div class="loader-section section-left"></div>
-        <div class="loader-section section-right"></div>
-      </div>
-      <nav class="navbar navbar-expand-lg fixed-top">
-        <div class="container-fluid">
-          <a href="../index.html" class="navbar-brand opacity-75 flex-fill">
-            <img src="../Images/logo/Foodielogo.png" height="40" />
-          </a>
-          <button
-            class="navbar-toggler order-1"
-            type="button"
-            data-bs-toggle="collapse"
-            data-bs-target=".hamburgeritems"
-            aria-controls="navbarNav"
-            aria-expanded="false"
-            aria-label="Toggle navigation"
-          >
+        <div id="loader-wrapper">
+            <div id="loader"></div>
+            <div class="loader-section section-left"></div>
+            <div class="loader-section section-right"></div>
+        </div>
+        <nav class="navbar navbar-expand-lg fixed-top">
+            <div class="container-fluid">
+                <a href="../index.html" class="navbar-brand opacity-75 flex-fill">
+                    <img src="../Images/logo/Foodielogo.png" height="40" />
+                </a>
+                <button class="navbar-toggler order-1" type="button" data-bs-toggle="collapse" data-bs-target=".hamburgeritems" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
           </button>
-          <div
-            class="collapse navbar-collapse hamburgeritems centerdiv order-2 order-lg-0"
-          >
-            <ul class="navbar-nav center-links">
-              <li class="nav-item">
-                <a class="nav-link" aria-current="page" href="../index.html"
-                  ><i class="fa-solid fa-house"></i> Home</a
+                <div class="collapse navbar-collapse hamburgeritems centerdiv order-2 order-lg-0">
+                    <ul class="navbar-nav center-links">
+                        <li class="nav-item">
+                            <a class="nav-link" aria-current="page" href="../index.html"><i class="fa-solid fa-house"></i> Home</a
                 >
               </li>
               <li class="nav-item">
                 <a class="nav-link" href="../Html-files/menu.html"><i class="fa-solid fa-bars"></i> Menu</a>
-              </li>
-              <li class="nav-item dropdown">
-                <a
-                  class="nav-link active services"
-                  href="../Html-files/services.html"
-                  aria-expanded="false"
-                  ><i class="fa-solid fa-gear"></i>  Services</a
+                        </li>
+                        <li class="nav-item dropdown">
+                            <a class="nav-link active services" href="../Html-files/services.html" aria-expanded="false"><i class="fa-solid fa-gear"></i>  Services</a
                 >
                 <ul class="dropdown-menu">
                   <li>
                     <a class="dropdown-item" href="#">Ordering options</a>
-                  </li>
-                  <li><a class="dropdown-item" href="#">Order Tracking</a></li>
-                  <li>
-                    <a class="dropdown-item" href="#">Customer Support</a>
-                  </li>
-                  <li><a class="dropdown-item" href="#">FAQS</a></li>
-                </ul>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link" href="../Html-files/contact.html"
-                  ><i class="fa-solid fa-phone"></i> Contact Us</a
+                        </li>
+                        <li><a class="dropdown-item" href="#">Order Tracking</a></li>
+                        <li>
+                            <a class="dropdown-item" href="#">Customer Support</a>
+                        </li>
+                        <li><a class="dropdown-item" href="../index.html#FAQ">FAQS</a></li>
+                    </ul>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="../Html-files/contact.html"><i class="fa-solid fa-phone"></i> Contact Us</a
                 >
               </li>
               <li class="nav-item">
                 <a class="nav-link" href="../Html-files/offers.html"><i class="fa-solid fa-tag"></i> Offers</a>
-              </li>
-            </ul>
-          </div>
-          <div class="order-0 ml-auto p-2">
-            <img
-              class="nav-link"
-              src="../Images/navbar/sun.png"
-              id="theme-toggle-icon"
-              alt="theme toggler button"
-            />
-          </div>
-          <div class="collapse navbar-collapse hamburgeritems enddiv order-3">
-            <ul class="navbar-nav end-links">
-              <li class="nav-item">
-                <a class="nav-link" href="../Html-files/login.html"><i class="fa-solid fa-right-to-bracket"></i> Login</a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link" href="../Html-files/signup.html"><i class="fa-solid fa-user"></i> Sign-Up</a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link" href="../Html-files/cart.html">
+                    </li>
+                    </ul>
+                </div>
+                <div class="order-0 ml-auto p-2">
+                    <img class="nav-link" src="../Images/navbar/sun.png" id="theme-toggle-icon" alt="theme toggler button" />
+                </div>
+                <div class="collapse navbar-collapse hamburgeritems enddiv order-3">
+                    <ul class="navbar-nav end-links">
+                        <li class="nav-item">
+                            <a class="nav-link" href="../Html-files/login.html"><i class="fa-solid fa-right-to-bracket"></i> Login</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="../Html-files/signup.html"><i class="fa-solid fa-user"></i> Sign-Up</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="../Html-files/cart.html">
                   Cart
                   <i class="fa-solid fa-cart-shopping"></i>
                 </a>
-              </li>
-            </ul>
-          </div>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </nav>
+        <div class="mainhead">
+            <h1>SERVICES</h1>
         </div>
-      </nav>
-      <div class="mainhead">
-        <h1>SERVICES</h1>
-      </div>
 
-      <div class="container">
-        <div class="card" style="--clr: #009688">
-          <div class="imgbx">
-            <img
-              src="https://destinationlesstravel.com/wp-content/uploads/2023/09/A-selection-of-local-cuisine-as-seen-on-a-food-tour-in-Lima-Peru-that-we-got-to-try.jpg.webp"
-            />
-          </div>
-          <div class="content">
-            <h2>Food Tour and Experiences</h2>
-            <a href="#">Take Experience</a>
-          </div>
-        </div>
-        <div class="card" style="--clr: #ff3e7f">
-          <div class="imgbx">
-            <img
-              src="https://www.kitchenmantra.com/blog/wp-content/uploads/2020/11/Best-corporate-caterers-in-Noida.jpg"
-            />
-          </div>
-          <div class="content">
-            <h2>Catering Services for Events</h2>
-            <a href="#">Book Catering</a>
-          </div>
-        </div>
-        <div class="card" style="--clr: #03a9f4">
-          <div class="imgbx">
-            <img
-              src="https://hips.hearstapps.com/hmg-prod/images/best-meal-delivery-services-territory-foods-1630350085.jpg?crop=0.999866844207723xw:1xh;center,top&resize=980:*"
-            />
-          </div>
-          <div class="content">
-            <h2>Meal Delivery Subscription</h2>
-            <a href="subscription.html">Take Subscription</a>
-          </div>
+        <div class="container">
+            <div class="card" style="--clr: #009688">
+                <div class="imgbx">
+                    <img src="https://destinationlesstravel.com/wp-content/uploads/2023/09/A-selection-of-local-cuisine-as-seen-on-a-food-tour-in-Lima-Peru-that-we-got-to-try.jpg.webp" />
+                </div>
+                <div class="content">
+                    <h2>Food Tour and Experiences</h2>
+                    <a href="#">Take Experience</a>
+                </div>
+            </div>
+            <div class="card" style="--clr: #ff3e7f">
+                <div class="imgbx">
+                    <img src="https://www.kitchenmantra.com/blog/wp-content/uploads/2020/11/Best-corporate-caterers-in-Noida.jpg" />
+                </div>
+                <div class="content">
+                    <h2>Catering Services for Events</h2>
+                    <a href="#">Book Catering</a>
+                </div>
+            </div>
+            <div class="card" style="--clr: #03a9f4">
+                <div class="imgbx">
+                    <img src="https://hips.hearstapps.com/hmg-prod/images/best-meal-delivery-services-territory-foods-1630350085.jpg?crop=0.999866844207723xw:1xh;center,top&resize=980:*" />
+                </div>
+                <div class="content">
+                    <h2>Meal Delivery Subscription</h2>
+                    <a href="subscription.html">Take Subscription</a>
+                </div>
+            </div>
         </div>
-      </div>
     </div>
     <section class="service_container">
-      <section class="testimonalsection" id="testimonal">
-        <div class="section1">
-          <hr />
-          <h2
-            class="section__title"
-            data-aos="zoom-out-up"
-            data-aos-duration="1000"
-            data-aos-offset="170"
-            data-aos-easing="ease-in-out"
-          >
-            CUSTOMER OPINION
-          </h2>
-          <hr />
-        </div>
-        <div
-          class="testimonal__container"
-          data-aos="zoom-in"
-          data-aos-duration="1000"
-          data-aos-offset="170"
-          data-aos-easing="ease-in-out"
-        >
-          <div class="testimonal__swiper">
-            <div>
-              <article class="testimonal__card">
-                <img
-                  src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cGVyc29ufGVufDB8fDB8fHww"
-                  alt=""
-                  class="testimonal__image"
-                  style="border-radius: 50%; object-fit: cover"
-                />
-                <h2 class="testimonal__title">Riya Jain</h2>
-                <p class="testimonal__description">
-                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus
-                  voluptatibus quidem nostrum neque molestiae fugiat id ex
-                  consequatur atque quia quisquam hic accusamus dolores
-                  sapiente, ipsum maxime, quo odit ut.
-                </p>
-
-                <div class="testimonal__stars">
-                  <i class="fa-solid fa-star"></i>
-                  <i class="fa-solid fa-star"></i>
-                  <i class="fa-solid fa-star"></i>
-                  <i class="fa-solid fa-star"></i>
-                  <i class="fa-solid fa-star-half-stroke"></i>
-                </div>
-              </article>
+        <section class="testimonalsection" id="testimonal">
+            <div class="section1">
+                <hr />
+                <h2 class="section__title" data-aos="zoom-out-up" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">
+                    CUSTOMER OPINION
+                </h2>
+                <hr />
             </div>
-          </div>
-          <div class="testimonal__swiper">
-            <div>
-              <article class="testimonal__card">
-                <img
-                  src="https://t3.ftcdn.net/jpg/02/43/12/34/360_F_243123463_zTooub557xEWABDLk0jJklDyLSGl2jrr.jpg"
-                  alt=""
-                  class="testimonal__image"
-                  style="border-radius: 50%; object-fit: cover"
-                />
-                <h2 class="testimonal__title">Sudhanshu Sharma</h2>
-                <p class="testimonal__description">
-                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus
-                  voluptatibus quidem nostrum neque molestiae fugiat id ex
-                  consequatur atque quia quisquam hic accusamus dolores
-                  sapiente, ipsum maxime, quo odit ut.
-                </p>
+            <div class="testimonal__container" data-aos="zoom-in" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">
+                <div class="testimonal__swiper">
+                    <div>
+                        <article class="testimonal__card">
+                            <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cGVyc29ufGVufDB8fDB8fHww" alt="" class="testimonal__image" style="border-radius: 50%; object-fit: cover"
+                            />
+                            <h2 class="testimonal__title">Riya Jain</h2>
+                            <p class="testimonal__description">
+                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus voluptatibus quidem nostrum neque molestiae fugiat id ex consequatur atque quia quisquam hic accusamus dolores sapiente, ipsum maxime, quo odit ut.
+                            </p>
 
-                <div class="testimonal__stars">
-                  <i class="fa-solid fa-star"></i>
-                  <i class="fa-solid fa-star"></i>
-                  <i class="fa-solid fa-star"></i>
-                  <i class="fa-solid fa-star"></i>
-                  <i class="fa-solid fa-star-half-stroke"></i>
+                            <div class="testimonal__stars">
+                                <i class="fa-solid fa-star"></i>
+                                <i class="fa-solid fa-star"></i>
+                                <i class="fa-solid fa-star"></i>
+                                <i class="fa-solid fa-star"></i>
+                                <i class="fa-solid fa-star-half-stroke"></i>
+                            </div>
+                        </article>
+                    </div>
                 </div>
-              </article>
-            </div>
-          </div>
-          <div class="testimonal__swiper">
-            <div>
-              <article class="testimonal__card">
-                <img
-                  src="https://blogs.kcl.ac.uk/editlab/files/2017/04/Elena-2-Cropped-200x2801.jpg"
-                  alt=""
-                  class="testimonal__image"
-                  style="border-radius: 50%; object-fit: cover"
-                />
-                <h2 class="testimonal__title">Angel Dravid</h2>
-                <p class="testimonal__description">
-                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus
-                  voluptatibus quidem nostrum neque molestiae fugiat id ex
-                  consequatur atque quia quisquam hic accusamus dolores
-                  sapiente, ipsum maxime, quo odit ut.
-                </p>
+                <div class="testimonal__swiper">
+                    <div>
+                        <article class="testimonal__card">
+                            <img src="https://t3.ftcdn.net/jpg/02/43/12/34/360_F_243123463_zTooub557xEWABDLk0jJklDyLSGl2jrr.jpg" alt="" class="testimonal__image" style="border-radius: 50%; object-fit: cover" />
+                            <h2 class="testimonal__title">Sudhanshu Sharma</h2>
+                            <p class="testimonal__description">
+                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus voluptatibus quidem nostrum neque molestiae fugiat id ex consequatur atque quia quisquam hic accusamus dolores sapiente, ipsum maxime, quo odit ut.
+                            </p>
 
-                <div class="testimonal__stars">
-                  <i class="fa-solid fa-star"></i>
-                  <i class="fa-solid fa-star"></i>
-                  <i class="fa-solid fa-star"></i>
-                  <i class="fa-solid fa-star"></i>
-                  <i class="fa-solid fa-star-half-stroke"></i>
+                            <div class="testimonal__stars">
+                                <i class="fa-solid fa-star"></i>
+                                <i class="fa-solid fa-star"></i>
+                                <i class="fa-solid fa-star"></i>
+                                <i class="fa-solid fa-star"></i>
+                                <i class="fa-solid fa-star-half-stroke"></i>
+                            </div>
+                        </article>
+                    </div>
                 </div>
-              </article>
-            </div>
-          </div>
-          <div class="testimonal__swiper">
-            <div>
-              <article class="testimonal__card">
-                <img
-                  src="https://cdn2.psychologytoday.com/assets/styles/manual_crop_1_91_1_1528x800/public/field_blog_entry_images/2018-09/shutterstock_648907024.jpg?itok=7lrLYx-B"
-                  alt=""
-                  class="testimonal__image"
-                  style="border-radius: 50%; object-fit: cover"
-                />
-                <h2 class="testimonal__title">Priya Sharma</h2>
-                <p class="testimonal__description">
-                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus
-                  voluptatibus quidem nostrum neque molestiae fugiat id ex
-                  consequatur atque quia quisquam hic accusamus dolores
-                  sapiente, ipsum maxime, quo odit ut.
-                </p>
+                <div class="testimonal__swiper">
+                    <div>
+                        <article class="testimonal__card">
+                            <img src="https://blogs.kcl.ac.uk/editlab/files/2017/04/Elena-2-Cropped-200x2801.jpg" alt="" class="testimonal__image" style="border-radius: 50%; object-fit: cover" />
+                            <h2 class="testimonal__title">Angel Dravid</h2>
+                            <p class="testimonal__description">
+                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus voluptatibus quidem nostrum neque molestiae fugiat id ex consequatur atque quia quisquam hic accusamus dolores sapiente, ipsum maxime, quo odit ut.
+                            </p>
 
-                <div class="testimonal__stars">
-                  <i class="fa-solid fa-star"></i>
-                  <i class="fa-solid fa-star"></i>
-                  <i class="fa-solid fa-star"></i>
-                  <i class="fa-solid fa-star"></i>
-                  <i class="fa-solid fa-star-half-stroke"></i>
+                            <div class="testimonal__stars">
+                                <i class="fa-solid fa-star"></i>
+                                <i class="fa-solid fa-star"></i>
+                                <i class="fa-solid fa-star"></i>
+                                <i class="fa-solid fa-star"></i>
+                                <i class="fa-solid fa-star-half-stroke"></i>
+                            </div>
+                        </article>
+                    </div>
                 </div>
-              </article>
-            </div>
-      </section>
+                <div class="testimonal__swiper">
+                    <div>
+                        <article class="testimonal__card">
+                            <img src="https://cdn2.psychologytoday.com/assets/styles/manual_crop_1_91_1_1528x800/public/field_blog_entry_images/2018-09/shutterstock_648907024.jpg?itok=7lrLYx-B" alt="" class="testimonal__image" style="border-radius: 50%; object-fit: cover" />
+                            <h2 class="testimonal__title">Priya Sharma</h2>
+                            <p class="testimonal__description">
+                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus voluptatibus quidem nostrum neque molestiae fugiat id ex consequatur atque quia quisquam hic accusamus dolores sapiente, ipsum maxime, quo odit ut.
+                            </p>
 
-      <div class="second_cont">
-        <div
-          class="deals"
-          data-aos="zoom-out-right"
-          data-aos-duration="1000"
-          data-aos-offset="170"
-          data-aos-easing="ease-in-out"
-        >
-          <i class="fa-solid fa-gift"></i>
-          <p>Gift Card and Voucher Redemption</p>
+                            <div class="testimonal__stars">
+                                <i class="fa-solid fa-star"></i>
+                                <i class="fa-solid fa-star"></i>
+                                <i class="fa-solid fa-star"></i>
+                                <i class="fa-solid fa-star"></i>
+                                <i class="fa-solid fa-star-half-stroke"></i>
+                            </div>
+                        </article>
+                    </div>
+        </section>
+
+        <div class="second_cont">
+            <div class="deals" data-aos="zoom-out-right" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">
+                <i class="fa-solid fa-gift"></i>
+                <p>Gift Card and Voucher Redemption</p>
+            </div>
+            <div class="deals" data-aos="zoom-out-left" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">
+                <i class="fa-solid fa-ticket"></i>
+                <p>Exclusive Offers and Promotions</p>
+            </div>
         </div>
-        <div
-          class="deals"
-          data-aos="zoom-out-left"
-          data-aos-duration="1000"
-          data-aos-offset="170"
-          data-aos-easing="ease-in-out"
-        >
-          <i class="fa-solid fa-ticket"></i>
-          <p>Exclusive Offers and Promotions</p>
         </div>
-      </div>
-    </div>
     </section>
 
     <footer>
-      <div class="foot-panel1 w-100">
-        <div class="container-fluid py-5 px-0">
-          <div class="row justify-content-evenly gy-5">
-            <div class="col-6 col-sm-3 col-md-2 col-xl-2">
-              <h5 class="mb-3">See Also</h5>
-              <ul class="nav flex-column">
-                <li class="nav-item">
-                  <a class="nav-link" href="../index.html">Home</a>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="../Html-files/menu.html">Menu</a>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="../Html-files/services.html"
-                    >Services</a
+        <div class="foot-panel1 w-100">
+            <div class="container-fluid py-5 px-0">
+                <div class="row justify-content-evenly gy-5">
+                    <div class="col-6 col-sm-3 col-md-2 col-xl-2">
+                        <h5 class="mb-3">See Also</h5>
+                        <ul class="nav flex-column">
+                            <li class="nav-item">
+                                <a class="nav-link" href="../index.html">Home</a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" href="../Html-files/menu.html">Menu</a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" href="../Html-files/services.html">Services</a
                   >
                 </li>
                 <li class="nav-item">
@@ -377,154 +274,108 @@ <h5 class="mb-3">See Also</h5>
                 </li>
                 <li class="nav-item">
                   <a class="nav-link" href="../Html-files/cart.html">Cart</a>
-                </li>
-              </ul>
-            </div>
+                            </li>
+                        </ul>
+                    </div>
 
-            <div class="col-6 col-sm-5 col-md-3 col-xl-3">
-              <h5 class="mb-3">Exclusive Offers</h5>
-              <ul class="nav flex-column">
-                <li class="nav-item">
-                    <a href="#" class="nav-link">Foodie Discounts</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="/Html-files/offers/limited-time-products.html">Limited-Time Promotions</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="/Html-files/offers/special-event.html">Special Event Packages</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="/Html-files/offers/membership-benifits.html">Membership Benefits</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="/Html-files/offers/early-access.html">Early Access to New Recipes</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="/Html-files/offers/vip-food-event.html">VIP Foodie Events</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="/Html-files/offers/culinary-experience.html">Personalized Culinary Experiences</a>
-                </li>
-            </ul>
-            </div>
+                    <div class="col-6 col-sm-5 col-md-3 col-xl-3">
+                        <h5 class="mb-3">Exclusive Offers</h5>
+                        <ul class="nav flex-column">
+                            <li class="nav-item">
+                                <a href="#" class="nav-link">Foodie Discounts</a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" href="/Html-files/offers/limited-time-products.html">Limited-Time Promotions</a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" href="/Html-files/offers/special-event.html">Special Event Packages</a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" href="/Html-files/offers/membership-benifits.html">Membership Benefits</a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" href="/Html-files/offers/early-access.html">Early Access to New Recipes</a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" href="/Html-files/offers/vip-food-event.html">VIP Foodie Events</a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" href="/Html-files/offers/culinary-experience.html">Personalized Culinary Experiences</a>
+                            </li>
+                        </ul>
+                    </div>
 
-            <div class="col-6 col-sm-4 col-md-4 col-xl-3">
-              <h5 class="mb-3">Payment Products</h5>
-              <ul class="nav flex-column">
-                <li class="nav-item">
-                  <a href="/Html-files/payment/secure-checkout.html" class="nav-link">Secure Checkout</a>
-                </li>
-                <li class="nav-item">
-                  <a href="/Html-files/payment/credit-debit-card.html" class="nav-link">Credit/Debit Cards</a>
-                </li>
-                <li class="nav-item">
-                  <a href="/Html-files/payment/secure-checkout.html" class="nav-link">Secure Checkout</a>
-                </li>
-                <li class="nav-item">
-                  <a href="/Html-files/payment/online-payment.html" class="nav-link">Online Payment</a>
-                </li>
-                <li class="nav-item">
-                  <a href="/Html-files/payment/mobile-wallet.html" class="nav-link">Mobile Wallets</a>
-                </li>
-                <li class="nav-item">
-                  <a href="/Html-files/payment/contact-less-payment.html" class="nav-link">Contactless Payments</a>
-                </li>
-              </ul>
-            </div>
+                    <div class="col-6 col-sm-4 col-md-4 col-xl-3">
+                        <h5 class="mb-3">Payment Products</h5>
+                        <ul class="nav flex-column">
+                            <li class="nav-item">
+                                <a href="/Html-files/payment/secure-checkout.html" class="nav-link">Secure Checkout</a>
+                            </li>
+                            <li class="nav-item">
+                                <a href="/Html-files/payment/credit-debit-card.html" class="nav-link">Credit/Debit Cards</a>
+                            </li>
+                            <li class="nav-item">
+                                <a href="/Html-files/payment/secure-checkout.html" class="nav-link">Secure Checkout</a>
+                            </li>
+                            <li class="nav-item">
+                                <a href="/Html-files/payment/online-payment.html" class="nav-link">Online Payment</a>
+                            </li>
+                            <li class="nav-item">
+                                <a href="/Html-files/payment/mobile-wallet.html" class="nav-link">Mobile Wallets</a>
+                            </li>
+                            <li class="nav-item">
+                                <a href="/Html-files/payment/contact-less-payment.html" class="nav-link">Contactless Payments</a>
+                            </li>
+                        </ul>
+                    </div>
 
-            <div class="col-6 col-md-3 col-xl-4">
-              <form
-                id="contactForm"
-                action="https://formsubmit.co/xyz@gmail.com"
-                method="POST"
-              >
-                <h3 class="text-center mb-3">Contact Us!</h3>
-                <input
-                  type="email"
-                  id="footer-email"
-                  name="email"
-                  placeholder="Your Email"
-                  class="text-center form-control mb-2"
-                  required
-                />
-                <textarea
-                  id="footer-message"
-                  name="message"
-                  placeholder="Your Message"
-                  class="text-center form-control mb-2"
-                  required
-                ></textarea>
-                <div class="d-grid gap-2 col-12">
-                  <button type="submit" class="btn btn-danger">
+                    <div class="col-6 col-md-3 col-xl-4">
+                        <form id="contactForm" action="https://formsubmit.co/xyz@gmail.com" method="POST">
+                            <h3 class="text-center mb-3">Contact Us!</h3>
+                            <input type="email" id="footer-email" name="email" placeholder="Your Email" class="text-center form-control mb-2" required />
+                            <textarea id="footer-message" name="message" placeholder="Your Message" class="text-center form-control mb-2" required></textarea>
+                            <div class="d-grid gap-2 col-12">
+                                <button type="submit" class="btn btn-danger">
                     Send Message
                   </button>
+                            </div>
+                        </form>
+                    </div>
                 </div>
-              </form>
             </div>
-          </div>
         </div>
-      </div>
-      <div class="foot-panel2">
-        <div class="media-handles pt-3 pb-2">
-          <h4>Follow Us</h4>
-          <div class="social-icons">
-            <a
-              class="fa-brands fa-facebook"
-              href="https://facebook.com"
-              target="_blank"
-            ></a>
-            <a
-              class="fa-brands fa-instagram"
-              href="https://instagram.com"
-              target="_blank"
-            ></a>
-            <a
-              class="fa-brands fa-x-twitter"
-              href="https://twitter.com"
-              target="_blank"
-            ></a>
-            <a
-              class="fa-brands fa-linkedin"
-              href="https://linkedin.com"
-              target="_blank"
-            ></a>
-            <a
-              class="fa-brands fa-github"
-              href="https://github.com/khushi-joshi-05/Food-ordering-website"
-              target="_blank"
-            ></a>
-            <a
-              class="fa-brands fa-discord"
-              href="https://discord.com/invite/sybYafYA"
-              target="_blank"
-            ></a>
-          </div>
-          <p class="text">
-            Stay connected with us on social media for the latest updates,
-            recipes, and foodie adventures.
-          </p>
-        </div>
-        <div class="copyright py-1">
-          &copy;
-          <span id="copyright-year"></span> Foodies - All Rights Reserved |
-          <span id="author">
+        <div class="foot-panel2">
+            <div class="media-handles pt-3 pb-2">
+                <h4>Follow Us</h4>
+                <div class="social-icons">
+                    <a class="fa-brands fa-facebook" href="https://facebook.com" target="_blank"></a>
+                    <a class="fa-brands fa-instagram" href="https://instagram.com" target="_blank"></a>
+                    <a class="fa-brands fa-x-twitter" href="https://twitter.com" target="_blank"></a>
+                    <a class="fa-brands fa-linkedin" href="https://linkedin.com" target="_blank"></a>
+                    <a class="fa-brands fa-github" href="https://github.com/khushi-joshi-05/Food-ordering-website" target="_blank"></a>
+                    <a class="fa-brands fa-discord" href="https://discord.com/invite/sybYafYA" target="_blank"></a>
+                </div>
+                <p class="text">
+                    Stay connected with us on social media for the latest updates, recipes, and foodie adventures.
+                </p>
+            </div>
+            <div class="copyright py-1">
+                &copy;
+                <span id="copyright-year"></span> Foodies - All Rights Reserved |
+                <span id="author">
             <a
               href="https://www.linkedin.com/in/khushi-joshi-95a587256/"
               target="_blank"
               >Khushi Joshi</a
             >
           </span>
+            </div>
         </div>
-      </div>
     </footer>
 
     <!--Scroll top button-->
 
-    <button
-      id="scroll-top-button"
-      class="scroll-top-button"
-      onclick="goToTop()"
-    >
+    <button id="scroll-top-button" class="scroll-top-button" onclick="goToTop()">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         height="24px"
@@ -540,31 +391,32 @@ <h4>Follow Us</h4>
     </button>
     <!--Scroll top button finish-->
     <script>
-      document.getElementById("copyright-year").textContent =
-        new Date().getFullYear();
+        document.getElementById("copyright-year").textContent =
+            new Date().getFullYear();
     </script>
     <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
     <script>
-      AOS.init({
-        duration: 1000,
-        easing: "ease",
-        once: false,
-      });
+        AOS.init({
+            duration: 1000,
+            easing: "ease",
+            once: false,
+        });
     </script>
     <script src="top.js"></script>
     <script src="navbar.js"></script>
 
     <script>
-      document.getElementById("copyright-year").textContent =
-        new Date().getFullYear();
+        document.getElementById("copyright-year").textContent =
+            new Date().getFullYear();
     </script>
     <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
     <script>
-      AOS.init({
-        duration: 1000,
-        easing: "ease",
-        once: false,
-      });
+        AOS.init({
+            duration: 1000,
+            easing: "ease",
+            once: false,
+        });
     </script>
-  </body>
-</html>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/index.html b/index.html
index 9a2b9710..9084e458 100644
--- a/index.html
+++ b/index.html
@@ -6,27 +6,17 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Foodie</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
-        integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
-        crossorigin="anonymous" referrerpolicy="no-referrer">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
-        integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
-        crossorigin="anonymous" referrerpolicy="no-referrer">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer">
     <!-- Adding favicon image -->
     <link rel="shortcut icon" href="Images/favicon/Foodie_Favicon.png" type="image/x-icon">
-    <link
-        href="https://fonts.googleapis.com/css2?family=Fuggles&family=Mooli&family=Oswald:wght@600&family=Roboto:wght@100;300&display=swap"
-        rel="stylesheet">
-    <link rel="stylesheet"
-        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0">
+    <link href="https://fonts.googleapis.com/css2?family=Fuggles&family=Mooli&family=Oswald:wght@600&family=Roboto:wght@100;300&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0">
     <link href="https://fonts.googleapis.com/css?family=Baloo+Bhai|Bree+Serif&display=swap" rel="stylesheet">
 
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
-        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
 
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
-        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"
-        defer></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous" defer></script>
     <link rel="stylesheet" href="Css-files/scroll-top-button.css">
     <link rel="stylesheet" href="Css-files/navbar.css">
     <link rel="stylesheet" href="Css-files/footer.css">
@@ -45,9 +35,7 @@
             <a href="index.html" class="navbar-brand opacity-75 flex-fill">
                 <img src="Images/logo/Foodielogo.png" height="40">
             </a>
-            <button class="navbar-toggler order-1" type="button" data-bs-toggle="collapse"
-                data-bs-target=".hamburgeritems" aria-controls="navbarNav" aria-expanded="false"
-                aria-label="Toggle navigation">
+            <button class="navbar-toggler order-1" type="button" data-bs-toggle="collapse" data-bs-target=".hamburgeritems" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                 <span class="navbar-toggler-icon"></span>
             </button>
             <div class="collapse navbar-collapse hamburgeritems centerdiv order-2 order-lg-0">
@@ -70,11 +58,11 @@
                             <li><a class="dropdown-item" href="#"><i class="fa-solid fa-check"></i> Ordering options</a></li>
                             <li><a class="dropdown-item" href="#"><i class="fa-solid fa-truck"></i> Order Tracking</a></li>
                             <li><a class="dropdown-item" href="#"><i class="fa-solid fa-headset"></i> Customer Support</a></li>
-                            <li><a class="dropdown-item" href="#"><i class="fa-solid fa-question"></i> FAQS</a></li>
+                            <li><a class="dropdown-item" href="#FAQ"><i class="fa-solid fa-question"></i> FAQS</a></li>
                         </ul>
                     </li>
-                    
-                   <li class="nav-item, nav-items">
+
+                    <li class="nav-item, nav-items">
                         <a class="nav-link" href="Html-files/contact.html"><i class="fa-solid fa-phone"></i>Contact Us</a>
                     </li>
 
@@ -93,7 +81,7 @@
                             <i class="fa-solid fa-star"></i> Rate Us
                         </a>
                     </li>
-                    
+
                 </ul>
             </div>
             <div class="order-0 ml-auto p-2">
@@ -106,7 +94,7 @@
                             <i class="fa-solid fa-sign-in"></i> Login
                         </a>
                     </li>
-                    
+
                     <li class="nav-item">
                         <a class="nav-link" href="Html-files/signup.html">
                             <i class="fa-solid fa-user-plus"></i> Sign-Up
@@ -121,7 +109,7 @@
             </div>
         </div>
     </nav>
-    
+
     <section id="homeSlider" class="carousel slide carousel-fade bg-black" data-bs-ride="carousel">
         <div class="carousel-inner">
             <div class="carousel-item active">
@@ -131,14 +119,12 @@
                 <div class="carousel-caption d-flex flex-column justify-content-center h-100">
                     <p class="slider-subtitle slider-reveal">TRADITIONAL & HYGIENIC</p>
                     <h1 class="slider-title slider-reveal">
-                        For the love of <br>
-                        delicious food
+                        For the love of <br> delicious food
                     </h1>
                     <p class="slider-text slider-reveal">
                         come with family & feel the joy of mouthwatering food
                     </p>
-                    <a href="Html-files/menu.html" class="btn btn-danger slider-button slider-reveal mx-auto"
-                        role="button">
+                    <a href="Html-files/menu.html" class="btn btn-danger slider-button slider-reveal mx-auto" role="button">
                         <span class="text text-1">VIEW OUR MENU</span>
                     </a>
                 </div>
@@ -150,14 +136,12 @@ <h1 class="slider-title slider-reveal">
                 <div class="carousel-caption d-flex flex-column justify-content-center h-100">
                     <p class="slider-subtitle slider-reveal">DELIGHTFUL EXPERIENCE</p>
                     <h1 class="slider-title slider-reveal">
-                        Flavors Inspired by <br>
-                        the Seasons
+                        Flavors Inspired by <br> the Seasons
                     </h1>
                     <p class="slider-text slider-reveal">
                         come with family & feel the joy of mouthwatering food
                     </p>
-                    <a href="Html-files/menu.html" class="btn btn-danger slider-button slider-reveal mx-auto"
-                        role="button">
+                    <a href="Html-files/menu.html" class="btn btn-danger slider-button slider-reveal mx-auto" role="button">
                         VIEW OUR MENU
                     </a>
                 </div>
@@ -169,14 +153,12 @@ <h1 class="slider-title slider-reveal">
                 <div class="carousel-caption d-flex flex-column justify-content-center h-100">
                     <p class="slider-subtitle slider-reveal">AMAZING & DELICIOUS</p>
                     <h1 class="slider-title slider-reveal">
-                        Where every flavour <br>
-                        tells a story
+                        Where every flavour <br> tells a story
                     </h1>
                     <p class="slider-text slider-reveal">
                         come with family & feel the joy of mouthwatering food
                     </p>
-                    <a href="Html-files/menu.html" class="btn btn-danger slider-button slider-reveal mx-auto"
-                        role="button">
+                    <a href="Html-files/menu.html" class="btn btn-danger slider-button slider-reveal mx-auto" role="button">
                         VIEW OUR MENU
                     </a>
                 </div>
@@ -192,7 +174,7 @@ <h1 class="slider-title slider-reveal">
         </button>
     </section>
 
-    
+
     <!-- Add some custom CSS for transitions and responsiveness -->
     <style>
         .slider-bg {
@@ -201,23 +183,22 @@ <h1 class="slider-title slider-reveal">
             height: 100vh;
             overflow: hidden;
         }
-    
+        
         .homeimg {
             width: 100%;
             height: 100%;
             object-fit: cover;
         }
-    
+        
         .carousel-caption {
             text-align: center;
             text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
         }
-    
+        
         .slider-reveal {
             animation: fadeInUp 1.5s ease-in-out;
         }
-
-    
+        
         @keyframes fadeInUp {
             from {
                 opacity: 0;
@@ -228,12 +209,13 @@ <h1 class="slider-title slider-reveal">
                 transform: none;
             }
         }
-    
+        
         @media (max-width: 768px) {
             .slider-title {
                 font-size: 1.5rem;
             }
-            .slider-subtitle, .slider-text {
+            .slider-subtitle,
+            .slider-text {
                 font-size: 1rem;
             }
             .carousel-caption {
@@ -262,94 +244,90 @@ <h1 class="poppins-light pe-5 ps-1 py-1">Get <span> 30% OFF </span> on your firs
         <br>
         <br>
 
-        <h1 class="tagline py-2 text-center mx-auto" data-aos="zoom-out-up" data-aos-offset="170"
-            data-aos-easing="ease-in-out">"Savor the Flavors: Discover What Sets Our Restaurant's Cuisine Apart!"</h1>
-
-<!-- cards  -->
- <style>
-
-.card-1 {
-	position: relative;
-	width: 400px;
-	height: 500px;
-	border-radius: 15px;
-	overflow: hidden;
-	filter: drop-shadow(10px 10px 20px rgba(0, 0, 0, 0.25));
-	background-repeat: no-repeat;
-	background-size: cover;
-}
-
-.card-1::after {
-	content: "";
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.408) 62.83%, rgba(0, 0, 0, 0.8) 99.99%);
-	background-blend-mode: darken, normal;
-}
-
-.card-1 > .content {
-	color: white;
-	position: absolute;
-	top: 550px;
-    padding: 10px;
-    border-radius: 10px;
-	left: 4.77%;
-	right: 4.77%;
-	z-index: 2;
-	transition: top 450ms ease-out;
-}
-
-.card-1 > h2 {
-    margin-top: 180px;
-	font-size: 2rem !important;
-    mix-blend-mode:luminosity;
-    color:white;
-    border-radius: 5px;
-    backdrop-filter: blur(2px);
-    z-index: 100;
-    text-shadow:2px 2px #6d1002;
-}
-
-.card-1 > .content > p {
-	margin-bottom: .7rem;
-}
-
-.card-1:hover > .content {
-	top: 260px;
-    backdrop-filter: blur(4px);
-}
-
-.btn {
-	border: none;
-	padding: .7em 1.8em;
-	border-radius: 5px;
-	font-weight: 600;
-	cursor: pointer;
-	font-size: .8rem;
-}
-
-.btn-card {
-	background: #D0EEB0;
-	transition: background 200ms ease;
-}
-
-.btn-card:hover {
-	background: #59a10c;
-}
- </style>
-
-        <div class="qualities row justify-content-evenly g-3 px-2" data-aos="zoom-out" data-aos-duration="1000" data-aos-offset="170"
-            data-aos-easing="ease-in-out">
+        <h1 class="tagline py-2 text-center mx-auto" data-aos="zoom-out-up" data-aos-offset="170" data-aos-easing="ease-in-out">"Savor the Flavors: Discover What Sets Our Restaurant's Cuisine Apart!"</h1>
+
+        <!-- cards  -->
+        <style>
+            .card-1 {
+                position: relative;
+                width: 400px;
+                height: 500px;
+                border-radius: 15px;
+                overflow: hidden;
+                filter: drop-shadow(10px 10px 20px rgba(0, 0, 0, 0.25));
+                background-repeat: no-repeat;
+                background-size: cover;
+            }
+            
+            .card-1::after {
+                content: "";
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.408) 62.83%, rgba(0, 0, 0, 0.8) 99.99%);
+                background-blend-mode: darken, normal;
+            }
+            
+            .card-1>.content {
+                color: white;
+                position: absolute;
+                top: 550px;
+                padding: 10px;
+                border-radius: 10px;
+                left: 4.77%;
+                right: 4.77%;
+                z-index: 2;
+                transition: top 450ms ease-out;
+            }
+            
+            .card-1>h2 {
+                margin-top: 180px;
+                font-size: 2rem !important;
+                mix-blend-mode: luminosity;
+                color: white;
+                border-radius: 5px;
+                backdrop-filter: blur(2px);
+                z-index: 100;
+                text-shadow: 2px 2px #6d1002;
+            }
+            
+            .card-1>.content>p {
+                margin-bottom: .7rem;
+            }
+            
+            .card-1:hover>.content {
+                top: 260px;
+                backdrop-filter: blur(4px);
+            }
+            
+            .btn {
+                border: none;
+                padding: .7em 1.8em;
+                border-radius: 5px;
+                font-weight: 600;
+                cursor: pointer;
+                font-size: .8rem;
+            }
+            
+            .btn-card {
+                background: #D0EEB0;
+                transition: background 200ms ease;
+            }
+            
+            .btn-card:hover {
+                background: #59a10c;
+            }
+        </style>
+
+        <div class="qualities row justify-content-evenly g-3 px-2" data-aos="zoom-out" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">
 
             <div class="card-1" style="background-image: url(https://shahidining.com.au/wp-content/uploads/2020/05/secret-to-indian-flavour-1536x864.jpg);">
                 <h2 class="card-title">Authentic Indian Flavors</h2>
                 <div class="content">
-                    
-                        <p class="card-text">From aromatic curries to flavorful biryanis, our menu showcases the
-                            diversity and deliciousness of Indian cuisine.</p>
+
+                    <p class="card-text">From aromatic curries to flavorful biryanis, our menu showcases the diversity and deliciousness of Indian cuisine.</p>
                     <button class="btn btn-card">Lean More</button>
                 </div>
             </div>
@@ -358,11 +336,9 @@ <h2 class="card-title">Authentic Indian Flavors</h2>
             <div class="card-1" style="background-image: url(https://saavi.com.au/wp-content/uploads/2016/02/image0023-1.jpg);">
                 <h2 class="card-title">Tech-Infused Dining Experience</h2>
                 <div class="content">
-                   
-                        <p class="card-text">Customers can use apps to place orders, customize their dishes, and even
-                            provide feedback, making
-                            their visit more convenient and interactive.
-                        </p>
+
+                    <p class="card-text">Customers can use apps to place orders, customize their dishes, and even provide feedback, making their visit more convenient and interactive.
+                    </p>
                     <button class="btn btn-card">Lean More</button>
                 </div>
             </div>
@@ -370,10 +346,8 @@ <h2 class="card-title">Tech-Infused Dining Experience</h2>
             <div class="card-1" style="background-image: url(https://i.ndtvimg.com/i/2015-06/fusion-food_625x350_81434107799.jpg);">
                 <h2 class="card-title">Innovative Fusion Dishes</h2>
                 <div class="content">
-                    
-                        <p class="card-text">The combinations of Indian and international cuisines not only tantalize
-                            taste buds
-                            but also provide unique experience.</p>
+
+                    <p class="card-text">The combinations of Indian and international cuisines not only tantalize taste buds but also provide unique experience.</p>
                     <button class="btn btn-card">Lean More</button>
                 </div>
             </div>
@@ -430,29 +404,22 @@ <h2 class="card-title">Innovative Fusion Dishes</h2>
     <section class="services_container">
         <div class="card">
             <div class="d-flex justify-content-center img-container">
-                <img src="https://cdn.tasteatlas.com//images/toplistarticles/d0e6a0a79d5f4197a51f4ca065393ffe.jpg?mw=1300"
-                    alt="" class="card-img">
+                <img src="https://cdn.tasteatlas.com//images/toplistarticles/d0e6a0a79d5f4197a51f4ca065393ffe.jpg?mw=1300" alt="" class="card-img">
             </div>
             <div class="card-img-overlay row w-100 m-0">
-                <div class="box_main m-auto col-md-9 col-xl-3" data-aos="zoom-out-right" data-aos-duration="1000"
-                    data-aos-offset="170" data-aos-easing="ease-in-out">
+                <div class="box_main m-auto col-md-9 col-xl-3" data-aos="zoom-out-right" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">
                     <h1>Bringing <br>happiness<br> to you</h1>
-                    <p>Food is more than sustenance; it's a source of pure happiness. From the first bite of a favorite
-                        childhood dish to the thrill of discovering new flavors, food has a unique way of filling
-                        our hearts with joy.</p>
+                    <p>Food is more than sustenance; it's a source of pure happiness. From the first bite of a favorite childhood dish to the thrill of discovering new flavors, food has a unique way of filling our hearts with joy.</p>
                 </div>
-                <div class="box my-auto col-md-4 col-xl-3" data-aos="zoom-out-left" data-aos-duration="1000"
-                    data-aos-offset="170" data-aos-easing="ease-in-out">
+                <div class="box my-auto col-md-4 col-xl-3" data-aos="zoom-out-left" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">
                     <h1>Online <br>Delivery</h1>
                     <a href="/Html-files/add-address.html" class="btn btn-outline-light">Order Online</a>
                 </div>
-                <div class="box my-auto col-md-4 col-xl-3" data-aos="zoom-out-left" data-aos-duration="1000"
-                    data-aos-offset="170" data-aos-easing="ease-in-out">
+                <div class="box my-auto col-md-4 col-xl-3" data-aos="zoom-out-left" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">
                     <h1>Click & <br>Collect</h1>
                     <a href="/Html-files/cart.html" class="btn btn-outline-light">Take out Order</a>
                 </div>
-                <div class="box my-auto col-md-4 col-xl-3" data-aos="zoom-out-left" data-aos-duration="1000"
-                    data-aos-offset="170" data-aos-easing="ease-in-out">
+                <div class="box my-auto col-md-4 col-xl-3" data-aos="zoom-out-left" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">
                     <h1>Restaurant<br> Dining</h1>
                     <a href="/Html-files/book-table.html" class="btn btn-outline-light">Book Table </a>
                 </div>
@@ -461,16 +428,13 @@ <h1>Restaurant<br> Dining</h1>
     </section>
 
     <section class="menu_container">
-        <div class="mainhead text-center" data-aos="zoom-out-up" data-aos-duration="1000" data-aos-offset="170"
-            data-aos-easing="ease-in-out">
+        <div class="mainhead text-center" data-aos="zoom-out-up" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">
             <h1>"Get ready to explore our delicious range of dishes!"</h1>
-            <p>"Welcome to a world of culinary delights where every bite tells a flavorful story. Explore our diverse
-                menu and savor the essence of exquisite dining." </p>
+            <p>"Welcome to a world of culinary delights where every bite tells a flavorful story. Explore our diverse menu and savor the essence of exquisite dining." </p>
             <a class="btn btn-danger" href="Html-files/menu.html">View Menu</a>
         </div>
 
-        <div class="menu_items row container-fluid g-3 p-5 mx-auto" data-aos="zoom-out-up" data-aos-duration="1000"
-            data-aos-offset="170" data-aos-easing="ease-in-out">
+        <div class="menu_items row container-fluid g-3 p-5 mx-auto" data-aos="zoom-out-up" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">
             <div class="col-sm-6 col-lg-3">
                 <div class="items card">
                     <div class="img-container ">
@@ -485,8 +449,7 @@ <h3>Indian Thali</h3>
             <div class="col-sm-6 col-lg-3">
                 <div class="items card">
                     <div class="img-container">
-                        <img
-                            src="https://imgmediagumlet.lbb.in/media/2018/04/5acf822418a23c0efc21496b_1523548708582.jpg?fm=webp&w=750&h=500&dpr=1">
+                        <img src="https://imgmediagumlet.lbb.in/media/2018/04/5acf822418a23c0efc21496b_1523548708582.jpg?fm=webp&w=750&h=500&dpr=1">
                     </div>
                     <div class="card-body">
                         <h3>Dessert</h3>
@@ -497,8 +460,7 @@ <h3>Dessert</h3>
             <div class="col-sm-6 col-lg-3">
                 <div class="items card">
                     <div class="img-container">
-                        <img
-                            src="https://imgmediagumlet.lbb.in/media/2019/07/5d27585dc18a2b0ed5739eb5_1562859613517.jpg?fm=webp&w=750&h=500&dpr=1">
+                        <img src="https://imgmediagumlet.lbb.in/media/2019/07/5d27585dc18a2b0ed5739eb5_1562859613517.jpg?fm=webp&w=750&h=500&dpr=1">
                     </div>
                     <div class="card-body">
                         <h3>Snacks</h3>
@@ -509,8 +471,7 @@ <h3>Snacks</h3>
             <div class="col-sm-6 col-lg-3">
                 <div class="items card">
                     <div class="img-container">
-                        <img
-                            src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSaqAsoDyO5HBOSLupaimFGCkiE_zPbLYyYog&s">
+                        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSaqAsoDyO5HBOSLupaimFGCkiE_zPbLYyYog&s">
                     </div>
                     <div class="card-body">
                         <h3>Juices</h3>
@@ -522,12 +483,10 @@ <h3>Juices</h3>
         </div>
     </section>
 
-    <section class="testimonial-container" data-aos="zoom-in" data-aos-duration="1000" data-aos-offset="170"
-        data-aos-easing="ease-in-out">
+    <section class="testimonial-container" data-aos="zoom-in" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">
         <h2 class="tagline pt-5"> Our Happy Clients </h2>
         <p class="description">
-            At Foodie, we pride ourselves on delivering delicious meals & exceptional service. Don't just take our word
-            for it - hear what our satisfied customers have to say!
+            At Foodie, we pride ourselves on delivering delicious meals & exceptional service. Don't just take our word for it - hear what our satisfied customers have to say!
         </p>
         <div id="testimonials" class="carousel slide" data-bs-ride="carousel">
             <div class="carousel-inner">
@@ -537,8 +496,7 @@ <h2 class="tagline pt-5"> Our Happy Clients </h2>
                     </div>
                     <div class="carousel-caption">
                         <h3 class="overview">Matt Gilbert</h3>
-                        <p class="testimonial-text">Foodie never disappoints! The food is always fresh, delicious, and
-                            delivered right on time. My go-to for all my meals!</p>
+                        <p class="testimonial-text">Foodie never disappoints! The food is always fresh, delicious, and delivered right on time. My go-to for all my meals!</p>
                         <div class="star-rating">
                             <ul class="list-inline d-flex justify-content-center">
                                 <li><i class="fa-solid fa-star"></i></li>
@@ -556,8 +514,7 @@ <h3 class="overview">Matt Gilbert</h3>
                     </div>
                     <div class="carousel-caption">
                         <h3 class="overview">John Doe</h3>
-                        <p class="testimonial-text">I love the variety on Foodie! There's something for everyone, and
-                            the delivery service is incredibly reliable</p>
+                        <p class="testimonial-text">I love the variety on Foodie! There's something for everyone, and the delivery service is incredibly reliable</p>
                         <div class="star-rating">
                             <ul class="list-inline d-flex justify-content-center">
                                 <li><i class="fa-solid fa-star"></i></li>
@@ -574,8 +531,7 @@ <h3 class="overview">John Doe</h3>
                     </div>
                     <div class="carousel-caption">
                         <h3 class="overview">Laren Green</h3>
-                        <p class="testimonial-text">Fantastic service and mouth-watering dishes! Foodie has made my
-                            dining experience so much more convenient.</p>
+                        <p class="testimonial-text">Fantastic service and mouth-watering dishes! Foodie has made my dining experience so much more convenient.</p>
                         <div class="star-rating">
                             <ul class="list-inline d-flex justify-content-center">
                                 <li><i class="fa-solid fa-star"></i></li>
@@ -633,51 +589,44 @@ <h3 class="overview">Laren Green</h3>
         </div>
     </section>
 
-    <section class="faq-section">
+    <section class="faq-section" id="FAQ">
         <div class="container faq-container">
             <h1>Frequently Asked Questions (FAQ)</h1>
 
             <div class="faq-item">
                 <h2>How do I place an order?</h2>
-                <p>To place an order, browse our menu, select the items you want, and add them to your cart. Once you’re
-                    ready, click on the cart icon and proceed to checkout. Follow the instructions to complete your
-                    order.</p>
+                <p>To place an order, browse our menu, select the items you want, and add them to your cart. Once you’re ready, click on the cart icon and proceed to checkout. Follow the instructions to complete your order.
+                </p>
             </div>
 
             <div class="faq-item">
                 <h2>What payment methods do you accept?</h2>
-                <p>We accept various payment methods including credit/debit cards, net banking, and popular digital
-                    wallets. You can select your preferred payment method at the checkout page.</p>
+                <p>We accept various payment methods including credit/debit cards, net banking, and popular digital wallets. You can select your preferred payment method at the checkout page.</p>
             </div>
 
             <div class="faq-item">
                 <h2>Can I schedule an order for later?</h2>
-                <p>Yes, you can schedule an order for a later time. During checkout, select the delivery time that suits
-                    you best.</p>
+                <p>Yes, you can schedule an order for a later time. During checkout, select the delivery time that suits you best.</p>
             </div>
 
             <div class="faq-item">
                 <h2>How can I track my order?</h2>
-                <p>Once your order is confirmed, you will receive a tracking link via email or SMS. You can use this
-                    link to track the status of your delivery in real-time.</p>
+                <p>Once your order is confirmed, you will receive a tracking link via email or SMS. You can use this link to track the status of your delivery in real-time.</p>
             </div>
 
             <div class="faq-item">
                 <h2>What should I do if I have a problem with my order?</h2>
-                <p>If you encounter any issues with your order, please contact our customer support immediately. You can
-                    reach us via the contact form on our website, email, or phone. We’re here to help you!</p>
+                <p>If you encounter any issues with your order, please contact our customer support immediately. You can reach us via the contact form on our website, email, or phone. We’re here to help you!</p>
             </div>
 
             <div class="faq-item">
                 <h2>Is there a minimum order value?</h2>
-                <p>Yes, there is a minimum order value depending on your location. The minimum order amount will be
-                    displayed during the checkout process.</p>
+                <p>Yes, there is a minimum order value depending on your location. The minimum order amount will be displayed during the checkout process.</p>
             </div>
 
             <div class="faq-item">
                 <h2>Do you offer any discounts or promotions?</h2>
-                <p>We regularly offer discounts and promotions. Check our website or subscribe to our newsletter to stay
-                    updated on the latest deals and offers.</p>
+                <p>We regularly offer discounts and promotions. Check our website or subscribe to our newsletter to stay updated on the latest deals and offers.</p>
             </div>
         </div>
     </section>
@@ -687,10 +636,8 @@ <h4>Free Delivery!</h4>
         <h2 class="text-center">Download the App now!</h2>
         <br>
         <p>For best discounts and free delivery download the app now from your Google Play Store or App Store.</p>
-        <a href="#"><img src="/Images/app_download/get_it_on_google_play_store.png" class="app-download-img"
-                alt="Get it on Google Play Store"></a>
-        <a href="#"><img src="./Images/app_download/download-on-the-app-store.png" class="app-download-img"
-                alt="Download on the Apple App Store"></a>
+        <a href="#"><img src="/Images/app_download/get_it_on_google_play_store.png" class="app-download-img" alt="Get it on Google Play Store"></a>
+        <a href="#"><img src="./Images/app_download/download-on-the-app-store.png" class="app-download-img" alt="Download on the Apple App Store"></a>
     </div>
 
     <footer>
@@ -773,10 +720,8 @@ <h5 class="mb-3">Payment Products</h5>
                     <div class="col-6 col-md-3 col-xl-4">
                         <form id="contactForm" action="https://formsubmit.co/xyz@gmail.com" method="POST">
                             <h3 class="text-center mb-3">Contact Us!</h3>
-                            <input type="email" id="footer-email" name="email" placeholder="Your Email"
-                                class="text-center form-control mb-2" required>
-                            <textarea id="footer-message" name="footer-message" placeholder="Your Message"
-                                class="text-center form-control mb-2" required></textarea>
+                            <input type="email" id="footer-email" name="email" placeholder="Your Email" class="text-center form-control mb-2" required>
+                            <textarea id="footer-message" name="footer-message" placeholder="Your Message" class="text-center form-control mb-2" required></textarea>
                             <div class="d-grid gap-2 col-12">
                                 <button type="submit" class="btn btn-danger">Send Message</button>
                             </div>
@@ -797,29 +742,27 @@ <h4>Follow Us</h4>
                     <a class="fa-brands fa-instagram" href="https://instagram.com" target="_blank"></a>
                     <a class="fa-brands fa-x-twitter" href="https://twitter.com" target="_blank"></a>
                     <a class="fa-brands fa-linkedin" href="https://linkedin.com" target="_blank"></a>
-                    <a class="fa-brands fa-github" href="https://github.com/khushi-joshi-05/Food-ordering-website"
-                        target="_blank"></a>
+                    <a class="fa-brands fa-github" href="https://github.com/khushi-joshi-05/Food-ordering-website" target="_blank"></a>
                     <a class="fa-brands fa-discord" href="https://discord.com/invite/sybYafYA" target="_blank"></a>
                 </div>
-                <p class="text"> Stay connected with us on social media for the latest updates, recipes, and foodie
-                    adventures. </p>
-                 <div >
-                        Give your valuable 
-                                <Link to="" >
-                                    <a  href="/Html-files/feedback.html"><b>feedback!</b></a>
-                                </Link>
-                        </div>
+                <p class="text"> Stay connected with us on social media for the latest updates, recipes, and foodie adventures. </p>
+                <div>
+                    Give your valuable
+                    <Link to="">
+                    <a href="/Html-files/feedback.html"><b>feedback!</b></a>
+                    </Link>
+                </div>
             </div>
             <div class="copyright py-1">
                 &copy;
                 <span id="copyright-year"></span> Foodies - All Rights Reserved |
                 <span id="terms"></span>
-                <Link to="" >
-                    <a href="/Html-files/terms.html" target="_blank">Terms and Conditions</a> |
+                <Link to="">
+                <a href="/Html-files/terms.html" target="_blank">Terms and Conditions</a> |
                 </Link>
                 <span id="privacy"></span>
-                <Link to="" >
-                    <a href="/Html-files/privacy.html" target="_blank">Privacy Policy</a> |
+                <Link to="">
+                <a href="/Html-files/privacy.html" target="_blank">Privacy Policy</a> |
                 </Link>
                 <span id="author">
                     <a href="https://www.linkedin.com/in/khushi-joshi-95a587256/" target="_blank">Khushi Joshi</a>
@@ -842,13 +785,11 @@ <h4>Follow Us</h4>
     <script src="Html-files/navbar.js"></script>
     <script src="https://cdn.botpress.cloud/webchat/v1/inject.js"></script>
     <script>
-        AOS.init(
-            {
-                duration: 1000,
-                easing: 'ease',
-                once: false,
-            }
-        );
+        AOS.init({
+            duration: 1000,
+            easing: 'ease',
+            once: false,
+        });
 
         // Chatbot
         window.botpressWebChat.init({
@@ -874,4 +815,4 @@ <h4>Follow Us</h4>
 
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/style.css b/style.css
index 7f05b693..a014d5e6 100644
--- a/style.css
+++ b/style.css
@@ -1,773 +1,785 @@
 @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
-
 * {
-  margin: 0px;
-  padding: 0px;
+    margin: 0px;
+    padding: 0px;
 }
 
 body {
-  background-color: black;
-  overflow-x: hidden;
+    background-color: black;
+    overflow-x: hidden;
 }
 
 :root {
-  --a: white;
-  --drop-bg: #212123;
-  --nav: black;
-  --primary-bg-color: #ffffff;
-  --primary-text-color: #333335;
-  --secondary-bg-color: #f2f2f2;
-  --accent-color: #9e5c48;
-  --navbar-bg-color: #f2f2f2;
-  --navbar-hover-color: #e5e5e5;
-  --card-bg-color: #ffffff;
-  --card-hover-color: #f5f5f5;
-  --footer-bg-color: #f2f2f2;
-  --footer-hover-color: #e5e5e5;
+    --a: white;
+    --drop-bg: #212123;
+    --nav: black;
+    --primary-bg-color: #ffffff;
+    --primary-text-color: #333335;
+    --secondary-bg-color: #f2f2f2;
+    --accent-color: #9e5c48;
+    --navbar-bg-color: #f2f2f2;
+    --navbar-hover-color: #e5e5e5;
+    --card-bg-color: #ffffff;
+    --card-hover-color: #f5f5f5;
+    --footer-bg-color: #f2f2f2;
+    --footer-hover-color: #e5e5e5;
 }
 
 .dark-theme {
-  --a: black;
-  --drop-bg: #ffffff;
-  --nav: white;
-  --primary-bg-color: #212123;
-  --primary-text-color: #ffffff;
-  --secondary-bg-color: #333335;
-  --accent-color: #9e5c48;
-  --navbar-bg-color: #333335;
-  --navbar-hover-color: #474749;
-  --card-bg-color: #2c2c2e;
-  --card-hover-color: #373739;
-  --footer-bg-color: #28282a;
-  --footer-hover-color: #333335;
+    --a: black;
+    --drop-bg: #ffffff;
+    --nav: white;
+    --primary-bg-color: #212123;
+    --primary-text-color: #ffffff;
+    --secondary-bg-color: #333335;
+    --accent-color: #9e5c48;
+    --navbar-bg-color: #333335;
+    --navbar-hover-color: #474749;
+    --card-bg-color: #2c2c2e;
+    --card-hover-color: #373739;
+    --footer-bg-color: #28282a;
+    --footer-hover-color: #333335;
 }
 
 .poppins-light {
-  font-family: "Poppins", sans-serif;
-  font-weight: 600;
-  font-style: normal;
+    font-family: "Poppins", sans-serif;
+    font-weight: 600;
+    font-style: normal;
 }
 
+
 /*Scrollbar Style*/
+
 ::-webkit-scrollbar-track {
-  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6);
-  /* background-image: linear-gradient(to top, rgb(246, 10, 10) , rgb(248, 145, 49), rgb(236, 239, 56)); */
-  background-color: white;
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6);
+    /* background-image: linear-gradient(to top, rgb(246, 10, 10) , rgb(248, 145, 49), rgb(236, 239, 56)); */
+    background-color: white;
 }
 
 ::-webkit-scrollbar {
-  width: 12px;
+    width: 12px;
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: #ff0707;
-  border-radius: 10px;
-  border: 0.3px solid white;
-  background-image: -webkit-linear-gradient(
-    90deg,
-    rgb(20, 21, 12) 0%,
-    rgb(0, 0, 0) 25%,
-    transparent 100%,
-    rgb(247, 4, 4) 75%,
-    transparent
-  );
+    background-color: #ff0707;
+    border-radius: 10px;
+    border: 0.3px solid white;
+    background-image: -webkit-linear-gradient( 90deg, rgb(20, 21, 12) 0%, rgb(0, 0, 0) 25%, transparent 100%, rgb(247, 4, 4) 75%, transparent);
 }
 
+
 /* Home carousel/slider  */
+
 #homeSlider .homeimg {
-  max-height: 170vh;
-  max-width: 300%;
+    max-height: 170vh;
+    max-width: 300%;
 }
 
 #homeSlider .carousel-caption {
-  top: 2rem;
-  padding: 0px;
-  left: 10%;
-  right: 10%;
+    top: 2rem;
+    padding: 0px;
+    left: 10%;
+    right: 10%;
 }
 
 .slider-title {
-  font-size: calc(1.3rem + 6.7vw);
-  line-height: 1.1em;
-  font-weight: 300;
-  margin-bottom: 1.2rem;
-  font-family: Mela Pro;
+    font-size: calc(1.3rem + 6.7vw);
+    line-height: 1.1em;
+    font-weight: 300;
+    margin-bottom: 1.2rem;
+    font-family: Mela Pro;
 }
+
 .slider-title span {
-  color: rgb(235, 31, 143);
+    color: rgb(235, 31, 143);
 }
 
 .slider-subtitle {
-  font-size: 1.2rem;
-  color: hsl(38, 61%, 73%);
-  font-weight: 700;
-  letter-spacing: 0.4em;
-  margin-bottom: 0;
+    font-size: 1.2rem;
+    color: hsl(38, 61%, 73%);
+    font-weight: 700;
+    letter-spacing: 0.4em;
+    margin-bottom: 0;
 }
 
 .slider-text {
-  font-size: 1.3rem;
-  line-height: 1.1em;
-  color: #dddddd;
-  font-weight: 700;
-  margin-bottom: 2rem;
+    font-size: 1.3rem;
+    line-height: 1.1em;
+    color: #dddddd;
+    font-weight: 700;
+    margin-bottom: 2rem;
 }
 
 .slider-button {
-  letter-spacing: 3px;
-  max-width: max-content;
-  font-size: 1.2rem;
-  font-weight: 700;
-  padding: 0.8em 1.5em;
-  border: 3px solid white;
-  transition: 500ms ease;
+    letter-spacing: 3px;
+    max-width: max-content;
+    font-size: 1.2rem;
+    font-weight: 700;
+    padding: 0.8em 1.5em;
+    border: 3px solid white;
+    transition: 500ms ease;
 }
 
-#homeSlider .slider-button:is(:hover, :focus-visible, :active) {
-  background-color: hsl(38, 61%, 73%);
-  color: hsla(40, 12%, 5%, 1);
-  border-color: hsla(40, 12%, 5%, 1);
-  letter-spacing: 0.25rem;
+#homeSlider .slider-button:is(:hover,
+ :focus-visible,
+ :active) {
+    background-color: hsl(38, 61%, 73%);
+    color: hsla(40, 12%, 5%, 1);
+    border-color: hsla(40, 12%, 5%, 1);
+    letter-spacing: 0.25rem;
 }
 
 .slider-reveal {
-  transform: translateY(30px);
-  opacity: 0;
+    transform: translateY(30px);
+    opacity: 0;
 }
 
 #homeSlider .carousel-item.active .slider-reveal {
-  animation: sliderReveal 1s ease forwards;
+    animation: sliderReveal 1s ease forwards;
 }
 
 @keyframes sliderReveal {
-  0% {
-    transform: translateY(30px);
-    opacity: 0;
-  }
-
-  100% {
-    transform: translateY(0);
-    opacity: 1;
-  }
+    0% {
+        transform: translateY(30px);
+        opacity: 0;
+    }
+    100% {
+        transform: translateY(0);
+        opacity: 1;
+    }
 }
 
 #homeSlider .carousel-item.active .slider-subtitle {
-  animation-delay: 500ms;
+    animation-delay: 500ms;
 }
 
 #homeSlider .carousel-item.active .slider-title {
-  animation-delay: 1000ms;
+    animation-delay: 1000ms;
 }
 
 #homeSlider .carousel-item.active .slider-text {
-  animation-delay: 1.5s;
+    animation-delay: 1.5s;
 }
 
 #homeSlider .carousel-item.active .slider-button {
-  animation-delay: 2s;
+    animation-delay: 2s;
 }
 
 #homeSlider .carousel-item.active .slider-bg {
-  animation: smoothScale 7s linear forwards;
+    animation: smoothScale 7s linear forwards;
 }
 
 @keyframes smoothScale {
-  0% {
-    transform: scale(1);
-  }
-
-  100% {
-    transform: scale(1.15);
-  }
+    0% {
+        transform: scale(1);
+    }
+    100% {
+        transform: scale(1.15);
+    }
 }
 
+
 /* ABOUT US SECTION */
+
 .about_us {
-  background-color: rgb(224, 224, 252);
-  overflow: hidden;
-  padding-bottom: 120px;
+    background-color: rgb(224, 224, 252);
+    overflow: hidden;
+    padding-bottom: 120px;
 }
 
 .about_us .discount-rolling h1 {
-  text-transform: uppercase;
-  background: linear-gradient(to right, #de6262, #ffb88c);
-  border-bottom: 5px solid var(--bs-body-color);
-  border-right: 4px solid var(--bs-body-color);
-  animation: marquee 10s linear infinite;
-  margin-bottom: 0px;
+    text-transform: uppercase;
+    background: linear-gradient(to right, #de6262, #ffb88c);
+    border-bottom: 5px solid var(--bs-body-color);
+    border-right: 4px solid var(--bs-body-color);
+    animation: marquee 10s linear infinite;
+    margin-bottom: 0px;
 }
 
 .about_us .discount-rolling {
-  white-space: nowrap;
-  overflow: hidden;
-  box-shadow: 0 0 5px 5px rgba(214, 22, 22, 0.145);
+    white-space: nowrap;
+    overflow: hidden;
+    box-shadow: 0 0 5px 5px rgba(214, 22, 22, 0.145);
 }
 
 @keyframes marquee {
-  0% {
-    transform: translateX(0);
-  }
-
-  100% {
-    transform: translateX(-100%);
-  }
+    0% {
+        transform: translateX(0);
+    }
+    100% {
+        transform: translateX(-100%);
+    }
 }
 
 .about_us .tagline {
-  color: brown;
-  font-family: "Bree Serif", serif;
-  font-size: 2.3rem;
-  width: 80%;
-  margin-bottom: 60px;
-  text-wrap: wrap;
+    color: brown;
+    font-family: "Bree Serif", serif;
+    font-size: 2.3rem;
+    width: 80%;
+    margin-bottom: 60px;
+    text-wrap: wrap;
 }
 
 .about_us .qualities {
-  font-family: "Bree Serif", serif;
-  text-align: center;
-  margin: auto 0;
+    font-family: "Bree Serif", serif;
+    text-align: center;
+    margin: auto 0;
 }
 
 .about_us .qualities img {
-  max-width: 80%;
-  min-width: 60%;
-  border-radius: 20px;
-  aspect-ratio: 1.6875;
+    max-width: 80%;
+    min-width: 60%;
+    border-radius: 20px;
+    aspect-ratio: 1.6875;
 }
 
 .about_us .qualities .card {
-  border: 2px solid brown;
-  margin: 0 1vw;
-  height: 100%;
+    border: 2px solid brown;
+    margin: 0 1vw;
+    height: 100%;
 }
 
 .about_us .card-title {
-  font-size: 1.5rem;
+    font-size: 1.5rem;
 }
 
 .about_us .card:hover {
-  box-shadow: #212123 1px 1px 8px;
-  scale: 1.015;
-  cursor: pointer;
+    box-shadow: #212123 1px 1px 8px;
+    scale: 1.015;
+    cursor: pointer;
 }
 
+
 /* SERVICES SECTION */
+
 .services_container .card {
-  border: none;
-  border-radius: 0px;
+    border: none;
+    border-radius: 0px;
 }
 
 .services_container .img-container {
-  height: 550px;
-  width: 100%;
-  background-color: black;
+    height: 550px;
+    width: 100%;
+    background-color: black;
 }
 
 @media screen and (max-width: 768px) {
-  .services_container .img-container {
-    height: 900px;
-  }
+    .services_container .img-container {
+        height: 900px;
+    }
 }
 
 @media screen and (max-width: 1200px) {
-  .services_container .box_main {
-    text-align: center;
-  }
+    .services_container .box_main {
+        text-align: center;
+    }
 }
 
 .services_container img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  opacity: 0.4;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    opacity: 0.4;
 }
 
 .services_container .card-img-overlay {
-  overflow: hidden;
-  color: white;
+    overflow: hidden;
+    color: white;
 }
 
 .services_container .box_main {
-  font-family: "Oswald", sans-serif;
-  padding: 0;
+    font-family: "Oswald", sans-serif;
+    padding: 0;
 }
 
 .services_container .box_main h1 {
-  font-size: 4.5rem;
-  padding: 0;
-  margin-bottom: 6px;
+    font-size: 4.5rem;
+    padding: 0;
+    margin-bottom: 6px;
 }
 
 .services_container .box {
-  font-size: 1.3rem;
-  padding: 0;
-  text-align: center;
+    font-size: 1.3rem;
+    padding: 0;
+    text-align: center;
 }
 
 .services_container .box h1 {
-  margin-bottom: 0.5em;
+    margin-bottom: 0.5em;
 }
 
 .services_container .btn {
-  text-transform: uppercase;
-  font-size: 1.2rem;
-  font-weight: 700;
-  letter-spacing: 3px;
-  max-width: max-content;
-  border-width: 2px;
+    text-transform: uppercase;
+    font-size: 1.2rem;
+    font-weight: 700;
+    letter-spacing: 3px;
+    max-width: max-content;
+    border-width: 2px;
 }
 
+
 /* MENU CONTAINER */
+
 .menu_container {
-  background-color: rgb(224, 224, 252);
-  padding: 100px 0px 100px 0px;
-  overflow: hidden;
+    background-color: rgb(224, 224, 252);
+    padding: 100px 0px 100px 0px;
+    overflow: hidden;
 }
 
 .mainhead h1 {
-  font-family: "Bree Serif", serif;
-  font-size: 2.8rem;
+    font-family: "Bree Serif", serif;
+    font-size: 2.8rem;
 }
 
 .mainhead p {
-  font-size: 1.2rem;
-  color: brown;
-  font-family: "Bree Serif", serif;
+    font-size: 1.2rem;
+    color: brown;
+    font-family: "Bree Serif", serif;
 }
 
 .mainhead .btn {
-  border: 2px solid brown;
-  font-size: 1.4rem;
-  padding: 7px;
-  border-radius: 10px;
-  font-family: "Bree Serif", serif;
-  margin-bottom: 50px;
-  background-color: brown;
-  color: white;
+    border: 2px solid brown;
+    font-size: 1.4rem;
+    padding: 7px;
+    border-radius: 10px;
+    font-family: "Bree Serif", serif;
+    margin-bottom: 50px;
+    background-color: brown;
+    color: white;
 }
 
 .mainhead .btn:hover {
-  border: 2px solid brown;
-  color: brown;
-  background-color: #f2f2f2;
+    border: 2px solid brown;
+    color: brown;
+    background-color: #f2f2f2;
 }
 
 .menu_items .items {
-  text-align: center;
-  max-height: 370px;
-  background-color: #f2f2f2;
-  border: 3px solid brown;
-  font-family: "Bree Serif", serif;
-  transition: 0.2s all ease-in;
-  border-radius: 10px;
+    text-align: center;
+    max-height: 370px;
+    background-color: #f2f2f2;
+    border: 3px solid brown;
+    font-family: "Bree Serif", serif;
+    transition: 0.2s all ease-in;
+    border-radius: 10px;
 }
 
 .menu_items .items:hover {
-  box-shadow: #212123 1px 1px 8px;
-  cursor: pointer;
-  scale: 1.02;
-  background-color: #ca8787;
+    box-shadow: #212123 1px 1px 8px;
+    cursor: pointer;
+    scale: 1.02;
+    background-color: #ca8787;
 }
 
 .menu_items .card-body {
-  min-height: 130px;
-  padding: 5px 5px 5px 5px;
+    min-height: 130px;
+    padding: 5px 5px 5px 5px;
 }
 
 .menu_items .img-container {
-  width: 90%;
-  margin-top: 1em;
-  margin-right: auto;
-  margin-left: auto;
+    width: 90%;
+    margin-top: 1em;
+    margin-right: auto;
+    margin-left: auto;
 }
 
 .menu_items img {
-  object-fit: cover;
-  object-position: center;
-  height: 220px;
-  width: 100%;
-  border-radius: 15px;
+    object-fit: cover;
+    object-position: center;
+    height: 220px;
+    width: 100%;
+    border-radius: 15px;
 }
 
 .menu_items .items h3 {
-  font-size: 1.4rem;
-  margin-top: 10px;
-  color: brown;
+    font-size: 1.4rem;
+    margin-top: 10px;
+    color: brown;
 }
 
+
 /* TESTIMONIALS */
+
 .testimonial-container {
-  background-color: brown;
+    background-color: brown;
 }
 
 .testimonial-container h2 {
-  font-size: 3rem;
-  margin-bottom: 1rem;
-  text-align: center;
-  color: white;
+    font-size: 3rem;
+    margin-bottom: 1rem;
+    text-align: center;
+    color: white;
 }
 
 .testimonial-container .description {
-  text-align: center;
-  width: 40%;
-  color: white;
-  margin: auto;
+    text-align: center;
+    width: 40%;
+    color: white;
+    margin: auto;
 }
 
 #testimonials .carousel-inner {
-  min-height: 350px;
+    min-height: 350px;
 }
 
 #testimonials .carousel-caption {
-  top: 165px;
-  left: 30%;
-  right: 30%;
+    top: 165px;
+    left: 30%;
+    right: 30%;
 }
 
 #testimonials .img-box {
-  width: 120px;
-  height: 120px;
-  margin: 0 auto;
-  border-radius: 50%;
+    width: 120px;
+    height: 120px;
+    margin: 0 auto;
+    border-radius: 50%;
 }
 
 #testimonials .img-box img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  border-radius: 50%;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 50%;
 }
 
 #testimonials .fa-star {
-  color: #ffdc12;
+    color: #ffdc12;
 }
 
 #testimonials .list-inline {
-  list-style-type: none;
+    list-style-type: none;
 }
 
 @media screen and (max-width: 768px) {
-  .testimonial-container .description {
-    width: 70%;
-  }
-
-  #testimonials .carousel-caption {
-    left: 10%;
-    right: 10%;
-  }
+    .testimonial-container .description {
+        width: 70%;
+    }
+    #testimonials .carousel-caption {
+        left: 10%;
+        right: 10%;
+    }
 }
 
+
 /* IMAGE GALLERY */
+
 .picture-gallery .col-3 {
-  overflow: hidden;
+    overflow: hidden;
 }
 
 .picture-gallery img {
-  width: 100%;
-  transform: scale(1.15);
-  opacity: 0.7;
+    width: 100%;
+    transform: scale(1.15);
+    opacity: 0.7;
 }
 
 .picture-gallery img:hover {
-  transform: scale(1.03);
-  opacity: 1;
+    transform: scale(1.03);
+    opacity: 1;
 }
 
+
 /* APP DOWNLOAD SECTION */
+
 .app_download {
-  background-color: brown;
-  height: fit-content;
-  color: white;
-  padding-left: 4%;
-  padding-top: 4%;
-  padding-right: 2%;
+    background-color: brown;
+    height: fit-content;
+    color: white;
+    padding-left: 4%;
+    padding-top: 4%;
+    padding-right: 2%;
 }
 
 .app_download h4 {
-  font-size: 2rem;
-  margin-bottom: 1.5rem;
+    font-size: 2rem;
+    margin-bottom: 1.5rem;
 }
 
 .app_download h2 {
-  font-size: 3.5rem;
+    font-size: 3.5rem;
 }
 
 .app_download p {
-  font-size: 1.3rem;
-  font-style: italic;
+    font-size: 1.3rem;
+    font-style: italic;
 }
 
 .app_download img:hover {
-  transform: scale(1.1);
+    transform: scale(1.1);
 }
 
 .app-download-img {
-  max-height: 70px;
-  padding: 10px;
+    max-height: 70px;
+    padding: 10px;
 }
 
+
 /* FOR CONTENT LOADER AT THE BEGINNING  */
+
 #loader-wrapper {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1100;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1100;
 }
 
 #loader-wrapper .loader-section {
-  position: fixed;
-  top: 0;
-  width: 51%;
-  height: 100%;
-  background: #eeeeee;
-  z-index: 1000;
-  -webkit-transform: translateX(0);
-  transform: translateX(0);
+    position: fixed;
+    top: 0;
+    width: 51%;
+    height: 100%;
+    background: #eeeeee;
+    z-index: 1000;
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
 }
 
 #loader-wrapper .loader-section.section-left {
-  left: 0;
+    left: 0;
 }
 
 #loader-wrapper .loader-section.section-right {
-  right: 0;
+    right: 0;
 }
 
 #loader {
-  display: block;
-  position: relative;
-  left: 50%;
-  top: 50%;
-  width: 150px;
-  height: 150px;
-  margin: -75px 0 0 -75px;
-  border-radius: 50%;
-  border: 3px solid transparent;
-  border-top-color: #dc5f00;
-  -webkit-animation: spin 2s linear infinite;
-  animation: spin 2s linear infinite;
-  z-index: 99999;
+    display: block;
+    position: relative;
+    left: 50%;
+    top: 50%;
+    width: 150px;
+    height: 150px;
+    margin: -75px 0 0 -75px;
+    border-radius: 50%;
+    border: 3px solid transparent;
+    border-top-color: #dc5f00;
+    -webkit-animation: spin 2s linear infinite;
+    animation: spin 2s linear infinite;
+    z-index: 99999;
 }
 
 #loader:before {
-  content: "";
-  position: absolute;
-  top: 5px;
-  left: 5px;
-  right: 5px;
-  bottom: 5px;
-  border-radius: 50%;
-  border: 3px solid transparent;
-  border-top-color: #373a40;
-  -webkit-animation: spin 3s linear infinite;
-  animation: spin 3s linear infinite;
+    content: "";
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    right: 5px;
+    bottom: 5px;
+    border-radius: 50%;
+    border: 3px solid transparent;
+    border-top-color: #373a40;
+    -webkit-animation: spin 3s linear infinite;
+    animation: spin 3s linear infinite;
 }
 
 #loader:after {
-  content: "";
-  position: absolute;
-  top: 15px;
-  left: 15px;
-  right: 15px;
-  bottom: 15px;
-  border-radius: 50%;
-  border: 3px solid transparent;
-  border-top-color: #686d76;
-  -webkit-animation: spin 1.5s linear infinite;
-  animation: spin 1.5s linear infinite;
+    content: "";
+    position: absolute;
+    top: 15px;
+    left: 15px;
+    right: 15px;
+    bottom: 15px;
+    border-radius: 50%;
+    border: 3px solid transparent;
+    border-top-color: #686d76;
+    -webkit-animation: spin 1.5s linear infinite;
+    animation: spin 1.5s linear infinite;
 }
 
 .loaded #loader-wrapper {
-  visibility: hidden;
-  -webkit-transform: translateY(-100%);
-  transform: translateY(-100%);
-  -webkit-transition: all 0.3s 1s ease-out;
-  transition: all 0.3s 1s ease-out;
+    visibility: hidden;
+    -webkit-transform: translateY(-100%);
+    transform: translateY(-100%);
+    -webkit-transition: all 0.3s 1s ease-out;
+    transition: all 0.3s 1s ease-out;
 }
 
 .loaded #loader-wrapper .loader-section.section-left {
-  -webkit-transform: translateX(-100%);
-  transform: translateX(-100%);
-  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+    -webkit-transform: translateX(-100%);
+    transform: translateX(-100%);
+    -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+    transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
 }
 
 .loaded #loader-wrapper .loader-section.section-right {
-  -webkit-transform: translateX(100%);
-  transform: translateX(100%);
-  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+    -webkit-transform: translateX(100%);
+    transform: translateX(100%);
+    -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+    transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
 }
 
 .loaded #loader {
-  opacity: 0;
-  -webkit-transition: all 0.3s ease-out;
-  transition: all 0.3s ease-out;
+    opacity: 0;
+    -webkit-transition: all 0.3s ease-out;
+    transition: all 0.3s ease-out;
 }
 
 @-webkit-keyframes spin {
-  0% {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-
-  100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
 }
 
 @keyframes spin {
-  0% {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-
-  100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
 }
 
+
 /* FAQS CONTAINER */
+
 .faq-section {
-  background-color: brown;
-  padding: 50px 20px;
+    background-color: brown;
+    padding: 50px 20px;
 }
 
 @keyframes slideIn {
-  from {
-    transform: translateX(-100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
+    from {
+        transform: translateX(-100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
 }
 
 .faq-item {
-  margin-bottom: 20px;
-  border-bottom: 1px solid #ffddcc;
-  padding-bottom: 10px;
-  opacity: 0;
-  transition: background-color 0.3s ease, transform 0.3s ease;
+    margin-bottom: 20px;
+    border-bottom: 1px solid #ffddcc;
+    padding-bottom: 10px;
+    opacity: 88;
+    transition: background-color 0.3s ease, transform 0.3s ease;
 }
 
 .faq-item.visible {
-  animation: slideIn 1s forwards;
-  opacity: 1;
+    animation: slideIn 1s forwards;
+    opacity: 1;
 }
 
 .faq-container {
-  max-width: 800px;
-  margin: 0 auto;
-  color: white;
-  border-radius: 10px;
-  background-color: #aa5858;
-  padding: 20px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7);
+    max-width: 800px;
+    margin: 0 auto;
+    color: white;
+    border-radius: 10px;
+    background-color: #aa5858;
+    padding: 20px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7);
 }
 
 .faq-container h1 {
-  text-align: center;
-  margin-bottom: 30px;
-  font-size: 2.5rem;
-  color: #fef8f6;
-  font-family: "Arial", sans-serif;
+    text-align: center;
+    margin-bottom: 30px;
+    font-size: 2.5rem;
+    color: #fef8f6;
+    font-family: "Arial", sans-serif;
 }
 
 .faq-item {
-  margin-bottom: 20px;
-  border-bottom: 1px solid #ffddcc;
-  padding-bottom: 10px;
-  transition: background-color 0.3s ease, transform 0.3s ease;
+    margin-bottom: 20px;
+    border-bottom: 1px solid #ffddcc;
+    padding-bottom: 10px;
+    transition: background-color 0.3s ease, transform 0.3s ease;
 }
 
 .faq-item:hover {
-  background-color: #c4c0c0;
-  transform: scale(1.02);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
+    background-color: #c4c0c0;
+    transform: scale(1.02);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
 }
 
 .faq-item h2 {
-  cursor: pointer;
-  margin: 0;
-  padding: 15px;
-  background-color: brown;
-  border-radius: 5px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  transition: background-color 0.3s ease, box-shadow 0.3s ease;
-  font-family: "Arial", sans-serif;
+    cursor: pointer;
+    margin: 0;
+    padding: 15px;
+    background-color: brown;
+    border-radius: 5px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    transition: background-color 0.3s ease, box-shadow 0.3s ease;
+    font-family: "Arial", sans-serif;
 }
 
 .faq-item h2:hover {
-  background-color: #460d0d;
-  box-shadow: 0 4px 8px rgba(91, 19, 19, 0.5);
+    background-color: #460d0d;
+    box-shadow: 0 4px 8px rgba(91, 19, 19, 0.5);
 }
 
 .faq-item p {
-  display: none;
-  margin: 10px 10px 15px;
-  line-height: 1.6;
-  opacity: 0;
-  transition: opacity 0.3s ease, max-height 0.3s ease;
-  max-height: 0;
-  overflow: hidden;
+    display: none;
+    margin: 10px 10px 15px;
+    line-height: 1.6;
+    opacity: 0;
+    transition: opacity 0.3s ease, max-height 0.3s ease;
+    max-height: 0;
+    overflow: hidden;
 }
 
 .faq-item.active p {
-  display: block;
-  opacity: 1;
-  max-height: 500px; /* Arbitrary large value to allow for smooth transition */
+    display: block;
+    opacity: 1;
+    max-height: 500px;
+    /* Arbitrary large value to allow for smooth transition */
 }
 
 .faq-item h2::after {
-  content: "\25BC"; /* Unicode for downward arrow */
-  font-size: 1rem;
-  background-color: br;
-  color: white;
-  transition: transform 0.3s ease;
+    content: "\25BC";
+    /* Unicode for downward arrow */
+    font-size: 1rem;
+    background-color: br;
+    color: white;
+    transition: transform 0.3s ease;
 }
 
 .faq-item.active h2::after {
-  transform: rotate(-180deg); /* Rotate the arrow when active */
+    transform: rotate(-180deg);
+    /* Rotate the arrow when active */
 }
 
+
 /* Additional styles for a more attractive look */
+
 .faq-container p {
-  font-size: 1.4rem;
-  font-family: "Verdana", sans-serif;
-  color: #212123;
+    font-size: 1.4rem;
+    font-family: "Verdana", sans-serif;
+    color: #212123;
 }
 
 .faq-container a {
-  color: #ffddcc;
-  text-decoration: underline;
+    color: #ffddcc;
+    text-decoration: underline;
 }
 
 .faq-container a:hover {
-  color: #ffc7b2; /* Slightly lighter peach color on hover */
+    color: #ffc7b2;
+    /* Slightly lighter peach color on hover */
 }
 
 @media (max-width: 600px) {
-  .faq-container {
-    padding: 20px;
-  }
-
-  .faq-container h1 {
-    font-size: 2rem;
-  }
-
-  .faq-item h2 {
-    padding: 10px;
-  }
-
-  .faq-container p {
-    font-size: 1rem;
-  }
-}
+    .faq-container {
+        padding: 20px;
+    }
+    .faq-container h1 {
+        font-size: 2rem;
+    }
+    .faq-item h2 {
+        padding: 10px;
+    }
+    .faq-container p {
+        font-size: 1rem;
+    }
+}
\ No newline at end of file

From ca90c0b8203df91a87474a0c57e6891f2b74dbdf Mon Sep 17 00:00:00 2001
From: samarsajad <142666229+samarsajad@users.noreply.github.com>
Date: Thu, 25 Jul 2024 13:54:22 +0530
Subject: [PATCH 2/2] added google translate

---
 Css-files/googletranslate.css | 127 ++++++++++++++++++++++++++++++++++
 Html-files/cart.html          |   1 +
 Html-files/googletranslate.js |  27 ++++++++
 index.html                    |  21 ++++++
 4 files changed, 176 insertions(+)
 create mode 100644 Css-files/googletranslate.css
 create mode 100644 Html-files/googletranslate.js

diff --git a/Css-files/googletranslate.css b/Css-files/googletranslate.css
new file mode 100644
index 00000000..f37f6bd6
--- /dev/null
+++ b/Css-files/googletranslate.css
@@ -0,0 +1,127 @@
+#translateButton {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    z-index: 1000;
+    width: 50px;  
+    height: 50px;
+    border-radius: 50%; 
+    border: none; 
+    background: linear-gradient( rgb(234, 16, 16), #f2a736);
+
+    color: white; 
+    text-align: center; 
+    display: inline-block; 
+    font-size: 16px; 
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 12px;
+    line-height: 1;
+    text-align: center;
+    white-space: nowrap;
+    transition: transform 0.3s ease;
+    margin-right: 1390px;
+    margin-bottom: 55px;
+}
+#translateButton:hover {
+    transform: scale(1.2); 
+}
+
+/* The popup modal */
+.popup {
+    display: none; 
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgb(0,0,0); 
+    background-color: rgba(0,0,0,0.4); 
+   
+}
+
+/* Popup content */
+.popup-content {
+    background-color: #CF2123; 
+    margin-top: 600px;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 300px;
+    border-radius: 10px;
+    position: relative;
+    margin-right: 1300px;
+    margin-top:570px;
+}
+
+/* Close button */
+.close {
+    color: #073725;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+.close:hover,
+.close:focus {
+    color: black;
+    text-decoration: none;
+}
+
+/* Hide the default Google Translate widget */
+.goog-te-banner-frame.skiptranslate, .goog-te-gadget-icon {
+    display: none !important;
+}
+
+body {
+    top: 0px !important;
+}
+
+/* Hide the "Powered by Google" branding */
+.goog-logo-link {
+    display: none !important;
+}
+
+.goog-te-gadget {
+    height: 28px !important;
+    overflow: hidden;
+}
+
+/* Hide Google Translate notifications */
+.goog-te-spinner-pos,
+.goog-te-spinner,
+.goog-te-balloon-frame,
+.goog-te-banner-frame,
+.goog-te-banner,
+.goog-te-balloon {
+    display: none !important;
+}
+
+/* Custom styles for the Google Translate dropdown */
+#google_translate_element select {
+    background: #ffffff; 
+    border: 1px solid #ccc; 
+    color: #CF2123; 
+    padding: 5px; 
+    font-size: 14px; 
+    border-radius: 5px; 
+}
+
+/* Hide the Google Translate bar */
+body > .skiptranslate {
+    display: none !important;
+}
+
+.goog-te-banner-frame.skiptranslate {
+    display: none !important;
+}
+.goog-te-banner-frame {
+    display: none !important;
+}
+.goog-te-banner {
+    display: none !important;
+}
\ No newline at end of file
diff --git a/Html-files/cart.html b/Html-files/cart.html
index 06247d9e..fb07e214 100644
--- a/Html-files/cart.html
+++ b/Html-files/cart.html
@@ -445,6 +445,7 @@ <h3 class="text-center mb-3">Contact Us!</h3>
             </div>
         </div>
     </div>
+    
 
     <div class="foot-panel2">
         <div class="media-handles pt-3 pb-2">
diff --git a/Html-files/googletranslate.js b/Html-files/googletranslate.js
new file mode 100644
index 00000000..b75411d2
--- /dev/null
+++ b/Html-files/googletranslate.js
@@ -0,0 +1,27 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // Get the popup
+    var popup = document.getElementById('translatePopup');
+
+    // Get the button that opens the popup
+    var btn = document.getElementById('translateButton');
+
+    // Get the <span> element that closes the popup
+    var span = document.getElementsByClassName('close')[0];
+
+    // When the user clicks the button, open the popup 
+    btn.onclick = function() {
+        popup.style.display = 'block';
+    }
+
+    // When the user clicks on <span> (x), close the popup
+    span.onclick = function() {
+        popup.style.display = 'none';
+    }
+
+    // When the user clicks anywhere outside of the popup, close it
+    window.onclick = function(event) {
+        if (event.target == popup) {
+            popup.style.display = 'none';
+        }
+    }
+});
\ No newline at end of file
diff --git a/index.html b/index.html
index 31b5c779..7af92d77 100644
--- a/index.html
+++ b/index.html
@@ -32,6 +32,7 @@
     <link rel="stylesheet" href="Css-files/footer.css">
     <link rel="stylesheet" href="./style.css">
     <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
+    <link rel="stylesheet" href="Css-files/googletranslate.css">
     <style>
         .legal-pages {
             text-decoration: none;
@@ -976,6 +977,26 @@ <h4>Follow Us</h4>
             <path d="M440-160v-487L216-423l-56-57 320-320 320 320-56 57-224-224v487h-80Z" />
         </svg>
     </button>
+    <button id="translateButton">Translate</button>
+
+    <!-- Popup for Google Translate -->
+    <div id="translatePopup" class="popup">
+        <div class="popup-content">
+            <span class="close">&times;</span>
+            <div id="google_translate_element"></div>
+        </div>
+    </div>
+    <script type="text/javascript">
+      function googleTranslateElementInit() {
+          new google.translate.TranslateElement({
+              pageLanguage: 'en',
+          }, 'google_translate_element');
+      }
+  </script>
+  <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+
+  
+  <script src=../Html-files/googletranslate.js></script>
 
 
     <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
