@media screen and (max-width: 1130px) {
 
    header  {
        height: 500px; 
}
    header .logo {
       margin-left: 30px; 
}
    header nav {
        margin-right: 30px;
}
    header .title {
        margin-top: 150px;
    }
    header .title h1 {
        font-size: 34px;
    }
    header .title__description {
        font-size: 14px;
    }
      .button {
      font-size: 10px;
      width: 100px;
      padding: 5px 0;
    }

    .works .categories-images .filter-img {
        margin: 0 auto;
}
    .works .categories-images {
        grid-template-columns: auto auto;
        
}
    .get-in-touch p {
        font-size: 24px;
    }
    .blog .article {
       flex-direction: column;
       align-items: center;
        
}
    .blog .article__content {
        margin-top: 20px;
}
    
    .clients {
        padding: 100px 30px;
}
    .contacts-form .contacts {
               
}

@media screen and (max-width: 1116px){
  .contacts-form .contacts__each {
  display: inline-block;
  margin-right: 30px;
}
.contacts-form .contacts__each p span {
  display: none;
}
} 

    
@media screen and (max-width: 920px) {
    .about, .services, .get-in-touch, .works, .blog, .clients, .contacts-form, footer {
        padding: 20px 0;
    }
    .contacts-form .form {
        margin-left: 0;
    }
    .services .service .description {
        font-size: 10px;
    }
    .about .text {
        font-size: 12px;
    }
    .get-in-touch p {
        font-size: 18px;
    }
    .blog .article__content-text {
        font-size: 12px;
    }
    .clients .clients__text, .clients .clients__copy {
        font-size: 12px;

    }
    .contacts-form .form {
      max-width:  530px;
    }
    .contacts-form .form input[type='submit'] {
      padding: 10px 20px;
      font-size: 10px;
    }
    footer .social {
    margin-bottom: 10px;
    padding-bottom: 10px;
    position: relative;
    display: inline-block;
  }
}
    
@media screen and (max-width: 768px) {
 
    header  {
        height: 500px;
                
}
    header nav ul{
        flex-direction: column;
        align-items: flex-end;

}
    header .title {
      margin-top: 20px;
   
}
    header nav {
        opacity: 0;

    }
    header .burger {
        display: block;
    }
    .about__slider__card .img {
      width:200px;
      height: 190px;  
    }
     .works .categories-images .filter-img {
    
    width: 260px;
    height: 200px;
}
.works .filter-img-rect h3 {
  margin-top: 55px;
}
.works .filter-img-rect .filter-btn {
  width: 80px;
  height: 30px;
  font-size: 12px;
  line-height: 30px;
  }
    .works .categories-images {
      grid-template-columns: auto auto;
         
}
    .blog .article {
        flex-direction: column;
        align-items: center;
    }
    
}

@media screen and (max-width: 740px) {
     .works .categories-images {
      grid-template-columns: auto;
    } 
   
    .services .services__three {
        flex-direction: column;
    }
    .services .service {
        padding-bottom: 20px;
        margin-bottom: 20px;
        border-bottom: 2px dotted #666;
    }
    .services .service:last-of-type {
        border-bottom:none;
        padding-bottom: 0;
    }
    .blog img {
        display: none;
    }
    .works .categories .category {
      font-size: 12px;
      margin-right: 5px;
      padding: 3px;
    }
   
.clients .clients__text, .clients .clients__copy {
        font-size: 8px;

    }
    .contacts-form .form input[type='text'],
    .contacts-form .form input[type='email'] {
      flex-basis: 250px;
      height: 35px;
      font-size: 10px;
      margin-bottom: 15px;
      border: 1px solid #555;
    }
    .contacts-form .form textarea {
      flex-grow: 1;
      height: 100px;
      margin-bottom: 20px;
      padding: 10px;
      border: 1px solid #555;
      outline: none;
    }
    .contacts-form .contacts__each p {
      font-size: 10px;
    }
    .contacts-form .contacts__each small {
      font-size: 10px;
    }
}

@media screen and (max-width: 580px) {
 
    header  {
        height: 400px;
                
}
     header .title {
        margin-top: 0; 
        
}
    header .title h1 {
        font-size: 25px;
        
}
    header .title__description {
        margin-bottom: 10px;
        font-size: 15px;
}
  
    .works .categories-images {
      grid-template-columns: auto;
    
 }
    .get-in-touch p {
      font-size: 20px;
}
    .blog{
        overflow: hidden;
}
    .contacts-form .form small {
        display: block;
        margin-left: 20px;
        margin-top: 20px;
}
    .contacts-form .form {
        margin-left: 15px;
    }