/*========================================
DESKTOP
========================================*/

@media (max-width:1200px){

.container{
width:95%;
}

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

.section-header h2{
font-size:36px;
}

.hero-container,
.about-grid{
gap:40px;
}

}

/*========================================
TABLET
========================================*/

@media (max-width:992px){

.menu-btn{
display:block;
z-index:1001;
}

.navbar{

position:absolute;
top:80px;
left:0;
width:100%;
background:#ffffff;
display:none;
box-shadow:0 15px 35px rgba(0,0,0,.12);

}

.navbar.active{
display:block;
}

.navbar ul{

flex-direction:column;
padding:25px;
gap:20px;

}

.hero-container{

grid-template-columns:1fr;
text-align:center;

}

.hero-right{

order:-1;

}

.hero-buttons{

justify-content:center;
flex-wrap:wrap;

}

.hero-stats{

justify-content:center;

}

.service-grid{

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

}

.why-grid{

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

}

.counter-grid{

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

}

.about-grid{

grid-template-columns:1fr;

}

.contact-grid{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr;
text-align:center;

}

}

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

@media (max-width:768px){

section{

padding:70px 0;

}

.header .container{

height:70px;

}

.logo img{

width:45px;
height:45px;

}

.logo h2{

font-size:22px;

}

.hero{

padding-top:110px;

}

.hero-left h1{

font-size:34px;

}

.hero-left p{

font-size:16px;

}

.hero-buttons{

flex-direction:column;
align-items:center;

}

.btn-primary,
.btn-secondary{

width:230px;
text-align:center;

}

.hero-stats{

flex-direction:column;
gap:20px;

}

.notice-title{

display:none;

}

.notice-scroll span{

padding:15px 25px;
font-size:14px;

}

.service-grid{

grid-template-columns:1fr;

}

.why-grid{

grid-template-columns:1fr;

}

.counter-grid{

grid-template-columns:1fr;

}

.reward-table{

min-width:700px;

}

.table-responsive{

overflow-x:auto;

}

.contact-card{

padding:30px;

}

.cta h2{

font-size:32px;

}

.section-header h2{

font-size:30px;

}

}

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

@media (max-width:480px){

.container{

width:92%;

}

.hero-left h1{

font-size:28px;

}

.hero-left p{

font-size:15px;

}

.hero-buttons{

width:100%;

}

.btn-primary,
.btn-secondary{

width:100%;

}

.service-card img{

height:200px;

}

.about-content h2{

font-size:28px;

}

.section-header h2{

font-size:26px;

}

.counter-box h2{

font-size:32px;

}

.cta h2{

font-size:26px;

}

.cta p{

font-size:15px;

}

.footer{

text-align:center;

}

.whatsapp{

left:15px;
bottom:15px;
width:55px;
height:55px;
font-size:28px;

}

#topBtn{

right:15px;
bottom:15px;
width:50px;
height:50px;

}

}

/*========================================
NO HORIZONTAL SCROLL
========================================*/

html,
body{

overflow-x:hidden;

}

img{

max-width:100%;
height:auto;

}

table{

max-width:100%;

}