@media (max-width: 991px) {
  html {
    font-size: 55%;
  }
  header {
    padding: 2rem;
  }
  .home .content {
    text-align: center;
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .order-content {
    flex-wrap: wrap;
  }
  .order {
    width: 100%;
  }
  .order-content {
    width: 100%;
  }
  .orderBox {
    width: 100%;
  }
  #menu-bar {
    display: initial;
  }
  header .navbar {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #f7f7f7;
    border-top: 0.1rem solid rgba(0, 0, 0, 0.1);
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  }
  header .navbar.active {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
  header .navbar a {
    margin: 1.5rem;
    padding: 1.5rem;
    display: block;
    border: 0.2rem solid rgba(0, 0, 0, 0.1);
    border-left: 0.5rem solid var(--red);
    background: #f7f7f7;
  }
  section {
    padding: 4rem 1.6rem 3rem;
  }
  .home .content h1 {
    font-size: 3.6rem;
  }
  .home .content p {
    font-size: 1.6rem;
  }
  .home .image img {
    width: 80%;
  }
  .order-content {
    flex-wrap: wrap;
    justify-content: center;
  }
  .order-content form {
    padding: 2rem 0.4rem;
  }
}

@media (max-width: 450px) {
  html {
    font-size: 50%;
  }
  .order .row form .inputBox input {
    width: 100%;
  }
  .heading {
    font-size: 3rem;
  }
}