/*=============================================
            LARGE DEVICES (1400px)
=============================================*/

@media (max-width:1400px){

.hero h1{
    font-size:58px;
    line-height:72px;
}

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

.about-content h2,
.promise-content h2,
.grow-section h2{
    font-size:42px;
}

}

/*=============================================
            LAPTOP (1200px)
=============================================*/

@media (max-width:1199px){

section{
    padding:90px 0;
}

.hero{
    min-height:850px;
}

.hero h1{
    font-size:52px;
    line-height:65px;
}

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

.hero-product{
    width:100%;
}

.product-content{
    padding:25px;
}

.section-title h2{
    font-size:38px;
}

.about-content h2,
.promise-content h2,
.grow-section h2{
    font-size:38px;
}

.newsletter{
    padding:40px;
}

}

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

@media (max-width:991px){

.navbar{
    padding:15px 0;
}

.navbar-collapse{

    background:#fff;

    padding:25px;

    margin-top:15px;

    border-radius:15px;

    box-shadow:0 20px 40px rgba(0,0,0,.08);

}

.navbar-nav .nav-link{

    margin:12px 0;

}

.hero{

    text-align:center;

    padding-top:140px;

    min-height:auto;

}

.hero h1{

    font-size:44px;

    line-height:58px;

}

.hero p{

    font-size:16px;

}

.hero-product{

    margin-top:60px;

    width:85%;

}

.hero::before{

    width:420px;

    height:420px;

}

.hero::after{

    width:320px;

    height:320px;

}

.leaf{

    display:none;

}

.features{

    margin-top:0;

    padding-top:60px;

}

.feature-box{

    margin-bottom:25px;

}

.section-title{

    margin-bottom:50px;

}

.section-title h2{

    font-size:34px;

}

.about-img{

    margin-bottom:40px;

}

.promise-img{

    margin-bottom:40px;

}

.grow-image{

    margin-top:50px;

}

.newsletter{

    text-align:center;

}

.newsletter button{

    width:100%;

    margin-top:15px;

}

.footer{

    text-align:center;

}

.social-icons{

    justify-content:center;

}

.footer-logo{

    margin-bottom:30px;

}

.counter-box{

    margin-bottom:30px;

}

}

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

@media (max-width:767px){

section{

    padding:70px 0;

}

.hero{

    padding-top:120px;

}

.hero h1{

    font-size:34px;

    line-height:46px;

}

.hero p{

    line-height:28px;

}

.btn-success,

.btn-products,

.btn-light-custom,

.btn-outline-light-custom{

    width:100%;

    margin-bottom:15px;

    margin-left:0;

}

.hero-product{

    width:100%;

    margin-top:40px;

}

.section-title span{

    font-size:13px;

}

.section-title h2{

    font-size:30px;

}

.about-content h2,

.promise-content h2,

.grow-section h2{

    font-size:30px;

}

.about-list li,

.promise-list li{

    font-size:15px;

}

.product-content h3{

    font-size:24px;

}

.product-content{

    padding:22px;

}

.category-box{

    margin-bottom:25px;

}

.promise-card{

    margin-bottom:25px;

}

.counter-box h2{

    font-size:38px;

}

.newsletter{

    padding:30px;

}

.newsletter input{

    margin-bottom:15px;

}

.footer{

    padding:70px 0 20px;

}

.footer h4{

    margin-top:25px;

}

.footer-bottom{

    text-align:center;

}

.scroll-top{

    right:15px;

    bottom:15px;

}

.whatsapp{

    left:15px;

    bottom:15px;

}

}

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

@media (max-width:575px){

.navbar-brand img{

    height:50px;

}

.hero h1{

    font-size:30px;

    line-height:40px;

}

.hero p{

    font-size:15px;

}

.section-title h2{

    font-size:26px;

}

.about-content h2,

.promise-content h2,

.grow-section h2{

    font-size:26px;

}

.feature-box{

    padding:25px 20px;

}

.feature-box i{

    width:60px;

    height:60px;

    line-height:60px;

    font-size:24px;

}

.product-content{

    padding:20px;

}

.product-content h3{

    font-size:22px;

}

.product-badge{

    font-size:12px;

    padding:6px 14px;

}

.newsletter{

    padding:25px;

}

.newsletter h3{

    font-size:24px;

}

.counter-box h2{

    font-size:34px;

}

}

/*=============================================
          EXTRA SMALL DEVICES
=============================================*/

@media (max-width:400px){

.hero{

    padding-top:110px;

}

.hero h1{

    font-size:26px;

    line-height:36px;

}

.hero p{

    font-size:14px;

}

.btn-success,

.btn-products{

    padding:12px 22px;

}

.section-title h2{

    font-size:24px;

}

.about-content h2,

.promise-content h2,

.grow-section h2{

    font-size:24px;

}

.newsletter{

    padding:20px;

}

.newsletter h3{

    font-size:20px;

}

.footer{

    font-size:14px;

}

}

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

@media (max-height:500px) and (orientation:landscape){

.hero{

    min-height:650px;

    padding-top:120px;

}

.hero-product{

    width:60%;

}

}