/*=========================================================
            HERO RESPONSIVE CSS
            Nectafresh Agro Foods
=========================================================*/


/*=====================================
        1400px
=====================================*/

@media (max-width:1400px){

    .nfHeroSlider{
        height:620px;
    }

    .hero-content{
        max-width:650px;
        padding:45px;
    }

    .hero-content h1,
    .hero-content h2{
        font-size:52px;
    }

}


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

@media (max-width:1200px){

    .nfHeroSlider{
        height:600px;
    }

    .hero-content{
        max-width:620px;
        padding:42px;
    }

    .hero-content h1,
    .hero-content h2{

        font-size:46px;

    }

    .hero-content p{

        font-size:17px;

    }

    .hero-prev{

        left:20px !important;

    }

    .hero-next{

        right:20px !important;

    }

}


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

@media (max-width:992px){

    .nfHeroSlider{

        height:560px;

    }

    .hero-content{

        max-width:100%;

        padding:35px;

    }

    .hero-content h1,
    .hero-content h2{

        font-size:40px;

        line-height:1.2;

    }

    .hero-content p{

        max-width:100%;

        font-size:16px;

        line-height:1.8;

    }

    .hero-list{

        gap:12px;

    }

    .hero-list li{

        padding:12px 18px;

        font-size:14px;

    }

    .btn-primary,
    .btn-secondary{

        min-width:190px;

        height:54px;

    }

}


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

@media (max-width:768px){

    .hero-content{
        text-align:center;
        padding:30px;
        margin:auto;
    }
}
    .hero-overlay{

        background:
        linear-gradient(
            rgba(0,0,0,.70),
            rgba(0,0,0,.55)
        );

    }

    .hero-content{

        text-align:center;

        padding:30px;

        margin:auto;

    }

    .hero-subtitle{

        margin:0 auto 20px;

    }

    .hero-content h1,
    .hero-content h2{

        font-size:34px;

    }

    .hero-content p{

        font-size:15px;

    }

    .hero-list{

        justify-content:center;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-prev,
    .hero-next{

        display:none !important;

    }

}


/*=====================================
        576px
=====================================*/

@media (max-width:576px){

    .nfHeroSlider{

        height:500px;

    }

    .hero-content{

        padding:25px;

        border-radius:18px;

    }

    .hero-content h1,
    .hero-content h2{

        font-size:30px;

    }

    .hero-content p{

        margin-bottom:25px;

    }

    .hero-list{

        gap:10px;

        margin-bottom:30px;

    }

    .hero-list li{

        width:100%;

        justify-content:center;

    }

    .hero-buttons{

        gap:15px;

    }

    .btn-primary,
    .btn-secondary{

        width:100%;

        min-width:100%;

    }

}


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

@media (max-width:480px){

    .nfHeroSlider{

        height:470px;

    }

    .nf-container{

        width:92%;

    }

    .hero-content{

        padding:22px;

    }

    .hero-subtitle{

        font-size:12px;

        padding:8px 16px;

    }

    .hero-content h1,
    .hero-content h2{

        font-size:26px;

        margin-bottom:18px;

    }

    .hero-content p{

        font-size:14px;

        line-height:1.7;

    }

    .hero-list{

        display:grid;

        grid-template-columns:1fr;

    }

    .hero-list li{

        font-size:13px;

        padding:10px 15px;

    }

    .btn-primary,
    .btn-secondary{

        height:50px;

        font-size:15px;

    }

    .hero-pagination{

        bottom:20px !important;

    }

}


/*=====================================
        390px
=====================================*/

@media (max-width:390px){

    .nfHeroSlider{

        height:440px;

    }

    .hero-content{

        padding:18px;

    }

    .hero-content h1,
    .hero-content h2{

        font-size:22px;

    }

    .hero-content p{

        font-size:13px;

    }

    .hero-list{

        display:none;

    }

    .hero-buttons{

        flex-direction:column;

    }

}


/*=====================================
        360px
=====================================*/

@media (max-width:360px){

    .nfHeroSlider{

        height:420px;

    }

    .hero-content{

        padding:15px;

    }

    .hero-content h1,
    .hero-content h2{

        font-size:20px;

    }

    .hero-content p{

        display:none;

    }

    .btn-primary,
    .btn-secondary{

        height:46px;

        font-size:14px;

    }

}


/*=====================================
        Landscape Phones
=====================================*/

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

    .nfHeroSlider{

        height:100vh;

    }

    .hero-content{

        max-width:600px;

        padding:25px;

    }

    .hero-content h1,
    .hero-content h2{

        font-size:32px;

    }

    .hero-content p{

        margin-bottom:20px;

    }

}