From 976387ef797ac4f66a1714a5ad7645aedaf39c8d Mon Sep 17 00:00:00 2001
From: Somesh Pratap Singh <146454603+sammy0318@users.noreply.github.com>
Date: Tue, 8 Oct 2024 09:39:13 +0530
Subject: [PATCH] Create Updated style.css

---
 Updated style.css | 1080 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 1080 insertions(+)
 create mode 100644 Updated style.css

diff --git a/Updated style.css b/Updated style.css
new file mode 100644
index 00000000..e62ca019
--- /dev/null
+++ b/Updated style.css	
@@ -0,0 +1,1080 @@
+* {
+  margin: 0px;
+  padding: 0px;
+}
+
+.poppins-light {
+  font-family: "Poppins", sans-serif;
+  font-weight: 300;
+  font-style: normal;
+}
+
+
+body {
+  background-color: black;
+}
+/*
+.navbar {
+  padding: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 1030;
+  padding: 15px 0;
+  /*background-color: rgba(245, 245, 245, 0.7);
+  backdrop-filter: blur(8px);
+  transition: background-color 0.5s ease, backdrop-filter 0.5s ease;
+}
+*/
+
+.navbar a {
+  text-decoration: none;
+  color: #333;
+  font-size: 1.3rem;
+  transition: color 0.3s ease,border-bottom 0.3s ease;
+}
+
+/* Navbar link hover effect */
+/*.navbar a:hover{
+  color: #fff;
+  border-bottom: 1px solid #fff;
+}
+*/
+
+.navbar.fixed-top {
+  position: fixed; 
+  top: 0;
+  width: 100%; 
+  z-index: 1030; 
+}
+.navbar.scrolled {
+  background-color: rgb(176, 63, 63); 
+  backdrop-filter: blur(15px);
+  color: #fff;
+}
+.intro_container {
+  display: flex;
+  flex-direction: column;
+  padding: 3px 150px;
+  height: 630px;
+  justify-content: center;
+  align-items: center;
+  color: white;
+  text-align: center;
+}
+
+.intro_container:before {
+  background-color: burlywood;
+  background-blend-mode: multiply;
+  content: "";
+  position: absolute;
+  height: 800px;
+  width: 100%;
+  top: 0px;
+  left: 0px;
+  z-index: -1;
+  opacity: 0.5;
+}
+
+.intro_container h1 {
+  font-size: 4.5em;
+  font-family: "Oswald", sans-serif;
+}
+
+.intro_container p {
+  font-size: 1.15rem;
+  font-family: "Oswald", sans-serif;
+}
+
+.intro_container button {
+  margin-top: 20px;
+  background-color: brown;
+  color: white;
+  border: 3px solid rgb(255, 255,255);
+  font-size: 1.3rem;
+  font-family: "Philosopher", sans-serif;
+  padding-bottom: 4px;
+  text-decoration: none;
+  padding: 15px;
+  border-radius: 15px;
+  display: inline-block;
+  transition: transform 0.3s ease, background-color 0.3s
+}
+
+.intro_container button:hover {
+  background-color: #ffffff;
+  color: brown !important;
+  border: 3px solid rgb(165, 42, 42);
+  transform: scale(1.01); 
+  animation: bounce 0.5s;
+}
+
+.about_us {
+  background-color: transparent;
+  padding: 100px 0px 100px 0px;
+}
+
+#about {
+  /* margin: 34px; */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+#about .box {
+  border: 2px solid #000000;
+  padding: 34px;
+  margin: 2px 55px;
+  border-radius: 28px;
+  margin-bottom: 20px;
+  /* float: left; */
+  transition: 0.3s all ease-in-out;
+}
+
+#about .box:hover {
+  box-shadow: #212123 1px 1px 8px;
+  scale: 1.015;
+  cursor: pointer;
+}
+
+#about .box img {
+  height: 160px;
+  width: 270px;
+  margin: auto;
+  display: flex;
+}
+
+#about .box p {
+  font-family: "Bree Serif", serif;
+  text-align: center;
+}
+
+.h-primary {
+  font-family: "Bree Serif", serif;
+  font-size: 2.5rem;
+  padding: 40px 80px 80px 80px;
+  text-align: center;
+  color: brown;
+}
+
+.h-secondary {
+  font-family: "Bree Serif", serif;
+  font-size: 1.5rem;
+  padding: 12px;
+  text-align: center;
+}
+
+.service_container {
+        background-color: hsl(20, 43%, 93%);
+        padding: 50px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+  border: 0.5px solid black;
+    }
+
+    .service {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 30px;
+        max-width: 1200px;
+        width: 100%;
+    }
+
+    .column {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+
+    /* Text Column - 60% */
+    .service_text {
+        flex: 0 0 49%;
+        font-family: var(--ff-poppins);
+        color: hsl(203, 30%, 26%);
+    }
+
+    .service_text h1 {
+        font-family: var(--ff-philosopher);
+        font-size: 3rem;
+        line-height: 1.2;
+        margin-bottom: 15px;
+    }
+
+    .service_text p {
+        font-family: var(--ff-poppins);
+        font-size: 1.2rem;
+        color: hsl(208, 7%, 46%);
+        margin-bottom: 20px;
+    }
+
+    /* Buttons Column - 40% */
+    .service_buttons {
+        flex: 0 0 40%;
+    }
+
+    .button_row {
+        display: flex;
+        justify-content: space-between;
+      /*border: 1px solid black;*/
+        gap: 20px;
+    }
+
+    .box {
+        text-align: center;
+        flex: 1;
+    }
+
+    .box h2 {
+        font-family: var(--ff-philosopher);
+        color: hsl(357, 82%, 35%);
+        font-size: 1.5rem;
+        margin-bottom: 10px;
+    }
+
+    .order_btn {
+        font-family: var(--ff-poppins);
+        background-color: hsl(357, 82%, 35%);
+        color: white;
+        padding: 12px 30px;
+        font-size: 1rem;
+        text-decoration: none;
+        border-radius: 10px;
+        transition: background-color 0.3s ease;
+    }
+
+    .order_btn:hover {
+        background-color: hsl(357, 82%, 45%);
+    }
+    
+
+
+/*
+.service_container {
+  display: flex;
+  flex-direction: column;
+   padding: 3px 200px; 
+  height: 550px;
+  width: auto;
+  justify-content: center;
+  align-items: center;
+  color: white;
+  background-color: transparent;
+}
+*/
+
+.service_container:before {
+  background-color: transparent;
+  content: "";
+  position: absolute;
+
+  /*  
+    height: 560px;
+  height: 800px;
+  width: 100%;
+  /* justify-items: center; */
+  opacity: 0.4;
+  z-index: -1;
+  /* background-repeat: no-repeat; */
+}
+
+/*
+.service {
+  display: flex;
+  padding: 20px;
+  box-sizing: fixed;
+}
+*/
+
+/*
+.service .box_main {
+  padding-left: 20px;
+  padding-right: 40px;
+}
+*/
+
+/*
+.service .box_main h1 {
+  font-size: 4.5rem;
+  font-family: "Oswald", sans-serif;
+}
+*/
+/*
+
+.service .box_main p {
+  font-family: "Oswald", sans-serif;
+}
+*/
+/*
+
+.service .box {
+  padding: 140px 20px;
+   border:2px solid rgb(224, 224, 252); 
+  text-align: center;
+  font-size: 1.3rem;
+}
+*/
+
+/*
+.service .box a {
+  text-decoration: none;
+  background-color: brown;
+  border: 3px solid rgb(224, 224, 252);
+  padding: 15px;
+  border-radius: 15px;
+  display: inline-block;
+  color: white;
+  transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
+  
+  */
+
+  /*
+  .service .box a:hover {
+    background-color: #ffffff;
+    color: brown !important;
+    border: 3px solid rgb(165, 42, 42);
+    transform: scale(1.01); 
+    animation: bounce 0.5s;
+  }
+  */
+
+{}
+  @keyframes bounce {
+    0%, 100% {
+        transform: translateY(0); 
+    }
+    50% {
+        transform: translateY(-10px); 
+    }
+  }
+.menu_container {
+  background-color: hsl(20, 43%,93%);
+  padding: 100px 0px 100px 0px;
+}
+
+.menu_container .mainhead {
+  text-align: center;
+}
+
+.mainhead h1 {
+  font-family: "Bree Serif", serif;
+  font-size: 2.8rem;
+}
+
+.mainhead p {
+  font-size: 1.2rem;
+  color: brown;
+  font-family: "Bree Serif", serif;
+  margin: 15px 10px;
+}
+
+.mainhead button {
+  text-decoration: none;
+  font-size: 1.4rem;
+  background-color: brown;
+  border: 3px solid rgb(224, 224, 252);
+  padding: 15px;
+  border-radius: 15px;
+  display: inline-block;
+  color: white;
+  transition: transform 0.3s ease, background-color 0.3s
+}
+
+.mainhead button:hover {
+  background-color: #ffffff;
+  color: brown !important;
+  border: 3px solid rgb(165, 42, 42);
+  transform: scale(1.01); 
+  animation: bounce 0.5s;
+}
+
+.menu_items {
+  display: flex;
+  overflow: hidden;
+}
+
+.menu_items .items {
+  background-color: #f2f2f2;
+  border: 3px solid brown;
+  padding: 25px;
+  margin: 15px;
+  height: 400px;
+  width: 400px;
+  border-radius: 10px;
+  text-align: center;
+  font-family: "Bree Serif", serif;
+  transition: 0.3s all ease-in;
+}
+
+.menu_items .items:hover {
+  box-shadow: #212123 1px 1px 8px;
+  cursor: pointer;
+  scale: 1.02;
+}
+
+.menu_items .items img {
+  justify-content: center;
+  height: 270px;
+  width: 250px;
+}
+
+.menu_items .items h3 {
+  font-size: 1.4rem;
+  margin-top: 10px;
+}
+
+.meals-showcase {
+  list-style: none;
+  width: 100%;
+  padding:0%;
+  margin: 0%;
+}
+
+.meals-showcase li {
+  display: block;
+  float: left;
+  width: 25%;
+}
+
+.meal-photo {
+  width: 100%;
+  margin: 0;
+  overflow: hidden;
+  background-color: #000;
+  transition: transform 0.5s, opacity 0.5s;
+}
+
+.meal-photo img {
+  width: 100%;
+  height: auto;
+  transform: scale(1.15);
+  opacity: 0.7;
+}
+
+.meal-photo img:hover {
+  transform: scale(1.03);
+  opacity: 1;
+}
+
+.clearfix {
+  zoom: 1;
+}
+
+.clearfix::after {
+  content: ".";
+  clear: both;
+  display: block;
+  height: 0;
+  visibility: hidden;
+}
+
+.section-meals {
+  padding: 0;
+}
+
+.app_download {
+  background-color: brown;
+  height: 350px;
+  color: white;
+  padding-left: 50px;
+  padding-top: 80px;
+}
+
+.app_download h4 {
+  font-size: 2rem;
+}
+
+.app_download h2 {
+  font-size: 3.5rem;
+}
+
+.app_download p {
+  font-size: 1.3rem;
+}
+
+.btn a {
+  text-decoration: none;
+  color: brown;
+}
+
+.btn a:hover {
+  color: hsl(304, 14%, 46%);
+}
+
+.app-download-img {
+  max-height: 70px;
+
+  padding: 10px;
+}
+
+.move {
+  background-color: hsl(20, 43%, 93%);
+  height: 60px;
+}
+
+.move .text {
+  color: rgb(244, 240, 240);
+  font-size: 2.5rem;
+  padding-top: 10px;
+}
+
+/* .footer {
+    background-color:  rgb(224, 224, 252);;
+    height: 700px;
+} */
+
+/* .footer .container {
+    border: 2px solid rgb(22, 6, 6);
+    color: white;
+    padding: 50px;
+    margin-left: 50px;
+    margin-right: 700px;
+    font-size: 1.6rem;
+    padding-right: 50px;
+}
+
+.footer input {
+    font-size: 1.3rem;
+}
+
+.footer h1 {
+    color: white;
+    font-family: 'Bree Serif', serif;
+    margin-left: 20px;
+    padding: 50px;
+    font-size: 2.5rem;
+}
+
+.footer button {
+    font-size: 1.4rem;
+    padding: 10px;
+    margin-top: 30px;
+    width: 180px;
+    font-family: 'Bree Serif', serif;
+    color: rgb(22, 6, 6);
+    border-radius: 10px;
+} */
+
+/* .footer p {
+    text-align: center;
+    font-family: 'Bree Serif', serif;
+    font-size: 1.2rem;
+    margin-bottom: 10px;
+    color:brown;
+    /* margin-top: 30px; */
+
+/* .footer h1{
+    font-size: 1.2em;
+} */
+
+/* .footer{
+    margin-top: 15px;
+} */
+/* .foot-panel1{
+    
+    background-color: rgb(122, 37, 37);
+    color:white;
+    height: 50px;
+    display:flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 0.85rem;
+} */
+
+.foot-panel2 {
+  background-color: rgb(138, 37, 37);
+  color: white;
+  height: 300px;
+  /* height: fit-content; */
+  display: flex;
+  /* padding: 10px; */
+  justify-content: space-evenly;
+}
+
+.foot-panel2 ul {
+  margin-top: 20px;
+}
+
+ul p {
+  font-weight: 700;
+}
+
+ul a {
+  display: block;
+  font-size: 0.85rem;
+  margin-top: 10px;
+  color: #dddddd;
+  text-decoration: none;
+}
+
+/* .foot-pannel3{
+    background-color:rgb(66, 16, 16);
+    color: white;
+    border-top: 0.5px solid white;
+    height: 70px;
+    display: flex;
+    justify-content: center;
+} */
+
+
+.foot_panel4 {
+  background-color: rgb(66, 16, 16);
+  color: white;
+  height: 160px;
+  font-size: 0.9rem;
+  text-align: center;
+}
+
+.pages {
+  padding-top: 25px;
+}
+
+.copyright {
+  padding-top: 10px;
+}
+
+form {
+  padding-top: 20px;
+  display: grid;
+  /* gap: 10px; */
+  padding-bottom: 100px;
+}
+
+label {
+  font-weight: bold;
+}
+
+input,
+textarea {
+  height: 30px;
+  width: max-content;
+  padding: 3px;
+  box-sizing: border-box;
+  border-radius: 4px;
+  outline: none;
+  border: #212123 1px;
+}
+
+#butt {
+  background-color: brown;
+  color: white !important;
+  padding: 3px;
+  border: 1px solid white;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+#butt:hover {
+  background-color: rgb(196, 89, 89);
+}
+
+.social-icons a {
+  font-size: 1.2rem;
+  padding: 8px;
+  margin: 15px;
+  text-decoration: none;
+  color: brown !important;
+}
+
+.social-icons a:hover {
+  color: brown;
+  background-color: hsl(22, 76%, 85%);
+  border-radius: 10px;
+  transform: scale(1.5); /* Increase size */
+  transition: transform 0.3s ease; /* Smooth transition effect */
+}
+.fa-brands.fa-facebook:hover {
+  color: #3B5998 !important;
+}
+
+.fa-brands.fa-instagram:hover {
+  color: #D62976 !important;
+}
+
+.fa-brands.fa-x-twitter:hover {
+  color: #181e20 !important;
+  /* color: white; */
+}
+
+.social-icons a:hover {
+  /* color: brown; */
+  /* background-color: hsl(20, 43%, 93%); */
+  border-radius: 50px;
+}
+
+.fa-facebook{
+  color: hsl(203, 30%, 26%);
+}
+
+.fa-facebook:hover {
+  
+  transform: scale(1.5);
+  color:#3B5998;
+  transition: transform 0.2s ease, color 0.2s ease;
+}
+
+.fa-instagram{
+  color: hsl(203, 30%, 26%);
+}
+.fa-instagram:hover {
+  transform: scale(1.5);
+  color:#D62976;
+  transition: transform 0.2s ease, color 0.2s ease;
+}
+.fa-x-twitter{
+  color: hsl(203, 30%, 26%);
+
+}
+
+.fa-x-twitter:hover {
+  color:black;
+  transform: scale(1.5);
+  transition: transform 0.2s ease, color 0.2s ease;
+}
+
+#author {
+  padding: 3px;
+  border-radius: 3px;
+  color: #dddddd;
+}
+
+@media screen and (max-width: 500px) {
+  .menu_items .items {
+    max-width: fit-content;
+    max-height: fit-content;
+  }
+
+  #about .box {
+    padding: 30px;
+    margin: 2px 10px;
+    margin-bottom: 25px;
+    /* float: left; */
+  }
+  .pages {
+    height: fit-content;
+    padding: 8px;
+  }
+
+  .foot-panel2 {
+    padding: 20px;
+  }
+}
+
+/* responsiveness  */
+@media (max-width: 768px) {
+        .service {
+            flex-direction: column;
+            text-align: center;
+        }
+
+        .service_text, .service_buttons {
+            flex: 1 1 100%;
+        }
+
+        .button_row {
+            flex-direction: column;
+            gap: 20px;
+        }
+    }
+
+
+@media screen and (max-width: 780px) {
+  .app_download {
+    padding: 40px 20px;
+    height: fit-content;
+  }
+
+  .foot-panel2 {
+    height: fit-content;
+    display: grid;
+    grid-template-columns: repeat(2, minmax(20px, 1fr));
+
+    /* flex-direction: column; */
+    grid-template-columns: 2;
+    padding: 30px;
+  }
+
+  .foot-panel2 ul {
+    margin-top: 20px;
+  }
+
+  input,
+  textarea {
+    height: 30px;
+    width: 90%;
+    padding: 3px;
+    margin: 4px;
+    box-sizing: border-box;
+    border-radius: 2px;
+  }
+
+  #butt {
+    padding: 3px;
+    margin: 4px;
+    width: 90%;
+  }
+}
+
+.btn {
+  cursor: pointer;
+  padding-top: 0%;
+}
+
+.contact_page {
+  background-color: rgb(213, 213, 238);
+  /*background:linear-gradient(135deg,rgba(155, 155, 241,0.3),rgba(155, 155, 241,0.4),rgba(0,0,255,0.4),rgba(0,0,255,0.4));
+*/
+}
+
+.main_content {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.contact_info {
+  align-items: start;
+  gap: 20px;
+  flex-direction: columns;
+  margin: auto;
+padding-left:2px;
+  max-width: 40%;
+}
+
+.contact_form>* {
+  width: 80%;
+  height: 50px;
+  margin-top: 20px;
+  border: none;
+  border-radius: 30px;
+  padding: 20px;
+  background-color: rgb(224, 224, 239);
+  color: blueviolet;
+  transition: transform 250ms ease;
+}
+
+.contact_form>*:hover {
+  border: rgb(242, 229, 229) solid 2px;
+  transform: scale(1.08);
+}
+
+.contact_form>*::placeholder {
+  color: rgb(242, 229, 229);
+  font-size: 1vw;
+}
+
+.get_in_touch {
+  font-family: "Mooli", serif;
+  font-weight: bold;
+  font-size: 2em;
+  color: rgb(242, 229, 229);
+  display: inline-block;
+  position: relative;
+}
+
+.contact_message {
+  font-family: "Mooli", serif;
+  font-size: 1em;
+  color: rgb(242, 229, 229);
+  margin-top: 15px;
+}
+
+.contact_header {
+  background: linear-gradient(90deg,
+      rgb(128, 0, 0),
+      rgb(64, 0, 0),
+      rgb(32, 0, 0));
+}
+
+.get_in_touch::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  height: 2.5px;
+  background-color: blueviolet;
+  width: calc(100% + 1em);
+  transform: scaleX(0.1);
+  transform-origin: left;
+  border-radius: 90px;
+  transition: transform 250ms ease;
+}
+
+.get_in_touch:hover::after {
+  transform: scaleX(1);
+}
+
+.contact_submit {
+  width: 20%;
+
+  color: white;
+  background: linear-gradient(135deg,
+      blue,
+      rgb(155, 155, 241),
+      rgb(155, 155, 241));
+}
+
+.contact_submit:hover {
+  background: linear-gradient(135deg, rgb(155, 155, 241), blue);
+}
+
+.contact_us {
+  width: 50%;
+  height: 100vh;
+  background-image: url("contact_page_background_image.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-color: rgba(0, 0, 0, 0.65);
+  background-blend-mode: multiply;
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  flex-wrap: wrap;
+  color: rgb(242, 225, 225);
+  font-family: "Dancing Script", cursive;
+  font-weight: bolder;
+  font-size: 5vw;
+}
+
+.contact_us>h1 {
+  max-width: 60%;
+  text-align: center;
+}
+
+@media (max-width: 800px) {
+  .contact_info {
+    width: 80vw;
+  }
+
+  .contact_us {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 440px) {
+  .intro_container {
+    height: fit-content;
+    padding: 100px;
+  }
+}
+
+.navbar li:hover a {
+  color: brown;
+}
+
+.btn:hover {
+  background-color: white;
+  color: brown;
+}
+
+.menu_items .items:hover {
+  box-shadow: 0 0 20px rgba(138, 37, 37, 0.5);
+}
+
+.social-icons i:hover {
+  color: brown;
+}
+
+
+#marque {
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+  white-space: nowrap;
+  background-color: rgb(255, 255, 255);
+}
+
+#marque h1 {
+  display: inline-block;
+  font-size: 3vw;
+  text-transform: uppercase;
+  padding-right: 100px;
+  animation: marquee 10s linear infinite;
+  background: #de6262;
+  background: -webkit-linear-gradient(to right, #de6262, #ffb88c);
+  background: linear-gradient(to right, #de6262, #ffb88c);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+@keyframes marquee {
+  0% {
+      transform: translateX(0);
+  }
+
+  100% {
+      transform: translateX(-100%);
+  }
+}
+
+#marque-container {
+  display: inline-block;
+  padding-left: 100%;
+}
+
+#marque-container:after {
+  content: "Get 30% OFF on your first order! Get 30% OFF on your first order! Get 30% OFF on your first order! Get 30% OFF on your first order! Get 30% OFF on your first order! Get 30% OFF on your first order! Get 30% OFF on your first order! Get 30% OFF on your first order!";
+  padding-left: 100px;
+}
+
+@media (max-width: 768px) {
+  #marque {
+      padding: 1vw;
+      border-top: 1px solid black;
+      border-bottom: 1px solid black;
+  }
+
+  #marque h1 {
+      letter-spacing: 2px;
+      font-size: 3vw;
+      -webkit-text-stroke: 0.3px black;
+      padding-right: 2px;
+  }
+
+  #marque-container:after {
+      content: "Get 30% OFF on your first order! Get 30% OFF on your first order! Get 30% OFF on your first order! Get 30% OFF on your first order!";
+      padding-left:2px;
+
+    }
+}
+
+
+#contactForm {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 20rem;
+  height: max-content;
+}
+
+#contactForm input,
+#contactForm textarea {
+  width: 100%;
+  padding: 20px;
+  margin: 5px;
+  border-radius: 10px;
+  border: none;
+  background-color: #f9e2c4;
+}
+
+#contactForm h3 {
+  height: 30px;
+  color: #141414;
+  font-size: calc(1.0rem + .6vw);
+}
+#contactForm textarea {
+  height: 100px;
+  resize: none; 
+}
+
+#contactForm button {
+  padding: 10px 20px;
+  background-color:rgb(196, 74, 74);
+  color:rgb(15, 14, 14);
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  margin-top: 5px;
+  width: 60%;
+}