/* Resets */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: all 0.5s;
}

body {
  padding: 0;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  /* width: 100dvw; */
}

/* Header */

header {
  background-image: linear-gradient(rgb(0, 0, 0, 0.7), rgb(0, 0, 0, 0.7)),
    url("img/hero.jpg");
  /* background-color: red; */
  background-position: center;
  background-size: cover;
  /* width: 100dvw; */
  height: 100vh;
  padding: 25px 110px;
}

/* Nav */

header > nav {
  display: flex;
  /* background-color: blue; */
  align-items: center;
  justify-content: space-between;
}

header > nav > img {
  height: 100px;
  /* flex: 0.1; */
}

header > nav > #main__nav {
  display: flex;
  /* background-color: blue; */
  flex: 1;
  gap: 1rem;
  justify-content: flex-end;
}

header > nav > #main__nav p {
  color: white;
  /* font-size: 16px; */
  text-transform: uppercase;
  cursor: pointer;
  padding: 10px;
  transition: all 1s;
}

header > nav > #main__nav p:hover {
  border-bottom: #e67e22 1px solid;
}

.hambuger {
  display: none;
  align-items: center;
  flex-direction: column;
  gap: 5px;
  width: 37px;
}

.hambuger > span {
  width: 100%;
  height: 3px;
  border-radius: 100px;
  background-color: white;
}

/* hero text and buttons */

header > .hero__text__button__wrapper {
  /* background-color: red; */
  margin-top: 25vh;
}

header > .hero__text__button__wrapper > h1 {
  color: white;
  font-size: 50px;
  font-weight: 500;
  text-transform: uppercase;
}

header > .hero__text__button__wrapper > .btn__wrapper {
  margin-top: 50px;
}

header > .hero__text__button__wrapper > .btn__wrapper > .btn {
  padding: 15px 40px;
  border-radius: 30px;
  text-decoration: none;
}

header > .hero__text__button__wrapper > .btn__wrapper > .btn-1 {
  background-color: #e67e22;
  color: white;
  margin-right: 10px;
}

header > .hero__text__button__wrapper > .btn__wrapper > .btn-2 {
  color: #e67e22;
  border: 1px #e67e22 solid;
}

header > .hero__text__button__wrapper > .btn__wrapper > .btn-2:hover {
  background-color: #e67e22;
  color: white;
}

/* quick important media queries */

@media (max-width: 810px) {
  .hambuger {
    display: flex;
    position: fixed;
    top: 50px;
    right: 30px;
    cursor: pointer;
  }

  .hambuger.active > :nth-child(1) {
    display: none;
  }
  .hambuger.active > span:nth-child(2) {
    display: none;
  } .hambuger.active > span:nth-child(3) {
    display: none;
  }

  #main__nav {
    background-color: grey;
    position: fixed;
    left: -100%;
    top: 0;
    width: 100%;
    flex-direction: column;
    align-items: center;
    /* height: 85dvh; */
    justify-content: center;
    transition: all 0.5s;
    padding-top: 150px;
    padding-bottom: 50px;
    /* z-index: -99999; */
  }

  #main__nav.active {
    left: 0;
  }
}

/* --------------------------- Section Features ------------------------------ */

.section__features {
  padding: 80px 100px;
  /* width: 100dvw; */
}

.section__features > .intro__text {
  display: flex;
  flex-direction: column;
}

.section__features > .intro__text > h2 {
  font-size: 40px;
  word-spacing: 2px;
  text-align: center;
  letter-spacing: 1px;
  font-weight: 300;
  color: gray;
  text-transform: uppercase;
}

.section__features > .intro__text > div {
  background-color: #e67e22;
  width: 100px;
  height: 2px;
  align-self: center;
  margin: 30px 0;
}

.section__features > .intro__text > p {
  color: gray;
  line-height: 25px;
  width: 70%;
  align-self: center;
  font-size: larger;
  margin-top: 10px;
}

.section__features > .main__features {
  display: flex;
  margin-top: 50px;
  width: 100%;
  gap: 1.5rem;
}

.section__features > .main__features > .feature > h3 {
  margin-bottom: 10px;
  font-weight: 300;
}

.section__features > .main__features > .feature > p {
  color: gray;
  line-height: 25px;
}

/* ----------------------- Section Meals -------------------  */

.section__meal {
  /* width: 100dvw; */
  display: flex;
  flex-wrap: wrap;
}

.section__meal > img {
  width: 25%;
  transition: all 0.5s;
}

.section__meal > img:hover {
  opacity: 0.5;
}

@media (max-width: 650px) {
  .section__meal > img {
    width: 50%;
  }
}

@media (max-width: 300px) {
  .section__meal > img {
    width: 100%;
  }
}

/* ----------------------- Section how it works --------------------- */

.section__how__it__works {
  background-color: whitesmoke;
  padding: 80px 100px;
  /* width: 100dvw; */
  height: 100%;
}

.section__how__it__works > .intro__text {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.section__how__it__works > .intro__text > h2 {
  font-size: 40px;
  word-spacing: 2px;
  text-align: center;
  letter-spacing: 1px;
  font-weight: 300;
  color: gray;
  text-transform: uppercase;
}

.section__how__it__works > .intro__text > div {
  background-color: #e67e22;
  width: 100px;
  height: 2px;
  align-self: center;
  margin: 30px 0;
}

.section__how__it__works > .main__how__it__works {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}

.section__how__it__works > .main__how__it__works > img {
  height: 350px;
}

.section__how__it__works > .main__how__it__works > div {
  /* background-color: red; */
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 50%;
}

.section__how__it__works > .main__how__it__works > div > div {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.section__how__it__works > .main__how__it__works > div > div > h2 {
  padding: 15px;
  border: 1px solid #e67e22;
  border-radius: 1000px;
  color: #e67e22;
}

.section__how__it__works > .main__how__it__works > div > div > p {
  font-size: larger;
  color: gray;
}

/* ----------------------- Section customers testimonials ----------------- */

.section__customers__testimonials {
  padding: 80px 100px;

  background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
    url("../img/back-customers.jpg");
  height: 100%;
  /* width: 100dvw; */
}

.section__customers__testimonials > .intro__text {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.section__customers__testimonials > .intro__text > h2 {
  font-size: 40px;
  word-spacing: 2px;
  text-align: center;
  letter-spacing: 1px;
  font-weight: 300;
  color: white;
  text-transform: uppercase;
}

.section__customers__testimonials > .intro__text > div {
  background-color: #e67e22;
  width: 100px;
  height: 2px;
  align-self: center;
  margin: 30px 0;
}

.section__customers__testimonials > .testimonials__wrapper {
  display: flex;
  color: white;
  gap: 1.4rem;
}

.section__customers__testimonials > .testimonials__wrapper h3 {
  color: white;
  font-style: italic;
  line-height: 30px;
  font-weight: 200;
}

.section__customers__testimonials
  > .testimonials__wrapper
  > .testimonial
  > .user {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 10px;
}

.section__customers__testimonials img {
  height: 50px;
  width: 50px;
  border-radius: 50px;
}

/* ---------------------- Section pricing -------------------- */

.section__pricing {
  padding: 80px 100px;
  height: 100%;
  /* width: 100dvw; */
  background-color: whitesmoke;
}

.section__pricing > .intro__text {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.section__pricing > .intro__text > h2 {
  font-size: 40px;
  word-spacing: 2px;
  text-align: center;
  letter-spacing: 1px;
  font-weight: 300;
  color: grey;
  text-transform: uppercase;
}

.section__pricing > .intro__text > div {
  background-color: #e67e22;
  width: 100px;
  height: 2px;
  align-self: center;
  margin: 30px 0;
}

.section__pricing > .prices__wrapper {
  display: flex;
  justify-content: space-between;
  /* gap: 4rem; */
  /* flex-direction: column; */
  width: 100%;
}

.section__pricing > .prices__wrapper > .price {
  background-color: white;
  border-radius: 10px;
  width: 32.26%;
}

.section__pricing > .prices__wrapper > .price > .top {
  padding: 20px;
}

.section__pricing > .prices__wrapper > .price > .top > h3 {
  color: grey;
  margin-bottom: 16px;
  font-weight: 200;
  font-size: x-large;
}

.section__pricing > .prices__wrapper > .price > .top > h1 {
  font-size: 50px;
  color: #e67e22;
  font-weight: 400;
}

.section__pricing > .prices__wrapper > .price > .middle {
  border-bottom: 1px solid whitesmoke;
  border-top: 1px solid whitesmoke;
  padding: 20px;
}

.section__pricing > .prices__wrapper > .price > .bottom {
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section__pricing > .prices__wrapper > .price > .bottom > button {
  padding: 10px 50px;
  border: 1px solid #e67e22;
  background-color: transparent;
  border-radius: 30px;
  font-size: larger;
  cursor: pointer;
}

.section__pricing > .prices__wrapper > .price > .bottom > button:hover {
  background-color: #e67e22;
  color: white;
}

.section__pricing > .prices__wrapper > .premium > .bottom > button {
  background-color: #e67e22;
  color: white;
}

.section__pricing p {
  font-size: larger;
  color: grey;
  margin-bottom: 10px;
}

/* ------------------------- Form section -------------------------  */

.section__form {
  padding: 80px 100px;
  height: 100%;
  /* width: 100dvw; */
  display: flex;
  flex-direction: column;
}

.section__form > .intro__text {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.section__form > .intro__text > h2 {
  font-size: 40px;
  word-spacing: 2px;
  text-align: center;
  letter-spacing: 1px;
  font-weight: 300;
  color: grey;
  text-transform: uppercase;
}

.section__form > .intro__text > div {
  background-color: #e67e22;
  width: 100px;
  height: 2px;
  align-self: center;
  margin: 30px 0;
}

.section__form > form {
  width: 80%;
  align-self: center;
}

.section__form > form > div {
  display: flex;
  width: 100%;
  margin-bottom: 30px;
  /* align-items: center; */
  /* justify-content: space-evenly; */
  flex-direction: column;
  /* background-color: blue; */
}

.section__form > form > div > p {
  /* background-color: red; */
  /* width: 30%; */
  margin-bottom: 10px;
}

.section__form > form > div > input {
  outline-width: 0;
  padding-left: 10px;
  font-size: large;
  height: 40px;
  border: 1px whitesmoke solid;
  /* width: 70%; */
}

.section__form > form button {
  background-color: #e67e22;
  border-radius: 30px;
  border-width: 0;
  width: fit-content;
  color: white;
  padding: 10px 30px;
  cursor: pointer;
}

/* ---------------------- Footer -------------------------- */

footer {
  background-color: #333;
  padding: 30px;
  /* width: 100dvw; */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: gray;
}

/* -----------------------  Media Queries  -----------------------  */

/* ------------------------ Header ------------------------ */
@media (max-width: 1010px) {
  header {
    padding: 25px 50px;
  }

  header > .hero__text__button__wrapper > h1 {
    font-size: 45px;
    line-height: 55px;
  }
}

@media (max-width: 810px) {
  header {
    padding: 25px 30px;
  }

  header > .hero__text__button__wrapper > h1 {
    font-size: 30px;
    line-height: 40px;
  }

  header > nav > img {
    height: 70px;
    /* flex: 0.1; */
  }
}

@media (max-width: 445px) {
  header {
    padding: 10px 15px;
  }

  header > .hero__text__button__wrapper {
    /* background-color: red; */
    margin-top: 90px;
  }

  header > .hero__text__button__wrapper > h1 {
    /* font-size: 20px; */
  }

  header > .hero__text__button__wrapper > .btn__wrapper > .btn {
    padding: 15px 25px;
  }
}

@media (max-width: 375px) {
  header > .hero__text__button__wrapper > h1 {
    font-size: 25px;
    line-height: 35px;
  }
}

@media (max-width: 350px) {
  header > .hero__text__button__wrapper > .btn__wrapper {
    display: flex;
    /* align-items: center; */
    flex-direction: column;
    /* background-color: red; */
    justify-content: flex-start;
  }

  header > .hero__text__button__wrapper > .btn__wrapper > .btn-1 {
    margin-bottom: 10px;
    margin-right: 0;
  }
}

/* ------------------------ features section ----------------------- */

@media (max-width: 1110px) {
  .section__features > .intro__text > h2 {
    font-size: 30px;
  }

  .section__features > .intro__text > p {
    width: 90%;
    font-size: large;
  }

  .section__features {
    padding: 40px 50px;
  }
}

@media (max-width: 770px) {
  .section__features > .intro__text > h2 {
    font-size: 20px;
  }

  .section__features {
    padding: 25px 30px;
  }

  .section__features > .main__features {
    flex-wrap: wrap;
  }
}

@media (max-width: 705px) {
  .section__features > .intro__text > p {
    font-size: medium;
    width: 100%;
  }
}

/* ----------------------- section how it works ------------------------ */

@media (max-width: 1110px) {
  .section__how__it__works > .intro__text > h2 {
    font-size: 30px;
  }

  .section__how__it__works {
    padding: 40px 50px;
  }
}

@media (max-width: 890px) {
  .section__how__it__works > .main__how__it__works > div {
    width: 70%;
    /* background-color: red; */
  }
}

@media (max-width: 770px) {
  .section__how__it__works > .intro__text > h2 {
    font-size: 20px;
  }

  .section__how__it__works {
    padding: 25px 30px;
  }
}

@media (max-width: 700px) {
  .section__how__it__works > .main__how__it__works {
    flex-direction: column;
    align-items: center;
  }

  .section__how__it__works > .main__how__it__works > div {
    width: 100%;
    margin-top: 30px;
    /* background-color: red; */
  }

  .section__how__it__works > .main__how__it__works > img {
    width: 50%;
    /* height: 600px; */
  }
}

@media (max-width: 450px) {
  .section__how__it__works > .main__how__it__works > img {
    width: 90%;
  }

  .section__how__it__works > .main__how__it__works > div > div {
    flex-direction: column;
  }
}

/* -------------------------- section customers testimonials ----------------------- */

@media (max-width: 1110px) {
  .section__customers__testimonials > .intro__text > h2 {
    font-size: 30px;
  }

  .section__customers__testimonials {
    padding: 40px 50px;
  }
}

@media (max-width: 770px) {
  .section__customers__testimonials > .intro__text > h2 {
    font-size: 20px;
  }

  .section__customers__testimonials {
    padding: 25px 30px;
  }

  .section__customers__testimonials > .testimonials__wrapper {
    flex-direction: column;
    gap: 2rem;
  }

  .section__customers__testimonials > .testimonials__wrapper h3 {
    font-size: medium;
  }
}

/* ---------------------- section pricing ------------------------- */

@media (max-width: 1110px) {
  .section__pricing > .intro__text > h2 {
    font-size: 30px;
  }

  .section__pricing {
    padding: 40px 50px;
  }
}

@media (max-width: 770px) {
  .section__pricing > .intro__text > h2 {
    font-size: 20px;
  }

  .section__pricing {
    padding: 25px 30px;
  }
}

@media (max-width: 960px) {
  .section__pricing > .prices__wrapper {
    flex-direction: column;
    gap: 2rem;
  }

  .section__pricing > .prices__wrapper > .price {
    width: 100%;
  }
}

@media (max-width: 308px) {
  .section__pricing > .prices__wrapper > .price > .bottom > button {
    padding: 10px 20px;
    font-size: medium;
  }
}

/* ------------------------- Form section -------------------------  */

@media (max-width: 1110px) {
  .section__form > .intro__text > h2 {
    font-size: 30px;
  }

  .section__form {
    padding: 40px 50px;
  }
}

@media (max-width: 770px) {
  .section__form > .intro__text > h2 {
    font-size: 20px;
  }

  .section__form {
    padding: 25px 30px;
  }
}

@media (max-width: 500px) {
  .section__form > form {
    width: 100%;
  }
}