@media only screen and (max-width: 1200px){
    header{
        height: 65vh;
    }
    .row{
        margin: 0 15px;
    }
    .hero-text-box {
        width: 90%;
    }
    .mmm{
        margin: 0;
    }
    
}
@media only screen and (max-width: 1024px){
    .mobile-menu span{
        display: block;
    }
    .main-nav{
        display: none;
    }
    html{
        font-size: 57.5%;
    }
    .hero-text-box {
        width: 90%;
    }
    .client-phot{
        width: 100%;
        float: none;
        text-align: center;
    }
    .client-review{
        width: 100%;
        float: none;
        text-align: center;
    }
    .contact form{
        width: 100%;
       margin: 0 0;
    }
    .mmm{
        margin: 0;
    }
}

@media only screen and (max-width: 980px){
    .span_1_of_4{
        width: 49.2%;
    }
    .span_1_of_4:nth-child(3){
        margin-left: 0;
    }
    html{
        font-size: 62.5%;
    }
    .hero-text-box {
        width: 90%;
    }
}

@media only screen and (max-width: 768px){
    .ld{
        width: 100%;
        margin-left: 0;
    }
    h1{
        font-size: 3.5rem;
    }
    h2{
        font-size: 3rem;
    }
    h3{
        font-size: 2rem;
    }
}

@media only screen and (max-width: 480px){
    .span_1_of_4{
        width: 100%;
    }
    h1{
        font-size: 3rem;
    }
    h2{
        font-size: 2.5rem;
    }
        .testionial .col:nth-child(3),
        .testionial .col:nth-child(4){
            margin-top: 4rem;
}
}