/*==========================================
            1200px
==========================================*/

@media(max-width:1200px){

.hero-left{

width:70%;

}

.hero-left h1{

font-size:56px;

}

.hero-stats{

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

}

}


/*==========================================
            992px
==========================================*/

@media(max-width:992px){

.hero{

height:85vh;

}

.hero-container{

width:90%;

}

.hero-left{

width:100%;

text-align:center;

}

.hero-left p{

margin:auto;

margin-bottom:35px;

}

.hero-buttons{

justify-content:center;

}

.slider-btn{

display:none;

}

.hero-stats{

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

margin-top:-50px;

}

}


/*==========================================
            768px
==========================================*/

@media(max-width:768px){

.hero{

height:80vh;

}

.hero-left h1{

font-size:42px;

}

.hero-left p{

font-size:17px;

}

.sub-title{

font-size:13px;

padding:8px 18px;

}

.btn-primary,
.btn-outline{

padding:14px 25px;

font-size:15px;

}

.hero-stats{

grid-template-columns:1fr;

gap:18px;

width:92%;

}

.stats-card{

padding:20px;

}

.slider-dots{

bottom:20px;

}

}


/*==========================================
            480px
==========================================*/

@media(max-width:480px){

.hero{

height:75vh;

}

.hero-left h1{

font-size:34px;

}

.hero-left p{

font-size:15px;

line-height:1.8;

}

.hero-buttons{

flex-direction:column;

}

.btn-primary,
.btn-outline{

justify-content:center;

width:100%;

}

.icon{

width:60px;

height:60px;

font-size:22px;

}

.stats-card h2{

font-size:26px;

}

}