@media only screen and (max-width:1350px){
    .bannerimage h1 {
        margin-top: 18%;
      }

      .about .owner figure {
        width: 30%;
      }  

      .about .owner .textarea{
        width: 65%;
      }

      .contact-form{
        height: 530px;
        overflow: hidden;
      }

      .contact-form form{
        padding: 40px 20%;
      }
}

@media only screen and (max-width:1200px){
    .contact ul{
        display: grid;
        grid-template-columns: auto;

    }

    .contact ul li.map{
        height: 400px;
    }
}

@media only screen and (max-width:1080px){
    .navigation ul li {
        font-size: 15px;
    }
    .bannerimage h1{
        margin-top: 160px;
        font-size: 60px;
    }
      

    .review .clients{
        display: grid;
        grid-template-columns: auto auto;
    }

    .owner figure img{
        width: 100%!important;
    }

    }

    @media only screen and (max-width:900px){
        .bannerimage h1{
            margin-top: 100px;
        }

        footer ul {
            display: grid;
            grid-template-columns: auto auto;
        }
        
        .review .clients {
            display: grid;
            grid-template-columns: auto;
          }

        .serviceGallery{
            display: block;
            clear: both;
            height: 100%;
            overflow: hidden;
        }  

        .serviceGallery li{
            float: left;
            width: 46%;
            margin: 0 2% 40px;
        }

        .about .owner figure {
            width: 350px;
          }

        .about .owner .founder, .about .owner .co-founder{
            display: block;
        }

        .about .owner .textarea, .about .co-founder .textarea {
            width: 100%;
           
        }

        .mobIcon{
            display: block!important;
            cursor: pointer;
            position: absolute;
            top: 30px;
            right: 30px;
            transition: all 1s;
        }

        .navigation{
            position: fixed;
            right: -200px;
            top:0;
            height: 100%;
            width: 200px;
            background-color: #854488;
            transition: all 1s;
        }

        .navigation ul li{
            display: block;
            line-height: 70px;
        }

        .navigation ul li a{
            color: #fff;
            display: block;
            font-size: 20px;
        }

        .navigation ul li a:hover{
            background-color: #643166;
            color: #fff;
        }

        
    }


    @media only screen and (max-width:700px){
        .bannerimage h1{
            font-size: 40px;
            

            }
     .bannerimage h2{
        font-size: 20px;
        padding-bottom: 20px;

            }
            a.btn{
             padding: 8px 20px; 
             font-size: 18px;  
            }
            a.btn i{
                padding-left: 5px;
            }
            .bannerimage .textarea{
                height: 90%;

            }

            .review .clients{
                display: grid;
                grid-template-columns: auto auto;
            }
            .review .clients{
                display: grid;
                grid-template-columns: auto;
            }
            .partners .images{
                display: grid;
                grid-template-columns: auto auto auto;
            }

            .contact-form img {
                width: auto;
                height: 100%;
              }

            
        }

        @media only screen and (max-width:580px){
            .bannerimage{
                height: 400px;
                overflow: hidden;
            }
            .bannerimage img{
                width: auto;
                height: 100%;
            }
          
            .contact .map iframe{
                height: 500px;

            }

            .serviceGallery li{
                float: none;
                width: 96%;
                margin: 0 2% 40px;
            }

            .contact-form form {
                padding: 40px 10%;
              }


              footer ul {
                display: grid;
                grid-template-columns: auto;
              } 
              
              footer ul li, footer p{
                display: block;
                text-align: center;
              }

              .footer-Logo{
                display: block;
                padding: 0;
              }

              .footer-Logo img{
                display: block;
                margin: auto;
              }

              footer ul li i{
                margin-right: 0;
              }

              .services h2, .about h2, .works h2, .partners h2, .review h2, footer h2{
                font-size: 35px!important;
                padding-left: 0;
                padding-right: 0;
              }

              .review .clients li{
                display: block;
                text-align: center;
              }

              .review .clients li figure{
                display: block;
              }

              .clients li img{
                margin: 5px auto;
              }

              .review .textarea p{
                text-align: center; 
              }

        }

        @media only screen and (max-width:320px){
            .partners .images{
                display: grid;
                grid-template-columns: auto auto;
            }
            footer ul {
                display: grid;
                grid-template-columns: auto;
            }
            .bannerimage h1{
                font-size: 20px;
            }
            .bannerimage h2{
                font-size: 10px;
            }
            a.btn {
                font-size: 8px;
                padding: 6px 12px; 
                
            }

            .bannerimage .textarea{
                height: 60%;

            }
            .bannerimage h2 {
                padding-bottom: 10px;
            }

        }