@media(max-width:991px){

.hero{
    height:80vh;
}

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

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

}

@media(max-width:768px){

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

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

.counter{
    font-size:32px;
}

.service-card{
    margin-bottom:20px;
}

}

@media(max-width:576px){

.hero{
    height:70vh;
}

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

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

#topBtn{
    width:40px;
    height:40px;
}

}

/* ==========================
   HERO RESPONSIVE
========================== */

@media(max-width:991px){

.hero-section{
    text-align:center;
    padding:100px 0;
}

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

.hero-btns{
    justify-content:center;
}

.hero-stats{
    justify-content:center;
}

.hero-image{
    margin-top:50px;
}

}

@media(max-width:768px){

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

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

}

@media(max-width:576px){

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

.hero-btns .btn{
    width:100%;
}

.hero-stats{
    gap:25px;
}

.stat-box h3{
    font-size:26px;
}

}

@media(max-width:768px){

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

}

@media(max-width:576px){

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

}



@media(max-width:768px){

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

.feature-card{
    padding:25px 20px;
}

.feature-card h4{
    font-size:20px;
}

}

/* team section */
@media(max-width:768px){
    .team-card{
        margin-bottom:20px;
    }
}

@media(max-width:768px){

    .team-img img{

        height:280px;
    }

    .team-content h4{

        font-size:20px;
    }

}

/* testimonial section */
@media(max-width:768px){

    .testimonial-card{

        padding:25px;
    }

    .testimonial-card p{

        font-size:16px;
    }

    .testimonial-card img{

        width:80px;
        height:80px;
    }

}