/* large devices (desktops, less than 1200px) */
@media (max-width: 75em) {

  .container {
    padding: 30px;
  }

  .contact-form {
    width: 65%;
  }

  .contact-address {
    width: 31%;
  }

}




/* medium devices (tablets, less than 992px) */
@media (max-width: 62em) {

  .pt-100 {
    padding-top: 50px;
  }

  .pb-100 {
    padding-bottom: 50px;
  }

  .single-service h4 {
    font-size: 18px;
  }

  .single-gallery {
    flex-basis: 31%;
  }

  .gallery-img {
    height: 150px;
  }

  .gallery-img img {
    width: 100%;
  }

  .contact-form {
    width: 60%;
  }

  .contact-address {
    width: 36%;
  }


}


/* small devices (landscape phones, less than 768px) */
@media (max-width: 48em) {

  .header {
    flex-direction: column;
  }

  .header__logo {
    margin-bottom: 20px;
  }

  .header__nav ul li a {
    margin-left: 25px;
    font-size: 20px;
  }

  .about {
    flex-direction: column;
    align-items: center;
  }

  .single-about {
    margin-bottom: 20px;
    width: 400px;
  }

  .service {
    flex-direction: column;
    align-items: center;
  }

  .single-service {
    width: 400px;
  }

  .single-service:nth-child(n+4) {
    margin-bottom: 30px;
  }

  .gallery {
    flex-direction: column;
    align-items: center;
  }

  .single-gallery {
    width: 400px;
  }

  .single-gallery:nth-child(n+9) {
    margin-bottom: 30px;
  }

  .contact {
    flex-direction: column;
  }

  .contact-form {
    width: 100%;
    margin-bottom: 50px;
  }

  .contact-address {
    width: 100%;
  }

}



/* Extra-small devices (portrait phones, less than 576px) */
@media (max-width: 36em) {

  .container {
    padding: 10px;
  }

  .header__nav ul li a {
    margin-left: 10px;
    font-weight: 400;
    font-size: 12px;
  }

  .banner-area img {
    padding: 1px;
  }

  .section-title h4 {
    font-size: 18px;
  }

  .section-title p {
    font-size: 14px;
  }

  .single-about {
    width: 300px;
  }

  .single-about h4 {
    font-size: 18px;
  }

  .single-about p {
    font-size: 14px;
  }

  .single-service {
    width: 300px;
  }

  .single-service h4 {
    font-size: 20px;
  }

  .single-service p {
    font-size: 14px;
  }

  .single-gallery {
    width: 300px;
  }

  .footer-area {
    padding: 30px 10px;
  }

}