/*==========================================================
    BANKHELPLINE
    RESPONSIVE CSS
==========================================================*/


/*==========================================================
    XXL DEVICES
    (1400px and below)
==========================================================*/

@media (max-width:1400px){

    .container-xl{
        max-width:1320px;
    }

    .hero-title{
        font-size:54px;
    }

}


/*==========================================================
    XL DEVICES
    (1200px and below)
==========================================================*/

@media (max-width:1200px){

    .hero-title{
        font-size:48px;
    }

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

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

    .loan-card{
        padding:30px;
    }

}


/*==========================================================
    LARGE TABLETS
    (992px and below)
==========================================================*/

@media (max-width:991.98px){

    /* ================= NAVBAR ================= */

    .navbar{
        min-height:auto;
        padding:12px 0;
    }

    .logo{
        height:30px;
    }

    .navbar-collapse{

        background:#FF1400;

        border-radius:16px;

        margin-top:15px;

        padding:20px;

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

    }

    .navbar-nav{

        margin-bottom:15px;

    }

    .navbar-nav .nav-item{

        width:100%;

    }

    .navbar-nav .nav-link{

        padding:12px 0 !important;

        border-bottom:1px solid rgba(255,255,255,.15);

    }

    .dropdown-menu{

        border:none;

        box-shadow:none;

        background:rgba(255,255,255,.08);

        padding:10px;

        margin-top:8px;

    }

    .dropdown-item{

        color:#fff;

    }

    .dropdown-item:hover{

        background:rgba(255,255,255,.12);

        color:#fff;

    }

    .mega-menu{

        position:relative !important;

        width:100%;

        left:auto;

        right:auto;

        padding:15px;

        border-radius:12px;

        box-shadow:none;

    }

    .mega-feature{

        margin-top:20px;

    }

    .nav-search{

        display:none;

    }

    .btn-outline-light,
    .btn-light{

        width:100%;

        margin-top:10px;

    }

    /* ================= HERO ================= */

    .hero-section{

        padding:60px 0;

        text-align:center;

    }

    .hero-title{

        font-size:42px;

    }

    .hero-desc{

        font-size:17px;

    }

    .hero-features{

        display:inline-block;

        text-align:left;

        margin-top:30px;

    }

    .hero-buttons{

        justify-content:center;

    }

    .trusted-banks{

        text-align:center;

    }

    /* ================= FORM ================= */

    .eligibility-card{

        margin-top:40px;

        position:relative;

        top:0;

    }

}


/*==========================================================
    TABLETS
    (768px and below)
==========================================================*/

@media (max-width:767.98px){

    body{

        overflow-x:hidden;

    }

    .hero-section{

        padding:45px 0;

    }

    .hero-title{

        font-size:34px;

        line-height:1.25;

    }

    .hero-desc{

        font-size:16px;

    }

    .hero-badge{

        font-size:13px;

        padding:8px 16px;

    }

    .hero-buttons{

        flex-direction:column;

        gap:15px;

    }

    .btn-primary-red,
    .btn-outline-red{

        width:100%;

        text-align:center;

    }

    .loan-section{

        padding:70px 0;

    }

    .section-title{

        font-size:30px;

    }

    .section-subtitle{

        font-size:16px;

    }

    .loan-card{

        padding:25px;

    }

    .loan-card h3{

        font-size:22px;

    }

    .loan-card-icon{

        width:60px;

        height:60px;

        font-size:26px;

    }

    .eligibility-card{

        padding:25px;

    }

    .eligibility-card h3{

        font-size:28px;

    }

    .cta-section{

        padding:45px 25px;

        border-radius:20px;

    }

    .cta-section h2{

        font-size:30px;

    }

    .cta-section p{

        font-size:16px;

    }

}


/*==========================================================
    SMALL MOBILE
    (576px and below)
==========================================================*/

@media (max-width:575.98px){

    .container,
    .container-fluid,
    .container-xl{

        padding-left:18px;

        padding-right:18px;

    }

    .logo{

        height:28px;

    }

    .hero-title{

        font-size:30px;

    }

    .section-title{

        font-size:27px;

    }

    .loan-card{

        padding:22px;

    }

    .eligibility-card{

        padding:22px;

    }

    .submit-btn{

        height:54px;

        font-size:16px;

    }

    .trusted-banks span{

        display:block;

        margin:10px 0;

    }

}


/*==========================================================
    EXTRA SMALL DEVICES
    (400px and below)
==========================================================*/

@media (max-width:399.98px){

    .hero-title{

        font-size:26px;

    }

    .section-title{

        font-size:24px;

    }

    .logo{

        height:26px;

    }

    .btn-primary-red,
    .btn-outline-red,
    .btn-light,
    .btn-outline-light{

        font-size:14px;

        padding:12px 18px;

    }

    .loan-card{

        padding:20px;

    }

    .eligibility-card{

        padding:18px;

    }

}