/* =====================================
RESPONSIVE DESIGN
===================================== */



@media(max-width:1100px){


.hero h1 {

font-size:55px;

}



.service-grid {

grid-template-columns:repeat(2,1fr);

}



.stats-grid {

grid-template-columns:repeat(2,1fr);

}



.industry-grid {

grid-template-columns:repeat(2,1fr);

}



.project-grid {

grid-template-columns:repeat(2,1fr);

}



}








@media(max-width:900px){



.nav-links {


position:absolute;

top:90px;

left:0;

width:100%;

background:#08110d;

flex-direction:column;

align-items:center;

padding:40px;

display:none;


}



.nav-links.active {


display:flex;


}



.hamburger {


display:block;


}



.btn-nav {


display:none;


}





.two-column {


grid-template-columns:1fr;


}




.contact-grid {


grid-template-columns:1fr;


}




.footer-grid {


grid-template-columns:1fr;


}




}








@media(max-width:700px){



.section {

padding:70px 0;

}




.hero {


height:auto;

min-height:100vh;

padding:130px 0 80px;


}




.hero h1 {


font-size:42px;


}



.hero-description {


font-size:16px;


}



.hero-buttons {


flex-direction:column;

align-items:flex-start;


}



.hero-features {


flex-direction:column;

gap:15px;


}



.service-grid,
.project-grid,
.values-grid,
.mission-grid {


grid-template-columns:1fr;


}




.stats-grid {


grid-template-columns:1fr;


}



.industry-grid {


grid-template-columns:1fr;


}




.section-heading h2,
.content-box h2 {


font-size:32px;


}




.hse-box {


padding:35px 25px;


}



.hse-box h2 {


font-size:30px;


}



.quote-form {


padding:25px;


}



}







@media(max-width:450px){



.logo img {


width:50px;
height:50px;


}



.logo-text h2 {


font-size:20px;


}



.hero h1 {


font-size:36px;


}



.btn {


width:100%;

justify-content:center;


}



}