/* =========================================
        HERO RESPONSIVE
        991px
========================================= */

@media (max-width:991px){

    .hero-section{

        min-height:75vh;

    }

    .hero-overlay{

        padding:90px 0;

    }

    .hero-content{

        max-width:100%;

    }

    .hero-content h1{

        font-size:46px;

    }

    .hero-content p{

        font-size:17px;

        max-width:100%;

    }

}

/* =========================================
        HERO RESPONSIVE
        768px
========================================= */

@media (max-width:768px){

    .hero-section{

        min-height:auto;

    }

    .hero-overlay{

        padding:80px 0;

        background:rgba(0,33,71,.82);

    }

    .hero-content{

        text-align:center;

    }

    .hero-tag{

        font-size:13px;

        padding:8px 18px;

    }

    .hero-content h1{

        font-size:36px;

        line-height:1.25;

    }

    .hero-content p{

        font-size:16px;

        line-height:1.8;

    }

    .hero-buttons{

        justify-content:center;

    }

}

/* =========================================
        HERO RESPONSIVE
        576px
========================================= */

@media (max-width:576px){

    .hero-overlay{

        padding:70px 0;

    }

    .hero-content h1{

        font-size:30px;

    }

    .hero-content p{

        font-size:15px;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:center;

    }

    .hero-btn-primary,

    .hero-btn-secondary{

        width:100%;

        max-width:320px;

        text-align:center;

        justify-content:center;

    }

}