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

@media (max-width:1200px){

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

#hero h1{
    font-size:54px;
}

.hero-counter{
    gap:30px;
}

.team-image img{
    height:320px;
}

}

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

@media (max-width:992px){

.section-padding{
    padding:80px 0;
}

.navbar{
    background:#fff;
    box-shadow:0 5px 20px rgba(0,0,0,.08);
}

.navbar-collapse{
    padding:20px 0;
}

.navbar-nav{
    text-align:center;
}

.navbar-nav .nav-link{
    margin:10px 0;
}

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

#hero{

    padding-top:140px;
    text-align:center;

}

#hero h1{
    font-size:46px;
}

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

.hero-counter{
    justify-content:center;
    margin-bottom:50px;
}

.hero-image img{
    width:70%;
}

.one{

left:20px;
top:80px;

}

.two{

right:20px;
bottom:30px;

}

.about-image{
    margin-bottom:50px;
}

.experience-box{

right:40px;

}

.cta-wrapper{
    padding:50px;
    text-align:center;
}

.cta h2{
    font-size:34px;
}

.footer{
    text-align:center;
}

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

.footer-contact li{

justify-content:center;

}

}

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

@media (max-width:768px){

.section-title{

font-size:34px;

}

.section-description{

font-size:15px;

}

#hero{

padding-top:120px;

}

#hero h1{

font-size:40px;

}

.hero-button{

flex-direction:column;

}

.btn-main,
.btn-outline-main{

width:100%;
margin-left:0;

}

.hero-counter{

flex-wrap:wrap;
gap:20px;

}

.counter-item{

width:45%;

}

.hero-image img{

width:85%;

}

.floating-card{

position:relative;

left:auto;
right:auto;
top:auto;
bottom:auto;

margin-top:20px;

}

.category-card img{

height:200px;

}

.product-image img{

height:200px;

}

.team-image img{

height:280px;

}

.cta-wrapper{

padding:40px 30px;

}

.cta h2{

font-size:30px;

}

}

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

@media(max-width:576px){

.section-padding{

padding:70px 0;

}

.section-title{

font-size:30px;

}

#hero h1{

font-size:34px;

}

.hero-badge{

font-size:13px;

}

.hero-counter{

justify-content:space-between;

}

.counter-item{

width:48%;

}

.counter-item h2{

font-size:34px;

}

.experience-box{

padding:18px;

}

.experience-box h2{

font-size:28px;

}

.product-price{

font-size:22px;

}

.testimonial-card{

padding:25px;

}

.testimonial-user img{

width:55px;
height:55px;

}

.cta-wrapper{

padding:30px 20px;

}

.cta h2{

font-size:26px;

}

.footer{

padding-top:70px;

}

}

/*=========================================
            425px
=========================================*/

@media(max-width:425px){

#hero h1{

font-size:30px;

}

.hero-image img{

width:100%;

}

.counter-item{

width:100%;

text-align:center;

}

.hero-counter{

gap:15px;

}

}

/*=========================================
            375px
=========================================*/

@media(max-width:375px){

.section-title{

font-size:28px;

}

#hero h1{

font-size:28px;

}

.hero-badge{

font-size:12px;

}

.btn-main,
.btn-outline-main{

padding:14px;

}

}

/*=========================================
            320px
=========================================*/

@media(max-width:320px){

#hero h1{

font-size:24px;

}

.section-title{

font-size:24px;

}

.hero-counter{

display:block;

}

.counter-item{

margin-bottom:20px;

}

}