* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: monospace;
  }
  :root {
    --red: #ff3c48;
    --orange: #ff723b;
    --green: #129e12;
    --yollow: rgb(253, 211, 23);
    --blue: #172f6e;
    --white: #fff;
    --black: #2e2e2e;
    --gray: #eee;
  }
  html {
    scroll-behavior: smooth;
  }
  body {
    font-size: 15px;
    direction: rtl;
    max-width: 100vw;
  }
  a {
    text-decoration: none;
    font-size: 1em;
  }
  li {
    list-style: none;
  }
  textarea {
    resize: none;
    outline: none;
  }
  /*==============  Start Header  ================*/
  header {
    position: sticky;
    top: 0;
    left: 0;
    background: var(--white);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    z-index: 10000;
    box-shadow: 0px 5px 13px 1px #00000078;
  }
  header img {
    height: 50px;
  }
  /*==============  End Header  ================*/
  /*==============  Start Main  ================*/
  main {
    position: relative;
  }
  main .main-slider {
    display: flex;
    overflow-x: hidden;
    background: var(--black);
    gap: 30px;
    justify-content: flex-end;
    padding: 20px;
    max-width: 100vw;
    position: relative;
  }
  main .main-slider .slider {
    min-width: 100%;
    animation: scrollright 1s;
    display: none;
  }
  #test1 {
    display: block;
  }
  main .main-slider .slider img {
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 0 10px #fff;
    height: 22rem;
  }
  @keyframes scrollright {
    0% {
      transform: translateX(100vw);
    }
    100% {
      transform: translateX(0);
    }
  }
  /*==============  End Main  ================*/
  /*==============  Start Section  ================*/
  section {
    /* overflow-x: hidden; */
    background: var(--gray);
  }
  section ul {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    gap: 11px;
    justify-content: space-between;
    align-items: center;
    padding: 20px 12px;
    overflow-x: scroll;
    scroll-behavior: smooth;
    width: 95%;
    margin: 0px auto;
  }
  section ul li {
    background: var(--black);
    padding: 5px 15px;
    border-radius: 10px;
    min-width: fit-content;
  }
  section ul li a {
    text-decoration: none;
    font-size: 20px;
    color: var(--white);
    width: 132px;
    text-align: center;
    display: block;
  }
  /*==============  End Section  ================*/
  /*==============  Start Child Section  ================*/
  .child-section {
    padding: 10px;
    padding-bottom: 136px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
  }
  .child-section > article > h1 {
    display: flex;
    justify-content: space-between;
    padding: 10px 15px;
    border-radius: 10px;
    font-size: 1.5rem;
    font-weight: bolder;
    transition: all 0.4s ease;
    background: var(--white);
    box-shadow: 0 0 8px #2e2e2e;
  }
  .child-section > article .po-sti {
    position: sticky;
    top: 70px;
    z-index: 100;
  }
  .child-section h1:hover {
    background: var(--black);
    color: var(--white);
  }
  .child-section h1 .active {
    background: var(--yollow);
    color: var(--black);
  }
  .child-section > article .cards {
    padding: 30px 0px;
    display: grid;
    grid-template-columns: 48% 48%;
    justify-content: center;
    gap: 2%;
    row-gap: 20px;
  }
  .child-section > article .cards .card {
    background: var(--white);
    padding: 5px 10px;
    border-radius: 10px;
    box-shadow: 0 0 5px #2e2e2e;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    position: relative;
    padding-bottom: 72px;
  }
  .child-section .cards .card img {
    width: 100%;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 0 5px #222;
    height: 135px;
  }
  .child-section .cards .card h2 {
    width: 90%;
    margin-bottom: 10px;
  }
  .child-section .cards .card .price {
    gap: 4px;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: end;
    position: absolute;
    left: 12px;
    bottom: 57px;
  }
  .child-section .cards .card .price .offer {
    font-weight: normal;
    text-decoration: line-through;
    color: #372f2fcf;
  }
  .child-section .cards .card h3 {
    font-size: 1.1rem;
  }
  .child-section .cards .card h3 span {
    font-size: 1.4rem;
  }
  .child-section .cards .card h4 {
    font-size: 1rem;
  }
  .child-section .cards .card h4 span {
    font-size: 1.1rem;
  }
  .child-section .cards .card button {
    font-size: 1.4rem;
    background-image: linear-gradient(to right, #ff723b, #ff3c48);
    padding: 8px 15px;
    border-radius: 7px;
    cursor: pointer;
    outline: none;
    border: none;
    color: var(--white);
    display: flex;
    gap: 1rem;
    position: absolute;
    bottom: 15px;
    right: 11px;
  }
  .child-section .cards .card button i {
    font-size: 1.4rem;
  }
  .child-section span.offer {
    color: #a69f9f;
    text-decoration: line-through;
    font-size: 1rem !important;
    margin-left: 0.5rem;
  }
  
  /*============== Start orderModal  ================*/
  #orderModal {
    position: fixed;
    height: 100vh;
    padding: 1rem 0 0;
    top: 0;
    left: 0;
    width: 100%;
    background: #cccccc9c;
    justify-content: center;
    overflow-y: scroll;
    display: none;
    z-index: 99999;
  }
  #orderModal.active {
    display: flex;
  }
  #orderModal .menu-bar {
    z-index: 90;
    width: 310px;
    background: #ffffff;
    border-radius: 10px;
    height: fit-content;
  }
  #orderModal .menu-bar .menu-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 2px solid #ccc;
  }
  #orderModal .menu-bar .menu-head h1 {
    font-size: 1.5rem;
  }
  #orderModal .menu-bar .menu-head h2 {
    font-size: 1.3rem;
  }
  #orderModal .menu-bar .menu-content {
    padding: 23px 20px;
    background: #ffffff;
    overflow-y: scroll;
  }
  #orderModal .menu-bar .menu-content > img {
    width: 100%;
    border-radius: 10px;
    height: 150px;
    object-fit: cover;
    object-position: center;
  }
  #orderModal .menu-bar .menu-content .menu-buttom {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
  }
  #orderModal .menu-bar .menu-content .menu-buttom h2 {
    font-size: 1.4rem;
  }
  #orderModal .menu-bar .menu-content .menu-buttom p {
    font-size: 1.3rem;
    margin-top: -0.5rem;
  }
  #orderModal .menu-bar .menu-content .menu-buttom .labels {
    display: flex;
    flex-direction: column;
    gap: 13px;
  }
  #orderModal .menu-bar .menu-content .menu-buttom .labels label {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 10px;
  }
  #orderModal .menu-bar .menu-content .menu-buttom .labels label span {
    font-size: 1.3rem;
    font-weight: bold;
    background: #ccc;
    width: fit-content;
    padding: 5px 10px;
    border-radius: 5px;
  }
  #orderModal .menu-bar .menu-content .menu-buttom .labels label select {
    padding: 8px 15px;
    border-radius: 10px;
    font-size: 1.3rem;
  }
  #orderModal .counts {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  #orderModal .counts span {
    font-size: 1.3rem;
    font-weight: bold;
    background: #ccc;
    width: fit-content;
    padding: 5px 10px;
    border-radius: 5px;
  }
  #orderModal .counts input {
    padding: 8px 15px;
    border-radius: 10px;
    font-size: 1.3rem;
    border: 1px solid rgb(118, 118, 118);
  }
  #orderModal .menu-bar .menu-content .menu-buttom h3 {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    background: #ccc;
    width: 100%;
    justify-content: center;
    border-radius: 5px;
  }
  #orderModal .menu-bar .menu-content .menu-buttom h3 span {
    background: #ccc;
    padding: 5px;
    border-radius: 5px;
  }
  #orderModal .menu-bar .menu-content .menu-buttom button {
    font-size: 1.4rem;
    background-image: linear-gradient(to right, #ff723b, #ff3c48);
    padding: 8px 15px;
    border-radius: 10px;
    cursor: pointer;
    outline: none;
    border: none;
    color: var(--white);
  }
  
  #orderModal .notes {
    display: flex;
    flex-direction: column;
    gap: 13px;
  }
  #orderModal .notes span {
    font-size: 1.3rem;
    font-weight: bold;
    background: #ccc;
    width: fit-content;
    padding: 5px 10px;
    border-radius: 5px;
  }
  #orderModal .notes #notes {
    padding: 8px 15px;
    border-radius: 10px;
    font-size: 1.3rem;
    border: 1px solid rgb(118, 118, 118);
  }
  
  /*============== End Menu-Bar  ================*/
  
  /*==============  End Child Section  ================*/
  /*==============  Start Fotter  ================*/
  footer {
    position: relative;
    text-align: center;
  }
  footer > article {
    display: flex;
    justify-content: space-between;
    position: fixed;
    bottom: 20px;
    z-index: 100;
    right: 0px;
    width: 100%;
  }
  .fotter {
    padding: 20px 10px 75px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
  }
  .fotter .icon-slider {
    display: flex;
    padding: 15px 0;
    gap: 20px;
  }
  .fotter i {
    font-size: 2rem;
    color: #172f6e;
  }
  footer > article .foot-left {
    background-image: linear-gradient(to right, #ff723b, #ff3c48);
    padding: 15px 10px;
    color: var(--white);
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    font-size: 1.4rem;
  }
  footer > article .foot-right {
    background-image: linear-gradient(to right, #ff723b, #ff3c48);
    padding: 15px 10px;
    color: var(--white);
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    font-size: 1.4rem;
    cursor: pointer;
  }
  footer button {
    position: fixed;
    bottom: 8px;
    left: 5%;
    padding: 10px;
    background: var(--green);
    color: var(--white);
    font-size: 1.4rem;
    font-weight: bolder;
    border-radius: 6px;
    border: none;
    outline: none;
    width: 90%;
    cursor: pointer;
  }
  /*==============  End Footer  ================*/
  
  /*==============  Start orderNow  ================*/
  
  #orderNow {
    position: fixed;
    height: 100vh;
    z-index: 200;
    background: #cccccc7a;
    top: 0;
    width: 100%;
    /* display: flex; */
    justify-content: center;
    align-items: center;
    padding-top: 30px;
    display: none;
    z-index: 1212121;
  }
  #orderNow.active {
    display: flex;
  }
  #orderNow .order-now {
    background: var(--white);
    border-radius: 10px;
    width: 290px;
  }
  #orderNow .order-now .head {
    border-bottom: 2px solid #ccc;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  #orderNow .order-now .head h1 {
    font-size: 1.5rem;
  }
  #orderNow .order-now .order-content {
    background: var(--white);
    padding: 15px 25px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  
  #orderNow .order-now .order-content > label {
    width: 100%;
    text-align: center;
  }
  #orderNow .order-now .order-content > label input {
    width: 100%;
    padding: 5px 5px;
    border-radius: 8px;
    border: 2px solid #a69f9f;
    outline: none;
    margin: 10px 0px;
  }
  #orderNow .order-now .order-content > label textarea {
    width: 100%;
    margin: 10px 0px;
    border-radius: 7px;
    resize: none;
    padding: 10px;
    text-align: start;
  }
  #orderNow .order-now .order-content button {
    padding: 10px;
    border-radius: 10px;
    outline: none;
    border: none;
    background: var(--black);
    color: var(--white);
    font-size: 1.4rem;
    cursor: pointer;
  }
  #orderNow .delivering-label {
    display: flex;
    width: 100%;
    gap: 0.5rem;
  }
  #orderNow .delivering-label .deliveringSpan {
    font-size: 1.3rem;
    font-weight: bold;
    background: #ccc;
    width: fit-content;
    padding: 5px 10px;
    border-radius: 5px;
  }
  #orderNow .delivering-label #deliveringSelect {
    flex: 1;
    border-radius: 5px;
  }
  /*==============  End Parant-Order ================*/
  @media (min-width: 768px) {
    .child-section > article .cards {
      grid-template-columns: 30% 30% 30%;
    }
    main .main-slider .slider img {
      height: 32rem;
      object-fit: fill;
      object-position: center;
    }
  }
  @media (max-width: 511px) {
    .child-section > article .cards {
      display: grid;
      grid-template-columns: 80%;
      justify-content: center;
    }
    .menu-bar {
      width: 350px;
    }
  }
  @media (max-width: 426px) {
    .child-section > article .cards {
      display: grid;
      grid-template-columns: 95%;
      justify-content: center;
    }
    .menu-parant {
      padding-top: 255px;
    }
    .child-section .cards .menu-bar {
      width: 300px;
    }
    main .main-slider .slider img {
      height: 17rem;
    }
  }
  .child-section > article .ds-n {
    display: none;
  }
  
  /* start cartModal */
  #cartModal {
    position: fixed;
    top: 0;
    bottom: 0;
    /* display: flex; */
    flex-direction: column;
    align-items: center;
    left: 0;
    width: 20rem;
    z-index: 99999;
    background-color: #f3f3f3;
    padding-top: 7rem;
    animation: openCart 0.3s ease-in;
    display: none;
  }
  #cartModal.active {
    display: flex;
  }
  
  #cartModal .icon-top {
    position: absolute;
    background-color: white;
    font-size: 1rem;
    top: 1rem;
    left: 1rem;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #cartModal .cart-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90%;
    overflow-y: scroll;
    padding-bottom: 20px;
  }
  #cartModal .line {
    display: block;
    height: 1.5px;
    width: 100%;
    background-color: black;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
  }
  #cartModal .cart-item {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    margin-bottom: 1rem;
  }
  #cartModal .cart-item #deleteItem {
    background-color: red;
    color: white;
    font-size: 0.7rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #cartModal .cart-item .item-data {
    font-size: 1.3rem;
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 1.5rem;
  }
  #cartModal .cart-item .item-data .cart-single-item-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    border-radius: 10px;
    box-shadow: 0px 0px 6px 0px #000000ba;
    background: var(--white);
    padding: 10px;
  }
  #cartModal .cart-item .item-data .cart-single-item {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    background: var(--white);
    /* padding: 10px; */
  }
  #cartModal .cart-item .item-data #cartItemPrice {
    margin-right: 1.5rem;
    color: darkblue;
  }
  #cartModal .cart-item .item-data #cartItemName {
    width: 6rem;
  }
  #cartModal .cart-item .item-data #cartItemSize {
    width: 2rem;
  }
  #cartModal .cart-body p {
    font-size: 1.1rem;
    color: rgba(0, 0, 0, 0.873);
    margin-top: 1rem;
    background: var(--white);
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0px 0px 6px 0px #000000ba;
  }
  #cartModal .cart-body p span {
    padding-right: 87px;
  }
  #cartModal .cart-body #orderContinue {
    background-color: black;
    color: white;
    padding: 0.5rem 4rem;
    margin-top: 1.8rem;
    border-radius: 1rem;
    font-size: 1.08rem;
  }
  
  @keyframes openCart {
    from {
      left: -20rem;
    }
    to {
      left: 0;
    }
  }
  
  #cartModal #cartItemNotes {
    box-shadow: none;
    margin-top: 0;
    width: 100%;
    color: darkred;
    padding: 5px;
  }