/* =====================================
   Responsive Design
   Total Construction Estimation
===================================== */


/* Large Tablet */

@media(max-width:1100px){


.nav-container{

    flex-wrap:wrap;
    gap:20px;

}


.nav-menu{

    gap:15px;

}



.service-grid{

    grid-template-columns:repeat(2,1fr);

}



.trade-grid{

    grid-template-columns:repeat(3,1fr);

}



.hero h1{

    font-size:45px;

}


}






/* Tablet */

@media(max-width:900px){


.header-contact{

    display:none;

}



.nav-container{

    justify-content:center;

}



.nav-menu{

    flex-wrap:wrap;
    justify-content:center;

}



.about-grid{

    grid-template-columns:1fr;

}



.about-image{

    order:1;

}



.about-content{

    order:2;

}



.footer-grid{

    grid-template-columns:1fr 1fr;

}



.hero{

    height:550px;

}



.hero h1{

    font-size:40px;

}



.hero p{

    font-size:18px;

}



}





/* Mobile */

@media(max-width:600px){



.container{

    width:92%;

}




.logo img{

    width:150px;

}



.nav-menu{

    width:100%;
    flex-direction:column;
    text-align:center;
    gap:12px;

}



.quote-btn{

    width:100%;
    text-align:center;

}




.hero{

    height:500px;

}



.hero h1{

    font-size:32px;

}



.hero p{

    font-size:16px;

}



.hero-buttons{

    flex-direction:column;
    width:100%;

}



.btn-primary,
.btn-secondary{

    text-align:center;

}





.section{

    padding:55px 0;

}



.about-content h2,
.section-title h2{

    font-size:30px;

}




.features{

    grid-template-columns:1fr;

}




.service-grid{

    grid-template-columns:1fr;

}




.trade-grid{

    grid-template-columns:repeat(2,1fr);

}



.cta h2{

    font-size:28px;

}



.footer-grid{

    grid-template-columns:1fr;

    text-align:center;

}



}






/* Small Mobile */

@media(max-width:380px){


.trade-grid{

    grid-template-columns:1fr;

}



.hero h1{

    font-size:28px;

}


}