
/* responsive ABOUT US*/
@media  screen and (max-width: 940px) {
    
    .about{
        display: flex;
        flex-direction: column;
        width: auto;
        
    }
    .row{
        display: flex;
        flex-direction: column;
        margin: 20px 20px;
    }
    .circle img{
        height: auto;
        width: 70%;
    }
}


/*MEDIA QUERY*/

@media  screen and (max-width: 991px) {
    .nav-toggle{
        display: block;
        margin-right: 20px;
        
    }
    .nav-links{
        position: absolute;
        background-color: #a8cae6;
        left: -100%;
        top: 100%;
        width: 100%;
        padding-block: 20px;
        transition: 0.2s ease-in-out;
    }
    .nav-links.active{
        left: 0;
        z-index:5;

    }
    .nav-links ul{
        flex-direction: column;
    }
    .main-nav{
        overflow: initial;
    }
    .lineh{
        margin: 0%;
        margin-top: 10px;
        width: auto;
    }
    .MAPS img{
        margin: 0 30px;
        width: 92%;
        height: auto;
    }
     .productname{
        
        font-size: 20px;
       padding-left: 10px;
       left:0;
    }
    
}




@media screen and (max-width: 497px){
    :root {
        --padding-inline-section: 10px;
    }
    h1{
        font-size: 2rem;
    
    }
    h2{
        font-size: 4vmin;
    
    }
  
    p{
        font-size: 1rem;
    }
     .productname{
        
        font-size: 20px;
       padding-left: 10px;
       left:0;
    }
    .lineh{
        margin:0;
        width: auto;
    }
    .MAPS img{
        margin: 15px;
        width: 90%;
        height: auto;
    }
    .map-text{
        font-weight: 30px;
        font-size: 13px;
        
    }
    .row{
        margin:0 10px ;
    }
    .about-1 p{
        text-align:left;
        padding: 0;
        font-size: 16px;
    }
    p{
        font-size: 1.15rem;
    }
    .header-section1{
        flex-direction: column-reverse;
    }

    .header-section{
        flex-direction: column;
    }
    .header-left{
        max-width: 100%;

    }
    .header-section1 .two{
        flex-direction: column-reverse;
        
    }
    
}



