/* =========================================
        1200px
========================================= */

@media (max-width:1200px){

.container{
    width:95%;
}

.hero h1{
    font-size:54px;
}

nav ul{
    gap:22px;
}

.product-grid,
.why-grid,
.industry-grid{
    gap:20px;
}

}


/* =========================================
        992px
========================================= */

@media (max-width:992px){

.hero{
    height:auto;
    padding:140px 0 100px;
}

.hero h1{
    font-size:46px;
}

.about-grid,
.contact-wrapper{

    grid-template-columns:1fr;

}

.stats-grid{

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

}

.product-grid{

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

}

.why-grid{

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

}

.industry-grid{

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

}

.process-grid{

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

}

.footer-grid{

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

}

}


/* =========================================
        768px
========================================= */

@media (max-width:768px){

.top-bar{

    display:none;

}

.navbar{

    height:80px;

}

nav{

    position:fixed;

    top:80px;

    left:-100%;

    width:280px;

    height:100vh;

    background:white;

    transition:.35s;

    box-shadow:0 20px 40px rgba(0,0,0,.1);

}

nav.active{

    left:0;

}

nav ul{

    flex-direction:column;

    align-items:flex-start;

    padding:40px;

    gap:30px;

}

.menu-btn{

    display:block;

}

.quote-btn{

    display:none;

}

.hero{

    text-align:center;

}

.hero-content{

    max-width:100%;

}

.hero h1{

    font-size:40px;

}

.hero-features{

    justify-content:center;

}

.hero-buttons{

    justify-content:center;

    flex-wrap:wrap;

}

.about-features{

    grid-template-columns:1fr;

}

.product-grid{

    grid-template-columns:1fr;

}

.why-grid{

    grid-template-columns:1fr;

}

.industry-grid{

    grid-template-columns:1fr;

}

.process-grid{

    grid-template-columns:1fr;

}

.footer-grid{

    grid-template-columns:1fr;

}

.section-header h2{

    font-size:34px;

}

.about-content h2{

    font-size:34px;

}

.contact-info,
.contact-form{

    padding:30px;

}

}


/* =========================================
        576px
========================================= */

@media (max-width:576px){

.hero{

    padding-top:120px;

}

.hero h1{

    font-size:32px;

}

.hero p{

    font-size:16px;

}

.primary-btn,
.secondary-btn{

    width:100%;

    text-align:center;

}

.hero-buttons{

    flex-direction:column;

}

.stats-grid{

    grid-template-columns:1fr;

}

.stat-box{

    padding:30px;

}

.logo img{

    height:50px;

}

.section-header{

    margin-bottom:45px;

}

section{

    padding:80px 0;

}

}