@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1152px;
  }
}

@media (max-width: 992px) {
  .nav-trigger {
    display: block;
  }
  header.topbar,
  nav {
    display: none;
  }
  header .hero {
    margin-top: -5rem;
  }
  header .hero .hero-img {
    top: 100px;
  }
  .top-products .slider-btn {
    display: none !important;
  }
  .latest-news .articale-wrapper {
    flex-direction: column;
  }
  .latest-news .articale-wrapper .card {
    margin-right: 0;
    margin-bottom: 4rem;
  }
  footer .instagram-api .post-wrapper > div {
    width: calc(1 / 2 * 100% - (1 - 1 / 3) * 10px);
  }
}

@media (max-width: 768px) {
  .about-meal .about-meal-wrap {
    flex-direction: column;
  }
  .about-meal .about-meal-wrap img {
    width: 100%;
    margin-bottom: 2rem;
  }
  section.our-services .card-wrapper {
    flex-direction: column;
  }
  #clock {
    width: 130px;
    justify-content: center;
  }
  section.our-services .card-wrapper .service-card {
    margin-bottom: 6rem;
  }
  footer .container {
    flex-direction: column;
  }
  footer .container .box {
    text-align: left;
    margin-right: 0;
    margin-bottom: 3rem;
  }
  footer .box:nth-child(3) h3 {
    text-align: left;
  }
  footer .container .box:nth-child(3) > div {
    display: block;
  }
}

@media (max-width: 576px) {
  header .hero .hero-img {
    right: -235px;
    top: 150px;
  }
  header .hero .container {
    padding-left: 1rem;
  }
  header .hero {
    margin-top: -4rem;
  }
  #clock {
    width: 80px;
    justify-content: center;
  }
  #clock div {
    width: 100%;
    padding: 1rem;
    margin-right: 1rem;
    margin-bottom: 2rem;
  }
  #clock div span:nth-child(1) {
    font-size: 3rem;
  }
  #clock div span:nth-child(2) {
    font-size: 1rem;
  }
  section.subscribe .container {
    flex-direction: column;
    padding: 0.5rem;
  }
  section.about-meal .about-meal-wrap button {
    margin-left: 37%;
  }
}
@media (max-width: 480px) {
  #clock div {
    width: 100%;
    padding: 1rem;
    margin-right: 0.6rem;
    margin-bottom: 2rem;
  }
  #clock div span:nth-child(1) {
    font-size: 2.5rem;
  }
  #clock div span:nth-child(2) {
    font-size: 1rem;
  }
  section.our-services .service-card {
    margin-right: 0;
  }
}