/* Media Queries for Responsive Design */
@media only screen and (max-width: 767px) {
  /* //Common Styles */
  p {
    font-size: 14px;
    line-height: 20px;
  }

  h2 {
    font-size: 30px !important;
    line-height: 40px !important;
  }
  h3 {
    font-size: 22px !important;
    line-height: 28px !important;
  }

  h5 {
    font-size: 16px !important;
    line-height: 24px !important;
  }

  /* //Common Button */
  .pqBtn {
    padding: 12px 24px;
  }

  /* Heading width */
  .why-choose-us h2,
  .features h2,
  .contact-form-section h1 {
    width: 100%;
  }

  .header-menu .nav-menu {
    flex-direction: column;
    padding: 20px;
    width: 100%;
  }

  .coming-soon img {
    width: 100%;
  }
  .coming-soon p {
    width: 100%;
  }

  /* Hero Section Styles */
  .contact-form-section h1 {
    font-size: 36px;
    line-height: 40px;
  }

  /* Contact Form Section Styles */
  .contact-form-section h1 {
    margin-bottom: 32px;
  }
  .contact-info,
  .contact-form {
    width: 100%;
    border-radius: 24px 16px;
    box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.178);
  }

  .contact-form {
    .wpcf7-form-control-wrap {
      width: 100%;
    }
    textarea {
      height: 60px;
      padding: 12px 20px;
    }
  }
  /* About Us page sytles */
  .ceo-qoute {
    width: 100%;
  }
  .about-first-img {
    display: none;
  }
  /* Home page styles */
  .home-hero-content,
  .why-choose-us-content,
  .home-blogs-content {
    width: 100%;
  }
  .parking-zone {
    background-image: url("../images/hero-banner.png");
    padding: 60px 30px;
    .features {
      width: 100%;
      .feature {
        padding: 6px 14px;
      }
    }
  }
  .feature {
    padding: 18px 0px;
  }
  /* Why choose use grid layout */
  .grid-layout {
    display: grid;
    grid-template-columns: 1fr; /* mobile: 1 column */
    gap: 1rem;
    .feature {
      border-radius: 20px;
      padding: 30px;
      i {
        font-size: 32px;
      }
    }

    .feature.large {
      grid-column: span 1;
      padding: 80px 0px;
    }

    .feature.tall {
      grid-row: span 1;
      padding: 60px 0px;
    }
    .feature.large,
    .feature.tall {
      gap: 12px;
    }
    .feature.small,
    .feature.medium {
      gap: 12px;
    }
  }
  .contact-info {
    background-color: #e9fff5;
    a {
      text-decoration: none;
      color: #272726;
      &:hover {
        color: #0fc874;
      }
    }
  }

  /* About Us page styles */
  .parkquickly-mission,
  .parkquickly-vision {
    padding: 24px;
  }
  /* Blog Page styles */
  .post-category a {
    font-size: 14px;
  }
  .reading-time {
    font-size: 14px;
  }
  /* Filter and Search */
  .filter-search {
    padding: 30px 18px;
  }
  .search-area {
    width: 100%;
    margin-bottom: 16px;
  }
  .search-field {
    width: 100%;
    padding: 10px;
    padding-left: 32px;
  }
  .filter-btn {
    padding: 10px 24px;
  }
}