/* Start style  all */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  i{
      cursor: pointer;
  }
  body {
    font-family: "Roboto", sans-serif;
  }
  html {
    scroll-behavior: smooth;
  }
  /* End style  all */
  
  /* Start style  content nav*/
  header {
    position: fixed;
    width: 100%;
    z-index: 5;
  }
  nav {
    background-color: #f47120;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
  }
  .logo img {
    width: 100px;
    padding-left: 10px;
  }
  .navbar {
    position: relative;
  }
  .icons {
    display: flex;
    justify-content: space-between;
  }
  /* End style  content nav*/
  
  /* Start style  icon nav */
  .burgerIcon,
  .shoppingCart {
      font-size: 25px;
      color: white;
      padding-right: 20px;
  }
  header .navbar .icons .wholeCart .shoppingCart{
      position:relative
  }
  header .navbar .icons .count{
      position: absolute;
      left: 15px;
      top: -9px;
      background-color:red ;
      border-radius: 5px;
      width: 21px;
      height: 21px;
      font-size: 21px;
      text-align: center;
      font-family: "Gilroy-Bold";
      color: #fff;
  }
  /* End style  icon nav */
  
  /* Start style  nav link */
      .navLinks {
      list-style: none;
      background-color: rgb(0, 0, 0, 1);
      width: 200px;
      height: 229px;
      position: absolute;
      top: 48.1px;
      right: 0px;
      opacity: 0;
      transition: right ease-in-out 0.5s, opacity ease-in-out 0.3s;
      }
      .navLinks a {
      text-decoration: none;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 13px;
      font-size: 14px;
      font-weight: 900;
      color: #f47120;
      letter-spacing: 3px;
      }
  
      .active {
      opacity: 1;
      }
      /* End style  nav link */
      #home {
      background-image: url("../assets/home.png");
      background-size: cover;
      position: relative;
      z-index: -1;
      top: 70px;
      height: 230px;
      }
  
      #home .title-home {
      color: #fff;
      padding-left: 20px;
      padding-top: 30px;
      letter-spacing: 3px;
      font-size: 30px;
      }
      #home .title-resturaunt {
      color: #f47120;
      padding-left: 20px;
      letter-spacing: 3px;
      font-size: 70px;
      }
      /* End style  title in home page */
  
      /* Start style  button go to menu */
       .menuBtn {
      background-color: #f47120;
      padding: 10px 30px;
      margin: 10px 0 10px 20px;
      border-radius: 6px;
      text-decoration: none;
      font-size: 21px;
      color: #fff;
      }
      /* End style  button go to menu */
  
      /* Start About Us Section */
      #about-us {
      margin: 5%;
      margin-top: 25%;
      display: flex;
      font-family: "Roboto", sans-serif;
      }
      #about-us .chef {
      width: 150px;
      height: 220px;
      }
      #about-us .text {
      margin-left: 10px;
      margin-top: 20px;
      }
      #about-us .text h1 {
      color: #f47120;
      padding-bottom: 5%;
      }
      #about-us .text p {
      color: #000;
      font-size: 16px;
      font-weight: 500;
      }
      @media (min-width: 768px) {
      #about-us {
          margin: 3% 5%;
          margin-top: 15%;
      }
      #about-us .chef {
          width: 250px;
          height: auto;
      }
      #about-us .text {
          margin-left: 50px;
          margin-right: 50px;
          margin-top: 20px;
          line-height: 1.8;
      }
      #about-us .text h1 {
          font-size: 40px;
      }
      #about-us .text p {
          font-size: 21px;
          font-weight: 500;
      }
      }
  
      @media (min-width: 1024px) {
      #about-us {
          margin: 2% 15%;
          margin-top: 10%;
      }
      #about-us .chef {
          width: 300px;
          height: 350px;
      }
      #about-us .text {
          margin-top: 5%;
      }
      #about-us .text h1 {
          font-size: xx-large;
      }
      #about-us .text p {
          font-size: 18px;
          font-weight: 500;
      }
      }
      /* End About Us Section */
  
      /* Start Meals Section */
      #meals {
      background-image: url("../assets/backGround.jpg");
      background-repeat: no-repeat;
      background-size: cover;
      background-size: 100% 100%;
      position: relative;
      }
      #meals .overlay {
      width: 100%;
      height: 107px;
      background-color: rgba(0, 0, 0, 0.5);
      position: absolute;
      top: 0;
      left: 0;
      }
      #meals .items {
      margin: 5%;
      padding: 2.5%;
      display: flex;
      justify-content: space-between;
      }
      #meals .items .item {
      text-align: center;
      color: #fff;
      z-index: 1;
      }
      #meals .items .item p:first-of-type {
      padding-bottom: 10px;
      }
      #meals .items .item i {
      font-size: 30px;
      padding-bottom: 10px;
      }
  
      /* Start Contact Us Section */
  
  #contact-us {
    height: 480px;
    padding: 10% 0;
    background: url("../assets/contactUs.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  #contact-us .container {
    position: relative;
  }
  #contact-us form {
    width: 90%;
    margin: auto;
    padding: 40px;
    margin-top: 10%;
    border-radius: 6px;
    background-color: white;
    position: relative;
  }
  #contact-us .title {
    width: 40%;
    font-size: 15px;
    text-align: center;
    height: 60px;
    padding: 15px;
    margin-bottom: 25px;
    background-color: #f47120;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
    margin-left: 30%;
    margin-right: 30%;
    top: -30px;
  }
  #contact-us .title h2 {
    color: white;
  }
  .name-field, .email-field, .message-field {
    width: 100%;
    border: 2px solid rgb(250, 174, 123);
    font-size: 1.1rem;
    margin-bottom: 15px;
    padding: 10px;
    border-radius: 6px;
    outline: none;
  }
  
      #contact-us textarea {
      min-height: 100px;
      }
  
      #contact-us .submitBtn {
      padding: 10px;
      background-color: #f47120;
      border-radius: 6px;
      color: #fff;
      font-size: 20px;
      border: none;
      display: block;
      margin: auto;
      width: 40%;
      cursor: pointer;
      }
  
      .message-thank {
      display: none;
      width: 260px;
      height: 40%;
      background-color: white;
      text-align: center;
      align-items: center;
      padding: 25px;
      box-shadow: 0px 2px 66px #fdbb6f;
      border-radius: 10px;
      z-index: 9999;
      position: absolute;
      left: 50%;
      top: 1815px;
      transform: translate(-50%, -50%);
      animation: popAnimate 0.7s  ease;
  
      }
  
      @keyframes popAnimate { 
      0% {
          opacity: 0;
      }
  
      100% {
          opacity: 1;
      }
      }
  
      .message-thank h1 {
      padding-top: 30px;
      color: #f47120;
      font-size: 25px;
      }
  
      .message-thank i {
      font-size: 70px;
      color: #f47120;
      }
          /* Start Footer Section */
          footer {
              height: auto;
              width: 100vw;
              background-color: #f47120;
              padding-bottom: 30px;
          }
          
          .footer-content {
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 1.25rem;
              color: white;
              position: relative;
              bottom: -1rem;
          }
          
          
          .social-icons {
              list-style: none;
              display: flex;
              padding: 10px;
          }
          
          /* End Footer Section */
  
      @media (min-width: 768px) {
      #meals .overlay {
          width: 100%;
          height: 167px;
      }
      #meals .items {
          width: 90%;
          margin: auto;
      }
      #meals .items .item i {
          font-size: 50px;
          padding-bottom: 15px;
      }
      #meals .items .item p {
          font-size: 22px;
      }
      #contact-us form {
          width: 80%;
          margin: auto;
      }
      #contact-us .title h2 {
          font-size: 30px;
      }
      #contact-us .btn {
          font-size: 30px;
      }
      footer{
          width:100%
          }
      footer .fab{
          padding-left: 10px;
      }
      }
      @media (min-width: 1024px) {
      #meals .overlay {
          width: 100%;
          height: 180px;
      }
      #meals .items {
          width: 80%;
          margin: auto;
      }
      #meals .items .item i {
          font-size: 50px;
          padding-bottom: 15px;
      }
      #contact-us .container {
          margin-top: -30px;
      }
      #contact-us form {
          width: 55%;
          margin: auto;
      }
      #contact-us .title {
          width: 24%;
          margin-left: 38%;
          margin-right: 38%;
      }
      #contact-us .btn {
          width: 20%;
          font-size: 30px;
      }
      }
      @media (min-width: 1100px) {
          #meals .overlay {
          width: 100%;
          height: 200px;
          }
          #contact-us .container {
          margin-top: -60px;
          }
      footer {
          height: auto;
          width: 100vw;
          background-color: #f47120;
          padding-bottom: 30px;
      }
  }
  /* End Meals Section */
  /* Start style Our Experts section */
      #our-experts {
      margin: 6%;
      text-align: center;
      position: relative;
      }
      #our-experts .title-experts {
      font-weight: 900;
      color: #f47120;
      margin-bottom: 50px;
      }
      #our-experts .chef {
      margin-bottom: 50px;
      }
      #our-experts .chef h4 {
      padding-top: 8px;
      color: #f47120;
      }
      #our-experts .chef p {
      color: #000;
      padding: 5px 32px;
      font-size: 14px;
      font-weight: 500;
      }
      /* End style Our Experts section */
      /* Responsive Tables */
      @media (min-width: 768px) and (max-width: 1023px) {
      nav {
          height: 100px;
      }
      .logo img {
          width: 120px;
      }
      .navLinks {
          width: 300px;
          height: 431px;
          top: 63px;
      }
      .navLinks a {
          padding: 29px;
          font-size: 25px;
      }
      .menuBtn {
          padding: 15px 60px;
          margin: 0px 0 10px 20px;
          font-size: 40px;
          position: absolute;
         top: 400px;
          }
      .burgerIcon,
      .shoppingCart {
          font-size: 30px;
          padding-right: 30px;
      }
      #home {
          height: 458.5px;
      }
      #home .title-home {
          font-size: 70px;
          line-height: 1.9;
      }
      #home .title-resturaunt {
          font-size: 100px;
      }
    
      #our-experts {
          margin-top: 10%;
      }
      #our-experts .title-experts {
          font-size: 50px;
      }
      .chef img {
          width: 150px;
          height: 150px;
      }
      #our-experts .chef h4 {
          font-size: 25px;
          font-weight: 600;
      }
      #our-experts .chef p {
          font-size: 15px;
          font-weight: 500;
          }
      }
  
      /* Responsive Desktop */
  @media   (min-width:1024px){
      .navbar{
          display: flex;
          width: 60%;
          margin-left: 70px;
      }
      .navLinks{
          opacity: 1;
          position: static;
          display: flex;
          margin-left: -72px;
          height: 0px;
          right: 0;
          transition: none;
          background-color: black;
      }
      .navLinks li{
          opacity: 1;
          display: flex;
          
      }
      .navLinks a{
          color: white;
          width: 135px;
          padding: 13px 10px;
      }
      .navLinks li  a:hover{
          color: black;
          transition: all 1s ease;
      }
      .logo{
          width: 40%;
          margin-left:30px;
      }
      
      .burgerIcon{
          opacity: 0;
      }
      #home{
          display: flex;
          flex-direction: column;
          height: 100vh;
          padding-top: 90px;
          top: 60px;
      }
      #home .title-home{
          font-size: 100px;
      }
      #home .title-resturaunt{
          font-size: 150px
      }
      .menuBtn {
          padding: 10px 70px;
          font-size: 40px;
          position: absolute;
         top: 500px;
          }
      #our-experts{
          margin:5% auto;
      }
      #our-experts .chefs{
          display: flex;
          justify-content: space-around;
      }
      
      #our-experts .chef h4{
          font-size: large;
          padding-top: 10px;
      }
      #our-experts .chef p{
          font-size: 18px;
          font-weight: 500;
          padding-top: 10px;
      }
  
      .message-thank {
          width: 535px;
          height: 25%;
          top: 2470px;
      }
      .message-thank h1 {
          font-size: 35px;
      }
  
      .message-thank i {
          font-size: 100px;
      }
      }
      /* Responsive Desktop */
      @media (min-width: 1024px) {
      .navbar {
          display: flex;
          width: 60%;
          margin-left: 70px;
      }
      .navLinks {
          opacity: 1;
          position: static;
          display: flex;
          margin-left: -72px;
          height: 0px;
          right: 0;
          transition: none;
          background-color: black;
      }
      .navLinks li {
          opacity: 1;
          display: flex;
      }
      .navLinks a {
          color: white;
          width: 135px;
          padding: 13px 10px;
      }
      .navLinks li a:hover {
          color: black;
          transition: all 1s ease;
      }
      .logo {
          width: 40%;
          margin-left: 30px;
      }
  
      .burgerIcon {
          opacity: 0;
      }
      #home {
          display: flex;
          flex-direction: column;
          height: 100vh;
          padding-top: 90px;
          top: 60px;
      }
      #home .title-home {
          font-size: 100px;
      }
      #home .title-resturaunt {
          font-size: 150px;
      }
      #home .btn {
          width: 16%;
          margin-left: 20px;
          margin-top: 50px;
      }
      #home .btn a {
          font-size: 25px;
      }
      #our-experts {
          margin: 5% auto;
      }
      #our-experts .chefs {
          display: flex;
          justify-content: space-around;
      }
  
      #our-experts .chef h4 {
          font-size: large;
          padding-top: 10px;
      }
      #our-experts .chef p {
          font-size: 18px;
          font-weight: 500;
          padding-top: 10px;
      }
      .message-thank {
          width: 710px;
          height: 45%;
          top: 2010px;
      }
      .message-thank h1 {
          font-size: 45px;
      }
  
      .message-thank i {
          font-size: 100px;
      }
      footer{
          width:100%
          }
      footer .fab{
          padding-left: 10px;
      }
  }