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

@media screen and (max-width: 767px) {
  h6,
  h3,
  p,
  .menu_links,
  span {
    font-size: 0.7em;
  }

  .details,
  .add-to-cart {
    font-size: 0.5em;
  }

  .carousel {
    position: absolute;
    top: 40%;
  }
  .chose_products_type {
    flex-wrap: wrap;
  }
  .cardFood {
    flex-wrap: wrap;
  }
}

.container_food {
  display: flex;
  flex-direction: column;
  width: 100%;
  font-family: "Roboto Condensed", sans-serif;
  padding: 1%;
}

.nav_menu {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 20%;
  background: orangered;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  position: relative;
}

.site_name {
  display: flex;
  flex-direction: row;
  width: 40%;
  height: auto;
  align-items: center;
  gap: 2%;
}

.site_name img {
  max-width: 40%;
  height: auto;
}

.site_name a {
  text-decoration: none;
  color: rgb(92, 87, 87);
}

.menu_links {
  display: flex;
  flex-direction: row;
  width: 70%;
  height: auto;
  justify-content: space-evenly;
}

.menu_links a {
  color: rgb(92, 87, 87);
  text-decoration: none;
  font-size: 1em;
}

.menu_links a.icon {
  display: flex;
  position: absolute;
  right: 1%;
  top: 40%;
}

.menu_links a:hover,
.site_name a:hover {
  color: black;
}

.links {
  display: none;
  flex-wrap: wrap;
  width: 60%;
  align-items: center;
}

.noOfItemsInCart {
  font-size: 1.1em;
  color: rgb(19, 19, 19);
}

.icon {
  gap: 10%;
}

#demo {
  width: 100%;
  height: 80%;
}

.footer {
  width: 100%;
  height: 10%;
  position: absolute;
  bottom: 0;
  background-color: orangered;
}