/* ===========================
Large Devices
=========================== */

@media (max-width:1199px){

    .hero-title{

        font-size:48px;

    }

}

/* ===========================
Tablet
=========================== */

@media (max-width:991px){

    .custom-navbar{

        padding:12px 0;

    }

    .logo{

        height:48px;

    }

    .navbar-collapse{

        margin-top:20px;
        background:#fff;
        border-radius:15px;
        padding:20px;
        box-shadow:0 15px 40px rgba(0,0,0,.08);

    }

    .nav-link{

        margin-left:0;
        padding:12px 0;

    }

    .btn-demo{

        width:100%;
        margin-top:15px;
        text-align:center;

    }

    .hero-section{

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

    }

    .hero-title{

        font-size:42px;

    }

    .hero-text{

        font-size:17px;

    }

    .hero-features{

        grid-template-columns:1fr;
        margin-top:30px;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-image{

        margin-top:50px;
        max-width:85%;

    }

}

/* ===========================
Mobile
=========================== */

@media (max-width:767px){

    .hero-title{

        font-size:34px;
        line-height:1.3;

    }

    .hero-text{

        font-size:16px;

    }

    .hero-badge{

        font-size:13px;

    }

    .btn-primary-custom,
    .btn-outline-custom{

        width:100%;
        text-align:center;

    }

    .hero-image{

        max-width:100%;
        margin-top:40px;

    }

    .footer{

        text-align:center;

    }

    .footer-logo{

        margin-bottom:20px;

    }

}

/* ===========================
Small Mobile
=========================== */

@media (max-width:480px){

    .hero-title{

        font-size:30px;

    }

    .hero-section{

        padding-top:105px;

    }

}