@media all and (max-width: 1200px) {
  .main-containar{
     width: 94%;
  }
  .potfolio-fast-middle-items {
     -ms-grid-columns: (1fr)[4];
         grid-template-columns: repeat(4, 1fr);
   }
   .client-area-midle {
     -ms-grid-columns: (1fr)[3];
         grid-template-columns: repeat(3, 1fr);
     grid-gap: 5rem;
   }
}
@media all and (max-width: 992px){
 .bennar-area {
     margin: 10rem 0;
     padding: 2.5rem 0;
   }
 .bennar-area h1 {
     max-width: 70%;
   }
   .about-skill-item-bottom {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: center;
         -ms-flex-pack: center;
             justify-content: center;
     -webkit-box-align: center;
         -ms-flex-align: center;
             align-items: center;
     -ms-flex-wrap: wrap;
         flex-wrap: wrap;
   }
   .about-border-color {
     margin-bottom: 5rem;
   }
   .how-we-do-it-area-bottom {
     -ms-grid-columns: (1fr)[3];
         grid-template-columns: repeat(3, 1fr);
     grid-gap: 5rem;
   }
   .potfolio-fast-middle-items {
     -ms-grid-columns: (1fr)[3];
         grid-template-columns: repeat(3, 1fr);
   }
   .potfolio-top .menu{
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: center;
         -ms-flex-pack: center;
             justify-content: center;
			 height: 60px;
 }
   .potfolio-heding-bottom {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
   }
   .heading-bottom-left {
     margin-right: 0;
     margin-bottom: 5rem;
   }
   .heading-bottom-right {
     margin-bottom: 2rem;
     text-align: center;
   }
   .heading-bottom-right p {
     max-width: 92%;
     margin: auto;
     margin-bottom: 4rem;
   }
   .client-area-bottom p {
     max-width: 56%;
   }
}
@media all and (max-width: 768px){
 .bennar-area {
     margin: 7rem 0;
   }
 .bennar-area h1 {
     max-width: 90%;
   }
 .menu {
    position: absolute;
    top: 68px;
    right: 160%;
    background: #000000ec;
    border-radius: 1rem;
    transition: 0.5s all ease-in-out;
    width: 0%;
    transition: 0.5s all ease-in-out;
   }
   .open{
    width: 100%;
    right: 0;
   }
   .menu ul li {
    padding: 1rem;
  }
  .menu ul {
    flex-direction: column;
    display: block;
    width: 100%;
    text-align: center;
  }
  .menu i{
    display: none;
  }
  .show i{
     display: block;
     color: #fff;
    font-size: 3.3rem;
    background: #afaf26;
    height: 40px;
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
   }
   
   .service-area-bottom {
     -ms-grid-columns: (1fr)[2];
         grid-template-columns: repeat(2, 1fr);
     grid-gap: 6rem;
   }
   .potfolio-fast-middle-items {
     -ms-grid-columns: (1fr)[2];
         grid-template-columns: repeat(2, 1fr);
   }
   .fast-midle-item img {
     height: 240px;
   }
   .how-we-do-it-area-bottom {
     -ms-grid-columns: (1fr)[2];
         grid-template-columns: repeat(2, 1fr);
     grid-gap: 7rem;
   }
   .about-team-item-bottom {
     -ms-grid-columns: (1fr)[2];
         grid-template-columns: repeat(2, 1fr);
     grid-gap: 5.5rem;
   }
   .timer-boxes {
     -ms-grid-columns: (1fr)[2];
         grid-template-columns: repeat(2, 1fr);
   }
   .contact-area-midle-item {
     margin: 2rem;
     margin-bottom: 2rem;
   }
}
@media all and (max-width: 576px){
 .bennar-area h1 {
     max-width: 100%;
     font-size: 4rem;
   }
   .service-area-top p {
     max-width: 100%;
   }
   .potfolio-heading p {
     max-width: 100%;
   }
   
  .potfolio-top .menu ul li{
    margin-bottom: 20px;
    margin-bottom: 2rem;
  }
   .about-top-items1 p {
     max-width: 100%;
   }
   .client-area-top p {
     max-width: 100%;
   }
   .client-area-bottom p {
     max-width: 100%;
   }
   .contact-area-top p {
     max-width: 100%;
   }
   .about-expend-top {
     max-width: 100%;
   }
   .about-expend-midle {
     max-width: 100%;
   }
   .about-expend-bottom {
     max-width: 100%;
   }
   .client-area-midle {
     -ms-grid-columns: (1fr)[2];
         grid-template-columns: repeat(2, 1fr);
     grid-gap: 3rem;
   }
   .input-group-1 {
     -ms-grid-columns:  1fr;
         grid-template-columns:  1fr;
     grid-gap: 2.5rem;
   }
   .input-group-3 input {
     margin-top: 5rem;
   }
   .heading-bottom-left img {
     width: 47rem;
   }
}
@media all and (max-width: 512px){
 .heading-bottom-left img {
     width: 43rem;
   }
}
@media all and (max-width: 480px){
 .service-area-bottom {
     -ms-grid-columns: 1fr;
         grid-template-columns: 1fr;
     grid-gap: 6rem;
   }
   .service-area-bottom p {
     max-width: 80%;
     margin: auto;
   }
   .how-we-do-it-area-bottom {
     -ms-grid-columns: 1fr;
         grid-template-columns: 1fr;
     grid-gap: 5rem;
   }
   .potfolio-fast-middle-items {
     -ms-grid-columns:  1fr;
         grid-template-columns:  1fr;
   }
   .timer-boxes {
     -ms-grid-columns: 1fr;
         grid-template-columns: 1fr;
     grid-gap: 3rem;
   }
   .about-service-items2 {
     -ms-grid-columns: 1fr;
         grid-template-columns: 1fr;
     grid-gap: 5rem;
   }
   .about-team-item-bottom {
     -ms-grid-columns:  1fr;
         grid-template-columns:  1fr;
   }
   .person img {
     width: 100%;
     height: 250px;
     display: block;
     -o-object-fit: cover;
        object-fit: cover;
     -webkit-transition: 0.5s all ease-in-out;
     transition: 0.5s all ease-in-out;
   }
   .person:after {
     content: '';
     position: absolute;
     top: 254px;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.5);
     z-index: 1;
     -webkit-transition: 0.5s all ease-in-out;
     transition: 0.5s all ease-in-out;
   }
   .person:hover:after {
     top: 177px;
   }
   .person:hover a {
     top: 76%;
   }
   .facebook{
     margin-left: 8rem;
 }
 .fa-phone{
     margin-left: 16rem;
 }
 .twitter{
     margin-left: 24rem;
 }
 .github{
     margin-left: 32rem;
 }
 .heading-bottom-left img {
     width: 38rem;
   }
}
@media all and (max-width: 410px){
 .heading-bottom-left img {
     width: 30rem;
     height: 25rem;
   }
   .bennar-area h1 {
     max-width: 100%;
     font-size: 3rem;
   }
}