/* ==========================================================
   LARGE DEVICES
========================================================== */

@media (max-width:1200px){

.container{
    width:92%;
}

.hero-wrapper,
.about-wrapper{
    gap:50px;
}

}



/* ==========================================================
   TABLETS
========================================================== */

@media (max-width:992px){

.hero-wrapper,
.about-wrapper{
    grid-template-columns:1fr;
    text-align:center;
}

.hero-content p{
    margin-left:auto;
    margin-right:auto;
}

.hero-buttons{
    justify-content:center;
}

.hero-services{
    justify-content:center;
}

.business-grid,
.services-grid,
.industry-grid,
.highlight-grid,
.why-grid,
.process-grid{
    grid-template-columns:repeat(2,1fr);
}

.footer-grid{
    grid-template-columns:repeat(2,1fr);
}

}



/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:768px){

#header{
    padding:10px 0;
}

.logo img{
    width:150px;
}

.nav-menu{

    position:absolute;

    top:100%;

    left:0;

    width:100%;

    background:#fff;

    display:none;

    flex-direction:column;

    padding:25px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.nav-menu.active{

    display:flex;

}

.navbar{

    position:relative;

}

.menu-toggle{

    display:block;

}

.btn-primary{

    padding:14px 28px;

}

.hero{

    padding-top:140px;

}

.hero h1{

    font-size:40px;

}

.hero-buttons{

    flex-direction:column;

    gap:15px;

}

.btn-secondary{

    margin-left:0;

}

.hero-services{

    grid-template-columns:1fr;

}

.about-features{

    grid-template-columns:1fr;

}

.business-grid,
.services-grid,
.industry-grid,
.highlight-grid,
.why-grid,
.process-grid,
.footer-grid{

    grid-template-columns:1fr;

}

.section-padding{

    padding:70px 0;

}

.section-title{

    margin-bottom:45px;

}

.footer-grid{

    text-align:center;

}

.footer-about img{

    margin:auto auto 25px;

}

}



/* ==========================================================
   SMALL DEVICES
========================================================== */

@media (max-width:576px){

.container{

    width:94%;

}

h1{

    font-size:34px;

}

h2{

    font-size:28px;

}

h3{

    font-size:22px;

}

p{

    font-size:15px;

}

.hero{

    padding-top:130px;

}

.hero-services div{

    justify-content:center;

}

.highlight-card h3{

    font-size:34px;

}

.process-box span{

    width:60px;
    height:60px;
    font-size:20px;

}

}