@media (min-width:1720px) {
    html{
        font-size: .521vw;
    }
    .container{
        max-width: 172rem;
        padding:0 1.6rem;
    }
}

@media (max-width:1719.8px){
    html{
        font-size: 51%;
    }
    .container{
        max-width: 1450px;
    }
}
@media (max-width:1500px){
    html{
        font-size: 49%;
    }
    .container{
        max-width: 1280px;
    }
}
@media (max-width:1300px){
    html{
        font-size: 42%;
    }
    .container{
        max-width: 1160px;
    }
}
@media (max-width:1200px) and (min-width:992px){
    html{
        font-size: 37%;
    }
    .container{
        max-width: 970px;
    }
}

@media screen and (max-width: 991.98px) {
    .hamburger {
        display: flex;
    }
    #main-menu{
        position: fixed;
        left: -100%;
        top: 0;
        width: 70%;
        height: 100%;
        background-color: #000;
        box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.2);
        padding: 30px;
        transition: .4s all ease-in-out;
        z-index: 3;
    }
    #main-menu.active {
        left: 0;
        overflow-y: auto;
    }
    #main-menu .logo{
        text-align: left;
        /* margin: 30px 0; */
        display: block;
    }
    .header-btn {
        margin-left: 0;
    }
    .header-content ul{
        flex-direction: column;
        gap: 30px;
        align-items: start;
    }
    body.backdrop::after{
        content: "";
        height: 100%;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.69);
        z-index: 1;
        transition: .4s all ease-in-out;
    }
    #close-menu{
        display: block;
    }
    .about-left img {
        margin-bottom: 4rem;
    }
    .service-wrap .row {
        flex-direction: column;
    }
    .service-left img {
        margin-bottom: 4rem;
    }
    .contact-left img {
        margin-bottom: 4rem;
    }
    .about-left img {
        width: 100%;
    }
    #main-menu .logo {
        margin-bottom: 4rem;
    }
}
@media (max-width:768px){
    .container{
        padding:0 3rem;
    }
    .footer-logo img {
        width: 18rem;
    }
    .social-icons {
        column-gap: 3rem;
    }
}
@media(max-width:576px){
    html {
        font-size: 1.168vw;
    }
    .footer-content {
        flex-wrap: wrap;
    }
    .footer-content>a {
        order: 0;
    }
    .footer-content>.social-icons {
        order: 1;
    }
    .footer-content>.copyright {
        order: 2;
        margin: 1rem auto 0 auto;
    }
}