/*=========================================
RESPONSIVE.CSS
Max Solutions India
=========================================*/

/*==============================
Large Devices (1200px)
==============================*/

@media (max-width:1200px){

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

.section-title{
font-size:38px;
}

}


/*==============================
Laptop (992px)
==============================*/

@media (max-width:991px){

section{
padding:70px 0;
}

.header{
padding:10px 0;
}

.navbar-collapse{
background:#fff;
padding:20px;
margin-top:15px;
border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,.10);
}

.navbar-nav .nav-link{
margin:12px 0;
text-align:center;
}

.navbar .btn{
width:100%;
margin-top:15px;
}

.hero{
padding-top:140px;
text-align:center;
}

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

.hero p{
font-size:17px;
}

.hero-img{
margin-top:50px;
max-width:450px;
margin-left:auto;
margin-right:auto;
}

.about img{
margin-bottom:35px;
}

.contact-card{
margin-top:30px;
}

.footer{
text-align:center;
}

.footer .social-icons{
justify-content:center;
}

}


/*==============================
Tablet (768px)
==============================*/

@media (max-width:768px){

.hero{
padding-top:120px;
padding-bottom:70px;
}

.hero h1{
font-size:34px;
line-height:1.3;
}

.hero p{
font-size:16px;
}

.hero .btn{
width:100%;
margin-bottom:15px;
}

.section-title{
font-size:30px;
}

.section-subtitle{
font-size:16px;
}

.service-card,
.feature-box,
.review-card,
.process-box,
.industry-box{
padding:30px 20px;
}

.counter-box h2{
font-size:40px;
}

.contact-section h2{
font-size:30px;
}

.cta-section{
text-align:center;
}

.cta-section h2{
font-size:30px;
}

.cta-section .btn{
margin-top:20px;
width:100%;
}

.map-section iframe{
height:350px;
}

}


/*==============================
Mobile (576px)
==============================*/

@media (max-width:576px){

.hero{
padding-top:110px;
}

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

.hero p{
font-size:15px;
}

.hero-img{
max-width:100%;
}

.section-title{
font-size:28px;
}

.service-card,
.feature-box,
.review-card,
.process-box,
.industry-box,
.contact-card{

padding:25px;

}

.process-number{

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

}

.service-icon{

width:75px;
height:75px;
font-size:30px;

}

.counter-box h2{

font-size:34px;

}

.counter-box p{

font-size:15px;

}

.footer{

padding:60px 0 20px;

}

.footer h4{

margin-top:20px;

}

.call-btn,
.whatsapp-btn,
.back-to-top{

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

}

.call-btn{

left:15px;
bottom:15px;

}

.whatsapp-btn{

right:15px;
bottom:15px;

}

.back-to-top{

right:15px;
bottom:80px;

}

}


/*==============================
Small Mobile (400px)
==============================*/

@media (max-width:400px){

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

.hero p{
font-size:14px;
}

.section-title{
font-size:24px;
}

.btn{
padding:12px 24px;
font-size:15px;
}

.logo img{
height:45px;
}

.navbar-toggler{
padding:5px 10px;
}

.contact-section h2{
font-size:26px;
}

.map-section iframe{
height:280px;
}

}