/* ========================
                                                For Display width 900px 
                                                ========================*/




                                            /* ========================
                                                Font-size: 62.5%
                                                1em = 1rem = 16px
                                                max-width: (px/16em) 
                                                ========================*/

html {
/* default 1.6rem */
/* 1px / 1.6rem = 0.625  */
font-size: 62.5%;   /* current 1rem = 1rem */
}
/* 900px */
@media (max-width: 56.25em){
    
    /* HEADER SECTION */

    header .allcontact{
        display: inline-block;
      }

    header .inside-header-value {
        font-size: 1.2rem;
    }

    .whatsapp, .email-us, .call-us {
        display: none;
        }
    
    /* NAVIGATION SECTION */
    
    nav .side-menu{
        display: flex ;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        grid-column: -2/-1;
        }
    
    nav .main-nav.logo img {
        width: 15rem ;
    }

    nav .main-nav{
        height: 5rem ;
    }

    .nav-div .main-nav img{
        display: none;
    }

    nav .side-menu{
        color: #A3A3A3;
        font-size: 1.2rem;
        background-color: rgba(16, 16, 16, 0.999);
        cursor: pointer;
    }

    nav .side-menu button{
        border: 0;
        background-color: rgb(16, 16, 16);
        cursor: pointer;
    }

    nav .nav-div{
        position: absolute;
        justify-content: center;
        align-items: flex-end;
        padding-right: 6rem;
        top:100%; left: 0; right: 0;
        border-top: 0.1rem solid rgb(74, 162, 112);
        flex-direction: column;
        width: 100%;
        grid-column: 1/-1;
        gap: 2rem;
        display: none;
        transition: all 0.3s;
    }

    .menu-open{
        display: flex !important;
    }

    nav .nav-heading {
        font-size: 1.5rem ;
    }

    nav .main-nav .sub-nav{
        align-content: flex-end !important;
    }

    nav .sub-nav{
        font-size: 1.5rem ;
        position: absolute ;
        top: 0 ;
        width: 30rem ;
        left: -30rem ;
        padding: 2rem 4rem 1vw 0;
        align-items: flex-end;     
    }

    nav .main-nav.quote button {
        padding-left: 0 ;
        font-size: 1.5rem ;
    }

    /* WORKS SECTION */

    .works-section .background-image {
        margin-top: 2rem;
        /* width: 90vw; */
        height: 50vw;
    }

    .works-section .how-we-works.image {
        height: 50vw;
        background-image: linear-gradient(to top left, rgba(255, 255, 255, 0), rgb(0, 113, 45)),
                    url(../images/our-work-HQ_1.webp);
    }

    .works-section .how-we-works.text {
        top: 10rem;
        left: 2.5vw;
        text-align: center;
    }

    .works-section .works-quote-head {
        font-size: 5.5vw;
      }
    
    .works-section .works-quote-head-para {
        font-size: 3.5vw;
      }
    
    .works-section .works-quote-offers li{
        font-size: 1.8vw;
        padding-bottom: 1vw;
        list-style: none;
      }

    .works-section .works-quote-offers-button {
        font-size: 2.6vw;
        font-weight: 600;
        top: 42vw;
        left: 74vw;
        background-color: rgb(43, 224, 122);
        color: #000000;
    }

    /* Service SECTION */

    .service-card-section .our-services-card,
    .service-card-section .swiper-slide .our-services-card {
        width: 70vw;
        height: 45vw;
        text-align: center;
      }

    section h5 {
        font-size: 5.5vw;
      }
      
    .service-card-section h6 {
        font-size: 3vw;
      }
    
    .service-card-section .our-services-card p {
        font-size: 2vw;
      }

    /* WE WORKS TOGETHER SECTION */

    .working-section .working-process p{
        font-size: 2.8vw;
      }
    
    .working-section .share p, .working-section .modify p,
    .working-section .removal p, .working-section .delivery p{
        padding-left: 17vw;
    }

    .working-section .analysis p, .working-section .printing p,
    .working-section .painting p, .working-section .feedback p{
        padding-right: 17vw;
      }

    /* INDUSTRIES SECTION */

    .industries-section p{
        font-size: 2.8vw;
    }

    .industries-section .industries-we-serve-list{
        grid-template-columns: repeat(3, 1fr);
        justify-content: space-between;
    }

    .industries-section .industries-we-serve-list{
        width: 75vw;
    }

    .industries-section .industries-we-serve-list div{
        width: 17vw;
    }

    .industries-section .industries-we-serve-list h6{
        font-size: 2vw;
    }

    /* Footer Section */

    footer .footer-head{
        font-size: 4vw;
        grid-template-columns: repeat(2,1fr);
        column-gap: 0vw;
        row-gap: 6vw;
        padding-top: 2vw;
        margin-bottom: 3vw;
      }

    footer .footer-nav-head a{
        font-size: 3vw;
        margin-top: 2vw;
      }

    footer .join-googlemap {
        display: flex;
      }
    
    footer .follow-link{
        display: grid;
        grid-template-columns: repeat(4,1fr);
        justify-content: space-between;
        
    }

    footer .join-us {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        width: 100%;
        border: 0;
        text-align: center;
    }

    footer .join-us p{
        font-size: 6vw;
        width: 30vw;
        height: 30vw;
        align-items: center;
        justify-content: center;
        display: flex;
        margin-left: 2.5vw;
    }

    footer .join-us img {
        width: 6vw;
    }

    footer .follow-link{
        width: 50vw;
    }

    footer a.map-link{
        display: none;
    }

    footer #laws{
        font-size: 2vw;
        justify-content: space-between;
        grid-template-columns: repeat(5,1fr);
        column-gap:0vw;
        row-gap: 2vw;
        padding:1.5vw;
    }

    footer #copyright {
        font-size: 1.8vw;
    }

    /* INQUIRIES PAGE */
    
    .inquiries-container h5.inq{
        font-size: 5vw;
    }

    .inquiries .inquiries-container p{
        font-size: 3vw;
    }

    .inquiries .contact-row{
        display: none;
    }

    .inquiries .quote-forms {
        grid-template-columns: 1fr;
        text-align: center;
        align-content: center;
        row-gap: 3.5vw;
      }

    .inquiries .services-card {
        height: 38vw;
      }

    .inquiries .services-head{
        font-size: 2.6vw;
      }
    
    .inquiries .services-para{
        font-size: 1.6vw;
      }
    
    .inquiries .quote-icon {
        width: 10vw;
        height: 10vw;
      }


    /*  ABOUT US PAGE */

    .about-us-section .about-container{
        align-items: center;
        text-align: center;
    }
    
    .about-us-section h5.about {
        font-size: 5.5vw;
    }

    .about-us-section .h5-text{
        font-size: 2.5vw;
    }
    
    .about-us-section .about-container h6{
        font-size: 2.8vw ;
    }

    .about-us-section .about-container .para{
        font-size: 1.8vw;
        text-align: center;
    }
    
    .about-us-section ul li {
        font-size: 1.7vw;
    }
    
    .about-us-section p.about-para{
        font-size: 2.5vw;
        color: bisque;
    }

    body section.inquiries .contact-row{
        display: flex;
        flex-direction: column;
        gap: 4vw;
        vertical-align: middle;
        text-align: center;
        align-items: center;
        margin: 3vw 0 5vw;
      }
    
      section.inquiries .contact-row div{
        /* //1.8vw  */
        font-size: 3.5vw; 
      }

}