.loan-hero {

position:
    relative;


overflow:
    hidden;


padding:
    100px 0;


background:
    linear-gradient(
        135deg,
        #f8fbff 0%,
        #eef7ff 100%
    );

}

.loan-hero::before {

content:
    "";


position:
    absolute;


width:
    420px;


height:
    420px;


top:
    -220px;


right:
    -120px;


border-radius:
    50%;


background:
    rgba(
        96,
        165,
        250,
        0.10
    );

}

.loan-hero::after {

content:
    "";


position:
    absolute;


width:
    280px;


height:
    280px;


bottom:
    -180px;


left:
    -100px;


border-radius:
    50%;


background:
    rgba(
        147,
        197,
        253,
        0.10
    );

}

.loan-hero .container {

width:
    min(
        calc(100% - 40px),
        1180px
    );


margin:
    0 auto;

}

.loan-hero-container {

position:
    relative;


z-index:
    2;


display:
    grid;


grid-template-columns:
    minmax(0, 1fr)
    minmax(400px, 0.85fr);


align-items:
    center;


gap:
    80px;

}

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

.loan-hero-content {

max-width:
    650px;

}

.loan-hero-content h1 {

margin:
    14px 0 20px;


color:
    #0f172a;


font-size:
    clamp(
        42px,
        5vw,
        62px
    );


line-height:
    1.04;


font-weight:
    800;


letter-spacing:
    -2.5px;

}

.loan-hero-content h1 span {

display:
    block;


color:
    #3b82f6;

}

.loan-hero-content > p {

max-width:
    570px;


margin:
    0;


color:
    #64748b;


font-size:
    16px;


line-height:
    1.8;

}

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

.loan-hero-actions {

display:
    flex;


align-items:
    center;


gap:
    12px;


margin-top:
    30px;

}

.loan-btn {

min-height:
    48px;


display:
    inline-flex;


align-items:
    center;


justify-content:
    center;


gap:
    8px;


padding:
    0 20px;


border-radius:
    10px;


font-size:
    13px;


font-weight:
    700;


text-decoration:
    none;


transition:
    all 0.25s ease;

}

.loan-btn-primary {

border:
    1px solid #3b82f6;


background:
    #3b82f6;


color:
    #ffffff;


box-shadow:
    0 10px 25px
    rgba(
        59,
        130,
        246,
        0.16
    );

}

.loan-btn-primary:hover {

background:
    #2563eb;


border-color:
    #2563eb;


color:
    #ffffff;


transform:
    translateY(-2px);

}

.loan-btn-secondary {

border:
    1px solid #dbe3ee;


background:
    #ffffff;


color:
    #334155;

}

.loan-btn-secondary:hover {

border-color:
    #bfdbfe;


background:
    #eff6ff;


color:
    #2563eb;

}

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

.loan-hero-note {

display:
    flex;


align-items:
    center;


gap:
    8px;


margin-top:
    20px;


color:
    #64748b;


font-size:
    11px;

}

.loan-hero-note i {

color:
    #3b82f6;


font-size:
    16px;

}

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

.loan-hero-visual {

position:
    relative;


min-height:
    430px;


display:
    flex;


align-items:
    center;


justify-content:
    center;

}

.loan-visual-card {

position:
    relative;


width:
    min(
        100%,
        380px
    );


min-height:
    350px;


padding:
    28px;


overflow:
    hidden;


border:
    1px solid #bfdbfe;


border-radius:
    28px;


background:
    linear-gradient(
        145deg,
        #ffffff 0%,
        #edf6ff 100%
    );


box-shadow:
    0 30px 70px
    rgba(
        37,
        99,
        235,
        0.10
    );


transform:
    rotate(2deg);

}

.loan-visual-card::before {

content:
    "";


position:
    absolute;


width:
    220px;


height:
    220px;


top:
    -90px;


right:
    -70px;


border-radius:
    50%;


background:
    rgba(
        59,
        130,
        246,
        0.09
    );

}

.loan-card-top {

position:
    relative;


z-index:
    1;


display:
    flex;


align-items:
    center;


justify-content:
    space-between;


color:
    #64748b;


font-size:
    11px;


font-weight:
    700;

}

.loan-card-top i {

color:
    #94a3b8;

}

.loan-card-icon {

width:
    65px;


height:
    65px;


display:
    flex;


align-items:
    center;


justify-content:
    center;


margin-top:
    55px;


border-radius:
    18px;


background:
    #dbeafe;


color:
    #2563eb;


font-size:
    27px;

}

.loan-card-label {

display:
    block;


margin-top:
    25px;


color:
    #64748b;


font-size:
    11px;

}

.loan-visual-card > strong {

display:
    block;


margin-top:
    6px;


color:
    #0f172a;


font-size:
    27px;


font-weight:
    800;

}

.loan-card-line {

width:
    100%;


height:
    1px;


margin:
    28px 0 18px;


background:
    #dbe3ee;

}

.loan-card-bottom {

display:
    flex;


align-items:
    center;


justify-content:
    space-between;


color:
    #64748b;


font-size:
    11px;

}

.loan-card-bottom i {

color:
    #3b82f6;


font-size:
    17px;

}

/* =========================================================
FLOATING CARD
========================================================= */

.loan-floating-card {

position:
    absolute;


right:
    0;


bottom:
    30px;


display:
    flex;


align-items:
    center;


gap:
    12px;


padding:
    14px 17px;


border:
    1px solid #e2e8f0;


border-radius:
    14px;


background:
    #ffffff;


box-shadow:
    0 18px 40px
    rgba(
        15,
        23,
        42,
        0.09
    );

}

.loan-floating-icon {

width:
    38px;


height:
    38px;


display:
    flex;


align-items:
    center;


justify-content:
    center;


border-radius:
    10px;


background:
    #eff6ff;


color:
    #3b82f6;

}

.loan-floating-card > div:last-child {

display:
    flex;


flex-direction:
    column;

}

.loan-floating-card strong {

color:
    #0f172a;


font-size:
    12px;

}

.loan-floating-card span {

margin-top:
    3px;


color:
    #94a3b8;


font-size:
    10px;

}

/* =========================================================
LOAN OPTIONS
========================================================= */

.loan-options-section {

padding:
    100px 0;


background:
    #ffffff;

}

.loan-options-section .container,
.loan-process-section .container,
.loan-cta-section .container {

width:
    min(
        calc(100% - 40px),
        1180px
    );


margin:
    0 auto;

}

.section-heading {

max-width:
    650px;


margin-bottom:
    45px;

}

.section-heading h2 {

margin:
    12px 0 14px;


color:
    #0f172a;


font-size:
    clamp(
        32px,
        4vw,
        44px
    );


line-height:
    1.12;


font-weight:
    800;


letter-spacing:
    -1.5px;

}

.section-heading p {

margin:
    0;


color:
    #64748b;


font-size:
    15px;


line-height:
    1.75;

}

.section-label {

display:
    inline-block;


color:
    #2563eb;


font-size:
    11px;


font-weight:
    800;


letter-spacing:
    0.4px;


text-transform:
    uppercase;

}

/* =========================================================
LOAN OPTIONS GRID
========================================================= */

.loan-options-grid {

display:
    grid;


grid-template-columns:
    repeat(
        3,
        minmax(0, 1fr)
    );


gap:
    18px;

}

.loan-option-card {

padding:
    28px;


border:
    1px solid #e2e8f0;


border-radius:
    20px;


background:
    #ffffff;


transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;

}

.loan-option-card:hover {

transform:
    translateY(-5px);


border-color:
    #bfdbfe;


box-shadow:
    0 18px 40px
    rgba(
        37,
        99,
        235,
        0.07
    );

}

.loan-option-icon {

width:
    52px;


height:
    52px;


display:
    flex;


align-items:
    center;


justify-content:
    center;


border-radius:
    14px;


background:
    #eff6ff;


color:
    #3b82f6;


font-size:
    21px;

}

.loan-option-card h3 {

margin:
    23px 0 9px;


color:
    #0f172a;


font-size:
    18px;


font-weight:
    800;

}

.loan-option-card p {

min-height:
    70px;


margin:
    0;


color:
    #64748b;


font-size:
    13px;


line-height:
    1.75;

}

.loan-option-card a {

display:
    inline-flex;


align-items:
    center;


gap:
    7px;


margin-top:
    22px;


color:
    #2563eb;


font-size:
    12px;


font-weight:
    700;


text-decoration:
    none;

}

.loan-option-card a:hover {

color:
    #1d4ed8;

}

/* =========================================================
LOAN PROCESS
========================================================= */

.loan-process-section {

padding:
    100px 0;


background:
    #f8fbff;

}

.loan-process-grid {

display:
    grid;


grid-template-columns:
    repeat(
        3,
        minmax(0, 1fr)
    );


gap:
    18px;

}

.loan-process-card {

position:
    relative;


padding:
    30px;


border:
    1px solid #e2e8f0;


border-radius:
    20px;


background:
    #ffffff;

}

.process-number {

position:
    absolute;


top:
    20px;


right:
    22px;


color:
    #dbeafe;


font-size:
    12px;


font-weight:
    800;

}

.process-icon {

width:
    52px;


height:
    52px;


display:
    flex;


align-items:
    center;


justify-content:
    center;


border-radius:
    14px;


background:
    #eff6ff;


color:
    #3b82f6;


font-size:
    21px;

}

.loan-process-card h3 {

margin:
    23px 0 9px;


color:
    #0f172a;


font-size:
    17px;


font-weight:
    800;

}

.loan-process-card p {

margin:
    0;


color:
    #64748b;


font-size:
    13px;


line-height:
    1.75;

}

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

.loan-cta-section {

padding:
    90px 0;


background:
    #ffffff;

}

.loan-cta-card {

display:
    flex;


align-items:
    center;


justify-content:
    space-between;


gap:
    30px;


padding:
    45px 50px;


border:
    1px solid #bfdbfe;


border-radius:
    25px;


background:
    linear-gradient(
        135deg,
        #eaf4ff,
        #f6faff
    );

}

.loan-cta-card > div {

max-width:
    650px;

}

.loan-cta-card span {

color:
    #2563eb;


font-size:
    11px;


font-weight:
    800;

}

.loan-cta-card h2 {

margin:
    9px 0;


color:
    #0f172a;


font-size:
    clamp(
        28px,
        4vw,
        40px
    );


line-height:
    1.15;


font-weight:
    800;


letter-spacing:
    -1px;

}

.loan-cta-card p {

margin:
    0;


color:
    #64748b;


font-size:
    14px;


line-height:
    1.7;

}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 900px) {

.loan-hero {


    padding:
        80px 0;


}




.loan-hero-container {


    grid-template-columns:
        1fr;


    gap:
        60px;


}




.loan-hero-content {


    max-width:
        700px;


}




.loan-hero-visual {


    min-height:
        400px;


}




.loan-options-grid,
.loan-process-grid {


    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );


}




.loan-option-card:last-child,
.loan-process-card:last-child {


    grid-column:
        1 / -1;


}

}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 600px) {

.loan-hero {


}




.section-heading h2 {


    font-size:
        32px;


    letter-spacing:
        -1px;


}




.section-heading p {


    font-size:
        14px;


}




.loan-option-card,
.loan-process-card {


    padding:
        23px;


    border-radius:
        17px;


}




.loan-cta-section {


    padding:
        60px 0;


}




.loan-cta-card {


    display:
        flex;


    flex-direction:
        column;


    align-items:
        stretch;


    padding:
        30px 24px;


    border-radius:
        21px;


}




.loan-cta-card h2 {


    font-size:
        30px;


}




.loan-cta-card p {


    font-size:
        13px;


}

}

/* =========================================================
SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

.loan-hero .container,
.loan-options-section .container,
.loan-process-section .container,
.loan-cta-section .container {


    width:
        calc(
            100% - 24px
        );


}




.loan-hero-content h1 {


    font-size:
        35px;


}




.loan-hero-visual {


    min-height:
        320px;


}




.loan-visual-card {


    min-height:
        285px;


    padding:
        20px;


}




.loan-card-icon {


    width:
        55px;


    height:
        55px;


    margin-top:
        32px;


}




.loan-visual-card > strong {


    font-size:
        23px;


}




.loan-floating-card {


    padding:
        11px 13px;


}




.loan-floating-icon {


    width:
        34px;


    height:
        34px;


}

}