/* ----------------------------- */
/* MEDIA QUERY: Phones (≤768px) */
/* ----------------------------- */

@media (max-width: 768px) {
  /* Adjust container padding */
  .container,
  .contain-cta {
    padding: 0 1.5rem;
  }

  /* Stack grids vertically */
  .grid--2--cols,
  .grid--3--cols,
  .grid--5--cols {
    grid-template-columns: 1fr;
  }

  .hero {
    grid-template-columns: 1fr;
    gap: 4rem;
    text-align: center;
  }

  .hero-img {
    width: 100%;
    margin: 0 auto;
  }

  .heading-primary {
    font-size: 2.2rem;
    line-height: 1.2;
  }

  .heading-secondary {
    font-size: 1.8rem;
    line-height: 1.3;
  }

  .hero-discription {
    font-size: 1.1rem;
    line-height: 1.4;
  }

  .main-nav-list {
    flex-direction: column;
    gap: 1rem;
  }

  .header {
    flex-direction: column;
    padding: 3rem 1rem;
    text-align: center;
  }

  .container-how {
    grid-template-columns: 1fr;
    padding: 1rem;
  }

  .step-img {
    max-width: 100%;
  }

  .section-cta {
    padding: 5rem 1rem;
  }

  .cta {
    grid-template-columns: 1fr;
    height: auto;
  }

  .cta-form {
    grid-template-columns: 1fr;
    width: 100%;
    padding: 1rem;
  }

  .cta-form label,
  .cta-form input,
  .cta-form textarea {
    width: 100%;
    padding: 0.8rem;
    margin-left: 0;
  }

  .heading-secdary-cta {
    font-size: 1.8rem;
    padding: 1rem 0;
    text-align: center;
  }

  .cta-text {
    padding: 1rem 0;
    text-align: center;
  }

  .foot {
    padding: 2rem 1rem;
  }

  .logo {
    width: 9rem;
    height: 9rem;
  }

  .follow {
    font-size: 1rem;
    text-align: center;
  }

  .social-links ion-icon,
  .fa-yelp {
    font-size: 18px;
    margin-left: 6px;
  }
}