diff --git a/public/image/logo5.png b/public/image/logo5.png
new file mode 100644
index 0000000..a7cea1f
Binary files /dev/null and b/public/image/logo5.png differ
diff --git a/public/styles/Home.css b/public/styles/Home.css
index d60d817..18f7cf8 100644
--- a/public/styles/Home.css
+++ b/public/styles/Home.css
@@ -1,1455 +1,1442 @@
-*{
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    font-family: sans-serif;
-}
-
-
-
-#Effect {
-    color: white;
-    text-shadow: 1px 1px 2px black, 0 0 10px rgb(187, 152, 35);}
-
-section{
-    width: 100%;
-    height: 100vh;
-}
-
-section nav{
-    display: flex;
-    align-items: center;
-    justify-content: space-around;
-    background: #fff;
-    position: fixed;
-    right: 0;
-    left: 0;
-    z-index: 1000;
-    box-shadow: 0 0 10px rgba(0,0,0,0.5);
-    height: 80px; 
-    padding: 10px 20px; 
-    margin: 0; 
-    line-height: 1; 
-}
-.cart{
-    width: 20px;
-    position: relative;
-    left: -15%;
-    cursor: pointer;
-}
-
-section nav .logo img{
-    /* width: 120px;
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: sans-serif;
+}
+
+/* ---------------------------nav------------------------ */
+#Effect:hover::after {
+  transform: scaleX(1);
+}
+
+#Effect::after {
+  content: "";
+  width: 150%;
+  background-color: #fff;
+  height: 2px;
+  left: -25%;
+  position: absolute;
+  bottom: -6px;
+  transform: scaleX(0);
+  transition: transform 0.2s linear;
+}
+section nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: rgba(211, 200, 25, 1);
+  background: linear-gradient(
+    90deg,
+    rgba(250, 204, 34, 1),
+    rgba(228, 172, 2, 1)
+  );
+  position: fixed;
+  right: 0;
+  left: 0;
+  z-index: 1000;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  height: 80px;
+  padding: 10px 10px;
+  margin: 0;
+  line-height: 1;
+}
+section nav:hover {
+  background: linear-gradient(
+    90deg,
+    rgba(228, 172, 2, 1),
+    rgba(250, 204, 34, 1)
+  );
+}
+section nav ul li {
+  position: relative;
+}
+section nav ul li a {
+  font-weight: lighter;
+  color: black;
+  text-decoration: none;
+  transition: 0.3s;
+}
+section nav ul li a i {
+  margin-right: 5px;
+}
+
+section nav ul li a.action {
+  color: #facc22;
+}
+
+section nav ul li a:hover {
+  color: #fff;
+  text-shadow: 0px 0px 20px white;
+}
+section {
+  width: 100%;
+  height: 100vh;
+}
+
+.cart {
+  width: 20px;
+  position: relative;
+  left: -15%;
+  cursor: pointer;
+}
+
+section nav .logo img {
+  /* width: 120px;
     margin: 20px 0; */
-    width: 140px;
-    margin: 20px;
-    position: relative;
-    left: -118%;
-    cursor: pointer;
-    margin-left: 110%;      
+  width: 140px;
+  margin: 20px;
+  position: relative;
+  left: -118%;
+  cursor: pointer;
+  margin-left: 110%;
 }
 
-section nav ul{
-    list-style: none;
-    
-    margin-left: 60%;
-}
+section nav ul {
+  list-style: none;
 
-section nav ul li{
-    display: inline-block;
-    margin: 0 10px;
-    
+  margin-left: 60%;
 }
 
-section nav ul li a{
-    color: black;
-    text-decoration: none;
-    transition: 0.3s;
-   
-    
+section nav ul li {
+  display: inline-block;
+  margin: 0 10px;
 }
 
-section nav ul li a.action{
-    color: #facc22;
+section nav .login a {
+  color: #000;
+  text-decoration: none;
+  border: 2px solid #facc22;
+  border-radius: 20px;
+  padding: 7px 20px;
+  transition: 0.3s;
 }
 
-section nav ul li a:hover{
-    color: #facc22;
+section nav .login a:hover {
+  background: #facc22;
+  color: #fff;
 }
 
-section nav .login a{
-    color: #000;
-    text-decoration: none;
-    border: 2px solid #facc22;
-    border-radius: 20px;
-    padding: 7px 20px;
-    transition: 0.3s;
+section .main {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  position: relative;
+  top: 80px;
 }
 
-section nav .login a:hover{
-    background: #facc22;
-    color: #fff;
+section .main .main_text h1 {
+  color: #000;
+  font-size: 75px;
+  position: relative;
+  top: -25px;
+  left: 5%;
 }
 
-section .main{
-    display: flex;
-    align-items: center;
-    justify-content: space-around;
-    position: relative;
-    top: 80px;
+section .main .main_text h1 span {
+  color: #facc22;
+  font-family: polo;
 }
 
-section .main .main_text h1{
-    color: #000;
-    font-size: 75px;
-    position: relative;
-    top: -25px;
-    left: 5%;
+section .main .main_text p {
+  color: #000;
+  width: 650px;
+  position: relative;
+  top: 20px;
+  left: 5%;
+  line-height: 23px;
+  text-align: justify;
 }
 
-section .main .main_text h1 span{
-    color: #facc22;
-    font-family: polo;
+section .main .main_text .btn i {
+  margin-right: 8px;
 }
 
-section .main .main_text p{
-    color: #000;
-    width: 650px;
-    position: relative;
-    top: 20px;
-    left: 5%;
-    line-height: 23px;
-    text-align: justify;
+section .main .main_text .btn {
+  color: #000;
+  text-decoration: none;
+  border: 2px solid #facc22;
+  padding: 10px 20px;
+  position: relative;
+  top: 100px;
+  left: 5%;
+  transition: 0.3s;
 }
 
-section .main .main_text .btn i{
-    margin-right: 8px;
+section .main .main_text .btn:hover {
+  color: #fff;
 }
 
-section .main .main_text .btn{
-    color: #000;
-    text-decoration: none;
-    border: 2px solid #facc22;
-    padding: 10px 20px;
-    position: relative;
-    top: 100px;
-    left: 5%;
-    transition: 0.3s;
+section .main .main_text .btn::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 100%;
+  background: #facc22;
+  z-index: -1;
+  transition: 0.3s;
 }
 
-section .main .main_text .btn:hover{
-    color: #fff;
+section .main .main_text .btn:hover::before {
+  top: unset;
+  width: 100%;
+  bottom: 0;
 }
 
-section .main .main_text .btn::before{
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 0;
-    height: 100%;
-    background: #facc22;
-    z-index: -1;
-    transition: 0.3s;
+section .main .main_image img {
+  width: 650px;
+  animation: animate 5s linear infinite;
 }
 
-section .main .main_text .btn:hover::before{
-    top: unset;
-    width: 100%;
-    bottom: 0;
-}
-
-section .main .main_image img{
-    width: 650px;
-    animation: animate 5s linear infinite;
-}
-
-
-
-
 /*--About--*/
 
-.about{
-    width: 100%;
-    height: 100%;
-    padding: 10px 0 0 0;
-    margin: 0;
-    background-image: url(/image/about_bg.jpg);
-    background-size: cover;
-    background-position: center;
+.about {
+  width: 100%;
+  height: 100%;
+  padding: 10px 0 0 0;
+  margin: 0;
+  background-image: url(/image/about_bg.jpg);
+  background-size: cover;
+  background-position: center;
 }
 
-.about .about_main{
-    display: flex;
-    width: 100%;
-    align-items: center;
-    justify-content: space-around;
+.about .about_main {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-around;
 }
 
-
-.about .about_main .about_image img{
-    width: 100%;
+.about .about_main .about_image img {
+  width: 100%;
 }
 
-.about .about_main .about_text h1{
-    font-size: 45px;
-    position: relative;
-    bottom: 40px;
+.about .about_main .about_text h1 {
+  font-size: 45px;
+  position: relative;
+  bottom: 40px;
 }
 
-.about .about_main .about_text h1 span{
-    color: #facc22;
-    margin-right: 15px;
+.about .about_main .about_text h1 span {
+  color: #facc22;
+  margin-right: 15px;
 }
 
-.about .about_main .about_text h3{
-    position: relative;
-    bottom: 10px;
-    font-size: 25px;
+.about .about_main .about_text h3 {
+  position: relative;
+  bottom: 10px;
+  font-size: 25px;
 }
 
-.about .about_main .about_text p{
-    width: 650px;
-    text-align: justify;
-    line-height: 23px;
-    margin-top: 20px;
+.about .about_main .about_text p {
+  width: 650px;
+  text-align: justify;
+  line-height: 23px;
+  margin-top: 20px;
 }
 
-.about .about_main .about_text .about_services{
-    margin-top: 20px;
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
+.about .about_main .about_text .about_services {
+  margin-top: 20px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
 }
 
-.about .about_main .about_text .about_services .s_1{
-    display: flex;
-    align-items: center;
-    width: 180px;
-    background: #ececec;
-    padding: 10px;
-    border: 2px solid #facc22;
-    cursor: pointer;
+.about .about_main .about_text .about_services .s_1 {
+  display: flex;
+  align-items: center;
+  width: 180px;
+  background: #ececec;
+  padding: 10px;
+  border: 2px solid #facc22;
+  cursor: pointer;
 }
 
-.about .about_main .about_text .about_services .s_1 i{
-    color: #000;
-    margin: 5px 10px 5px 5px;
-    font-size: 20px;
-    transition: 0.3s;
+.about .about_main .about_text .about_services .s_1 i {
+  color: #000;
+  margin: 5px 10px 5px 5px;
+  font-size: 20px;
+  transition: 0.3s;
 }
 
-.about .about_main .about_text .about_services .s_1:hover i{
-    color: #facc22;
+.about .about_main .about_text .about_services .s_1:hover i {
+  color: #facc22;
 }
 
-.about .about_main .about_text .about_services .s_1 a{
-    text-decoration: none;
-    color: #000;
-    font-size: 16px;
+.about .about_main .about_text .about_services .s_1 a {
+  text-decoration: none;
+  color: #000;
+  font-size: 16px;
 }
 
-.about .about_main .about_text .about_btn i{
-    font-size: 15px;
-    margin-right: 8px;
+.about .about_main .about_text .about_btn i {
+  font-size: 15px;
+  margin-right: 8px;
 }
 
-.about .about_main .about_text .about_btn{
-    position: relative;
-    top: 35px;
-    padding: 10px 20px;
-    border: 2px solid #facc22;
-    text-decoration: none;
-    color: #000;
-    z-index: 5;
-    transition: 0.3s;
+.about .about_main .about_text .about_btn {
+  position: relative;
+  top: 35px;
+  padding: 10px 20px;
+  border: 2px solid #facc22;
+  text-decoration: none;
+  color: #000;
+  z-index: 5;
+  transition: 0.3s;
 }
 
-.about .about_main .about_text .about_btn:hover{
-    color: #fff;
+.about .about_main .about_text .about_btn:hover {
+  color: #fff;
 }
 
-.about .about_main .about_text .about_btn::before{
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 0;
-    height: 100%;
-    z-index: -1;
-    background: #facc22;
-    transition: 0.3s;
+.about .about_main .about_text .about_btn::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 100%;
+  z-index: -1;
+  background: #facc22;
+  transition: 0.3s;
 }
 
-.about .about_main .about_text .about_btn:hover::before{
-    top: unset;
-    width: 100%;
-    bottom: 0;
+.about .about_main .about_text .about_btn:hover::before {
+  top: unset;
+  width: 100%;
+  bottom: 0;
 }
 
-
-
-
-
 /*Menu*/
 
-.menu{
-    width: 100%;
-    height: 100vh;
-    padding: 75px 0;
+.menu {
+  width: 100%;
+  height: 100vh;
+  padding: 75px 0;
 }
 
-.menu h1{
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 45px;
-    color: #000;
+.menu h1 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 45px;
+  color: #000;
 }
 
-.menu h1 span{
-    color: #facc22;
-    margin-left: 15px;
+.menu h1 span {
+  color: #facc22;
+  margin-left: 15px;
 }
 
-.menu .menu_box{
-    width: 95%;
-    margin: 45px auto 0 auto;
-    display: grid;
-    grid-gap: 30px 10px;
-    grid-template-columns: 1fr 1fr 1fr;
+.menu .menu_box {
+  width: 95%;
+  margin: 45px auto 0 auto;
+  display: grid;
+  grid-gap: 30px 10px;
+  grid-template-columns: 1fr 1fr 1fr;
 }
 
-.menu .menu_box .menu_card{
-    background-image: url(/image/menu_card_bg.png);
-    background-size: cover;
-    background-position: center;
-    margin: 0 auto;
-    width: 450px;
-    height: 575px;
-    text-align: center;
-    cursor: pointer;
-    padding: 20px 0;
-    border-radius: 10px;
-    box-shadow: 3px 3px 10px rgba(0,0,0,0.2);
+.menu .menu_box .menu_card {
+  background-image: url(/image/menu_card_bg.png);
+  background-size: cover;
+  background-position: center;
+  margin: 0 auto;
+  width: 450px;
+  height: 575px;
+  text-align: center;
+  cursor: pointer;
+  padding: 20px 0;
+  border-radius: 10px;
+  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
 }
 
-.menu .menu_box .menu_card .menu_img{
-    margin: 0 auto;
-    width: 420px;
-    height: 300px;
-    margin-bottom: 15px;
-    box-shadow: 0 0 8px rgba(0,0,0,0.7);
+.menu .menu_box .menu_card .menu_img {
+  margin: 0 auto;
+  width: 420px;
+  height: 300px;
+  margin-bottom: 15px;
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
 }
 
-.menu .menu_box .menu_card .menu_img img{
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    object-position: center;
+.menu .menu_box .menu_card .menu_img img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
 }
 
-.menu .menu_box .menu_card .menu_text h2{
-    font-size: 30px;
-    margin-bottom: 15px;
+.menu .menu_box .menu_card .menu_text h2 {
+  font-size: 30px;
+  margin-bottom: 15px;
 }
 
-.menu .menu_box .menu_card .menu_text p{
-    line-height: 21px;
-    margin-bottom: 15px;
-    margin: 0 auto;
-    width: 400px;
+.menu .menu_box .menu_card .menu_text p {
+  line-height: 21px;
+  margin-bottom: 15px;
+  margin: 0 auto;
+  width: 400px;
 }
 
-.menu .menu_box .menu_card .menu_text .menu_icon{
-    color: #facc22;
-    margin: 8px 0;
+.menu .menu_box .menu_card .menu_text .menu_icon {
+  color: #facc22;
+  margin: 8px 0;
 }
 
-.menu .menu_box .menu_card .menu_text .price{
-    font-weight: bold;
-    font-size: 20px;
-    padding: 8px 0;
-    margin-left: 45px;
+.menu .menu_box .menu_card .menu_text .price {
+  font-weight: bold;
+  font-size: 20px;
+  padding: 8px 0;
+  margin-left: 45px;
 }
 
-.menu .menu_box .menu_card .menu_text .price sub{
-    margin-left: 5px;
-    color: #6d6a6a;
-    font-size: 13px;
+.menu .menu_box .menu_card .menu_text .price sub {
+  margin-left: 5px;
+  color: #6d6a6a;
+  font-size: 13px;
 }
 
-.menu .menu_box .menu_card .menu_text .menu_btn{
-    color: #000;
-    text-decoration: none;
-    padding: 10px 20px;
-    border: 2px solid #facc22;
-    position: relative;
-    top: 20px;
-    z-index: 5;
-    transition: 0.3s;
-}
-
-.menu .menu_box .menu_card .menu_text .menu_btn:hover{
-    color: #fff;
-}
-
-.menu .menu_box .menu_card .menu_text .menu_btn::before{
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 0;
-    height: 100%;
-    background-color: #facc22;
-    z-index: -1;
-    transition: 0.3s;
-}
-
-.menu .menu_box .menu_card .menu_text .menu_btn:hover::before{
-    top: unset;
-    bottom: 0;
-    width: 100%;
+.menu .menu_box .menu_card .menu_text .menu_btn {
+  color: #000;
+  text-decoration: none;
+  padding: 10px 20px;
+  border: 2px solid #facc22;
+  position: relative;
+  top: 20px;
+  z-index: 5;
+  transition: 0.3s;
 }
 
-.menu .menu_box .menu_card .menu_text .menu_btn i{
-    margin-right: 8px;
+.menu .menu_box .menu_card .menu_text .menu_btn:hover {
+  color: #fff;
 }
 
-
-
-
-/*Banner*/
-
-.banner{
-    width: 100%;
-    height: 50vh;
-    margin: 10px 0;
-    background-image: url(/image/banner.jpg);
-    background-size: cover;
-    background-position: center;
+.menu .menu_box .menu_card .menu_text .menu_btn::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 100%;
+  background-color: #facc22;
+  z-index: -1;
+  transition: 0.3s;
 }
 
-.banner h1{
-    font-family: P22Grenville;
-    color: #facc22;
-    font-size: 100px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    padding-top: 25px;
+.menu .menu_box .menu_card .menu_text .menu_btn:hover::before {
+  top: unset;
+  bottom: 0;
+  width: 100%;
 }
 
-.banner .banner_center{
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 250px;
-    margin: 0 auto;
-}
-.banner .banner_center h2{
-    font-size: 60px;
-    margin-right: 25px;
-    font-family: Norwester;
-    color: #fff;
-}
-
-.banner .banner_center h2 span{
-    margin-left: 45px;
-    font-size: 30px;
-    position: relative;
-    bottom: 15px;
-    font-family: Norwester;
-}
-
-.banner .banner_btn{
-    color: #fff;
-    border: 2px solid #facc22;
-    padding: 10px 20px;
-    text-decoration: none;
-    position: relative;
-    top: 10%;
-    left: 46%;
-    z-index: 5;
-}
-
-.banner .banner_btn i{
-    margin-right: 8px;
-}
-
-.banner .banner_btn::before{
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 0;
-    height: 100%;
-    background: #facc22;
-    transition: 0.3s;
-    z-index: -1;
-}
-
-.banner .banner_btn:hover::before{
-    width: 100%;
-    top: unset;
-    bottom: 0;
+.menu .menu_box .menu_card .menu_text .menu_btn i {
+  margin-right: 8px;
 }
 
+/*Banner*/
 
-
+.banner {
+  width: 100%;
+  height: 50vh;
+  margin: 10px 0;
+  background-image: url(/image/banner.jpg);
+  background-size: cover;
+  background-position: center;
+}
+
+.banner h1 {
+  font-family: P22Grenville;
+  color: #facc22;
+  font-size: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  padding-top: 25px;
+}
+
+.banner .banner_center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 250px;
+  margin: 0 auto;
+}
+.banner .banner_center h2 {
+  font-size: 60px;
+  margin-right: 25px;
+  font-family: Norwester;
+  color: #fff;
+}
+
+.banner .banner_center h2 span {
+  margin-left: 45px;
+  font-size: 30px;
+  position: relative;
+  bottom: 15px;
+  font-family: Norwester;
+}
+
+.banner .banner_btn {
+  color: #fff;
+  border: 2px solid #facc22;
+  padding: 10px 20px;
+  text-decoration: none;
+  position: relative;
+  top: 10%;
+  left: 46%;
+  z-index: 5;
+}
+
+.banner .banner_btn i {
+  margin-right: 8px;
+}
+
+.banner .banner_btn::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 100%;
+  background: #facc22;
+  transition: 0.3s;
+  z-index: -1;
+}
+
+.banner .banner_btn:hover::before {
+  width: 100%;
+  top: unset;
+  bottom: 0;
+}
 
 /*Gallery*/
 
-.gallery{
-    width: 100%;
-    padding: 35px 0 50px 0;
+.gallery {
+  width: 100%;
+  padding: 35px 0 50px 0;
 }
 
-.gallery h1{
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 45px;
+.gallery h1 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 45px;
 }
 
-.gallery h1 span{
-    color: #facc22;
-    margin-left: 15px;
+.gallery h1 span {
+  color: #facc22;
+  margin-left: 15px;
 }
 
-.gallery .gallery_box{
-    width: 95%;
-    margin: 50px auto 0 auto;
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    grid-gap: 10px;
+.gallery .gallery_box {
+  width: 95%;
+  margin: 50px auto 0 auto;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-gap: 10px;
 }
 
-.gallery .gallery_box .gallery_image{
-    width: 470px;
-    height: 350px;
-    margin: 0 auto;
-    border-radius: 5px;
-    overflow: hidden;
-    box-shadow: 2px 2px 8px rgba(0,0,0,0.3);
+.gallery .gallery_box .gallery_image {
+  width: 470px;
+  height: 350px;
+  margin: 0 auto;
+  border-radius: 5px;
+  overflow: hidden;
+  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
 }
 
-.gallery .gallery_box .gallery_image img{
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    object-position: center;
-    border-radius: 5px;
-    cursor: pointer;
-    transition: 0.3s;
+.gallery .gallery_box .gallery_image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: 0.3s;
 }
 
-.gallery .gallery_box .gallery_image:hover img{
-    transform: scale(1.1);
+.gallery .gallery_box .gallery_image:hover img {
+  transform: scale(1.1);
 }
 
-
-
 /*Offer*/
 
-.offer{
-    width: 100%;
-    height: auto;
-    margin-bottom: 20px;
+.offer {
+  width: 100%;
+  height: auto;
+  margin-bottom: 20px;
 }
 
-.offer .offer_box{
-    width: 95%;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-gap: 0 15px;
-    margin: 0 auto;
+.offer .offer_box {
+  width: 95%;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 0 15px;
+  margin: 0 auto;
 }
 
-.offer .offer_box .offer_card_1{
-    width: 720px;
-    height: 470px;
+.offer .offer_box .offer_card_1 {
+  width: 720px;
+  height: 470px;
 }
 
-.offer .offer_box .offer_card_1 .offer_img{
-    width: 720px;
-    height: 470px;
+.offer .offer_box .offer_card_1 .offer_img {
+  width: 720px;
+  height: 470px;
 }
 
-.offer .offer_box .offer_card_1 .offer_img img{
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    object-position: center;
+.offer .offer_box .offer_card_1 .offer_img img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
 }
 
-.offer .offer_box .offer_card_1 .offer_tag{
-    position: relative;
-    bottom: 400px;
-    color: #fff;
-    padding: 0 35px;
+.offer .offer_box .offer_card_1 .offer_tag {
+  position: relative;
+  bottom: 400px;
+  color: #fff;
+  padding: 0 35px;
 }
 
-.offer .offer_box .offer_card_1 .offer_tag h2{
-    font-size: 45px;
+.offer .offer_box .offer_card_1 .offer_tag h2 {
+  font-size: 45px;
 }
 
-.offer .offer_box .offer_card_1 .offer_tag h1{
-    font-family: QuillScript;
-    font-size: 60px;
-    color: #facc22;
+.offer .offer_box .offer_card_1 .offer_tag h1 {
+  font-family: QuillScript;
+  font-size: 60px;
+  color: #facc22;
 }
 
-.offer .offer_box .offer_card_1 .offer_tag p{
-    margin-top: 30px;
-    width: 200px;
-    text-align: justify;
-    line-height: 22px;
+.offer .offer_box .offer_card_1 .offer_tag p {
+  margin-top: 30px;
+  width: 200px;
+  text-align: justify;
+  line-height: 22px;
 }
 
-.offer .offer_box .offer_card_1 .offer_tag .offer_btn{
-    color: #fff;
-    border: 2px solid #facc22;
-    padding: 10px 20px;
-    text-decoration: none;
-    position: relative;
-    top: 30px;
-    z-index: 2;
-    transition: 0.3s;
+.offer .offer_box .offer_card_1 .offer_tag .offer_btn {
+  color: #fff;
+  border: 2px solid #facc22;
+  padding: 10px 20px;
+  text-decoration: none;
+  position: relative;
+  top: 30px;
+  z-index: 2;
+  transition: 0.3s;
 }
 
-.offer .offer_box .offer_card_1 .offer_tag .offer_btn::before{
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    background-color: #facc22;
-    width: 0;
-    height: 100%;
-    transition: 0.3s;
-    z-index: -1;
+.offer .offer_box .offer_card_1 .offer_tag .offer_btn::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: #facc22;
+  width: 0;
+  height: 100%;
+  transition: 0.3s;
+  z-index: -1;
 }
 
-.offer .offer_box .offer_card_1 .offer_tag .offer_btn:hover::before{
-    width: 100%;
+.offer .offer_box .offer_card_1 .offer_tag .offer_btn:hover::before {
+  width: 100%;
 }
 
-.offer .offer_box .offer_card_1 .offer_tag .offer_btn i{
-    margin-right: 8px;
+.offer .offer_box .offer_card_1 .offer_tag .offer_btn i {
+  margin-right: 8px;
 }
 
-.offer .offer_box .offer_card_2{
-    width: 720px;
-    height: 470px;
+.offer .offer_box .offer_card_2 {
+  width: 720px;
+  height: 470px;
 }
 
-.offer .offer_box .offer_card_2 .offer_img{
-    width: 720px;
-    height: 470px;
+.offer .offer_box .offer_card_2 .offer_img {
+  width: 720px;
+  height: 470px;
 }
 
-.offer .offer_box .offer_card_2 .offer_img img{
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    object-position: center;
+.offer .offer_box .offer_card_2 .offer_img img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
 }
 
-.offer .offer_box .offer_card_2 .offer_tag{
-    position: relative;
-    bottom: 400px;
-    color: #fff;
-    padding: 0 35px;
+.offer .offer_box .offer_card_2 .offer_tag {
+  position: relative;
+  bottom: 400px;
+  color: #fff;
+  padding: 0 35px;
 }
 
-.offer .offer_box .offer_card_2 .offer_tag h2{
-    font-size: 45px;
+.offer .offer_box .offer_card_2 .offer_tag h2 {
+  font-size: 45px;
 }
 
-.offer .offer_box .offer_card_2 .offer_tag h1{
-    font-family: QuillScript;
-    font-size: 60px;
-    color: #facc22;
+.offer .offer_box .offer_card_2 .offer_tag h1 {
+  font-family: QuillScript;
+  font-size: 60px;
+  color: #facc22;
 }
 
-.offer .offer_box .offer_card_2 .offer_tag p{
-    margin-top: 30px;
-    width: 200px;
-    text-align: justify;
-    line-height: 22px;
+.offer .offer_box .offer_card_2 .offer_tag p {
+  margin-top: 30px;
+  width: 200px;
+  text-align: justify;
+  line-height: 22px;
 }
 
-.offer .offer_box .offer_card_2 .offer_tag .offer_btn{
-    color: #fff;
-    border: 2px solid #facc22;
-    padding: 10px 20px;
-    text-decoration: none;
-    position: relative;
-    top: 30px;
-    z-index: 2;
-    transition: 0.3s;
+.offer .offer_box .offer_card_2 .offer_tag .offer_btn {
+  color: #fff;
+  border: 2px solid #facc22;
+  padding: 10px 20px;
+  text-decoration: none;
+  position: relative;
+  top: 30px;
+  z-index: 2;
+  transition: 0.3s;
 }
 
-.offer .offer_box .offer_card_2 .offer_tag .offer_btn::before{
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    background-color: #facc22;
-    width: 0;
-    height: 100%;
-    transition: 0.3s;
-    z-index: -1;
+.offer .offer_box .offer_card_2 .offer_tag .offer_btn::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: #facc22;
+  width: 0;
+  height: 100%;
+  transition: 0.3s;
+  z-index: -1;
 }
 
-.offer .offer_box .offer_card_2 .offer_tag .offer_btn:hover::before{
-    width: 100%;
+.offer .offer_box .offer_card_2 .offer_tag .offer_btn:hover::before {
+  width: 100%;
 }
 
-.offer .offer_box .offer_card_2 .offer_tag .offer_btn i{
-    margin-right: 8px;
+.offer .offer_box .offer_card_2 .offer_tag .offer_btn i {
+  margin-right: 8px;
 }
 
-
-
-
-
 /*Team*/
 
-.team{
-    width: 100%;
-    height: 77vh;
-    padding: 10px 0;
+.team {
+  width: 100%;
+  height: 77vh;
+  padding: 10px 0;
 }
 
-.team h1{
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 45px;
+.team h1 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 45px;
 }
 
-.team h1 span{
-    color: #facc22;
-    margin-left: 15px;
+.team h1 span {
+  color: #facc22;
+  margin-left: 15px;
 }
 
-.team .team_line_1{
-    width: 100%;
-    height: 50px;
-    background: #facc22;
-    position: relative;
-    top: 25%;
-    z-index: 1;
+.team .team_line_1 {
+  width: 100%;
+  height: 50px;
+  background: #facc22;
+  position: relative;
+  top: 25%;
+  z-index: 1;
 }
 
-.team .team_line_2{
-    width: 100%;
-    height: 50px;
-    background: #facc22;
-    position: relative;
-    top: 56%;
-    z-index: 1;
-}
-
-.team .team_box{
-    width: 95%;
-    height: auto;
-    margin: 0 auto;
-    position: relative;
-    bottom: 55px;
-    padding: 15px 0;
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr;
-    grid-gap: 0;
-}
-
-.team .team_box .team_card{
-    width: 350px;
-    height: 410px;
-    background: #fff;
-    padding: 20px;
-    text-align: center;
-    border-radius: 10px;
-    margin: 0 auto;
-    z-index: 5;
-    box-shadow: 1px 2px 10px rgba(0,0,0,0.2);
-}
-
-.team .team_box .team_card .team_img{
-    display: flex;
-    align-items: center;
-    justify-content: center;
+.team .team_line_2 {
+  width: 100%;
+  height: 50px;
+  background: #facc22;
+  position: relative;
+  top: 56%;
+  z-index: 1;
 }
 
-.team .team_box .team_card .team_img img{
-    width: 150px;
-    height: 150px;
-    border-radius: 50%;
-    object-fit: cover;
-    object-position: center;
-    box-shadow: 0 0 8px rgba(0,0,0,0.3);
+.team .team_box {
+  width: 95%;
+  height: auto;
+  margin: 0 auto;
+  position: relative;
+  bottom: 55px;
+  padding: 15px 0;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-gap: 0;
 }
 
-.team .team_box .team_card .team_tag h2{
-    margin: 10px 0;
+.team .team_box .team_card {
+  width: 350px;
+  height: 410px;
+  background: #fff;
+  padding: 20px;
+  text-align: center;
+  border-radius: 10px;
+  margin: 0 auto;
+  z-index: 5;
+  box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.2);
 }
 
-.team .team_box .team_card .team_tag p.info{
-    text-align: center;
-    line-height: 23px;
-    margin-top: 10px;
+.team .team_box .team_card .team_img {
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
+.team .team_box .team_card .team_img img {
+  width: 150px;
+  height: 150px;
+  border-radius: 50%;
+  object-fit: cover;
+  object-position: center;
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
+}
 
+.team .team_box .team_card .team_tag h2 {
+  margin: 10px 0;
+}
+
+.team .team_box .team_card .team_tag p.info {
+  text-align: center;
+  line-height: 23px;
+  margin-top: 10px;
+}
 
 /*Blog*/
 
-.blog{
-    width: 100%;
-    height: auto;
-    padding: 30px 0;
+.blog {
+  width: 100%;
+  height: auto;
+  padding: 30px 0;
 }
 
-.blog h1{
-    color: #000;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 45px;
+.blog h1 {
+  color: #000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 45px;
 }
 
-.blog h1 span{
-    color: #facc22;
-    margin-left: 15px;
+.blog h1 span {
+  color: #facc22;
+  margin-left: 15px;
 }
 
-.blog .blog_box{
-    width: 95%;
-    margin: 50px auto;
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    grid-gap: 10px;
+.blog .blog_box {
+  width: 95%;
+  margin: 50px auto;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-gap: 10px;
 }
 
-.blog .blog_box .blog_card{
-    margin: 0 auto;
-    width: 450px;
-    height: auto;
-    border-radius: 10px;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
+.blog .blog_box .blog_card {
+  margin: 0 auto;
+  width: 450px;
+  height: auto;
+  border-radius: 10px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
 }
 
-.blog .blog_box .blog_card .blog_img{
-    width: 450px;
-    height: 300px;
-    overflow: hidden;
-    border-top-left-radius: 10px;
-    border-top-right-radius: 10px;
+.blog .blog_box .blog_card .blog_img {
+  width: 450px;
+  height: 300px;
+  overflow: hidden;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
 }
 
-.blog .blog_box .blog_card .blog_img img{
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    object-position: center;
+.blog .blog_box .blog_card .blog_img img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
 }
 
-.blog .blog_box .blog_card .blog_tag .blog_date{
-    width: 100%;
-    color: #facc22;
-    padding: 15px 0 0 20px;
-    font-size: 14px;
+.blog .blog_box .blog_card .blog_tag .blog_date {
+  width: 100%;
+  color: #facc22;
+  padding: 15px 0 0 20px;
+  font-size: 14px;
 }
 
-.blog .blog_box .blog_card .blog_tag .blog_date i{
-    margin-left: 8px;
-    font-size: 14px;
-    cursor: pointer;
+.blog .blog_box .blog_card .blog_tag .blog_date i {
+  margin-left: 8px;
+  font-size: 14px;
+  cursor: pointer;
 }
 
-.blog .blog_box .blog_card .blog_tag .blog_heading{
-    padding: 10px 20px 10px 20px;
-    font-size: 25px;
+.blog .blog_box .blog_card .blog_tag .blog_heading {
+  padding: 10px 20px 10px 20px;
+  font-size: 25px;
 }
 
-.blog .blog_box .blog_card .blog_tag .blog_text{
-    padding: 0 20px 10px 20px;
-    text-align: justify;
-    line-height: 21px;
+.blog .blog_box .blog_card .blog_tag .blog_text {
+  padding: 0 20px 10px 20px;
+  text-align: justify;
+  line-height: 21px;
 }
 
-.blog .blog_box .blog_card .blog_tag hr{
-    width: 95%;
-    margin: 0 auto;
-    height: 1px;
-    border: 0;
-    background: #facc22;
-    border-radius: 5px;
+.blog .blog_box .blog_card .blog_tag hr {
+  width: 95%;
+  margin: 0 auto;
+  height: 1px;
+  border: 0;
+  background: #facc22;
+  border-radius: 5px;
 }
 
-.blog .blog_box .blog_card .blog_tag .view_and_like{
-    padding: 10px 20px 25px 20px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
+.blog .blog_box .blog_card .blog_tag .view_and_like {
+  padding: 10px 20px 25px 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 
-.blog .blog_box .blog_card .blog_tag .view_and_like .view{
-    display: flex;
-    align-items: center;
+.blog .blog_box .blog_card .blog_tag .view_and_like .view {
+  display: flex;
+  align-items: center;
 }
 
-.blog .blog_box .blog_card .blog_tag .view_and_like .view p{
-    margin-right: 10px;
-    font-size: 14px;
+.blog .blog_box .blog_card .blog_tag .view_and_like .view p {
+  margin-right: 10px;
+  font-size: 14px;
 }
 
-.blog .blog_box .blog_card .blog_tag .view_and_like .like{
-    display: flex;
-    align-items: center;
-    font-size: 14px;
+.blog .blog_box .blog_card .blog_tag .view_and_like .like {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
 }
 
-.blog .blog_box .blog_card .blog_tag .view_and_like .like i{
-    cursor: pointer;
-    margin-left: 5px;
+.blog .blog_box .blog_card .blog_tag .view_and_like .like i {
+  cursor: pointer;
+  margin-left: 5px;
 }
 
-
-
 /*Oder*/
 
-.order{
-    width: 100%;
-    height: 100vh;
-    padding: 5px 0;
+.order {
+  width: 100%;
+  height: 100vh;
+  padding: 5px 0;
 }
 
-.order h1{
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 45px;
+.order h1 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 45px;
 }
 
-.order h1 span{
-    color: #facc22;
-    margin-right: 10px;
+.order h1 span {
+  color: #facc22;
+  margin-right: 10px;
 }
 
-.order .order_main{
-    display: flex;
-    align-items: center;
-    justify-content: space-around;
-    position: relative;
-    top: 15px;
+.order .order_main {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  position: relative;
+  top: 15px;
 }
 
-.order .order_main .order_img img{
-    width: 650px;
+.order .order_main .order_img img {
+  width: 650px;
 }
 
-.order .order_main .order_form{
-    width: 60%;
-    height: 620px;
-    background: #faf3ce;
-    padding: 15px 20px 0 20px;
-    border-radius: 10px;
+.order .order_main .order_form {
+  width: 60%;
+  height: 620px;
+  background: #faf3ce;
+  padding: 15px 20px 0 20px;
+  border-radius: 10px;
 }
 
-.order .order_main .order_form h2{
-    text-align: center;
-    margin-bottom: 40px;
-    font-size: 30px;
+.order .order_main .order_form h2 {
+  text-align: center;
+  margin-bottom: 40px;
+  font-size: 30px;
 }
 
-.order .order_main .order_form .order_list{
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-gap: 0 20px;
-    margin-bottom: 30px;
+.order .order_main .order_form .order_list {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 0 20px;
+  margin-bottom: 30px;
 }
 
-.order .order_main .order_form .order_list p{
-    margin-bottom: 5px;
+.order .order_main .order_form .order_list p {
+  margin-bottom: 5px;
 }
 
-.order .order_main .order_form .order_list input{
-    width: 350px;
-    border: 2px solid #facc22;
-    border-radius: 5px;
-    outline: none;
-    background: none;
-    color: #000;
-    padding: 10px 5px;
-    margin-bottom: 15px;
+.order .order_main .order_form .order_list input {
+  width: 350px;
+  border: 2px solid #facc22;
+  border-radius: 5px;
+  outline: none;
+  background: none;
+  color: #000;
+  padding: 10px 5px;
+  margin-bottom: 15px;
 }
 
-.order .order_main .order_form .order_list textarea{
-    width: 350px;
-    height: 200px;
-    border: 2px solid #facc22;
-    border-radius: 5px;
-    outline: none;
-    background: none;
-    color: #000;
-    padding: 10px 5px;
+.order .order_main .order_form .order_list textarea {
+  width: 350px;
+  height: 200px;
+  border: 2px solid #facc22;
+  border-radius: 5px;
+  outline: none;
+  background: none;
+  color: #000;
+  padding: 10px 5px;
 }
 
-.order .order_main .order_form .order_btn{
-    padding: 10px 20px;
-    border: 2px solid #facc22;
-    text-decoration: none;
-    color: #fff;
-    background: #facc22;
+.order .order_main .order_form .order_btn {
+  padding: 10px 20px;
+  border: 2px solid #facc22;
+  text-decoration: none;
+  color: #fff;
+  background: #facc22;
 }
 
-.order .order_main .order_form .order_btn i{
-    margin-right: 8px;
+.order .order_main .order_form .order_btn i {
+  margin-right: 8px;
 }
 
 textarea {
-    width: 100%;
-    height: 100px;
-    padding: 12px 20px;
-    box-sizing: border-box;
-    border: 2px solid #ccc;
-    border-radius: 4px;
-    background-color: #f8f8f8;
-    font-size: 16px;
-    resize: none;
-  }
-
+  width: 100%;
+  height: 100px;
+  padding: 12px 20px;
+  box-sizing: border-box;
+  border: 2px solid #ccc;
+  border-radius: 4px;
+  background-color: #f8f8f8;
+  font-size: 16px;
+  resize: none;
+}
 
 /*Footer*/
 
-footer{
-    width: 100%;
-    padding: 30px 0 0 20px;
-    background: #eeeeee;
-    
+footer {
+  width: 100%;
+  padding: 30px 0 0 20px;
+  background: #eeeeee;
 }
 
-footer .footer_main{
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
-    margin-top: 4%;
-    
+footer .footer_main {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+  margin-top: 4%;
 }
 
-footer .footer_main .footer_tag{
-    text-align: center;
+footer .footer_main .footer_tag {
+  text-align: center;
 }
 
-footer .footer_main :first-child{
-    text-align: center;
-    border-style: none;
+footer .footer_main :first-child {
+  text-align: center;
+  border-style: none;
 }
 
-footer .footer_main .footer_tag h2{
-    color: #000;
-    margin-bottom: 25px;
-    font-size: 30px;
+footer .footer_main .footer_tag h2 {
+  color: #000;
+  margin-bottom: 25px;
+  font-size: 30px;
 }
 
-footer .footer_main .footer_tag p{
-    margin: 10px 0;
+footer .footer_main .footer_tag p {
+  margin: 10px 0;
 }
 
-footer .footer_main .footer_tag i{
-    margin: 0 5px;
-    cursor: pointer;
+footer .footer_main .footer_tag i {
+  margin: 0 5px;
+  cursor: pointer;
 }
 
-footer .footer_main .footer_tag i:hover{
-    color: #facc22;
+footer .footer_main .footer_tag i:hover {
+  color: #facc22;
 }
 
-footer .end{
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 15px 0;
+footer .end {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 15px 0;
 }
 
-footer .end span{
-    color: #facc22;
-    margin-left: 10px;
+footer .end span {
+  color: #facc22;
+  margin-left: 10px;
 }
 
-footer .end span:hover{
-    font-size: x-large;
+footer .end span:hover {
+  font-size: x-large;
 }
 
-::-webkit-scrollbar{
-    width: 10px;
+::-webkit-scrollbar {
+  width: 10px;
 }
 
-::-webkit-scrollbar-thumb{
-    background: #facc22;
-    border-radius: 30px;
+::-webkit-scrollbar-thumb {
+  background: #facc22;
+  border-radius: 30px;
 }
 
-.anim{
-    opacity: 0;
-    transform: translateY(40px);
-    animation: moveup 0.5s linear forwards;
+.anim {
+  opacity: 0;
+  transform: translateY(40px);
+  animation: moveup 0.5s linear forwards;
 }
 
-@keyframes moveup{
-    100%{
-        opacity: 1;
-        transform: translateY(0);
-    }
+@keyframes moveup {
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
-
-@keyframes animate{
-    0%{
-        transform: scale(1.1);
-    }
-    50%{
-        transform: scale(1);
-    }
-    100%{
-        transform: scale(1.1);
-    }
+@keyframes animate {
+  0% {
+    transform: scale(1.1);
+  }
+  50% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(1.1);
+  }
 }
 
-@media (min-width : 820px) and (max-width: 1400px) {
-    body,html{
-        width: 130%;
-        /* overflow-x: hidden; */
-    }
+@media (min-width: 820px) and (max-width: 1400px) {
+  body,
+  html {
+    width: 130%;
+    /* overflow-x: hidden; */
+  }
 
-    .about .about_main{
-        margin-top: 10%;
-    }
+  .about .about_main {
+    margin-top: 10%;
+  }
 
-    .banner{
-        margin-top: 15%;
-        height: 60vh;
-    }
-    .banner .banner_btn{
-        top: 0%;
-    }
+  .banner {
+    margin-top: 15%;
+    height: 60vh;
+  }
+  .banner .banner_btn {
+    top: 0%;
+  }
 
-    .offer{
-        margin-bottom: 5%;
-    }
+  .offer {
+    margin-bottom: 5%;
+  }
 
-    .blog{
-        margin-top: 10%;
-    }
-    footer{
-        margin-top: 5%;
-    }
+  .blog {
+    margin-top: 10%;
+  }
+  footer {
+    margin-top: 5%;
+  }
 }
 
 @media (min-width: 420px) and (max-width: 820px) {
+  html,
+  body {
+    overflow-x: hidden;
+    width: 100vw;
+  }
+
+  section nav {
+    width: 100vw;
+  }
+  section nav ul {
+    display: flex;
+    flex-direction: row;
+    justify-content: end;
+    margin-left: 0%;
+  }
+  section nav .logo {
+    margin: 0%;
+  }
+
+  .main {
+    flex-direction: column;
+  }
+  .main h1 {
+    margin-top: 10%;
+  }
+  section .main .main_image img {
+    width: 70vw;
+    margin-top: 20%;
+  }
+
+  .about .about_main {
+    flex-direction: column;
+    margin-top: 60%;
+    /* align-items: normal; */
+    /* width: 60%; */
+  }
+  .about .about_main .about_image img {
+    width: 70vw;
+  }
+  .about .about_main .about_text {
+    width: 100vw;
+    margin-left: 10%;
+  }
+  .about .about_main .about_img {
+    width: 100vw;
+  }
+
+  .menu {
+    width: 100vw;
+  }
+  .menu_box {
+    overflow-x: scroll;
+  }
+
+  .banner {
+    width: 100vw;
+    height: 70vh;
+    margin-top: 30%;
+  }
+
+  .gallery {
+    width: 100vw;
+    margin-top: 15%;
+  }
+  .gallery_box {
+    overflow-x: scroll;
+  }
+
+  .offer {
+    width: 100vw;
+  }
+  .offer_box {
+    overflow-x: scroll;
+  }
+
+  .team {
+    width: 100vw;
+  }
+  .team_box {
+    overflow-x: scroll;
+  }
+
+  .blog {
+    width: 100vw;
+    margin-top: 35%;
+  }
+  .blog_box {
+    overflow-x: scroll;
+  }
+
+  .order {
+    width: 100vw;
+  }
+  .order .order_main {
+    flex-direction: column;
+    /* overflow-x: scroll; */
+    /* width: 100vw; */
+  }
+  .order .order_main .order_form {
+    width: 100vw;
+
+    padding: 0%;
+  }
+  .order .order_main .order_form .order_list {
+    margin-left: 2%;
+  }
+
+  footer {
+    margin-top: 120%;
+  }
+}
+
+@media (max-width: 425px) {
+  html,
+  body {
+    overflow-x: hidden;
+    width: 100%;
+  }
+
+  section nav {
+    width: 100vw;
+  }
+  section nav ul {
+    display: flex;
+    flex-direction: row;
+    justify-content: end;
+    margin-left: 0%;
+  }
+  section nav .logo img {
+    margin-left: 125%;
+  }
+  section nav ul li {
+    margin: 0%;
+  }
+
+  .main {
+    flex-direction: column;
+    width: 90vw;
+  }
+  .main h1 {
+    margin-top: 10%;
+  }
+  section .main .main_text p {
+    width: 90vw;
+  }
+  section .main .main_image img {
+    margin-top: 50%;
+    width: 90vw;
+  }
+
+  .about .about_main {
+    margin-top: 160%;
+    flex-direction: column;
+    /* align-items: normal; */
+    width: 90vw;
+  }
+  .about .about_main .about_image img {
+    width: 90vw;
+  }
+  .about .about_main .about_text {
+    width: 90vw;
+    margin-left: 10%;
+  }
+  .about .about_main .about_text p {
+    width: 90vw;
+    margin: auto;
+  }
+  .about .about_main .about_text .about_services {
+    width: 90vw;
+    display: flex;
+    margin: auto;
+  }
+  .about .about_main .about_img img {
+    width: 90vw;
+    margin-bottom: 5%;
+  }
 
-   html, body{
-        overflow-x:hidden;
-        width: 100vw;
-    }
-
-    section nav{
-        width: 100vw;
-    }
-    section nav ul{
-        display: flex;
-        flex-direction: row;
-        justify-content: end;
-        margin-left: 0%;
-    }
-    section nav .logo {
-        margin: 0%;
-    }
-
-    .main{
-        flex-direction: column;
-    }
-    .main h1{
-        margin-top: 10%;
-    }
-    section .main .main_image img{
-        width: 70vw;
-        margin-top: 20%;
-    }
-
-    .about .about_main
-    {
-        flex-direction: column;
-        margin-top: 60%;
-        /* align-items: normal; */
-        /* width: 60%; */
-    }
-    .about .about_main .about_image img{
-        width: 70vw;
-    }
-    .about .about_main .about_text{
-        width: 100vw;
-        margin-left: 10%;
-    }
-    .about .about_main .about_img{
-        width: 100vw;
-        
-    }
-
-    .menu{
-        width: 100vw;
-    }
-    .menu_box{
-        overflow-x: scroll;
-    }
-
-    .banner{
-        width: 100vw;
-        height: 70vh;
-        margin-top: 30% ;
-    }
-
-    .gallery{
-        width: 100vw;
-        margin-top: 15%;
-    }
-    .gallery_box{
-        overflow-x: scroll;
-    }
-
-    .offer{
-        width: 100vw;
-    }
-    .offer_box{
-        overflow-x: scroll;
-    }
-
-    .team{
-        width: 100vw;
-    }
-    .team_box{
-        overflow-x:scroll ;
-    }
-
-    .blog
-    {
-        width: 100vw;
-        margin-top: 35%;
-    }
-    .blog_box{
-        overflow-x: scroll;
-    }
-    
-    .order{
-        width: 100vw;
-        
-    }
-    .order .order_main{
-        flex-direction: column;
-        /* overflow-x: scroll; */
-        /* width: 100vw; */
-    }
-    .order .order_main .order_form {
-        width: 100vw;
-
-        padding: 0%;
-    }
-    .order .order_main .order_form .order_list{
-        margin-left: 2%;
-    }
-
-    footer{
-        margin-top: 120%;
-    }
-}
-
-@media (max-width : 425px){
-    html, body{
-        overflow-x:hidden;
-        width: 100%;
-    }
-
-    section nav{
-        width: 100vw;
-    }
-    section nav ul{
-        display: flex;
-        flex-direction: row;
-        justify-content: end;
-        margin-left: 0%;
-    }
-    section nav .logo img{
-        margin-left: 125%;
-    }
-    section nav ul li{
-        margin: 0%;
-    } 
-
-
-    .main{
-        flex-direction: column;
-        width: 90vw;
-    }
-    .main h1{
-        margin-top: 10%;
-    }
-    section .main .main_text p{
-        width: 90vw;
-    }
-    section .main .main_image img {
-        margin-top: 50%;
-        width: 90vw;
-    }
-
-
-    .about .about_main
-    {
-        margin-top: 160%;
-        flex-direction: column;
-        /* align-items: normal; */
-        width: 90vw;
-    }
-    .about .about_main .about_image img{
-        width: 90vw;
-    }
-    .about .about_main .about_text{
-        width: 90vw;
-        margin-left: 10%;
-    }
-    .about .about_main .about_text p{
-        width: 90vw;
-        margin: auto;
-    }
-    .about .about_main .about_text .about_services{
-        width: 90vw;
-        display: flex;
-        margin: auto;
-    }
-    .about .about_main .about_img img{
-        width: 90vw;
-        margin-bottom:5% ;
-    }
-
-    .menu{
-        width: 100vw;
-    }
-    .menu_box{
-        overflow-x: scroll;
-        margin: 5%;
-    }
-    .menu .menu_box .menu_card{
-        width: 90vw;
-        margin: auto;
-    }
-    .menu .menu_box .menu_card .menu_img{
-        object-fit:cover;
-        width: 100%;
-        
-    }
-    .menu .menu_box .menu_card .menu_text p{
-        
-        width: 100%;
-    }
-
-    .banner{
-        width: 90vw;
-        margin: auto;
-        margin-bottom : 10% ;
-        margin-top: 50%;
-    }
-    .banner h1{
-        font-size: 10vw;
-    }
-
-    .gallery{
-        width: 90vw;
-        margin: auto;
-    }
-    .gallery_box{
-        overflow-x: scroll;
-    }
-    .gallery .gallery_box .gallery_image{
-        width: 80vw;
-    }
-
-    .offer{
-        width: 90vw;
-        margin: auto;
-    }
-    .offer .offer_box{
-        overflow-x: scroll;
-    }
-
-    .offer .offer_box .offer_card_1 .offer_tag{
-
-    }
-
-    .team{
-        width: 100vw;
-    }
-    .team_box{
-        overflow-x:scroll ;
-    }
-
-    .blog
-    {
-        width: 90vw;
-        margin: auto;
-        margin-top: 30%;
-    }
-    .blog_box{
-        overflow-x: scroll;
-    }
-    .blog .blog_box .blog_card{
-        width: 85vw;
-    }
-    .blog .blog_box .blog_card .blog_img{
-        width: 85vw;
-    }
-    
-    .order{
-        width: 90vw;
-    }
-    .order .order_main{
-        flex-direction: column;
-    }
-    .order .order_main .order_img img{
-        width: 80vw;
-    }
-    .order .order_main .order_form {
-        width: 90vw;
-        margin: auto;
-        margin-left: 5%;
-        overflow-x: scroll;
-        padding: 0%;
-    }
-    .order .order_main .order_form .order_list{
-        margin-left: 4%;
-        width: 200%;
-    }
-
-    footer{
-        margin-top: 80vh;
-        width: 100vw;
-        padding: 0%;
-    }
-    footer .footer_main{
-        width: 100vw;
-    }
-    footer .footer_tag{
-        width: 20vw;
-        
-    }
-    footer .footer_main .footer_tag h2{
-        color: #000;
-        font-size: 130%;
-    }
-    footer .footer_main .footer_tag p{
-        margin:10px 0;
-        font-size: 100%;
-        width: 80%;
-        word-wrap:break-word;
-        
-    }
+  .menu {
+    width: 100vw;
+  }
+  .menu_box {
+    overflow-x: scroll;
+    margin: 5%;
+  }
+  .menu .menu_box .menu_card {
+    width: 90vw;
+    margin: auto;
+  }
+  .menu .menu_box .menu_card .menu_img {
+    object-fit: cover;
+    width: 100%;
+  }
+  .menu .menu_box .menu_card .menu_text p {
+    width: 100%;
+  }
+
+  .banner {
+    width: 90vw;
+    margin: auto;
+    margin-bottom: 10%;
+    margin-top: 50%;
+  }
+  .banner h1 {
+    font-size: 10vw;
+  }
+
+  .gallery {
+    width: 90vw;
+    margin: auto;
+  }
+  .gallery_box {
+    overflow-x: scroll;
+  }
+  .gallery .gallery_box .gallery_image {
+    width: 80vw;
+  }
+
+  .offer {
+    width: 90vw;
+    margin: auto;
+  }
+  .offer .offer_box {
+    overflow-x: scroll;
+  }
+
+  .offer .offer_box .offer_card_1 .offer_tag {
+  }
+
+  .team {
+    width: 100vw;
+  }
+  .team_box {
+    overflow-x: scroll;
+  }
+
+  .blog {
+    width: 90vw;
+    margin: auto;
+    margin-top: 30%;
+  }
+  .blog_box {
+    overflow-x: scroll;
+  }
+  .blog .blog_box .blog_card {
+    width: 85vw;
+  }
+  .blog .blog_box .blog_card .blog_img {
+    width: 85vw;
+  }
+
+  .order {
+    width: 90vw;
+  }
+  .order .order_main {
+    flex-direction: column;
+  }
+  .order .order_main .order_img img {
+    width: 80vw;
+  }
+  .order .order_main .order_form {
+    width: 90vw;
+    margin: auto;
+    margin-left: 5%;
+    overflow-x: scroll;
+    padding: 0%;
+  }
+  .order .order_main .order_form .order_list {
+    margin-left: 4%;
+    width: 200%;
+  }
+
+  footer {
+    margin-top: 80vh;
+    width: 100vw;
+    padding: 0%;
+  }
+  footer .footer_main {
+    width: 100vw;
+  }
+  footer .footer_tag {
+    width: 20vw;
+  }
+  footer .footer_main .footer_tag h2 {
+    color: #000;
+    font-size: 130%;
+  }
+  footer .footer_main .footer_tag p {
+    margin: 10px 0;
+    font-size: 100%;
+    width: 80%;
+    word-wrap: break-word;
+  }
 }
diff --git a/public/styles/cart.css b/public/styles/cart.css
index 3ad39f0..bba4463 100644
--- a/public/styles/cart.css
+++ b/public/styles/cart.css
@@ -1,105 +1,175 @@
 footer {
-    position: fixed;
-    bottom: 0;
-    width: 100%;
-    /* background-color: #333; */
-    /* color: #fff; */
-    padding: 20px 0;
-    text-align: center;
-  }
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  /* background-color: #333; */
+  /* color: #fff; */
+  padding: 20px 0;
+  text-align: center;
+}
+
+/* ---------------------------nav------------------------ */
+#Effect:hover::after {
+  transform: scaleX(1);
+}
+
+#Effect::after {
+  content: "";
+  width: 150%;
+  background-color: #fff;
+  height: 2px;
+  left: -25%;
+  position: absolute;
+  bottom: -6px;
+  transform: scaleX(0);
+  transition: transform 0.2s linear;
+}
+section nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: rgba(211, 200, 25, 1);
+  background: linear-gradient(
+    90deg,
+    rgba(250, 204, 34, 1),
+    rgba(228, 172, 2, 1)
+  );
+  position: fixed;
+  right: 0;
+  left: 0;
+  z-index: 1000;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  height: 80px;
+  padding: 10px 10px;
+  margin: 0;
+  line-height: 1;
+}
+section nav:hover {
+  background: linear-gradient(
+    90deg,
+    rgba(228, 172, 2, 1),
+    rgba(250, 204, 34, 1)
+  );
+}
+section nav ul li {
+  position: relative;
+}
+section nav ul li a {
+  font-weight: lighter;
+  color: black;
+  text-decoration: none;
+  transition: 0.3s;
+}
+section nav ul li a i {
+  margin-right: 5px;
+}
 
-  #Effect {
-    color: white;
-    text-shadow: 1px 1px 2px black, 0 0 10px rgb(187, 152, 35);}
+section nav ul li a.action {
+  color: #facc22;
+}
+
+section nav ul li a:hover {
+  color: #fff;
+  text-shadow: 0px 0px 20px white;
+}
+
+section nav .login a {
+  color: #000;
+  text-decoration: none;
+  border: 2px solid #facc22;
+  border-radius: 20px;
+  padding: 7px 20px;
+  transition: 0.3s;
+}
+
+section nav .login a:hover {
+  background: #facc22;
+  color: #fff;
+}
 
-  ._3Y9ZP {
-    margin-top: 24px;
-    font-size: 20px;
-    font-weight: 600;
-    color: #535665;
+._3Y9ZP {
+  margin-top: 24px;
+  font-size: 20px;
+  font-weight: 600;
+  color: #535665;
 }
 .d7jCU {
-    margin-top: 8px;
-    color: #7e808c;
+  margin-top: 8px;
+  color: #7e808c;
 }
 button._3pgCg {
-    margin-top: 30px;
-    padding: 11px 20px;
-    text-transform: uppercase;
-    background-color: #fc8019;
-    color: #fff;
-    font-weight: 600;
-    cursor: pointer;
-    border: 0;
-    outline: 0;
-    font-size: 15px;
-    text-align: center;
-    -ms-transform: translateY(0);
-    transform: translateY(0);
-    transition: transform .8s cubic-bezier(.2,1,.2,1);
+  margin-top: 30px;
+  padding: 11px 20px;
+  text-transform: uppercase;
+  background-color: #fc8019;
+  color: #fff;
+  font-weight: 600;
+  cursor: pointer;
+  border: 0;
+  outline: 0;
+  font-size: 15px;
+  text-align: center;
+  -ms-transform: translateY(0);
+  transform: translateY(0);
+  transition: transform 0.8s cubic-bezier(0.2, 1, 0.2, 1);
 }
 
-
 ._3Y9ZP,
 .d7jCU,
 ._3pgCg {
-    margin: 10px; 
+  margin: 10px;
 }
 .main {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 10vh; 
-    text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 10vh;
+  text-align: center;
 }
 
-
-
 /* Add this to your CSS file */
 .cart-item {
   display: flex;
-    border: 1px solid #ccc;
-    margin-bottom: 10px;
-    padding: 10px;
-    align-items: center;
-    background-color: #fff;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  }
-  
-  .item-image {
-    max-width: 100px;
-    height: auto;
-    margin-right: 20px;
-  }
-  
-  .item-name {
-    font-size: 18px;
-    font-weight: bold;
-    
-  }
-  
-  .item-description {
-    font-size: 14px;
-  }
-  
-  .order-button {
-    background-color: #ff5722;
-    color: #fff;
-    padding: 10px 20px;
-    border: none;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-    margin-left: 10px;
-  }
-  
-  .order-button:hover {
-    background-color: #e64a19;
-  }
-  
-  .item-price {
-    font-size: 14px;
-    color: #007bff; 
-    margin-top: -1px; 
-  }
-  
\ No newline at end of file
+  border: 1px solid #ccc;
+  margin-bottom: 10px;
+  padding: 10px;
+  align-items: center;
+  background-color: #fff;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.item-image {
+  max-width: 100px;
+  height: auto;
+  margin-right: 20px;
+}
+
+.item-name {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.item-description {
+  font-size: 14px;
+}
+
+.order-button {
+  background-color: #ff5722;
+  color: #fff;
+  padding: 10px 20px;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  margin-left: 10px;
+}
+
+.order-button:hover {
+  background-color: #e64a19;
+}
+
+.item-price {
+  font-size: 14px;
+  color: #007bff;
+  margin-top: -1px;
+}
diff --git a/public/styles/help.css b/public/styles/help.css
index 65d16c0..feec878 100644
--- a/public/styles/help.css
+++ b/public/styles/help.css
@@ -38,127 +38,215 @@ body {
   }
 }
 
-#rcontent1:hover{
-    color: #facc22;
+#rcontent1:hover {
+  color: #facc22;
 }
 
-#rcontent2:hover{
-    color: #facc22;
+#rcontent2:hover {
+  color: #facc22;
 }
-#rcontent3:hover{
-    color: #facc22;
+#rcontent3:hover {
+  color: #facc22;
 }
-#rcontent4:hover{
-    color: #facc22;
+#rcontent4:hover {
+  color: #facc22;
 }
-#rcontent5:hover{
-    color: #facc22;
+#rcontent5:hover {
+  color: #facc22;
 }
 
 .button {
-    background-color:#facc22; /* Green */
-    border: none;
-    color: white;
-    padding: 8px 14px;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    font-size: 12px;
-    margin: 4px 2px;
-    transition-duration: 0.4s;
-    cursor: pointer;
+  background-color: #facc22; /* Green */
+  border: none;
+  color: white;
+  padding: 8px 14px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 12px;
+  margin: 4px 2px;
+  transition-duration: 0.4s;
+  cursor: pointer;
 }
 
 #button1:hover {
-    background-color: #4CAF50;
-    color: white;
-  }  
+  background-color: #4caf50;
+  color: white;
+}
+
+/* ---------------------------nav------------------------ */
+#Effect:hover::after {
+  transform: scaleX(1);
+}
+
+#Effect::after {
+  content: "";
+  width: 150%;
+  background-color: #fff;
+  height: 2px;
+  left: -25%;
+  position: absolute;
+  bottom: -6px;
+  transform: scaleX(0);
+  transition: transform 0.2s linear;
+}
+section nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: rgba(211, 200, 25, 1);
+  background: linear-gradient(
+    90deg,
+    rgba(250, 204, 34, 1),
+    rgba(228, 172, 2, 1)
+  );
+  position: fixed;
+  right: 0;
+  left: 0;
+  z-index: 1000;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  height: 80px;
+  padding: 10px 10px;
+  margin: 0;
+  line-height: 1;
+}
+section nav:hover {
+  background: linear-gradient(
+    90deg,
+    rgba(228, 172, 2, 1),
+    rgba(250, 204, 34, 1)
+  );
+}
+section nav ul li {
+  position: relative;
+}
+section nav ul li a {
+  font-weight: lighter;
+  color: black;
+  text-decoration: none;
+  transition: 0.3s;
+}
+section nav ul li a i {
+  margin-right: 5px;
+}
+
+section nav ul li a.action {
+  color: #facc22;
+}
+
+section nav ul li a:hover {
+  color: #fff;
+  text-shadow: 0px 0px 20px white;
+}
+section {
+  width: 100%;
+  height: 100vh;
+}
+
+.cart {
+  width: 20px;
+  position: relative;
+  left: -15%;
+  cursor: pointer;
+}
+
+section nav .logo img {
+  /* width: 120px;
+    margin: 20px 0; */
+  width: 140px;
+  margin: 20px;
+  position: relative;
+  left: -118%;
+  cursor: pointer;
+  margin-left: 110%;
+}
 
-#Effect {
-    color: white;
-    text-shadow: 1px 1px 2px black, 0 0 10px rgb(187, 152, 35);}
+section nav ul {
+  list-style: none;
+
+  margin-left: 60%;
+}
+
+section nav ul li {
+  display: inline-block;
+  margin: 0 10px;
+}
 
 footer {
-    position: relative;
-    bottom: 0;
-    width: 100%;
-    /* background-color: white; */
-    /* color: #fff; */
-    padding: 20px 0;
-    text-align:center;
-  }
-  
-  :root {
-    font-family: "Montserrat", sans-serif;
-  }
+  position: relative;
+  bottom: 0;
+  width: 100%;
+  /* background-color: white; */
+  /* color: #fff; */
+  padding: 20px 0;
+  text-align: center;
+}
 
-#navbar-profile-item{
-    display: none;
+:root {
+  font-family: "Montserrat", sans-serif;
+}
+
+#navbar-profile-item {
+  display: none;
 }
 
-.block{
+.block {
   padding-left: var(--edge-border-left);
   padding-right: var(--edge-border-right);
-  background-color:var(--background);
+  background-color: var(--background);
   /* color: white; */
-}  
-
-.help-heading{
-    padding-top: 8vh;
-    padding-left: 4vw;
 }
 
-.help-heading h1{
-margin:0;
-padding:0;
+.help-heading {
+  padding-top: 8vh;
+  padding-left: 4vw;
 }
 
-.help-heading p{
-    margin: 1vh 0;
+.help-heading h1 {
+  margin: 0;
+  padding: 0;
 }
 
-.inner-block{
-    /* padding-top: */
-    margin-top: 4vh;
-    padding-left:4vw;
-    padding-bottom:4vh;
-    padding-top:4vh;
-    padding-right: var(--edge-border-right);
-    background-color: var(--background);
-    color: var(--text-primary);
-    display:flex;
-
+.help-heading p {
+  margin: 1vh 0;
+}
 
+.inner-block {
+  /* padding-top: */
+  margin-top: 4vh;
+  padding-left: 4vw;
+  padding-bottom: 4vh;
+  padding-top: 4vh;
+  padding-right: var(--edge-border-right);
+  background-color: var(--background);
+  color: var(--text-primary);
+  display: flex;
 }
 
-.left-block{
-    background-color:#edf1f7;
-    margin-top:2vh;
-    color: var(--text-primary);
-    padding:2vh 0vw 2vh 0vw;
-    min-width: 18vw;
-   
+.left-block {
+  background-color: #edf1f7;
+  margin-top: 2vh;
+  color: var(--text-primary);
+  padding: 2vh 0vw 2vh 0vw;
+  min-width: 18vw;
 }
 
-.right-block{
-    margin-top:2vh;
-    padding:right;
-    padding:2vh 2vw;
-    min-width: 50vw;
-    
+.right-block {
+  margin-top: 2vh;
+  padding: right;
+  padding: 2vh 2vw;
+  min-width: 50vw;
 }
 
-.top-block{
-    display: none;
-    font-size: 0px;
-    
-    
+.top-block {
+  display: none;
+  font-size: 0px;
 }
 
-.top-block button{
-background-color: #edf1f7;
-border:none;
-/* border-top:2px solid rgb(232, 232, 232);
+.top-block button {
+  background-color: #edf1f7;
+  border: none;
+  /* border-top:2px solid rgb(232, 232, 232);
 border-bottom:2px solid rgb(232, 232, 232); 
 padding: 3vw 3vh; */
 }
@@ -173,238 +261,228 @@ padding: 3vw 3vh; */
     border-left: none; 
 } */
 
-
-
-#list-item1{
-    padding:4vh 1vw 4vh 2vw;
+#list-item1 {
+  padding: 4vh 1vw 4vh 2vw;
 }
 
-#list-item2{
-    padding:4vh 1vw 4vh 2vw;
+#list-item2 {
+  padding: 4vh 1vw 4vh 2vw;
 }
 
-#list-item2:hover{
-    background-color: var(--background);
-    color: #facc22;
-    cursor: pointer;
+#list-item2:hover {
+  background-color: var(--background);
+  color: #facc22;
+  cursor: pointer;
 }
-#list-item1:hover{
-    background-color: var(--background);
-    color: #facc22;
-    cursor: pointer;
+#list-item1:hover {
+  background-color: var(--background);
+  color: #facc22;
+  cursor: pointer;
 }
 
-.help-list-title-container{
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    justify-content: space-between;
+.help-list-title-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: space-between;
 }
 
-.help-list-title-container p{
-    padding-right: 2%;
-    transform-origin: 25% 60%;
-    transition: 234ms ease;
+.help-list-title-container p {
+  padding-right: 2%;
+  transform-origin: 25% 60%;
+  transition: 234ms ease;
 }
 
-#rpara1:hover{
-    color: black;
+#rpara1:hover {
+  color: black;
 }
 
-#rpara2{
-    padding-left: 1vw;
-    display:none;
+#rpara2 {
+  padding-left: 1vw;
+  display: none;
 }
 
-#rpara3{
-    padding-left: 1vw;
-    display:none;
-    margin: 0px;
+#rpara3 {
+  padding-left: 1vw;
+  display: none;
+  margin: 0px;
 }
 
-#rpara4{
-    padding-left: 1vw;
-    display:none;
-    margin: 0px;
+#rpara4 {
+  padding-left: 1vw;
+  display: none;
+  margin: 0px;
 }
 
-#rpara5{
-    padding-left: 1vw;
-    display:none;
-    margin: 0px;
+#rpara5 {
+  padding-left: 1vw;
+  display: none;
+  margin: 0px;
 }
 
-
 /* Restaurents */
 
-#help-for-restaurents{
-    display: none;
+#help-for-restaurents {
+  display: none;
 }
 
-#help-for-restaurents h1{
-    color:var(--text-primary);
-    padding-left:36px;
+#help-for-restaurents h1 {
+  color: var(--text-primary);
+  padding-left: 36px;
 }
 
-.list-restaurents{
-    padding:2vh 2vw 2vh 0vw;
+.list-restaurents {
+  padding: 2vh 2vw 2vh 0vw;
 }
 
-.list-restaurents:hover{
-    color:var(--primary);
-    cursor: pointer;
+.list-restaurents:hover {
+  color: var(--primary);
+  cursor: pointer;
 }
 
 /* Customer */
-#help-for-customer{
-    display: none;
+#help-for-customer {
+  display: none;
 }
 
-
-#help-for-customer h1{
-    color:var(--text-primary);
-    padding-left:36px;
+#help-for-customer h1 {
+  color: var(--text-primary);
+  padding-left: 36px;
 }
 
-.list-customer{
-    padding:2vh 2vw 2vh 0vw;
+.list-customer {
+  padding: 2vh 2vw 2vh 0vw;
 }
 
-.list-customer:hover{
-    color:var(--primary);
-    cursor: pointer;
+.list-customer:hover {
+  color: var(--primary);
+  cursor: pointer;
 }
 
-#cpara1{
-    padding-left: 1vw;
-    display:none;
-    text-decoration: none;
+#cpara1 {
+  padding-left: 1vw;
+  display: none;
+  text-decoration: none;
 }
 
-#cpara2{
-    padding-left: 1vw;
-    display:none;
-    margin:0px;
+#cpara2 {
+  padding-left: 1vw;
+  display: none;
+  margin: 0px;
 }
 
-#cpara3{
-    padding-left: 1vw;
-    display:none;
-    margin: 0px;
+#cpara3 {
+  padding-left: 1vw;
+  display: none;
+  margin: 0px;
 }
 
-#cpara4{
-    padding-left: 1vw;
-    display:none;
-    margin: 0px;
+#cpara4 {
+  padding-left: 1vw;
+  display: none;
+  margin: 0px;
 }
 
-#cpara5{
-    padding-left: 1vw;
-    display:none;
-    margin: 0px;
+#cpara5 {
+  padding-left: 1vw;
+  display: none;
+  margin: 0px;
 }
 
-#cpara6{
-    padding-left: 1vw;
-    display:none;
-    margin: 0px;
+#cpara6 {
+  padding-left: 1vw;
+  display: none;
+  margin: 0px;
 }
 
 /* TABLETS */
 
-@media only screen and (min-width: 750px) and (max-width : 1024px){ 
-    footer .footer_main .footer_tag h2 {
-        font-size: 2.8vw;
-    };
-    
+@media only screen and (min-width: 750px) and (max-width: 1024px) {
+  footer .footer_main .footer_tag h2 {
+    font-size: 2.8vw;
+  }
 }
 
 /* MOBILE */
 
 @media only screen and (max-width: 750px) {
-.inner-block{
+  .inner-block {
     flex-direction: column;
     padding: 20px 20px 20px 20px;
-}
-.left-block{
+  }
+  .left-block {
     display: none;
-}
-.right-block{
+  }
+  .right-block {
     width: 100%;
-}
-.right-block ul{
-    padding:0px;
-}
-.top-block{
+  }
+  .right-block ul {
+    padding: 0px;
+  }
+  .top-block {
     display: inline;
-}
+  }
 
-#help-for-customer h1{
+  #help-for-customer h1 {
     padding: 0px;
-}
-#help-for-restaurents h1{
+  }
+  #help-for-restaurents h1 {
     padding: 0px;
-}
+  }
 
-footer .footer_main .footer_tag h2{
+  footer .footer_main .footer_tag h2 {
     color: #000;
     margin: 0%;
     margin-bottom: 25px;
     font-size: 2.5vw;
-}
-footer .footer_main .footer_tag p,a{
+  }
+  footer .footer_main .footer_tag p,
+  a {
     font-size: 1.7vw;
-    word-wrap:break-word;
+    word-wrap: break-word;
+  }
+  footer .footer_main .footer_tag {
+    width: 6vw;
+  }
+  footer .footer_main {
+    width: 80vw;
+    margin-left: 6%;
+  }
 }
-footer .footer_main .footer_tag{
-   width: 6vw;
+.help-list {
+  list-style-type: none;
 }
-footer .footer_main{
-    width: 80vw;
-    margin-left:6% ;
+
+.help-item {
+  margin-bottom: 20px;
 }
 
+.help-list-title-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+}
 
+.list-customer {
+  font-weight: bold;
+  text-decoration: underline;
+}
 
+.cselector {
+  font-size: 20px;
+  transition: transform 0.2s;
 }
-.help-list {
-    list-style-type: none;
-  }
-  
-  .help-item {
-    margin-bottom: 20px;
-  }
-  
-  .help-list-title-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    cursor: pointer;
-  }
-  
-  .list-customer {
-    font-weight: bold;
-    text-decoration: underline;
-  }
-  
-  .cselector {
-    font-size: 20px;
-    transition: transform 0.2s;
-  }
-  
-  .cselector.active {
-    transform: rotate(180deg);
-  }
-  
-  .cpara {
-    display: none;
-    margin-top: 20px;
-    
-  }
-  
-  .cpara.active {
-    display: block;
 
-  }
-  
\ No newline at end of file
+.cselector.active {
+  transform: rotate(180deg);
+}
+
+.cpara {
+  display: none;
+  margin-top: 20px;
+}
+
+.cpara.active {
+  display: block;
+}
diff --git a/public/styles/search.css b/public/styles/search.css
index 109432a..a233e2d 100644
--- a/public/styles/search.css
+++ b/public/styles/search.css
@@ -1,155 +1,245 @@
 .searchsection {
-
-    position: absolute;
-    top: 25%;
-    transform: translateY(-50%);
-    width: 300px;
-    border: 1px solid lightgray;
-    border-radius: 20px;
-    margin-left: 40%;
-    z-index: 1;
+  position: absolute;
+  top: 25%;
+  transform: translateY(-50%);
+  width: 300px;
+  border: 1px solid lightgray;
+  border-radius: 20px;
+  margin-left: 40%;
+  z-index: 1;
 }
 
-
 .search {
-    font-size: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #81D4FA;
-    flex-wrap: nowrap;
-    flex-direction: row;
+  font-size: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #81d4fa;
+  flex-wrap: nowrap;
+  flex-direction: row;
 }
 
 .searchbar {
-    font-size: 10px;
-    padding: 10px;
-    border: none;
-    width: 550px;
-    margin-left: 10px;
-    margin-top: 6px;
-    margin-bottom: 6px;
-    outline: none;
-    border-radius: 30px;
-    color: black;
-    font-family: 'Roboto', sans-serif;
-    cursor: pointer;
+  font-size: 10px;
+  padding: 10px;
+  border: none;
+  width: 550px;
+  margin-left: 10px;
+  margin-top: 6px;
+  margin-bottom: 6px;
+  outline: none;
+  border-radius: 30px;
+  color: black;
+  font-family: "Roboto", sans-serif;
+  cursor: pointer;
 }
 
 .searchbar:focus {
-    background-color: gainsboro;
-    cursor: text;
+  background-color: gainsboro;
+  cursor: text;
 }
 
 .searchbar:hover {
-    background-color: gainsboro;
+  background-color: gainsboro;
 }
 
 .searchimg {
-    border-radius: 30px;
-    padding: 5px;
-    margin-top: 5px;
-    margin-bottom: 2px;
-    margin-right: 8px;
-    cursor: pointer;
+  border-radius: 30px;
+  padding: 5px;
+  margin-top: 5px;
+  margin-bottom: 2px;
+  margin-right: 8px;
+  cursor: pointer;
 }
 
 .searchimg:hover {
-
-    background-color: whitesmoke;
+  background-color: whitesmoke;
 }
 
 .closeimg {
-    display: none;
-    outline: none;
-    padding: 5px;
-    margin-top: 5px;
-    margin-bottom: 2px;
-    margin-left: 8px;
-    border-radius: 30px;
-    cursor: pointer;
+  display: none;
+  outline: none;
+  padding: 5px;
+  margin-top: 5px;
+  margin-bottom: 2px;
+  margin-left: 8px;
+  border-radius: 30px;
+  cursor: pointer;
 }
 
 .closeimg:focus {
-    background-color: #edf2fb;
+  background-color: #edf2fb;
 }
 
 .closeimg:hover {
-    background-color: #edf2fb;
+  background-color: #edf2fb;
 }
 
 .list {
-    display: none;
-    position: relative;
-    flex-wrap: wrap;
-    font-size: 10px;
-    padding: 0px;
-    overflow: auto;
-    max-height: 120px;
-    width: 100%;
-    opacity: 0;
-    list-style-type: none;
-    color: rgb(255, 255, 255);
+  display: none;
+  position: relative;
+  flex-wrap: wrap;
+  font-size: 10px;
+  padding: 0px;
+  overflow: auto;
+  max-height: 120px;
+  width: 100%;
+  opacity: 0;
+  list-style-type: none;
+  color: rgb(255, 255, 255);
 }
 
 .list:focus {
-    background-color: #edf2fb;
+  background-color: #edf2fb;
 }
 
 .borderbetween {
-    display: none;
-    border-top: 1px rgb(224, 222, 222) dashed;
-    margin-top: 10px;
-    margin-bottom: 5px;
-    width: 80%;
+  display: none;
+  border-top: 1px rgb(224, 222, 222) dashed;
+  margin-top: 10px;
+  margin-bottom: 5px;
+  width: 80%;
 }
 
 .section {
-    padding-left: 5px;
-    padding-right: 5px;
-    padding-top: 10px;
-    padding-bottom: 10px;
-    text-align: center;
-    cursor: pointer;
-    color: black;
-    font-family: 'Roboto', sans-serif;
+  padding-left: 5px;
+  padding-right: 5px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  text-align: center;
+  cursor: pointer;
+  color: black;
+  font-family: "Roboto", sans-serif;
 }
 
 .section:hover {
-    background-color: rgb(235, 222, 222);
+  background-color: rgb(235, 222, 222);
 }
 
 .noresult {
-    display: none;
-    padding-left: 5px;
-    padding-right: 5px;
-    padding-top: 10px;
-    padding-bottom: 10px;
-    color: #9c9a97;
-    text-align: center;
-    cursor: default;
-    border-radius: 10px;
-    font-family: 'Roboto', sans-serif;
+  display: none;
+  padding-left: 5px;
+  padding-right: 5px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  color: #9c9a97;
+  text-align: center;
+  cursor: default;
+  border-radius: 10px;
+  font-family: "Roboto", sans-serif;
 }
 
 footer {
-    position: fixed;
-    bottom: 0;
-    width: 100%;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
 
-    padding: 20px 0;
-    text-align: center;
+  padding: 20px 0;
+  text-align: center;
 }
 
 a {
-    text-decoration: none;
-    color: gray;
+  text-decoration: none;
+  color: gray;
+}
+
+/* ---------------------------nav------------------------ */
+#Effect:hover::after {
+  transform: scaleX(1);
+}
+
+#Effect::after {
+  content: "";
+  width: 150%;
+  background-color: #fff;
+  height: 2px;
+  left: -25%;
+  position: absolute;
+  bottom: -6px;
+  transform: scaleX(0);
+  transition: transform 0.2s linear;
+}
+section nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: rgba(211, 200, 25, 1);
+  background: linear-gradient(
+    90deg,
+    rgba(250, 204, 34, 1),
+    rgba(228, 172, 2, 1)
+  );
+  position: fixed;
+  right: 0;
+  left: 0;
+  z-index: 1000;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  height: 80px;
+  padding: 10px 10px;
+  margin: 0;
+  line-height: 1;
+}
+section nav:hover {
+  background: linear-gradient(
+    90deg,
+    rgba(228, 172, 2, 1),
+    rgba(250, 204, 34, 1)
+  );
+}
+section nav ul li {
+  position: relative;
+}
+section nav ul li a {
+  font-weight: lighter;
+  color: black;
+  text-decoration: none;
+  transition: 0.3s;
+}
+section nav ul li a i {
+  margin-right: 5px;
+}
+
+section nav ul li a.action {
+  color: #facc22;
+}
+
+section nav ul li a:hover {
+  color: #fff;
+  text-shadow: 0px 0px 20px white;
+}
+section {
+  width: 100%;
+  height: 100vh;
+}
+
+.cart {
+  width: 20px;
+  position: relative;
+  left: -15%;
+  cursor: pointer;
+}
+
+section nav .logo img {
+  /* width: 120px;
+    margin: 20px 0; */
+  width: 140px;
+  margin: 20px;
+  position: relative;
+  left: -118%;
+  cursor: pointer;
+  margin-left: 110%;
+}
+
+section nav ul {
+  list-style: none;
+
+  margin-left: 60%;
+}
+
+section nav ul li {
+  display: inline-block;
+  margin: 0 10px;
 }
-
-#Effect {
-    color: white;
-    text-shadow: 1px 1px 2px black, 0 0 10px rgb(187, 152, 35);}
-
 /* .result {
     display: flex;
     flex-wrap: wrap;
@@ -176,120 +266,103 @@ a {
 /* Existing styles */
 
 .result {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: center;
-    height: calc(120vh - 180px);
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  height: calc(120vh - 180px);
 }
 
 .result-item {
-    width: 270px;
-    height: 270px;
-    margin: 27px;
-    border-radius: 10px;
-    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
-    overflow: hidden;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: relative;
-    top: 10%;
+  width: 270px;
+  height: 270px;
+  margin: 27px;
+  border-radius: 10px;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  top: 10%;
 }
 
 .meal-image {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: -1;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
 }
 
 .meal-name {
-    background-color: white;
-    color: black;
-    border-radius: 20px;
-    padding: 20px;
-    font-size: 1.4rem;
-    font-weight: 700;
-    opacity: 0.6;
+  background-color: white;
+  color: black;
+  border-radius: 20px;
+  padding: 20px;
+  font-size: 1.4rem;
+  font-weight: 700;
+  opacity: 0.6;
 }
 
 .result-item h4 {
-    margin: 0;
-    padding: 10px;
-    text-align: center;
-    font-size: 16px;
+  margin: 0;
+  padding: 10px;
+  text-align: center;
+  font-size: 16px;
 }
 
 .result-item:hover {
-    transform: scale(1.05);
-    transition: transform 0.3s;
+  transform: scale(1.05);
+  transition: transform 0.3s;
 }
 
-
-
-
-
-
 .meal-image {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    /* Maintain image aspect ratio */
-    position: absolute;
-    /* Add this line */
-    top: 0;
-    /* Add this line */
-    left: 0;
-    /* Add this line */
-    z-index: -1;
-    /* Add this line */
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  /* Maintain image aspect ratio */
+  position: absolute;
+  /* Add this line */
+  top: 0;
+  /* Add this line */
+  left: 0;
+  /* Add this line */
+  z-index: -1;
+  /* Add this line */
 }
 
-
-
-
 a.exception {
-    color: gray;
+  color: gray;
 }
 
-
-
-
 div#hideall {
-    position: fixed;
-    top: 0%;
-    height: 100%;
-    width: 100%;
+  position: fixed;
+  top: 0%;
+  height: 100%;
+  width: 100%;
 }
 
 .searchbutton {
-    background: none;
-    appearance: none;
-    border: none;
+  background: none;
+  appearance: none;
+  border: none;
 }
 
 div.middle {
-    display: flex;
-    justify-content: center;
+  display: flex;
+  justify-content: center;
 }
 
 .changeposition {
-    order: -1;
+  order: -1;
 }
 
-
-
 @media only screen and (min-width: 320px) {
-
-    
-
 }
 
-
 /* @media only screen and (min-width: 425px) {}
 
 
@@ -326,126 +399,120 @@ div.middle {
     }
 } */
 
-
-@media only screen and (max-width: 350px){
-    .searchbar {
-        font-size: 16px;
-    }
-    .searchsection{
-        width: 350px;
-        margin-left: 20%;
-    }
-    .list {
-        font-size: 16px;
-    }
-    section nav{
-        width: 130vw;
-        margin: auto;
-    }
+@media only screen and (max-width: 350px) {
+  .searchbar {
+    font-size: 16px;
+  }
+  .searchsection {
+    width: 350px;
+    margin-left: 20%;
+  }
+  .list {
+    font-size: 16px;
+  }
+  section nav {
+    width: 130vw;
+    margin: auto;
+  }
 }
 
-@media only screen and (min-width: 435px) and (max-width : 500px){
-    .searchbar {
-        font-size: 16px;
-    }
-    .searchsection{
-        width: 350px;
-        margin-left: 20%;
-    }
-    .list {
-        font-size: 16px;
-    }
-    section nav{
-        width: 100vw;
-        margin: auto;
-    }
+@media only screen and (min-width: 435px) and (max-width: 500px) {
+  .searchbar {
+    font-size: 16px;
+  }
+  .searchsection {
+    width: 350px;
+    margin-left: 20%;
+  }
+  .list {
+    font-size: 16px;
+  }
+  section nav {
+    width: 100vw;
+    margin: auto;
+  }
 }
 
-@media only screen and (min-width: 350px) and (max-width : 435px){
-    .searchbar {
-        font-size: 16px;
-    }
-    .searchsection{
-        width: 350px;
-        margin-left: 20%;
-    }
-    .list {
-        font-size: 16px;
-    }
-    section nav{
-        width: 117vw;
-        margin: auto;
-    }
-    section nav .logo{
-        margin-left: -8%;
-    }
+@media only screen and (min-width: 350px) and (max-width: 435px) {
+  .searchbar {
+    font-size: 16px;
+  }
+  .searchsection {
+    width: 350px;
+    margin-left: 20%;
+  }
+  .list {
+    font-size: 16px;
+  }
+  section nav {
+    width: 117vw;
+    margin: auto;
+  }
+  section nav .logo {
+    margin-left: -8%;
+  }
 }
 
 @media only screen and (max-width: 820px) and (min-width: 500px) {
-    .searchbar {
-        font-size: 16px;
-    }
-    .searchsection{
-        width: 350px;
-        margin-left: 20%;
-    }
-    .list {
-        font-size: 16px;
-    }
+  .searchbar {
+    font-size: 16px;
+  }
+  .searchsection {
+    width: 350px;
+    margin-left: 20%;
+  }
+  .list {
+    font-size: 16px;
+  }
 }
 
-
-
-@media only screen and (max-width: 1400px) and (min-width : 820px){
-
-    .searchbar {
-        font-size: 16px;
-    }
-    .searchsection{
-        width: 350px;
-        margin-left: 60%;
-    }
-    .list {
-        font-size: 16px;
-    }
+@media only screen and (max-width: 1400px) and (min-width: 820px) {
+  .searchbar {
+    font-size: 16px;
+  }
+  .searchsection {
+    width: 350px;
+    margin-left: 60%;
+  }
+  .list {
+    font-size: 16px;
+  }
 }
 
-@media only screen and (min-width: 1400px) and (max-width : 2560px) {
-
-    .list {
-        max-height: 240px;
-    }
-    .searchsection{
-        width: 500px;
-        margin-left: 35%;
-    }
+@media only screen and (min-width: 1400px) and (max-width: 2560px) {
+  .list {
+    max-height: 240px;
+  }
+  .searchsection {
+    width: 500px;
+    margin-left: 35%;
+  }
 }
 
-
 .hide {
-    visibility: hidden;
-    opacity: 0;
-    transition: visibility 0.5s, opacity 0.5s;
+  visibility: hidden;
+  opacity: 0;
+  transition: visibility 0.5s, opacity 0.5s;
 }
 
 .show {
-    display: initial;
-    visibility: visible;
-    opacity: 1;
-    transition: visibility 0.5s, opacity 0.5s;
+  display: initial;
+  visibility: visible;
+  opacity: 1;
+  transition: visibility 0.5s, opacity 0.5s;
 }
 
 .remove {
-    display: none;
+  display: none;
 }
 
 .add {
-    display: initial;
+  display: initial;
 }
 
 input[type="search"]::-webkit-search-decoration,
 input[type="search"]::-webkit-search-cancel-button,
 input[type="search"]::-webkit-search-results-button,
 input[type="search"]::-webkit-search-results-decoration {
-    display: none;
-}
\ No newline at end of file
+  display: none;
+}
diff --git a/public/templates/Home.html b/public/templates/Home.html
index 7f12e9e..948358b 100644
--- a/public/templates/Home.html
+++ b/public/templates/Home.html
@@ -16,12 +16,12 @@
 
         <nav>
             <div class="logo">
-                <a href="/Home"><img src="image/logo4.png"></a>
+                <a href="/Home"><img src="http://localhost:4000/image/logo5.png"></a>
             </div>
           
             <ul>
                 <!-- <li><a href="index.html" class="action"></a>Home</a></li> -->
-                <li id="Effect"><a href="/search"><h3><i class="fa-solid fa-magnifying-glass"></i>Search</h3></a></li>
+                <li id="Effect"><a href="/search"><h3><i class="fa-solid fa-magnifying-glass"></i>Search</a></h3></li>
                 <li id="Effect"><a href="https://www.themealdb.com/browse.php?b=m"><h3><i class="fas fa-tasks"></i>Items</a></h3></li>
                 <li id="Effect"><a href="/help"><h3><i class="fas fa-user-tie"></i></i>Help</a><h3></li>
                 <li id="Effect" ><h3><a href="/cart"><i class="fas fa-shopping-basket"></i>Cart</a></h3></li>
diff --git a/public/templates/cart.html b/public/templates/cart.html
index 6930e95..b0fbc73 100644
--- a/public/templates/cart.html
+++ b/public/templates/cart.html
@@ -16,11 +16,11 @@
 
         <nav>
             <div class="logo">
-                <a href="/Home"><img src="image/logo4.png"></a>
+                <a href="/Home"><img src="http://localhost:4000/image/logo5.png"></a>
             </div>
            
             <ul>
-                <li id="Effect"><a href="/search"><h3><i class="fa-solid fa-magnifying-glass"></i>Search</h3></a></li>
+                <li id="Effect"><a href="/search"><h3><i class="fa-solid fa-magnifying-glass"></i>Search</a></h3></li>
                 <li id="Effect"><a href="https://www.themealdb.com/browse.php?b=m"><h3><i class="fas fa-tasks"></i>Items</a></h3></li>
                 <li id="Effect"><a href="/help"><h3><i class="fas fa-user-tie"></i></i>Help</a><h3></li>
                 <li id="Effect" ><h3><a href="/cart"><i class="fas fa-shopping-basket "></i>Cart</a></h3></li>
diff --git a/public/templates/help.html b/public/templates/help.html
index b2c5c26..3955ba0 100644
--- a/public/templates/help.html
+++ b/public/templates/help.html
@@ -16,13 +16,13 @@
 
         <nav>
             <div class="logo">
-              <a href="/Home"><img src="image/logo4.png"></a>
+              <a href="/Home"><img src="http://localhost:4000/image/logo5.png"></a>
             </div>
           
             <ul>
                 
                 <!-- <li><a href="index.html" class="action"></a>Home</a></li> -->
-                <li id="Effect"><a href="/search"><h3><i class="fa-solid fa-magnifying-glass"></i>Search</h3></a></li>
+                <li id="Effect"><a href="/search"><h3><i class="fa-solid fa-magnifying-glass"></i>Search</a></h3></li>
                 <li id="Effect"><a href="https://www.themealdb.com/browse.php?b=m"><h3><i class="fas fa-tasks"></i>Items</a></h3></li>
                 <li id="Effect"><a href="/help"><h3><i class="fas fa-user-tie"></i></i>Help</a><h3></li>
                 <li id="Effect" ><h3><a href="/cart"><i class="fas fa-shopping-basket"></i>Cart</a></h3></li>
diff --git a/public/templates/search.html b/public/templates/search.html
index eda8a68..103f986 100644
--- a/public/templates/search.html
+++ b/public/templates/search.html
@@ -17,30 +17,30 @@
         <section id="Home">
             <nav>
                 <div class="logo">
-                    <a href="/Home"><img src="image/logo4.png"></a>
+                    <a href="/Home"><img src="http://localhost:4000/image/logo5.png"></a>
                 </div>
 
                 <ul>
                    
                     <li>
                         <a href="/search">
-                            <h3 id="Effect"><i class="fa-solid fa-magnifying-glass"></i>Search</h3>
-                        </a>
+                            <h3 id="Effect"><i class="fa-solid fa-magnifying-glass"></i>Search </a></h3>
+                       
                     </li>
                     <li>
                         <a href="https://www.themealdb.com/browse.php?b=m">
-                            <h3 id="Effect"><i class="fas fa-tasks"></i>Items</h3>
-                        </a>
+                            <h3 id="Effect"><i class="fas fa-tasks"></i>Items       </a></h3>
+                 
                     </li>
                     <li>
                         <a href="/help">
-                            <h3 id="Effect"><i class="fas fa-user-tie"></i></i>Help</h3>
-                        </a>
+                            <h3 id="Effect"><i class="fas fa-user-tie"></i></i>Help        </a></h3>
+                
                     </li>
                     <li>
                         <a href="/cart">
-                            <h3 id="Effect"><i class="fas fa-shopping-basket"></i>Cart</h3>
-                        </a>
+                            <h3 id="Effect"><i class="fas fa-shopping-basket"></i>Cart        </a></h3>
+                 
                     </li>
                 </ul>
             </nav>