/*====================================================
        RESPONSIVE DESIGN
        Omkar Packers Gulati
====================================================*/

/***********************
LARGE DESKTOP
************************/

@media screen and (max-width:1600px){

.container{

max-width:1350px;

}

.hero h1{

font-size:60px;

}

}


/***********************
DESKTOP
************************/

@media screen and (max-width:1400px){

.heroContainer{

gap:60px;

}

.heroLogo{

max-width:550px;

}

.sectionTitle h2{

font-size:42px;

}

}


/***********************
LAPTOP
************************/

@media screen and (max-width:1200px){

.container{

width:94%;

}

.heroContainer{

grid-template-columns:1fr;

text-align:center;

}

.heroButtons{

justify-content:center;

}

.heroFeatures{

justify-content:center;

}

.aboutGrid{

grid-template-columns:1fr;

}

.locationGrid{

grid-template-columns:1fr;

}

.footerGrid{

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

gap:50px;

}

.stats .container{

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

}

.hero h1{

font-size:54px;

}

.heroLogo{

max-width:450px;

}

}


/***********************
TABLET
************************/

@media screen and (max-width:992px){

.nav-links{

position:fixed;

top:90px;

right:-100%;

width:320px;

height:100vh;

background:#fff;

display:flex;

flex-direction:column;

padding-top:50px;

transition:.4s;

box-shadow:-10px 0 40px rgba(0,0,0,.12);

}

.nav-links.active{

right:0;

}

.mobileMenu{

display:block;

}

.callButton{

display:none;

}

.categoryGrid{

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

}

.whyGrid{

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

}

.industryGrid{

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

}

.hero{

padding-top:140px;

}

.hero h1{

font-size:48px;

}

.sectionTitle h2{

font-size:38px;

}

}


/***********************
MOBILE
************************/

@media screen and (max-width:768px){

section{

padding:80px 0;

}

.hero{

min-height:auto;

}

.hero h1{

font-size:38px;

}

.heroText{

font-size:16px;

}

.heroButtons{

flex-direction:column;

align-items:center;

}

.primaryBtn,

.secondaryBtn{

margin:0;

width:260px;

}

.categoryGrid,

.whyGrid,

.industryGrid{

grid-template-columns:1fr;

}

.stats .container{

grid-template-columns:1fr;

gap:40px;

}

.footerGrid{

grid-template-columns:1fr;

text-align:center;

}

.footerBottom{

flex-direction:column;

text-align:center;

}

.locationInfo{

padding:30px;

}

.heroLogo{

max-width:320px;

padding:25px;

}

.logo-main{

height:38px;

}

.logo-small{

width:45px;

height:45px;

}

.sectionTitle h2{

font-size:34px;

}

.aboutGrid h3{

font-size:30px;

}

.mapContainer iframe{

height:350px;

}

.floatingCall,

.floatingWhatsapp{

width:55px;

height:55px;

font-size:22px;

right:20px;

}

.scrollTop{

left:20px;

width:55px;

height:55px;

}

}


/***********************
SMALL MOBILE
************************/

@media screen and (max-width:480px){

.container{

width:92%;

}

.hero h1{

font-size:30px;

}

.heroText{

font-size:15px;

}

.heroFeatures{

flex-direction:column;

align-items:center;

}

.heroFeatures div{

width:100%;

justify-content:center;

}

.sectionTitle h2{

font-size:28px;

}

.sectionTitle p{

font-size:15px;

}

.categoryCard img{

height:220px;

}

.categoryContent{

padding:25px;

}

.experienceCard{

padding:35px 20px;

}

.experienceCard h1{

font-size:60px;

}

.stat h1{

font-size:46px;

}

.locationInfo{

padding:25px;

}

.footerLogo{

height:55px;

}

footer{

padding-top:60px;

}

}