/* ==========================================================
   BANKHELPLINE
   BUSINESS LOAN PAGE
   ========================================================== */

:root{

    --bh-red:#E60023;
    --bh-red-dark:#C4001D;

    --bh-blue:#2563EB;

    --bh-green:#16A34A;

    --bh-dark:#111827;

    --bh-text:#374151;

    --bh-light:#F8FAFC;

    --bh-border:#E5E7EB;

    --bh-radius:18px;

    --bh-shadow:0 15px 45px rgba(0,0,0,.08);

}


/* ==========================================================
   COMMON SECTION
   ========================================================== */

.loan-section{

    padding:90px 0;

}

.section-title{

    font-size:42px;

    font-weight:800;

    color:var(--bh-dark);

    margin-bottom:18px;

}

.section-subtitle{

    font-size:18px;

    color:#64748B;

    max-width:760px;

    margin:auto;

}


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

.hero-section{

    padding:70px 0 90px;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    background:#FFF4F6;

    color:var(--bh-red);

    padding:10px 18px;

    border-radius:50px;

    font-weight:700;

    font-size:15px;

}

.hero-title{

    margin-top:25px;

    font-size:60px;

    line-height:1.1;

    font-weight:900;

    color:var(--bh-dark);

}

.hero-title span{

    color:var(--bh-red);

}

.hero-desc{

    margin-top:25px;

    font-size:18px;

    color:var(--bh-text);

    line-height:1.9;

}

.hero-features{

    margin-top:35px;

}

.hero-features div{

    display:flex;

    align-items:center;

    margin-bottom:14px;

    font-size:17px;

    color:var(--bh-dark);

}

.hero-features i{

    color:var(--bh-green);

    margin-right:12px;

    font-size:18px;

}

.hero-buttons{

    margin-top:40px;

    display:flex;

    gap:16px;

    flex-wrap:wrap;

}

.btn-primary-red{

    background:linear-gradient(135deg,#FF1744,#E60023);

    color:#fff;

    border:none;

    padding:15px 34px;

    border-radius:12px;

    font-weight:700;

    transition:.30s;

}

.btn-primary-red:hover{

    color:#fff;

    transform:translateY(-3px);

    box-shadow:0 15px 30px rgba(230,0,35,.25);

}

.btn-outline-red{

    border:2px solid var(--bh-red);

    color:var(--bh-red);

    background:#fff;

    padding:15px 34px;

    border-radius:12px;

    font-weight:700;

}

.btn-outline-red:hover{

    background:var(--bh-red);

    color:#fff;

}

.trusted-banks{

    margin-top:45px;

}

.trusted-banks small{

    color:#6B7280;

    font-weight:600;

}

.trusted-banks span{

    display:inline-block;

    margin:8px 18px 0 0;

    font-weight:600;

    color:#374151;

}


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

.eligibility-card{

    background:#fff;

    padding:35px;

    border-radius:22px;

    box-shadow:var(--bh-shadow);

    border:1px solid var(--bh-border);

    position:sticky;

    top:120px;

}

.eligibility-card h3{

    font-size:34px;

    font-weight:800;

    margin-bottom:10px;

}

.eligibility-card p{

    color:#6B7280;

    margin-bottom:30px;

}

.eligibility-card label{

    font-weight:700;

    margin-bottom:8px;

}

.eligibility-card .form-control,

.eligibility-card .form-select{

    height:56px;

    border-radius:12px;

    border:1px solid #D1D5DB;

    font-size:15px;

}

.eligibility-card .form-control:focus,

.eligibility-card .form-select:focus{

    border-color:var(--bh-red);

    box-shadow:0 0 0 .2rem rgba(230,0,35,.12);

}

.submit-btn{

    width:100%;

    height:58px;

    border:none;

    border-radius:12px;

    background:linear-gradient(135deg,#16A34A,#15803D);

    color:#fff;

    font-size:18px;

    font-weight:700;

    transition:.30s;

}

.submit-btn:hover{

    transform:translateY(-3px);

}

.secure-info{

    margin-top:25px;

    display:flex;

    justify-content:space-between;

    color:#6B7280;

    font-size:14px;

}


/* ==========================================================
   CARD DESIGN
   ========================================================== */

.loan-card{

    background:#fff;

    border-radius:20px;

    padding:35px;

    border:1px solid #E5E7EB;

    transition:.30s;

    box-shadow:0 10px 30px rgba(0,0,0,.04);

    height:100%;

}

.loan-card:hover{

    transform:translateY(-8px);

    border-color:var(--bh-red);

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

}

.loan-card-icon{

    width:70px;

    height:70px;

    border-radius:18px;

    background:#FFF4F6;

    color:var(--bh-red);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    margin-bottom:22px;

}

.loan-card h3{

    font-size:24px;

    font-weight:800;

    margin-bottom:15px;

}

.loan-card p{

    color:#6B7280;

    line-height:1.8;

}


/* ==========================================================
   BANK LOGOS
   ========================================================== */

.bank-logo{

    background:#fff;

    border-radius:16px;

    border:1px solid #ECECEC;

    padding:30px;

    text-align:center;

    transition:.30s;

}

.bank-logo:hover{

    transform:translateY(-5px);

    box-shadow:0 15px 30px rgba(0,0,0,.08);

}


/* ==========================================================
   TABLE
   ========================================================== */

.compare-table{

    overflow-x:auto;

}

.compare-table table{

    width:100%;

    background:#fff;

    border-radius:16px;

    overflow:hidden;

}

.compare-table th{

    background:var(--bh-red);

    color:#fff;

    padding:18px;

}

.compare-table td{

    padding:18px;

    border-bottom:1px solid #ECECEC;

}


/* ==========================================================
   FAQ
   ========================================================== */

.accordion-item{

    border:none;

    margin-bottom:18px;

    border-radius:16px;

    overflow:hidden;

    box-shadow:0 10px 25px rgba(0,0,0,.04);

}

.accordion-button{

    font-weight:700;

    padding:22px;

}

.accordion-button:not(.collapsed){

    background:#FFF4F6;

    color:var(--bh-red);

}

.accordion-body{

    line-height:1.9;

}


/* ==========================================================
   CTA
   ========================================================== */

.cta-section{

    background:linear-gradient(135deg,#E60023,#C4001D);

    color:#fff;

    border-radius:30px;

    padding:70px;

    text-align:center;

}

.cta-section h2{

    font-size:44px;

    font-weight:900;

}

.cta-section p{

    margin:20px auto;

    max-width:700px;

    font-size:18px;

    opacity:.95;

}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media(max-width:991px){

    .hero-title{

        font-size:42px;

    }

    .hero-section{

        padding:40px 0;

    }

    .eligibility-card{

        position:relative;

        top:0;

        margin-top:40px;

    }

}

@media(max-width:767px){

    .section-title{

        font-size:32px;

    }

    .hero-title{

        font-size:34px;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .btn-primary-red,

    .btn-outline-red{

        width:100%;

        text-align:center;

    }

    .loan-card{

        padding:25px;

    }

    .cta-section{

        padding:40px 25px;

    }

    .cta-section h2{

        font-size:30px;

    }

}