/* ================= RESPONSIVE ================= */
@media (max-width: 768px) {
    .row {
        row-gap: 25px;
    }
    /* ===== Banner ===== */
    .Banner {
      flex-direction: column;
      text-align: center;
      padding: 50px 20px;
      height: auto;
  
      h1 {
        font-size: 32px;
        margin-top: 30px;
      }
      p {
        max-width: 100%;
        font-size: 14px;
      }
      .Image {
        &::before,
        &::after {
          width: 250px;
          height: 250px;
        }
        img {
          width: 90%;
        }
      }
    }
  
    /* ===== About Section ===== */
    .AboutSection {
      padding: 60px 20px;
  
      .AboutImage::before {
        width: 96%;
        height: 330px;
      }
      .AboutContent {
        h2 {
          font-size: 24px;
          br {
            display: contents;
          }
        }
        p {
          font-size: 14px;
        }
        ul li {
          font-size: 14px;
        }
      }
    }
  
    /* ===== Service Section ===== */
    .ServeSection {
      padding: 60px 20px;
  
      .section-title {
        font-size: 24px;
      }
      .section-desc {
        margin-bottom: 50px;
        font-size: 14px;
      }
      .serve-card {
        padding: 20px;
        padding-top: 20px;
        .serve-img {
            position: unset;
            transform: translate(0);
        }
        .serve-img img {
          width: 120px;
          height: 120px;
        }
        h5 {
          font-size: 18px;
        }
        p {
          font-size: 14px;
        }
      }
    }
  
    /* ===== Special Dish Section ===== */
    .SpecialDishSection {
      padding: 60px 20px;
  
      .section-title {
        font-size: 24px;
      }
      .section-desc {
        font-size: 14px;
      }
      .dish-card {
        img {
          height: 180px;
        }
        .dish-content h5 {
          font-size: 18px;
        }
        .dish-footer h6 {
          font-size: 16px;
        }
      }
    }
  
    /* ===== More Menu ===== */
    .MoreMenu {
      .section-title .section-title {
        font-size: 24px;
      }
      .dish-card {
        img {
          height: 200px;
        }
        h5 {
          font-size: 16px;
        }
      }
    }
  
    /* ===== Testimonial Section ===== */
    .TestimonalSection {
      padding: 60px 20px;
      h2 {
        font-size: 24px;
      }
    }
    .testimonial-card {
      padding: 20px;
      .testimonial-header img {
        width: 60px;
        height: 60px;
      }
      .testimonial-quote {
        font-size: 16px;
      }
    }
  
    /* ===== Contact Section ===== */
    .contact-section {
      padding: 30px 20px;
      .contact-box {
        padding: 25px;
        h2 {
          font-size: 22px;
        }
        p {
          font-size: 14px;
        }
      }
    }
  
    /* ===== Footer ===== */
    .quick-footer {
      padding-top: 20px;
      text-align: left;
  
      .logo-col img {
        max-width: 120px;
      }
      .links-col h5,
      .contact-col h5 {
        font-size: 16px;
      }
      .footer-bottom {
        flex-direction: column;
        gap: 10px;
        margin-top: 30px;
        p {
          font-size: 12px;
        }
      }
    }
  
    /* ===== Why Choose Us ===== */
    .why-choose-us {
      padding: 60px 20px;
      .section-title {
        font-size: 22px;
      }
      .value-box {
        flex-direction: column;
        text-align: center;
        .icon {
          margin: 0 auto;
          padding-bottom: 25px;
        }
      }
    }
  
    /* ===== What We Do ===== */
    .work-steps {
      padding: 60px 20px;
      .timeline {
        border-left: none;
        padding-left: 0;
        margin-left: 0;
  
        .step {
          .circle {
            position: relative;
            left: 0;
            margin-bottom: 10px;
          }
          .content {
            p {
              width: 100%;
            }
          }
        }
      }
      .what-we-do .section-title {
        font-size: 22px;
      }
    }
  }