@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}
@media (max-width: 576px) {
  .subscribe .container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
}
@media (max-width: 500px) {
  section.topProducts
    .container
    .slider
    .food-slider
    .food-cart
    > .product-img
    button {
    position: relative;
  }
  section.topProducts
    .container
    .slider
    .food-slider
    .food-cart
    > .product-img
    button
    span {
    position: absolute;
    left: 13%;
  }
  section.big-deal .container {
    gap: 1.6rem;
  }
  section.big-deal .container > div {
    width: 4rem;
    height: 4rem;
    border-radius: 5px;
  }
  section.big-deal .container > div > span {
    font-size: 2rem;
  }
  section.big-deal .container > div > small {
    font-size: 0.7rem;
  }
  section.blog .container .article .card .card-content div {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: flex-start;
  }
  section.blog .container .article .card .card-content div > div {
    margin-top: -1rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }
}
@media (max-width: 400px) {
  section.topProducts
    .container
    .slider
    .food-slider
    .food-cart
    > .product-img
    button {
    position: relative;
  }
  section.topProducts
    .container
    .slider
    .food-slider
    .food-cart
    > .product-img
    button
    span {
    position: absolute;
    left: 8%;
    font-weight: 300;
  }
}

@media (max-width: 767px) {
  .aboutMeal .about-meal {
    flex-direction: column;
  }
  .aboutMeal .about-meal img {
    margin-bottom: 1.4rem;
  }
  .blog .article {
    flex-wrap: wrap;
  }
  .service .container {
    flex-wrap: wrap;
  }
  .footer .container footer {
    display: flex;
    flex-direction: column;
  }
  .footer .container div {
    align-items: flex-start;
    margin-bottom: 2rem;
  }
  .footer .container div p {
    text-align: start;
  }
  section.topProducts
    .container
    .slider
    .food-slider
    .food-cart
    > .product-img
    button {
    width: 50%;
  }
  section.topProducts
    .container
    .slider
    .food-slider
    .food-cart
    > .product-img
    button
    span {
    margin-left: 2.7rem;
  }
  .contact-us {
    flex-direction: column;
  }
  footer.copy-right {
    margin-top: -3rem;
  }
}
@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}
@media (max-width: 991px) {
  .nav-trigger {
    display: block;
  }
  .topbar,
  nav {
    display: none;
  }
  .nav-bg {
    padding: 1rem 0 0 1.5rem;
  }
  .nav-bg .mobile-nav {
    padding: 0.4rem 0;
    margin-bottom: 0.5rem;
  }
  .nav-bg .mobile-nav a {
    color: var(--secondary);
  }
  .nav-bg .mobile-nav img {
    padding: 0.2rem;
    margin-right: 0.3rem;
  }
  .nav-bg .nav-links {
    padding: 0.5rem 0;
  }
  .nav-bg .nav-links a {
    padding: 0.2rem;
    margin-bottom: 0.5rem;
    color: var(--secondary);
    transition: all 0.3s ease;
  }
  .nav-bg .nav-links a:hover {
    color: var(--primary);
  }
  .nav-bg .info {
    padding: 1rem 0;
  }
  .nav-bg .info > div {
    margin-bottom: 0.6rem;
    padding: 0.5rem 0;
  }
  .nav-bg .info > div > img {
    margin-right: 0.5rem;
  }
  .nav-bg .info > div > div > h5,
  .nav-bg .info > div > div > h6 {
    color: var(--secondary);
  }
  .nav-bg .info > div > div > h5 {
    margin-bottom: 0.1rem;
  }
  .hero {
    position: relative;
  }
  header.hero .right-con {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
    position: absolute;
    top: 20%;
    right: 35%;
  }
  .topProducts .slider-btn {
    display: none !important;
  }

  .service .container .service-card:nth-child(2) {
    margin: 2rem 0;
  }
  .subscribe {
    padding: 3rem 0;
  }
  .subscribe .container div:last-child div:last-child {
    width: 100%;
  }
  section.footer footer .gallery .post-wrap div {
    width: calc(1 / 2 * 100% - (1 - 1 / 3) * 10px);
  }
  .service .container .service-card {
    padding: 1rem !important;
  }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1152px;
  }
}