* {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  font-family: "Rubik", sans-serif;
  line-height: 1;
  font-weight: 400;
  color: #555;
  background-color: #fdf2e9;
  overflow-x: hidden;
}
.navbar {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: #fdf2e9;

  height: auto;
  max-height: 10rem;
  position: fixed;
  width: 100vw;
  z-index: 1;
}
.navbar nav {
  margin-left: 40rem;
  font-size: 2rem;
}
.navbar nav ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  list-style: none;
}
.navbar img {
  height: 190px;
  width: 240px;
  margin-left: 0;
  margin-right: 15rem;
}
.navbar nav ul li a {
  color: #333;
  font: bold;
  text-decoration: none;
  margin: 2rem 2.5rem;
}
.navbar nav ul li a:hover {
  color: #cf711f;
  transition: all ease-in-out 0.3s;
}
.navbar nav ul li button {
  background-color: #cf711f;
  color: #fdf2e9;
  border: 1px solid #fdf2e9;
  font-size: 1.3rem;
  border-radius: 10px;
  height: auto;
  width: auto;
  min-height: 4rem;
  min-width: 11rem;
  margin-left: 1rem;
  margin-right: 1rem;
  box-shadow: 5px 5px 9px 1px rgb(215, 208, 208);
}
.navbar nav ul li button:hover {
  transform: scaleX(1.1);

  transition: all ease-in-out 0.3s;
}
/*CSS of generalInfo*/
.generalInfo {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  margin: 15rem 5rem;
  margin-bottom: 10rem;
  padding: 1rem 1rem;
}
.infoSection {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  height: auto;
  width: auto;
  max-width: 80rem;
  max-height: 90rem;
  min-height: 35rem;
  min-width: 35rem;
}
.infoSection h1 {
  font-size: 5rem;
  color: #333;

  margin: 1rem 1rem;
  margin-top: 0;
}
.infoSection p {
  font-size: 2rem;

  margin: 3rem 1rem;
}
.infoSection button {
  background-color: #cf711f;
  color: #fdf2e9;
  font-size: 2.1rem;
  border-radius: 11px;
  height: auto;
  width: auto;
  min-height: 7rem;
  min-width: 28rem;
  margin: 1rem 2rem;
  border: 1px solid #fdf2e9;
  box-shadow: 5px 5px 9px 1px rgb(215, 208, 208);
}
.infoSection #button2 {
  background-color: #e3d7ce;
  color: #333;
}
.infoSection #button2:hover {
  background-color: #dacfc7;
  transform: translateX(5px);
  transition: all ease-in-out 0.3s;
}
.infoSection button:hover {
  background-color: #b06625;
  transform: translateX(-5px);
  transition: all ease-in-out 0.3s;
}
.imageSection {
  height: auto;
  width: auto;
  overflow: hidden;
  margin: 2rem 2rem;
  border-radius: 15px;
}
.imageSection img {
  border-radius: 15px;
  max-height: 500px;
}
.imageSection img:hover {
  transform: scale(1.1);
  transition: all ease-in-out 0.9s;
}
/*howIsItwork CSS*/
.howIsItwork {
  display: flex;
  flex-direction: column;

  background-color: white;
}
.howIsItwork .headerInHowItItWork h1 {
  font-size: 1.5rem;
  margin-top: 8rem;
  margin-left: 20rem;
  line-height: 1.5;
  color: #cf711f;
}
.howIsItwork .headerInHowItItWork h2 {
  font-size: 4rem;
  margin-left: 20rem;
  line-height: 1.5;
}
.howIsItwork .tip1,
.tip2,
.tip3 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 5rem;
}
.howIsItwork .infoTip {
  display: flex;
  flex-direction: column;

  margin: 2rem 3rem;
  width: auto;
  height: auto;
  min-height: 70px;
  min-width: 50px;
  max-height: 505px;
  max-width: 600px;
  font-size: 2rem;
}
.howIsItwork .infoTip h3 {
  font-size: 7rem;
  color: #8e8e8e;
  line-height: 1.5;
}
.howIsItwork .infoTip h2 {
  font-size: 3rem;
  margin-bottom: 5rem;
  line-height: 1.5;
}
.howIsItwork .infoTip p {
  font-size: 2rem;

  line-height: 1.5;
}
.howIsItwork .imageInTip {
  height: auto;
  width: auto;
  max-height: 800px;
  max-width: 700px;
  margin: 1rem 9rem;
  overflow: hidden;
  border-radius: 25%;
}
.howIsItwork .imageInTip img {
  height: auto;
  width: auto;
  max-height: 400px;
  max-width: 400px;
}
.howIsItwork .imageInTip img:hover {
  transform: scale(1.05);
  transition: all ease-in-out 1s;
}
/*meals css*/
.meals {
  display: flex;
  flex-direction: column;
  background-color: white;
}
.meals .heaaderInMeals {
  align-items: center;
  margin: 5rem 5rem;
}
.meals .heaaderInMeals h1 {
  color: #cf711f;
  line-height: 1.5;
  margin-left: 10rem;
}
.meals .heaaderInMeals h2 {
  font-size: 4rem;
  line-height: 1.5;
  margin-left: 10rem;
}
.meals .cardsInMeal {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 2rem;
}
.meals .cardsInMeal .card1,
.card2,
.card3 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid rgb(255, 255, 255);
  height: auto;
  width: auto;
  min-width: 40rem;
  min-height: 50rem;
  max-width: 40rem;
  max-height: 50rem;
  margin: 1rem 3rem;
  background-color: white;
  box-shadow: 5px 5px 9px 1px rgb(215, 208, 208);
}
.meals .cardsInMeal .card1:hover,
.card2:hover,
.card3:hover {
  transform: translateY(-15px);
  transition: all ease-in-out 0.5s;
}
.meals .cardsInMeal .imageInCard {
  height: auto;
  width: auto;
  max-width: 35rem;
  max-height: 35rem;
  margin: 2rem 3rem;
}
.meals .cardsInMeal .imageInCard img {
  height: auto;
  width: auto;
  max-width: 55rem;
  max-height: 18rem;
  animation: floatImage 5s ease-in-out infinite;
}
@keyframes floatImage {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-1.1rem);
  }
  100% {
    transform: translateY(0);
  }
}
.meals .cardsInMeal .infoCard h3 {
  font-size: 3rem;
  line-height: 1.5;
}
.meals .cardsInMeal .infoCard h4 {
  font-size: 1.5rem;
  background-color: #cf711f;
  text-align: center;
  line-height: 1.5;
  color: white;
  border-radius: 15px;
  margin: 2rem 3rem;
}
.meals .cardsInMeal .infoCard ul {
  font-size: 1.7rem;
  line-height: 1.5;
  list-style: circle;
  color: #555;
}
/*customerReview CSS*/
.customerReview {
  display: flex;
  flex-direction: row;

  margin: 8rem 2rem;
}
.writtenInfo {
  display: flex;
  flex-direction: column;
}
.writtenInfo .actualReview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 4.8rem;
  column-gap: 8rem;
  margin: auto;
  width: auto;
}
.writtenInfo .actualReview p {
  font-size: 1.7rem;
  line-height: 1.5;
  margin: 1rem;
}
.heaaderInWritteninfo {
  margin: auto;
  margin-top: 23rem;
}
.writtenInfo h1 {
  font-size: 2rem;
}
.writtenInfo h2 {
  font-size: 5rem;
}
.writtenInfo .actualReview img {
  height: 50px;
  width: 50px;
  border-radius: 50%;
}
.images {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.6rem;
  padding: 1.6rem;
}
.images .sampleImages {
  height: auto;
  width: auto;
  overflow: hidden;
  border: 2px solid #fdf2e9;
  box-shadow: 5px 5px 9px 1px rgb(215, 208, 208);
}
.images img {
  height: 100%;
  max-height: 200px;
  width: 100%;
  text-align: center;
}
.images img:hover {
  transform: scale(1.2);
  transition: all ease-in-out 1s;
}
/*pricing CSS*/
.pricing {
  display: flex;
  flex-direction: column;
  background-color: white;
  margin-top: 4rem;
}
.pricing .headerSection {
  margin-top: 3rem;
  margin-left: 2rem;
  text-align: center;
}
.pricing .headerSection h1 {
  font-size: 1.5rem;
  line-height: 1.5;
  color: #cf711f;
}
.pricing .headerSection h2 {
  font-size: 3.8rem;
  line-height: 1.5;
}
.pricing .cardSection {
  display: flex;
  flex-direction: row;

  justify-content: center;
  align-items: center;
  margin: 4rem;
  padding: 1rem 1rem;
}
.pricing .cardSection .cardPricing1 {
  border: 2px solid #fdf2e9;
  box-shadow: 5px 5px 9px 1px #fdf2e9;
  margin: 2rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: auto;
  height: auto;
  min-width: 350px;
  min-height: 400px;
  border-radius: 5px;
}
.pricing .cardSection .cardPricing1 h3 {
  font-size: 1.8rem;
  line-height: 1.5;
  color: #cf711f;
  margin-top: 2rem;
}
.pricing .cardSection .cardPricing1 h2 {
  font-size: 5rem;
  line-height: 1.5;
}
.pricing .cardSection .cardPricing1 ul {
  font-size: 1.8rem;
  line-height: 1.5;
  list-style: circle;
  color: #777;

  margin-top: 4rem;
}
.pricing .cardSection .cardPricing1 button {
  margin: 3rem 2rem;
  height: auto;
  width: auto;
  min-height: 40px;
  min-width: 170px;
  border-radius: 8px;
  background-color: #cf711f;
  color: white;
  font-size: 1.7rem;
  border: 2px solid #cf711f;
  font-style: bold;
}
.pricing .cardSection .cardPricing2 {
  border: 2px solid #fdf2e9;
  box-shadow: 5px 5px 9px 1px rgb(230, 230, 230);
  margin: 2rem 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: auto;
  height: auto;
  min-width: 350px;
  min-height: 400px;
  background-color: #fdf2e9;
  border-radius: 5px;
}
.pricing .cardSection .cardPricing2 h3 {
  font-size: 1.8rem;
  line-height: 1.5;
  color: #cf711f;
  margin-top: 2rem;
}
.pricing .cardSection .cardPricing2 h2 {
  font-size: 5rem;
  line-height: 1.5;
}
.pricing .cardSection .cardPricing2 ul {
  font-size: 1.8rem;
  line-height: 1.5;
  list-style: circle;
  color: #777;

  margin-top: 4rem;
}
.pricing .cardSection .cardPricing2 button {
  margin: 3rem 2rem;
  height: auto;
  width: auto;
  min-height: 40px;
  min-width: 170px;
  border-radius: 8px;
  background-color: #cf711f;
  color: white;
  font-size: 1.7rem;
  border: 2px solid #cf711f;
  font-style: bold;
}
.pricing .cardSection button:hover {
  background-color: #b06625;
  transform: scale(1.01);
  transition: all ease-in-out 1s;
}
.pricing .footer {
  text-align: center;
  font-size: 1.2rem;
}
/*sinUpForCustomer*/
.sinUpForCustomer {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border: 2px solid #eb984e;
  margin: 7rem 32rem;
  background-color: #eb984e;
  border-radius: 10px;
  color: white;
  box-shadow: 5px 5px 9px 1px #bc8d63;
}
.sinUpForCustomer .imageInSinUp {
  width: fit-content;
  height: fit-content;
}
.sinUpForCustomer .imageInSinUp img {
  max-width: 50rem;
  max-height: 32rem;
  opacity: 0.9;
  margin: 1rem 0.7rem;
}

.sinUpForCustomer .sinUpForm {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.sinUpForCustomer .sinUpForm h2 {
  color: rgb(31, 31, 31);
  font-size: 3.4rem;
  line-height: 1.5;
}
.sinUpForCustomer .sinUpForm p {
  color: rgb(31, 31, 31);
  font-size: 1.6rem;
  line-height: 1.3;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.sinUpForCustomer .sinUpForm form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 3.2rem;
  row-gap: 2.4rem;
}

form * {
  height: auto;
  width: auto;
  min-height: 3.1rem;
  min-width: 20rem;
}
form input,
button,
select {
  border-radius: 5px;
  border: 1px solid white;
}
form label {
  color: rgb(52, 52, 52);
  margin: 1rem;
  line-height: 1.5;
}
form button {
  background-color: #45260a;
  color: #fdf2e9;
  align-self: end;
  padding: 1.2rem;
  border: 1px solid #45260a;
  font-size: 1.7rem;
}
form button:hover {
  cursor: pointer;
}
button:hover {
  cursor: pointer;
}
/*footer*/
footer {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: white;
  margin-top: 8rem;
  text-align: center;
}
footer .box1 {
  display: flex;
  flex-direction: column;
  margin: 2rem 2rem;
}

footer .box1 .linksInFooter {
  display: flex;
  flex-direction: row;
}
footer .box1 .linksInFooter img {
  height: auto;
  width: auto;
  max-width: 30px;
  max-height: 30px;
  margin: 0rem 1rem;
}
footer .box1 p {
  text-decoration: none;
  line-height: 1.3;
}
footer .box1 .linksInFooter img:hover {
  transform: rotate(-10deg);
  transition: all ease-in-out 0.5s;
}
footer .box2 {
  display: flex;
  flex-direction: column;
  margin: 2rem 2rem;
}
footer .box2 p {
  text-decoration: none;
  line-height: 1.3;
}
footer .box3 {
  display: flex;
  flex-direction: column;
  margin: 2rem 2rem;
}
footer .box3 a {
  text-decoration: none;
  line-height: 1.3;
}
footer .box4 {
  display: flex;
  flex-direction: column;
  margin: 2rem 2rem;
}
footer .box4 a {
  text-decoration: none;
  line-height: 1.3;
}
footer .box5 {
  display: flex;
  flex-direction: column;
  margin: 2rem 2rem;
}
footer .box5 a {
  text-decoration: none;
  line-height: 1.3;
}
footer a {
  color: #333;
}
footer a:hover {
  transform: scale(1.2);
}
footer h2 {
  color: #111;
  font-weight: bold;
  font-size: 1.6rem;
  font-weight: 500;
  margin-bottom: 2rem;
  text-decoration: underline;
}
footer p,
a {
  font-size: 1.4rem;
  color: #767676;
  margin: 0.5rem 1rem;
}