@media screen and (max-width: 1300px) {


    .hero-text{
        width: 50%;
        left: 28%;
    }

    .h1{font-size: 40px; line-height: 50px;}
    .h2{font-size: 30px;}
}

@media screen and (max-width: 992px) {
    .hero-text {
        width: 60%;
        left: 35%;
        top: 50%;
    }

    .logo-footer {
        width: 150px;
        height: 150px;
    }

    .h1 {
        font-size: 30px;
        line-height: 40px;
    }
}

@media screen and (max-width: 765px) {
    .hero-social {
        top: 75%;
        left: 20%;
    }
}

@media screen and (max-width: 600px) {
    .hero-image{
        height: 75%;
        width: 90%;
    }

    .hero-text{
        width: 85%;
        left: 50%;
    }


    .hero-social {
        left: 27%;
    }

    .service-box{
        height: 320px;
    }

    .logo-footer{
        width: 100px;
        height: 100px;
    }

}

@media screen and (max-width: 480px) {
    .hero-social {
        top: 80%;
    }
}