/* Medium Layout: 1280px. */
@media only screen and (min-width: 992px) and (max-width: 1200px) {
    .container{
        width: 970px;
    }
  }
  
  /* Tablet Layout: 768px. */
  @media only screen and (min-width: 768px) and (max-width: 991px) {
      .container{
          width: 700px;
      }
      .header{
          grid-template-columns: 30% auto;
      }
      .contact-right{
          margin-left: 80px;
      }
      .single-contact h2{
        margin-left: 20px;
      }
  }
  
  /* Mobile Layout: 320px. */
  @media only screen and (max-width: 767px) {
    .container{
        width: 300px;
    }
    .header {
        display: block;
    }
    .menu ul {
        display: block;
    }
    .menu ul li {
        text-align: left;
    }

    .about-card{
        display: block;
    }


    .about-title p {
        width: 300px;
    }

    .card-single i {
        margin-top: 30px;
    }
  

    .service-card{
        display: block;
        padding: 0;
        margin: 0;
    }
    .single-service {
        display: block;
    }
    .single-service a{
        font-size: 12px;
        padding: 10px;
    }

    .site-gallery {
        display: block;
    }
    .contact {
      display: block;
    }
    .contact-left {
      margin: 30px 0px 0px 0px;
  }
  .contact-right {
      text-align: center;
      margin-left: 0px;
  }
  }
  
  /* Wide Mobile Layout: 480px. */
  @media only screen and (min-width: 480px) and (max-width: 767px) {
      .container{
          width: 400px;
      }
      .about-card{
          display: block;
      }
      .about-title p {
          width: 400px;
      }

      .card-single i {
          margin-top: 30px;
      }
      .service-card{
          display: block;
      }
      .single-service a{
          font-size: 12px;
          padding: 5px;
      }

      .site-gallery {
          display: block;
      }
      .contact {
        display: block;
      }

      .contact-left {
        margin: 30px 0px 0px 0px;
    }
    .contact-right {
        text-align: center;
        margin-left: 0px;
    }
    .single-contact i {
        margin-left: 150px;
    }
    .single-contact h2{
        margin-left: 30px;
        text-align: left;
    }
  }