@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

/* navbar sec */
.navbar {
  width: 100%;
  height: 70px;
  background-color: #F26924;
  display: flex;
  justify-content: center;
  align-items: center;
  position: sticky;
  top: 0px;
  z-index: 5;

  /* nav */
  &>.nav {
    width: 90%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 100px;
    list-style: none;

    /* brand */
    & li:nth-child(1)>.brand img {
      width: 150px;
      text-decoration: none;
    }

    /* search bar */

    & li:nth-child(2) {
      text-decoration: none;

      & select {
        width: 700px;
        padding: 10px 10px;
        background-color: #F7A57C;
        border-radius: 4px;
      }

      & a .fa-solid {
        font-size: 25px;
        vertical-align: middle;
        display: none;
        text-decoration: none;
      }

    }

    /* signup */

    & li:nth-child(3)>.loginSignup {
      width: 100px;
      height: 40px;
      border: 1px solid #E9E9E9;
      display: flex;
      border-radius: 20px;
      align-items: center;
      justify-content: start;
      gap: 10px;
      padding: 0 5px;
      text-decoration: none;

      & .fa-solid {
        width: 30px;
        height: 30px;
        font-size: 20px;
        background-color: #fff;
        border-radius: 50%;
        line-height: 30px;
        color: #F26924;
      }

      & span {
        font-size: 11px;
        text-transform: uppercase;
        color: #fff;
        font-weight: 500;
        line-height: 1.5;
      }
    }

    /* add to cart */

    & li:nth-child(4)>a .fa-solid {
      font-size: 30px;
      color: #fff;
    }
  }
}

/* navbar end */

/* footer sec */
.footer-sec {
  height: auto;
  border-top: 1px solid #E9E9E9;
  border-bottom: 1px solid #E9E9E9;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  object-fit: scale-down;
  clear: both;
  border-collapse: collapse;

  &>.footerCard {
    border: inherit;
    display: flex;
    justify-content: center;

    & .fCard {
      width: 80%;
      padding: 10px;
      list-style: none;
      display: flex;
      flex-wrap: wrap;
    }
  }

  /* nth child 1 */
  &>.footerCard:nth-child(1) {
    padding: 20px 0;

    & li p {
      word-spacing: 2px;
      line-height: 1.5;
      word-wrap: break-word;
      color: #333333;
    }
  }

  /* nth child 2 */
  &>.footerCard:nth-child(2) {
    padding: 20px 0;

    &>.fCard {
      display: flex;
      flex-direction: column;

      &>li:nth-child(1) {
        color: #000000;
        font-weight: 500;
        padding: 20px 0;
      }

      &>li:nth-child(2) {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;

        /* location link */
        &>a {
          border: 1px solid #E9E9E9;
          padding: 10px;
          border-radius: 20px;
          font-weight: 500;
          text-decoration: none;
          color: #8A8A8A;
          text-transform: capitalize;
        }
      }
    }


  }

  /* nth child 3 */
  &>.footerCard:nth-child(3) {
    height: auto;

    &>.Card {
      width: 80%;
      display: flex;
      flex-wrap: wrap;
      padding: 0;
      border-inline-start: 1px solid #E9E9E9;
      border-inline-end: 1px solid #E9E9E9;

      &>.footerLink {
        width: 50%;
        height: 400px;
      }


      &>.footerLink:nth-child(1) {
        &>ul {
          list-style: none;
          line-height: 2;
        }

        &>ul li:nth-child(1) {
          color: #000000;
          font-weight: 500;
          padding: 20px 0;
          text-transform: capitalize;
          padding-left: 10px;

        }

        &>ul li:nth-child(2) a,
        ul li:nth-child(3) a {
          color: #8A8A8A;
          font-weight: 500;
          padding-left: 10px;
        }

        &>ul li:nth-child(4) {
          color: #000000;
          font-weight: 500;
        }
      }

      &>.footerLink:nth-child(2) {
        height: auto;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;

        &>.appLink {
          height: auto;
          object-fit: scale-down;
          overflow: hidden;
          padding: 16px 20px;


          &>ul {
            list-style: none;
          }

          & ul li:nth-child(1) {
            color: #000000;
            font-weight: 500;
            padding: 20px 0;
            text-transform: capitalize;
          }
        }

        &>.appLink:nth-child(1) {

          &>ul li:nth-child(2) a {
            padding: 0 5px;
          }
        }

        &>.appLink:nth-child(2) {
          &>ul li {
            line-height: 2.2;
          }

          &>ul {

            &>li:nth-child(2) a .fa-brands {
              font-size: 40px;
              color: #8A8A8A;
            }

            &>li:nth-child(3),
            &>li:nth-child(4) {
              font-size: 20px;
              color: #8A8A8A;

              &>a {
                color: #8A8A8A;
              }
            }

          }
        }
      }
    }

  }
}

/* footer end */


/* carousel-image slider  */

/* container */
.carousel-image {
  width: 100%;
  height: auto;
  background-color: #F5F5F5;
  padding: 15px 10px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: start;
  align-items: center;
  overflow: hidden;
  position: relative;
  cursor: pointer;

  &>.carousel-inner {
    width: 500%;
    height: auto;
    display: flex;
    justify-content: start;
    gap: 30px;
    align-items: center;

    &>.carousel-item {
      width: 480px;
      height: 240px;
      background-color: #F26924;
      border-radius: 4px;

      &>a img {
        width: 100%;
        height: 100%;
        border-radius: 4px;
        object-fit: calc(480px, 100%);
      }
    }
  }

  &>.carouselSlise-btn {
    width: 100%;
    position: absolute;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    align-items: center;
    top: 50%;
    transform: translateY(-50%);
    padding: 0 20px;

    &>.leftBtn,
    .rightBtn {
      width: 35px;
      height: 35px;
      background-color: rgb(0, 0, 0, 0.5);
      border: 1px solid black;
      border-radius: 50%;
      cursor: pointer;
      transition: all 0.30s ease;

      &:hover {
        background-color: rgb(0, 0, 0);
      }

      &>.fa-solid {
        font-size: 24px;
        color: #ffff;
      }
    }
  }
}

/* <  home from b1g1food / b1g1hpc sec  */
.b1g1Food-con {
  width: 100%;
  height: auto;

  &>.h2 {
    padding: 25px 0 25px 150px;
    font-size: 20px;
    border: 1px solid #E9E9E9;
  }

  &>.cardContainer {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;

    &>.container {
      width: 80%;
      height: auto;
      display: flex;
      flex-wrap: wrap;
      overflow: hidden;
      gap: 18px;

      &>.card {
        width: 290px;
        height: auto;
        border: 1px solid #E9E9E9;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        overflow: hidden;
        position: relative;
        border-radius: 8px;
        padding: 15px 20px;
        gap: 5px;

        &>li {
          text-align: center;
          list-style: none;
          word-wrap: break-word;
          word-break: keep-all;
        }

        &>span {
          position: absolute;
          top: 7px;
          right: 7px;
          background-color: #4CAE1A;
          color: #ffff;
          padding: 2px 10px;
          font-size: 13px;
          border-radius: 4px;
          z-index: 4;
        }

        &>li:nth-child(2) img {
          width: 120px;
          object-fit: scale-down;
          transition: all 0.30s ease;

          &:hover {
            transform: scale(1.1);
          }
        }

        &>li:nth-child(3) {
          display: flex;
          gap: 10px;
          justify-content: center;

          &>span:nth-child(1) {
            font-weight: 600;
          }

          &>span:nth-child(2) {
            text-decoration-line: line-through;
          }
        }

        &>li:nth-child(5) button {
          padding: 5px 40px;
          cursor: pointer;
          font-size: 13px;
          font-weight: 500;
          border: 1px solid #F26924;
          border-radius: 4px;
          background-color: transparent;
          color: #F26924;

          &:hover {
            background-color: #F26924;
            color: #ffff;
          }
        }

      }
    }
  }
}

/* <  home from b1g1 food sec end */

/* carousel-image slider end */

/* detail sec */
.detail {
  width: 100%;
  height: auto;
  border: 1px solid #E9E9E9;
  border-collapse: collapse;

  &>.detail-card {
    width: 100%;
    display: flex;
    justify-content: center;

    &>ul {
      width: 20%;
      border-left: 1px solid #E9E9E9;
      border-right: 1px solid #E9E9E9;
      display: flex;
      list-style: none;
      padding: 13px;
      align-items: center;
      gap: 10px;

      &>img {
        width: 30px;
        height: 30px;
      }

      &>li:nth-child(2) {
        &>h5 {
          font-size: 14px;
          font-weight: 600;
        }

        &>p {
          font-size: 14px;
          font-weight: 400;
          color: #8A8A8A;
          margin-top: 2px;
        }
      }

    }
  }
}

/* detail sec end */

/* ordered-sec */
.ordered-sec {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;

  &>.orderpage {
    width: 80%;
    height: auto;
    padding: 30px;

    &>.orHead {
      border-inline-start: 6px solid #F26924;
      font-size: 30px;
      font-weight: 500;
      padding-left: 5px;
      margin-left: 5px;
    }

    &>.line {
      margin-top: 20px;
      border: 1px solid #E9E9E9;
    }

    &>.ordered-carousel {
      /* border: 1px solid black; */
      overflow: hidden;
      padding: 10px 0px;
      position: relative;

      &>.orCard {
        width: 500%;
        height: auto;
        /* border: 1px solid black; */
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0 5px;


        &>.Card {
          width: 220px;
          height: 300px;
          border: 1px solid #E9E9E9;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
          overflow: hidden;
          position: relative;
          border-radius: 8px;
          padding: 20px 9px;
          gap: 5px;

          &>li {
            text-align: center;
            list-style: none;
            word-wrap: break-word;
            word-break: keep-all;
          }

          &>span {
            position: absolute;
            top: 10px;
            right: 10px;
            background-color: #4CAE1A;
            color: #ffff;
            padding: 2px 10px;
            font-size: 13px;
            border-radius: 4px;
            z-index: 2;
          }

          &>li:nth-child(2) img {
            width: 120px;
            object-fit: scale-down;
            transition: all 0.30s ease;

            &:hover {
              transform: scale(1.1);
            }
          }

          &>li:nth-child(3) {
            display: flex;
            gap: 10px;
            justify-content: center;

            &>span:nth-child(1) {
              font-weight: 600;
            }

            &>span:nth-child(2) {
              text-decoration-line: line-through;
            }
          }

          &>li:nth-child(5) button {
            padding: 5px 40px;
            cursor: pointer;
            font-size: 13px;
            font-weight: 500;
            border: 1px solid #F26924;
            border-radius: 4px;
            background-color: transparent;
            color: #F26924;

            &:hover {
              background-color: #F26924;
              color: #ffff;
            }
          }

        }
      }

      &>.ordered-btn {
        width: 100%;
        position: absolute;
        z-index: 3;
        display: flex;
        justify-content: space-between;
        align-items: center;
        top: 50%;
        transform: translateY(-50%);
        padding: 0 30px;

        &>.leftBtn,
        .rightBtn {
          width: 35px;
          height: 35px;
          background-color: rgb(0, 0, 0, 0.5);
          border: 1px solid black;
          border-radius: 50%;
          cursor: pointer;
          transition: all 0.30s ease;

          &:hover {
            background-color: rgb(0, 0, 0);
          }

          &>.fa-solid {
            font-size: 24px;
            color: #ffff;
          }
        }
      }
    }
  }
}

/* ordered-sec end */



/* food sec  */
.food-sec {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;

  &>.food-con {
    width: 80%;
    height: auto;
    padding: 15px;
    border: inherit;

    &>.foodHead {
      font-size: 35px;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 8px;

      &>img {
        width: 50px;
      }
    }

    &>.line {
      margin-top: 20px;
      border: 1px solid #E9E9E9;
    }

    &>.foodCard {
      width: 100%;
      height: auto;
      padding: 20px 5px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 16px;

      &>.card {
        width: 280px;
        height: 220px;
        border: inherit;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        text-decoration: none;
        border-radius: 4px;
        border: 1px solid #E9E9E9;
        object-fit: scale-down;
        padding: 20px 8px;
        text-align: center;
        gap: 8px;

        &>img {
          width: 140px;
          display: block;
          /* object-fit: scale-down; */
          transition: all 0.30s ease;

          &:hover {
            transform: scale(1.1);
          }
        }

        &>p {
          font-size: 17px;
          color: #000000;
          font-weight: 500;
          word-break: keep-all;
          word-wrap: break-word;
        }
      }
    }
  }
}

/* food sec end */

/* brand store-sec */
.brand-sec {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;

  &>.brandpage {
    width: 80%;
    height: auto;
    padding: 30px;

    &>.brHead {
      border-inline-start: 6px solid #F26924;
      font-size: 30px;
      font-weight: 500;
      padding-left: 5px;
      margin-left: 5px;
    }

    &>.line {
      margin-top: 20px;
      border: 1px solid #E9E9E9;
    }

    &>.brand-carousel {
      /* border: 1px solid black; */
      overflow: hidden;
      padding: 10px 0px;
      position: relative;

      &>.brCard {
        width: 500%;
        height: auto;
        /* border: 1px solid black; */
        display: flex;
        align-items: center;
        gap: 45px;
        padding: 0 5px;


        &>.Card {
          width: 250px;
          height: 300px;
          border: 1px solid #E9E9E9;
          display: flex;
          justify-content: start;
          align-items: center;
          overflow: hidden;
          position: relative;
          border-radius: 8px;

          &>.img1 {
            width: 100%;
            height: 100%;

            &>img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }

      &>.brand-btn {
        width: 100%;
        position: absolute;
        z-index: 3;
        display: flex;
        justify-content: space-between;
        align-items: center;
        top: 50%;
        transform: translateY(-50%);
        padding: 0 30px;

        &>.leftBtn,
        .rightBtn {
          width: 35px;
          height: 35px;
          background-color: rgb(0, 0, 0, 0.5);
          border: 1px solid black;
          border-radius: 50%;
          cursor: pointer;
          transition: all 0.30s ease;

          &:hover {
            background-color: rgb(0, 0, 0);
          }

          &>.fa-solid {
            font-size: 24px;
            color: #ffff;
          }
        }
      }
    }
  }
}

/* brand store-sec end */


/* myCart sec  */
.myCart-sec {
  width: 40%;
  height: 100vh;
  background-color: #ffffff;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;

  &>.myCartHeader {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #000000;
    padding: 15px 10px;
    color: #ffff;

    &>:nth-child(1) h3 span {
      display: inline-block;
      width: 17px;
      height: 17px;
      /* background-color: #4CAE1A; */
      border-radius: 50%;
      vertical-align: super;
      text-align: center;
      font-size: 12px;
    }

    &>:nth-child(2) .fa-solid {
      cursor: pointer;
    }
  }

  &>.myCartBody {
    width: 100%;
    height: 100vh;
    background-color: #F0F0F0;
    overflow-y: auto;
  }

  &>.myCartFooter {
    width: 100%;
    height: 300px;

    /* background-color: #333333; */
    &>div:nth-child(1) {
      display: flex;
      justify-content: space-between;
      padding: 15px 10px;
      border-top: 1px solid #E9E9E9;
      ;
      border-bottom: 1px solid #E9E9E9;
      ;

      &>p:nth-child(1) {
        padding: 8px;
        background-color: palegreen;
        border-radius: 4px;
        font-size: 15px;
        font-weight: 600;
      }

      &>p:nth-child(2) {
        font-size: 15px;
        font-weight: 600;
        padding: 8px;
      }
    }

    &>div:nth-child(2) {
      text-align: center;
      padding: 8px;
      line-height: 1.5;
      word-break: keep-all;
      word-wrap: break-word;
    }

    &>div:nth-child(3) {
      text-align: center;
      padding: 0 15px;

      &>button {
        width: 95%;
        border-radius: 4px;
        padding: 8px;
        cursor: pointer;
        font-size: 16px;
        font-weight: 600;
        color: #fff;
        background-color: slategrey;
        border: transparent;
      }
    }

  }
}

/* myCart sec end  */



/* media queries sec.. sm device 576px */

@media only screen and (max-width:576px) {

  /* navbar section */
  .navbar {
    width: 100%;
    height: auto;
    justify-content: start;
    align-items: center;
    object-fit: scale-down;
    overflow: hidden;
    padding: 0 10px;

    /* nav */
    &>.nav {
      padding: 0;

      /* brand */
      & li:nth-child(1)>.brand img {
        width: 150px;
        text-decoration: none;
      }

      /* search bar */

      & li:nth-child(2) {
        & select {
          display: none;
        }

        & a .fa-solid {
          display: block;
          color: #fff;
          font-size: 30px;
        }

        & a {
          text-decoration: none;
        }


      }

      /* signup */

      & li:nth-child(3)>.loginSignup {
        /* width: 100px;
        height: 40px;
        border: 1px solid #fff;
        display: flex;
        border-radius: 20px;
        align-items: center;
        justify-content: start;
        gap: 10px;
        padding: 0 5px;
        text-decoration: none; */

        & .fa-solid {
          /* width: 30px;
          height: 30px;
          font-size: 20px;
          background-color: #fff;
          border-radius: 50%;
          line-height: 30px;
          color: #F26924; */
        }

        & span {
          /* font-size: 11px;
          text-transform: uppercase;
          color: #fff;
          font-weight: 500;
          line-height: 1.5; */
        }
      }

      /* add to cart */

      & li:nth-child(4)>a .fa-solid {
        /* font-size: 30px;
        color: #fff; */
      }
    }
  }

  /* navbar section end */

  /* footer */
  .footer-sec {
    border-top: 1px solid #E9E9E9;
    border-bottom: 1px solid #E9E9E9;


    &>.footerCard:nth-child(3) {
      padding: 0 15px;
      border-top: none;
      border-bottom: none;
      border-left: none;
      border-right: none;

      &>.Card {
        width: 100%;
        display: flex;
        flex-direction: column;
        padding: 0 20px;

        &>.footerLink {
          width: 100%;
          height: 200px;
        }


        &>.footerLink:nth-child(1) {
          &>ul {
            list-style: none;
            line-height: 2;
          }

          &>ul li:nth-child(1) {
            color: #000000;
            font-weight: 500;
            padding: 20px 0;
            text-transform: capitalize;
            padding-left: 10px;

          }

          &>ul li:nth-child(2) a,
          ul li:nth-child(3) a {
            color: #8A8A8A;
            font-weight: 500;
            padding-left: 10px;
          }

          &>ul li:nth-child(4) {
            color: #000000;
            font-weight: 500;
          }
        }

        &>.footerLink:nth-child(2) {
          height: auto;
          display: flex;
          flex-wrap: wrap;

          &>.appLink {
            height: auto;
            object-fit: scale-down;
            overflow: hidden;
            padding: 16px 20px;


            &>ul {
              list-style: none;
            }

            & ul li:nth-child(1) {
              color: #000000;
              font-weight: 500;
              padding: 20px 0;
              text-transform: capitalize;
            }
          }

          &>.appLink:nth-child(1) {

            &>ul li:nth-child(2) a {
              padding: 0 5px;
            }
          }

          &>.appLink:nth-child(2) {
            &>ul li {
              line-height: 2.2;
            }

            &>ul {

              &>li:nth-child(2) a .fa-brands {
                font-size: 40px;
                color: #8A8A8A;
              }

              &>li:nth-child(3),
              &>li:nth-child(4) {
                font-size: 20px;
                color: #8A8A8A;

                &>a {
                  color: #8A8A8A;
                }
              }

            }
          }
        }
      }

    }
  }

  /* footer end */


  /* container */
  .carousel-image {
    padding: 15px 10px;

    &>.carousel-inner {

      &>.carousel-item {
        width: 250px;
        height: 120px;
        border-radius: 4px;
        margin-left: 8px;

        &>a img {
          width: 100%;
          height: 100%;
          border-radius: 4px;
          object-fit: calc(480px, 100%);
        }
      }
    }

    &>.carouselSlise-btn {
      display: none;
    }
  }


  /* <  home from b1g1 food sec  */
  .b1g1Food-con {
    width: 100%;
    height: auto;

    &>.h2 {
      padding: 25px 0 25px 30px;
      font-size: 20px;
      border: 1px solid #E9E9E9;
    }

    &>.cardContainer {
      width: 100%;
      height: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px 0;

      &>.container {
        width: 100%;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        overflow: hidden;
        justify-content: start;
        align-items: center;
        align-content: center;
        padding: 0 0 0 30px;

        &>.card {
          width: 250px;
          height: auto;
          border: 1px solid #E9E9E9;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
          overflow: hidden;
          position: relative;
          border-radius: 8px;
          padding: 15px 20px;
          gap: 5px;

          &>li {
            text-align: center;
            list-style: none;
            word-wrap: break-word;
            word-break: keep-all;
          }

          &>span {
            position: absolute;
            top: 7px;
            right: 7px;
            background-color: #4CAE1A;
            color: #ffff;
            padding: 2px 10px;
            font-size: 13px;
            border-radius: 4px;
            z-index: 4;
          }

          &>li:nth-child(2) img {
            width: 120px;
            object-fit: scale-down;
            transition: all 0.30s ease;

            &:hover {
              transform: scale(1.1);
            }
          }

          &>li:nth-child(3) {
            display: flex;
            gap: 10px;
            justify-content: center;

            &>span:nth-child(1) {
              font-weight: 600;
            }

            &>span:nth-child(2) {
              text-decoration-line: line-through;
            }
          }

          &>li:nth-child(5) button {
            padding: 5px 40px;
            cursor: pointer;
            font-size: 13px;
            font-weight: 500;
            border: 1px solid #F26924;
            border-radius: 4px;
            background-color: transparent;
            color: #F26924;

            &:hover {
              background-color: #F26924;
              color: #ffff;
            }
          }

        }
      }
    }
  }

  /* <  home from b1g1 food sec end */


  /* carousel-image slider end */

  /* detail sec */
  .detail {
    width: 100%;
    height: auto;
    border: 1px solid #E9E9E9;
    border-collapse: collapse;

    &>.detail-card {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;


      &>ul {
        width: 60%;
        border-top: 1px solid #E9E9E9;
        border-bottom: 1px solid #E9E9E9;
        display: flex;
        list-style: none;
        padding: 13px;
        align-items: center;
        gap: 10px;

        &>img {
          width: 30px;
          height: 30px;
        }

        &>li:nth-child(2) {
          &>h5 {
            font-size: 14px;
            font-weight: 600;
          }

          &>p {
            font-size: 14px;
            font-weight: 400;
            color: #8A8A8A;
            margin-top: 2px;
          }
        }

      }
    }
  }

  /* detail sec end */


  /* ordered sec */
  .ordered-sec {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;

    &>.orderpage {
      width: 100%;
      height: auto;
      padding: 30px 20px;

      &>.orHead {
        border-inline-start: 6px solid #F26924;
        font-size: 30px;
        font-weight: 500;
        padding-left: 5px;
        margin-left: 5px;
      }

      &>.line {
        margin-top: 20px;
        border: 1px solid #E9E9E9;
      }

      &>.ordered-carousel {
        overflow: hidden;
        padding: 10px 0px;
        position: relative;

        &>.orCard {
          width: 500%;
          height: auto;
          /* border: 1px solid black; */
          display: flex;
          align-items: center;
          gap: 30px;
          padding: 0 5px;

          &>.Card {
            width: 230px;
            height: 300px;
            border: 1px solid #E9E9E9;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            overflow: hidden;
            position: relative;
            border-radius: 8px;
            padding: 20px 10px;
            gap: 5px;

            &>li {
              text-align: center;
              list-style: none;
              word-wrap: break-word;
              word-break: keep-all;
            }

            &>span {
              position: absolute;
              top: 10px;
              right: 10px;
              background-color: #4CAE1A;
              color: #ffff;
              padding: 2px 10px;
              font-size: 13px;
              border-radius: 4px;
              z-index: 2;
            }

            &>li:nth-child(2) img {
              width: 120px;
              object-fit: scale-down;
              transition: all 0.30s ease;

              &:hover {
                transform: scale(1.1);
              }
            }

            &>li:nth-child(3) {
              display: flex;
              gap: 10px;
              justify-content: center;

              &>span:nth-child(1) {
                font-weight: 600;
              }

              &>span:nth-child(2) {
                text-decoration-line: line-through;
              }
            }

            &>li:nth-child(5) button {
              padding: 5px 40px;
              cursor: pointer;
              font-size: 13px;
              font-weight: 500;
              border: 1px solid #F26924;
              border-radius: 4px;
              background-color: transparent;
              color: #F26924;

              &:hover {
                background-color: #F26924;
                color: #ffff;
              }
            }

          }
        }

        &>.ordered-btn {
          width: 100%;
          position: absolute;
          z-index: 3;
          display: flex;
          justify-content: space-between;
          align-items: center;
          top: 50%;
          transform: translateY(-50%);
          padding: 0 25px;

          &>.leftBtn,
          .rightBtn {
            width: 35px;
            height: 35px;
            background-color: rgb(0, 0, 0, 0.5);
            border: 1px solid black;
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.30s ease;

            &:hover {
              background-color: rgb(0, 0, 0);
            }

            &>.fa-solid {
              font-size: 24px;
              color: #ffff;
            }
          }
        }
      }
    }
  }

  /* ordered sec end */

  /* brand store-sec */
  .brand-sec {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;

    &>.brandpage {
      width: 100%;
      height: auto;
      padding: 30px 20px;


      &>.brHead {
        border-inline-start: 6px solid #F26924;
        font-size: 30px;
        font-weight: 500;
        padding-left: 5px;
        margin-left: 5px;
      }

      &>.line {
        margin-top: 20px;
        border: 1px solid #E9E9E9;
      }

      &>.brand-carousel {
        overflow: hidden;
        padding: 10px 0px;
        position: relative;

        &>.brCard {
          width: 500%;
          height: auto;
          /* border: 1px solid black; */
          display: flex;
          align-items: center;
          gap: 10px;
          padding: 0 5px;


          &>.Card {
            width: 200px;
            height: 200px;
            border: 1px solid #E9E9E9;
            display: flex;
            justify-content: start;
            align-items: center;
            overflow: hidden;
            position: relative;
            border-radius: 8px;

            &>.img1 {
              width: 100%;
              height: 100%;

              &>img {
                width: 100%;
                height: 100%;
              }
            }
          }
        }

        &>.brand-btn {
          width: 100%;
          position: absolute;
          z-index: 3;
          display: flex;
          justify-content: space-between;
          align-items: center;
          top: 50%;
          transform: translateY(-50%);
          padding: 0 10px;
          display: none;

          &>.leftBtn,
          .rightBtn {
            width: 35px;
            height: 35px;
            background-color: rgb(0, 0, 0, 0.5);
            border: 1px solid black;
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.30s ease;

            &:hover {
              background-color: rgb(0, 0, 0);
            }

            &>.fa-solid {
              font-size: 24px;
              color: #ffff;
            }
          }
        }
      }
    }
  }

  /* brand store-sec end */


  /* food sec  */
  .food-sec {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;

    &>.food-con {
      width: 100%;
      height: auto;
      padding: 15px;
      border: inherit;

      &>.foodHead {
        font-size: 35px;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 8px;

        &>img {
          width: 50px;
        }
      }

      &>.line {
        margin-top: 20px;
        border: 1px solid #E9E9E9;
      }

      &>.foodCard {
        width: 100%;
        height: auto;
        padding: 20px 5px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: start;
        align-content: center;
        gap: 20px;

        &>.card {
          width: 250px;
          height: 220px;
          border: inherit;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
          text-decoration: none;
          border-radius: 4px;
          border: 1px solid #E9E9E9;
          object-fit: scale-down;
          padding: 20px 8px;
          text-align: center;
          gap: 8px;

          &>img {
            width: 140px;
            display: block;
            /* object-fit: scale-down; */
            transition: all 0.30s ease;

            &:hover {
              transform: scale(1.1);
            }
          }

          &>p {
            font-size: 17px;
            color: #000000;
            font-weight: 500;
            word-break: keep-all;
            word-wrap: break-word;
          }
        }
      }
    }
  }

  /* food sec end */




  /* myCart sec  */
  .myCart-sec {
    width: 100%;
    height: 100vh;
    background-color: #ffffff;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;

    &>.myCartHeader {
      width: 100%;
      height: auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #000000;
      padding: 15px 10px;
      color: #ffff;

      &>:nth-child(2) .fa-solid {
        cursor: pointer;
      }
    }

    &>.myCartBody {
      width: 100%;
      height: 100vh;
      background-color: #F0F0F0;
    }

    &>.myCartFooter {
      width: 100%;
      height: 300px;

      /* background-color: #333333; */
      &>div:nth-child(1) {
        display: flex;
        justify-content: space-between;
        padding: 15px 10px;
        border-top: 1px solid #E9E9E9;
        ;
        border-bottom: 1px solid #E9E9E9;
        ;

        &>p:nth-child(1) {
          padding: 8px;
          background-color: palegreen;
          border-radius: 4px;
          font-size: 15px;
          font-weight: 600;
        }

        &>p:nth-child(2) {
          font-size: 15px;
          font-weight: 600;
          padding: 8px;
        }
      }

      &>div:nth-child(2) {
        text-align: center;
        padding: 8px;
        line-height: 1.5;
        word-break: keep-all;
        word-wrap: break-word;
      }

      &>div:nth-child(3) {
        text-align: center;
        padding: 0 15px;

        &>button {
          width: 95%;
          border-radius: 4px;
          padding: 8px;
          cursor: pointer;
          font-size: 16px;
          font-weight: 600;
          color: #fff;
          background-color: slategrey;
          border: transparent;
        }
      }

    }
  }

  /* myCart sec end  */


}

/* media queries sec.. sm device 576px end */