/*=========================================
Responsive CSS
Ankit Digital
=========================================*/

/***************
Large Desktop
****************/

@media(max-width:1400px){

.container{

max-width:1200px;

}

.hero-section h1{

font-size:56px;

line-height:70px;

}

}


/****************
Laptop
****************/

@media(max-width:1200px){

.header-wrapper{

height:80px;

}

.navbar-menu ul{

gap:20px;

}

.hero-section{

padding:90px 0;

}

.hero-section h1{

font-size:48px;

line-height:60px;

}

.section-title h2{

font-size:42px;

}

}


/****************
Tablet
****************/

@media(max-width:992px){

.topbar{

flex-direction:column;

gap:10px;

}

.header-wrapper{

flex-wrap:wrap;

height:auto;

padding:20px 0;

}

.navbar-menu{

width:100%;

margin-top:20px;

}

.navbar-menu ul{

justify-content:center;

flex-wrap:wrap;

}

.hero-section{

text-align:center;

}

.hero-counter{

justify-content:center;

}

.hero-btn{

justify-content:center;

}

.hero-image{

margin-top:50px;

}

.section-title{

text-align:center;

}

.service-card{

margin-bottom:30px;

}

.counter-box{

margin-bottom:30px;

}

.pricing-card{

margin-bottom:30px;

}

.portfolio-card{

margin-bottom:30px;

}

.testimonial-card{

margin-bottom:30px;

}

.footer{

text-align:center;

}

}


/****************
Mobile
****************/

@media(max-width:768px){

body{

font-size:15px;

}

.hero-section{

padding:70px 0;

}

.hero-section h1{

font-size:36px;

line-height:48px;

}

.hero-section p{

font-size:17px;

}

.hero-btn{

flex-direction:column;

gap:15px;

}

.hero-counter{

flex-wrap:wrap;

gap:20px;

}

.section-title h2{

font-size:34px;

}

.btn-primary{

width:100%;

text-align:center;

}

.btn-outline{

width:100%;

text-align:center;

}

.logo img{

height:50px;

}

.header-btn{

display:none;

}

}


/****************
Small Mobile
****************/

@media(max-width:576px){

.container{

padding:0 20px;

}

.top-header{

display:none;

}

.navbar-menu ul{

flex-direction:column;

gap:15px;

}

.hero-section h1{

font-size:30px;

line-height:40px;

}

.section-title h2{

font-size:28px;

}

.hero-counter{

display:grid;

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

}

.service-card{

padding:30px;

}

.pricing-card{

padding:30px;

}

.testimonial-card{

padding:25px;

}

footer{

text-align:center;

}

}