@media(max-width: 1199px){
    
}



@media(max-width:992px){

    #menu-btn, .menu-btn{
        display: inline-block;
        color: var(--main-color);
        font-size: 20px;
    }
    .main-menu {
        position: absolute;
        top: 100%;
        right: -100%;
        width: 100%;
        min-height: 100vh;
        background: rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(4px) saturate(102%);
        /* box-shadow: inset 0 0 30px rgb(255 255 255 / 11%), inset 0 0 80px rgb(255 255 255 / 2%), 0 10px 25px rgba(0, 0, 0, 0.2); */
        transition: 0.3s ease-out;
        display: block;
        padding: 3rem;
    }
    .main-menu a{
        display: block;
        text-align: center;
        font-size: 30px;
        padding-bottom: 1rem;
        color: #fff;
    }
    .main-menu.active {
        right: 0%;
        top: 100%;
        z-index: 777;
    }
    .desktop{
        display: none;
    }
    .mobail{
        display: block;
    }
    img.mobail{
        width: 100%;
        border-radius: 50px;
    }
    .about .row-grid{
        grid-template-columns: 100%;
        padding: 4rem 1rem;
    }
    .about .content figure{
        max-width: 485px;
        margin: 0 auto;
        padding: 1rem 0 2rem;
    }
    .about .content figure img{
        width: 100%;
        height: 520px;
        object-fit: cover;
        object-position: bottom center;
    }
    .services{
        padding: 5rem 0;
    } 
    .contact .row-grid{
        grid-template-columns: 100%;
    }
    .contact .row-grid img{
        padding: 2rem 0;
    }
    .contact .row-grid figure{
        max-width: 485px;
        margin: 0 auto;
        padding: 1rem 0 2rem;
    }
    .contact .row-grid figure img{
        width: 100%;
        height: 520px;
        object-fit: cover;
        object-position: bottom center;
    }

}





@media(max-width:768px){
    .footer-contact{
        grid-template-columns: 100%;
        padding: 5rem 0;
    }
    .footer-contact .box-two{
        padding-left: 0;
    }
    .copyright .flex-box{
        gap: 0.3rem;
    }
    .container{
        padding: 0 2rem;
    }
    .about .content{
        padding: 0;
    }
    .about .row-grid{
        padding: 4rem 0;
    }
    form{
        padding: 0;
    }
    .contact{
        padding: 5rem 0 ;
    }
}




@media(max-width:574px){
    .home h1{
        font-size: 38px;
        line-height: 44px;
    }
    .main-heading{
        font-size: 30px;
        line-height: 36px;
    }
    .container{
        padding: 0 0.7rem;
    }
    .serve-list{
        padding: 3.5rem 0;
    }
}