/*Hero */

/* =========================================================
   CreditPey Hero
========================================================= */
.cp-hero{
    position:relative;
    display:flex;
    align-items:center;
    padding:80px 0 40px;
    background:linear-gradient(110deg,#fff 0%,#fff 45%,#f4f8ff 100%);
    overflow:hidden;
}
.cp-hero::before{
    content:"";
    position:absolute;
    top:-230px;
    left:-190px;
    width:470px;
    height:470px;
    border-radius:50%;
    background:rgba(235,77,20,.045);
}
.cp-hero::after{
    content:"";
    position:absolute;
    top:-260px;
    right:-170px;
    width:520px;
    height:520px;
    border-radius:50%;
    border:85px solid rgba(7,116,255,.035);
}
.cp-hero-shape{
    position:absolute;
    pointer-events:none;
}
.cp-hero .container{
    position:relative;
    z-index:2;
}
.cp-hero-row{
    display:grid;
    grid-template-columns:minmax(0,.92fr) minmax(450px,1.08fr);
    gap:55px;
    align-items:center;
}

/* Content */
.cp-hero-content{
    position:relative;
    z-index:5;
    max-width:650px;
}
.cp-hero-content h1{
    max-width:650px;
    margin:0;
    color:var(--color-secondary);
    font-family:var(--font-primary);
    font-size:58px;
    line-height:1.12;
    font-weight:var(--bold);
    letter-spacing:-2.3px;
}
.cp-hero-content h1 span{
    margin-top:4px;
    color:var(--color-third);
}
.cp-hero-desc{
    max-width:570px;
    margin:23px 0 0;
    color:var(--btc);
    font-size:17px;
    line-height:29px;
}

/* Buttons */
.cp-hero-actions{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:13px;
    margin-top:31px;
}
.cp-hero-btn{
    min-height:54px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:0 26px;
    border:1px solid transparent;
    border-radius:10px;
    font-family:var(--font-primary);
    font-size:15px;
    line-height:1;
    font-weight:var(--semibold);
    text-decoration:none;
    transition:var(--transition);
}
.cp-hero-btn svg{
    width:18px;
    height:18px;
    transition:var(--transition);
}
.cp-hero-btn-primary{
    min-width:155px;
    color:var(--color-white);
    border-color:var(--color-third);
    background:var(--color-third);
    box-shadow:0 10px 25px rgba(235,77,20,.2);
}
.cp-hero-btn-primary:hover{
    color:var(--color-white);
    background:#d9400d;
    border-color:#d9400d;
    transform:translateY(-3px);
    box-shadow:0 14px 30px rgba(235,77,20,.25);
}
.cp-hero-btn-primary:hover svg{
    transform:translateX(4px);
}
.cp-hero-btn-outline{
    min-width:165px;
    color:var(--color-secondary);
    border-color:rgba(45,60,88,.35);
    background:rgba(255,255,255,.7);
}
.cp-hero-btn-outline:hover{
    color:var(--color-primary);
    border-color:var(--color-primary);
    background:var(--color-white);
    transform:translateY(-3px);
}



/* =========================================================
   Right Visual
========================================================= */
.cp-hero-visual{
    position:relative;
    min-height:590px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
}
.cp-hero-visual-bg{
    position:absolute;
    top:50%;
    left:50%;
    width:530px;
    height:530px;
    border-radius:50%;
    background:linear-gradient(145deg,rgba(7,116,255,.08),rgba(255,255,255,.15) 52%,rgba(235,77,20,.08));
    transform:translate(-50%,-50%);
}
.cp-hero-visual-bg::before{
    content:"";
    position:absolute;
    inset:35px;
    border:1px solid rgba(7,116,255,.08);
    border-radius:50%;
}
.cp-hero-image{
    position:relative;
    z-index:2;
    display:block;
    width:100%;
    max-width:660px;
    max-height:600px;
    object-fit:contain;
    object-position:center bottom;
}

/* Floating Cards */
.cp-floating-card{
    position:absolute;
    z-index:5;
    display:flex;
    align-items:center;
    gap:10px;
    padding:11px 15px 11px 11px;
    border:1px solid rgba(255,255,255,.9);
    border-radius:14px;
    background:rgba(255,255,255,.9);
    box-shadow:0 15px 40px rgba(45,60,88,.12);
    backdrop-filter:blur(12px);
}
.cp-floating-card-one{
    top:25%;
    left:0;
}
.cp-floating-card-two{
    right:0;
    bottom:19%;
}
.cp-floating-icon,
.cp-floating-check{
    width:39px;
    height:39px;
    min-width:39px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:11px;
}
.cp-floating-icon{
    color:var(--color-primary);
    background:#eaf3ff;
}
.cp-floating-check{
    color:var(--color-white);
    background:var(--color-third);
}
.cp-floating-icon svg,
.cp-floating-check svg{
    width:20px;
    height:20px;
}
.cp-floating-card div{
    display:flex;
    flex-direction:column;
}
.cp-floating-card small{
    margin-bottom:1px;
    color:var(--btc);
    font-size:10px;
    line-height:15px;
}
.cp-floating-card strong{
    color:var(--color-secondary);
    font-size:12px;
    line-height:17px;
    font-weight:var(--bold);
}

/* =========================================================
   991px
========================================================= */
@media(max-width:991px){
    .cp-hero{
        min-height:auto;
        padding: 85px 0 0px;
    }
    .cp-hero-row{
        grid-template-columns:1fr 1fr;
        gap:30px;
    }
    .cp-hero-content h1{
        font-size:36px;
        line-height:1.14;
        letter-spacing:-1.7px;
    }
    .cp-hero-desc{
        font-size:15px;
        line-height:26px;
    }
    .cp-hero-visual{
        min-height:480px;
    }
    .cp-hero-visual-bg{
        width:410px;
        height:410px;
    }
    .cp-floating-card-one{
        left:-10px;
    }
    .cp-floating-card-two{
        right:-5px;
    }
}

/* =========================================================
   767px
========================================================= */
@media(max-width:767px){
    .cp-hero{
        padding: 120px 0 0px;
        background:linear-gradient(180deg,#fff 0%,#fff 53%,#f4f8ff 100%);
    }
    .cp-hero-row{
        grid-template-columns:100%;
        gap:40px;
    }
    .cp-hero-content{
        max-width:620px;
    }
    .cp-hero-content h1{
        max-width:570px;
        font-size:40px;
        line-height:1.14;
    }
    .cp-hero-desc{
        max-width:540px;
    }
    .cp-hero-visual{
        width:100%;
        max-width:600px;
        min-height:480px;
        margin:0 auto;
    }
    .cp-hero-image{
        max-width:560px;
    }
    .cp-hero-visual-bg{
        width:430px;
        height:430px;
    }
    .cp-floating-card-one{
        left:5%;
    }
    .cp-floating-card-two{
        right:4%;
    }
}

/* =========================================================
   576px
========================================================= */
@media(max-width:576px){
    .cp-hero{
        padding: 105px 0 0px;
    }
    .cp-hero::before{
        width:330px;
        height:330px;
    }
    .cp-hero-content h1{
        font-size:34px;
        line-height:1.16;
        letter-spacing:-1.2px;
    }
    .cp-hero-desc{
        margin-top:17px;
        font-size:14px;
        line-height:23px;
    }
    .cp-hero-actions{
        gap:10px;
        margin-top:25px;
    }
    .cp-hero-btn{
        min-height:50px;
        padding:0 19px;
        font-size:13px;
    }
    .cp-hero-btn-primary,
    .cp-hero-btn-outline{
        min-width:auto;
    }
    .cp-hero-visual{
        min-height:380px;
    }
    .cp-hero-visual-bg{
        width:320px;
        height:320px;
    }
    .cp-hero-image{
        max-width:430px;
    }
    .cp-floating-card{
        padding:8px 10px 8px 8px;
        border-radius:11px;
    }
    .cp-floating-icon,
    .cp-floating-check{
        width:32px;
        height:32px;
        min-width:32px;
        border-radius:9px;
    }
    .cp-floating-icon svg,
    .cp-floating-check svg{
        width:16px;
        height:16px;
    }
    .cp-floating-card small{
        font-size:8px;
        line-height:12px;
    }
    .cp-floating-card strong{
        font-size:10px;
        line-height:14px;
    }
    .cp-floating-card-one{
        top:22%;
        left:0;
    }
    .cp-floating-card-two{
        right:0;
        bottom:13%;
    }
}









/* =========================================
   LOAN TYPES SECTION
========================================= */

.loan-types-section {
    position: relative;
    overflow: hidden;
    padding: 50px 0;
    background: url('../images/section-bg.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}


/* =========================================
   SECTION HEADING
========================================= */

.loan-types-heading {
    max-width: 850px;
    margin: 0 auto 50px;
    text-align: center;
}

.section-eyebrow {
    display: inline-block;
    margin-bottom: 12px;

    font-family: var(--font-secondary);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 2px;
    text-transform: uppercase;

    color: var(--color-11);
}

.loan-types-heading h2 {
    margin: 0;

    font-family: var(--font-primary);
    font-size: 48px;
    font-weight: 700;
    line-height: 1.15;

    color: var(--color-secondary);
}

.loan-types-heading h2 span {
    color: var(--color-11);
}

.loan-types-heading > p {
    max-width: 760px;
    margin: 18px auto 0;

    font-family: var(--font-secondary);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.7;

    color: #68758b;
}


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

.loan-types-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}


/* =========================================
   LOAN CARD
========================================= */

.loan-type-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 450px;
    padding: 28px;

    overflow: hidden;

    background: #ffffff;
    border: 1px solid rgba(45, 60, 88, 0.09);
    border-radius: 22px;

    box-shadow:
        0 12px 35px rgba(45, 60, 88, 0.06);

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


/* Decorative glow */
.loan-type-card::before {
    content: "";
    position: absolute;

    width: 150px;
    height: 150px;

    top: -70px;
    right: -70px;

    border-radius: 50%;

    background: rgba(253, 93, 7, 0.06);

    transition:
        width 0.4s ease,
        height 0.4s ease,
        background 0.4s ease;
}

.loan-type-card:hover {
    transform: translateY(-10px);

    border-color: rgba(253, 93, 7, 0.35);

    box-shadow:
        0 24px 55px rgba(45, 60, 88, 0.13);
}

.loan-type-card:hover::before {
    width: 190px;
    height: 190px;

    background: rgba(253, 93, 7, 0.09);
}


/* =========================================
   ICON
========================================= */

.loan-card-icon {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 82px;
    height: 82px;
    margin-bottom: 24px;

    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            rgba(253, 93, 7, 0.13),
            rgba(253, 93, 7, 0.035)
        );

    transition:
        transform 0.4s ease,
        background 0.4s ease;
}

.loan-card-icon svg {
    width: 47px;
    height: 47px;

    fill: none;
    stroke: var(--color-11);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition:
        transform 0.4s ease,
        stroke 0.4s ease;
}

.loan-type-card:hover .loan-card-icon {
    transform: translateY(-4px) rotate(-3deg);

    background: var(--color-11);
}

.loan-type-card:hover .loan-card-icon svg {
    stroke: #ffffff;
    transform: scale(1.05);
}


/* =========================================
   CARD CONTENT
========================================= */

.loan-type-card h3 {
    position: relative;
    z-index: 1;

    margin: 0 0 12px;

    font-family: var(--font-primary);
    font-size: 23px;
    font-weight: 700;
    line-height: 1.25;

    color: var(--color-secondary);
}

.loan-type-card > p {
    position: relative;
    z-index: 1;

    margin: 0 0 24px;

    font-family: var(--font-secondary);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.65;

    color: #68758b;
}


/* =========================================
   BUTTON AREA
========================================= */

.loan-card-actions {
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;

    margin-top: auto;
}

.loan-btn {
    min-width: 0;
    min-height: 46px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 10px 12px;

    border: 1px solid transparent;
    border-radius: 10px;

    font-family: var(--font-secondary);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;

    text-decoration: none;

    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


/* Know More */
.loan-btn-outline {
    color: var(--color-secondary);
    border-color: var(--color-secondary);
    background: transparent;
}

.loan-btn-outline:hover {
    color: #ffffff;
    background: var(--color-secondary);
    border-color: var(--color-secondary);
}


/* Apply Now */
.loan-btn-primary {
    color: #ffffff;
    background: var(--color-11);
    border-color: var(--color-11);
}

.loan-btn-primary svg {
    width: 17px;
    height: 17px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition: transform 0.3s ease;
}

.loan-btn-primary:hover {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
    color: #fff;
    box-shadow:
        0 8px 20px rgba(45, 60, 88, 0.2);
}

.loan-btn-primary:hover svg {
    transform: translateX(4px);
}

.loan-btn:active {
    transform: scale(0.97);
}


/* =========================================
   BREAKPOINT: 1200px
========================================= */

@media (max-width: 1200px) {

    .loan-types-section {
        padding: 45px 0;
    }

    .loan-types-heading {
        margin-bottom: 42px;
    }

    .loan-types-heading h2 {
        font-size: 42px;
    }

    .loan-types-heading > p {
        font-size: 16px;
    }

    .loan-types-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
    }

    .loan-type-card {
        min-height: 430px;
        padding: 24px;
    }

    .loan-type-card h3 {
        font-size: 21px;
    }

}


/* =========================================
   BREAKPOINT: 767px
   MOBILE = 2 COLUMN GRID
========================================= */

@media (max-width: 767px) {

    .loan-types-section {
        padding: 40px 0;
    }

    .loan-types-heading {
        margin-bottom: 34px;
    }

    .section-eyebrow {
        margin-bottom: 9px;
        font-size: 12px;
        letter-spacing: 1.5px;
    }

    .loan-types-heading h2 {
        font-size: 32px;
        line-height: 1.2;
    }

    .loan-types-heading > p {
        margin-top: 14px;
        font-size: 14px;
        line-height: 1.6;
    }


    /* Keep two cards per row */
    .loan-types-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .loan-type-card {
        min-height: 390px;
        padding: 18px;
        border-radius: 17px;
    }

    .loan-card-icon {
        width: 64px;
        height: 64px;

        margin-bottom: 17px;

        border-radius: 17px;
    }

    .loan-card-icon svg {
        width: 37px;
        height: 37px;
    }

    .loan-type-card h3 {
        margin-bottom: 9px;

        font-size: 18px;
        line-height: 1.25;
    }

    .loan-type-card > p {
        margin-bottom: 18px;

        font-size: 13px;
        line-height: 1.55;
    }

    .loan-card-actions {
        gap: 7px;
    }

    .loan-btn {
        min-height: 40px;

        padding: 8px 7px;

        border-radius: 8px;

        font-size: 12px;
    }

    .loan-btn-primary svg {
        width: 14px;
        height: 14px;
    }

}


/* =========================================
   BREAKPOINT: 576px
   STILL 2 COLUMNS
========================================= */

@media (max-width: 576px) {

    .loan-types-heading {
        margin-bottom: 28px;
    }

    .section-eyebrow {
        font-size: 11px;
    }

    .loan-types-heading h2 {
        font-size: 27px;
    }

    .loan-types-heading > p {
        font-size: 13px;
        line-height: 1.55;
    }


    /* User requested 2 columns on mobile */
    .loan-types-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .loan-type-card {
        min-height: 350px;

        padding: 14px 12px;

        border-radius: 14px;
    }

    .loan-type-card::before {
        width: 100px;
        height: 100px;

        top: -50px;
        right: -50px;
    }

    .loan-card-icon {
        width: 52px;
        height: 52px;

        margin-bottom: 13px;

        border-radius: 13px;
    }

    .loan-card-icon svg {
        width: 30px;
        height: 30px;
        stroke-width: 2;
    }

    .loan-type-card h3 {
        margin-bottom: 7px;

        font-size: 15px;
        line-height: 1.25;
    }

    .loan-type-card > p {
        margin-bottom: 14px;

        font-size: 11px;
        line-height: 1.5;
    }


    /* On very small mobile the two buttons remain
       inside each card without overflowing */
    .loan-card-actions {
        grid-template-columns: 100%;
        gap: 6px;
    }

    .loan-btn {
        width: 100%;
        min-height: 35px;

        padding: 7px 5px;

        border-radius: 7px;

        font-size: 10.5px;
    }

    .loan-btn-primary svg {
        width: 12px;
        height: 12px;
    }

}


/* =========================================
   ACCESSIBILITY
========================================= */

@media (prefers-reduced-motion: reduce) {

    .loan-type-card,
    .loan-card-icon,
    .loan-card-icon svg,
    .loan-btn,
    .loan-btn svg {
        transition: none;
    }

}



/* =========================================
   WHY CHOOSE CREDITPEY
========================================= */

.why-creditpey {
    position: relative;
    overflow: hidden;
    padding: 50px 0;
    background: #fff;
}

/* Keep actual content above background */
.why-creditpey .container {
    position: relative;
    z-index: 2;
}


/* =========================================
   MAIN GRID
========================================= */

.why-creditpey__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(400px, 0.85fr);
    align-items: center;
    gap: 70px;
}


/* =========================================
   LEFT CONTENT
========================================= */

.why-creditpey__content {
    min-width: 0;
}


/* =========================================
   HEADING
========================================= */

.why-creditpey__heading {
    position: relative;
    margin-bottom: 28px;
}


/* Small orange accent */
.why-creditpey__heading::before {
    content: "";

    display: block;

    width: 70px;
    height: 4px;

    margin-bottom: 22px;

    border-radius: 50px;

    background: var(--color-11);
}


.why-creditpey__heading h2 {
    margin: 0;

    font-family: var(--font-primary);
    font-size: 48px;
    font-weight: 700;
    line-height: 1.15;

    color: var(--color-secondary);
}


.why-creditpey__heading h2 span {
    color: var(--color-11);
}


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

.why-creditpey__text {
    max-width: 780px;
}


.why-creditpey__text p {
    margin: 0;

    font-family: var(--font-secondary);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.75;

    color: var(--color-secondary);
}


.why-creditpey__text p + p {
    margin-top: 24px;
}


.why-creditpey__text strong {
    font-weight: 700;
    color: var(--color-secondary);
}



/* =========================================
   RIGHT VISUAL
========================================= */

.why-creditpey__visual {
    position: relative;

    width: 100%;
    min-width: 0;
}

.why-creditpey__image {
    position: relative;
    width: 100%;
   
}


/* Soft glow behind future image */
.why-creditpey__image::before {
    content: "";

    position: absolute;

    width: 90%;
    aspect-ratio: 1;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(45, 60, 88, 0.10) 0%,
            rgba(45, 60, 88, 0.04) 45%,
            transparent 70%
        );

    z-index: -1;
}


/* =========================================
   1200px
========================================= */

@media (max-width: 1200px) {


    .why-creditpey__grid {
        grid-template-columns:
            minmax(0, 1.1fr)
            minmax(340px, 0.9fr);

        gap: 45px;
    }


    .why-creditpey__heading h2 {
        font-size: 42px;
    }


    .why-creditpey__text p {
        font-size: 16px;
    }


    .why-creditpey__image {
        min-height: 500px;
    }

}


/* =========================================
   767px
========================================= */

@media (max-width: 767px) {

    .why-creditpey {
        padding: 40px 0;
    }


    .why-creditpey__grid {
        grid-template-columns: 1fr;
        gap: 42px;
    }


    .why-creditpey__heading {
        margin-bottom: 22px;
    }


    .why-creditpey__heading::before {
        width: 55px;
        height: 3px;

        margin-bottom: 16px;
    }


    .why-creditpey__heading h2 {
        font-size: 32px;
    }


    .why-creditpey__text {
        max-width: 100%;
    }


    .why-creditpey__text p {
        font-size: 14px;
        line-height: 1.7;
    }


    .why-creditpey__text p + p {
        margin-top: 18px;
    }

    .why-creditpey__visual {
        width: 100%;
    }


    .why-creditpey__image {
        width: 100%;
        min-height: 420px;

        background-position: center;
        background-size: contain;
    }

}


/* =========================================
   576px
========================================= */

@media (max-width: 576px) {

    .why-creditpey__grid {
        gap: 32px;
    }


    .why-creditpey__heading {
        margin-bottom: 18px;
    }


    .why-creditpey__heading::before {
        width: 45px;

        margin-bottom: 13px;
    }


    .why-creditpey__heading h2 {
        font-size: 27px;
        line-height: 1.2;
    }


    .why-creditpey__text p {
        font-size: 13px;
        line-height: 1.65;
    }


    .why-creditpey__text p + p {
        margin-top: 15px;
    }

    .why-creditpey__image {
        min-height: 320px;
    }

}


/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    .why-feature-card,
    .why-feature-card__icon,
    .why-feature-card__icon svg {
        transition: none;
    }

}














/* =========================================================
   Eligibility & Documents
========================================================= */
.eligibility-sec{
    position:relative;
    padding:50px 0;
    background: url(../images/section-bg.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    font-family:var(--font-primary);
}
.eligibility-sec .container{
    position:relative;
    z-index:2;
}
.eligibility-heading{
    max-width:850px;
    margin:0 auto 55px;
    text-align:center;
}
.eligibility-tag{
    display:inline-flex;
    align-items:center;
    gap:9px;
    margin-bottom:14px;
    color:var(--color-third);
    font-size:var(--size-small);
    font-weight:var(--semibold);
    letter-spacing:2.5px;
    text-transform:uppercase;
}

.eligibility-heading h2{
    margin:0;
    color:var(--color-secondary);
    font-size:var(--size-h2);
    line-height:var(--lh-h2);
    font-weight:var(--bold);
    letter-spacing:-1.5px;
}
.eligibility-heading h2 span{
    color:var(--color-third);
}
.eligibility-heading p{
    max-width:720px;
    margin:18px auto 0;
    color:var(--btc);
    font-size:17px;
    line-height:29px;
}
.eligibility-wrapper{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:26px;
    align-items:stretch;
}
.eligibility-card{
    position:relative;
    padding:34px;
    border:1px solid var(--border-color);
    border-radius:24px;
    background:rgba(255,255,255,.88);
    box-shadow:0 20px 60px rgba(45,60,88,.07);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    transition:var(--transition);
    overflow:hidden;
}
.eligibility-card::before{
    content:"";
    position:absolute;
    top:0;
    left:34px;
    right:34px;
    height:2px;
    background:linear-gradient(90deg,transparent,var(--color-third),transparent);
    opacity:.7;
}
.criteria-card::before{
    background:linear-gradient(90deg,transparent,var(--color-primary),transparent);
}
.eligibility-card:hover{
    transform:translateY(-6px);
    box-shadow:0 25px 70px rgba(45,60,88,.11);
}
.eligibility-card-head{
    display:flex;
    align-items:center;
    gap:17px;
    padding-bottom:27px;
    margin-bottom:8px;
    border-bottom:1px solid var(--border-color);
}
.eligibility-main-icon{
    width:62px;
    height:62px;
    min-width:62px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:18px;
    color:var(--color-third);
    background:linear-gradient(145deg,#fff2ed,#ffe1d6);
}
.criteria-card .eligibility-main-icon{
    color:var(--color-primary);
    background:var(--icon-bg-2);
}
.eligibility-main-icon svg{
    width:29px;
    height:29px;
}
.eligibility-card-head span{
    display:block;
    margin-bottom:5px;
    color:var(--color-third);
    font-size:11px;
    line-height:1.4;
    font-weight:var(--semibold);
    letter-spacing:1.7px;
}
.criteria-card .eligibility-card-head span{
    color:var(--color-primary);
}
.eligibility-card-head h3{
    margin:0;
    color:var(--color-secondary);
    font-size:var(--size-h4);
    line-height:31px;
    font-weight:var(--bold);
}
.eligibility-list{
    display:flex;
    flex-direction:column;
}
.eligibility-list-item{
    display:flex;
    align-items:flex-start;
    gap:15px;
    padding:17px 8px;
    border-bottom:1px solid var(--border-color);
    transition:var(--transition);
}
.eligibility-list-item:last-child{
    border-bottom:0;
}
.eligibility-list-item:hover{
    padding-left:15px;
}
.check-icon{
    width:28px;
    height:28px;
    min-width:28px;
    margin-top:2px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:var(--color-white);
    background:var(--color-third);
    box-shadow:0 6px 15px rgba(235,77,20,.18);
}
.check-icon svg{
    width:16px;
    height:16px;
}
.list-content h4{
    margin:0 0 4px;
    color:var(--color-secondary);
    font-size:16px;
    line-height:23px;
    font-weight:var(--semibold);
}
.list-content p{
    margin:0;
    color:var(--btc);
    font-size:var(--size-small);
    line-height:22px;
}
.criteria-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
    padding-top:18px;
}
.criteria-item{
    position:relative;
    min-height:185px;
    padding:24px 20px;
    border:1px solid var(--border-color);
    border-radius:18px;
    background:linear-gradient(145deg,#fff 0%,#f7f9ff 100%);
    transition:var(--transition);
    overflow:hidden;
}
.criteria-item::after{
    content:"";
    position:absolute;
    width:80px;
    height:80px;
    right:-35px;
    bottom:-35px;
    border-radius:50%;
    background:rgba(7,116,255,.05);
    transition:var(--transition);
}
.criteria-item:hover{
    transform:translateY(-4px);
    border-color:var(--light-border);
    box-shadow:0 12px 30px rgba(45,60,88,.07);
}
.criteria-item:hover::after{
    transform:scale(1.5);
}
.criteria-icon{
    width:58px;
    height:58px;
    min-width:58px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:18px;
    border-radius:14px;
    background:#fff;
    box-shadow:0 6px 18px rgba(45,60,88,.09);
    overflow:hidden;
    transition:var(--transition);
}
.criteria-icon svg{
    width:58px;
    height:58px;
    display:block;
}
.criteria-item:hover .criteria-icon{
    transform:translateY(-3px);
    box-shadow:0 10px 25px rgba(45,60,88,.13);
}
.criteria-item span{
    display:block;
    margin-bottom:5px;
    color:var(--placeholder);
    font-size:12px;
    line-height:18px;
    font-weight:var(--medium);
}
.criteria-item h4{
    margin:0 0 7px;
    color:var(--color-secondary);
    font-size:21px;
    line-height:27px;
    font-weight:var(--bold);
}
.criteria-item:nth-child(2) h4,
.criteria-item:nth-child(3) h4,
.criteria-item:nth-child(4) h4{
    color:var(--color-third);
}
.criteria-item p{
    margin:0;
    color:var(--btc);
    font-size:13px;
    line-height:20px;
}
.criteria-note{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:14px;
    padding:15px 17px;
    border:1px solid rgba(235,77,20,.12);
    border-radius:14px;
    background:linear-gradient(90deg,rgba(235,77,20,.06),rgba(235,77,20,.015));
}
.note-icon{
    width:31px;
    height:31px;
    min-width:31px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    color:var(--color-third);
    background:rgba(235,77,20,.09);
}
.note-icon svg{
    width:17px;
    height:17px;
}
.criteria-note p{
    margin:0;
    color:var(--btc);
    font-size:13px;
    line-height:20px;
}

/* =========================================================
   Responsive - 991px
========================================================= */
@media(max-width:991px){
    .eligibility-heading{
        margin-bottom:42px;
    }
    .eligibility-heading h2{
        font-size:40px;
        line-height:50px;
    }
    .eligibility-wrapper{
        grid-template-columns:1fr;
        max-width:760px;
        margin:0 auto;
    }
    .eligibility-card{
        padding:30px;
    }
    .criteria-item{
        min-height:auto;
    }
}

/* =========================================================
   Responsive - 767px
========================================================= */
@media(max-width:767px){
    .eligibility-sec{
        padding:40px 0;
    }
    .eligibility-heading{
        margin-bottom:35px;
    }
    .eligibility-heading h2{
        font-size:34px;
        line-height:43px;
        letter-spacing:-1px;
    }
    .eligibility-heading p{
        margin-top:14px;
        font-size:15px;
        line-height:25px;
    }
    .eligibility-card{
        padding:25px;
        border-radius:20px;
    }
    .eligibility-card-head{
        padding-bottom:22px;
    }
    .eligibility-main-icon{
        width:55px;
        height:55px;
        min-width:55px;
        border-radius:16px;
    }
    .eligibility-card-head h3{
        font-size:21px;
        line-height:28px;
    }
    .criteria-grid{
        gap:12px;
    }
    .criteria-item{
        padding:20px 17px;
    }
}

/* =========================================================
   Responsive - 576px
========================================================= */
@media(max-width:576px){
    .eligibility-heading{
        margin-bottom:30px;
    }
    .eligibility-tag{
        font-size:11px;
        letter-spacing:1.5px;
    }
    .eligibility-tag::before,
    .eligibility-tag::after{
        width:14px;
    }
    .eligibility-heading h2{
        font-size:29px;
        line-height:38px;
    }
    .eligibility-heading p{
        font-size:14px;
        line-height:23px;
    }
    .eligibility-wrapper{
        gap:18px;
    }
    .eligibility-card{
        padding:20px 17px;
        border-radius:18px;
    }
    .eligibility-card::before{
        left:20px;
        right:20px;
    }
    .eligibility-card-head{
        gap:13px;
        padding-bottom:19px;
    }
    .eligibility-main-icon{
        width:49px;
        height:49px;
        min-width:49px;
        border-radius:14px;
    }
    .eligibility-main-icon svg{
        width:24px;
        height:24px;
    }
    .eligibility-card-head span{
        font-size:9px;
        letter-spacing:1.2px;
    }
    .eligibility-card-head h3{
        font-size:18px;
        line-height:25px;
    }
    .eligibility-list-item{
        gap:12px;
        padding:15px 3px;
    }
    .eligibility-list-item:hover{
        padding-left:3px;
    }
    .check-icon{
        width:25px;
        height:25px;
        min-width:25px;
    }
    .list-content h4{
        font-size:15px;
        line-height:21px;
    }
    .list-content p{
        font-size:13px;
        line-height:20px;
    }
    .criteria-grid{
        grid-template-columns:1fr;
    }
    .criteria-item{
        display:flex;
        align-items:flex-start;
        gap:15px;
        padding:18px;
    }
    .criteria-icon{
        width:44px;
        height:44px;
        min-width:44px;
        margin-bottom:0;
    }
    .criteria-item h4{
        font-size:19px;
        line-height:25px;
    }
    .criteria-note{
        align-items:flex-start;
    }
}









/* =========================================================
   Loan Application Process
========================================================= */
.loan-process-sec{
    position:relative;
    padding:50px 0;
    background:var(--color-white);
    overflow:hidden;
}
.loan-process-heading{
    max-width:900px;
    margin:0 auto 70px;
    text-align:center;
}
.loan-process-tag{
    display:inline-flex;
    align-items:center;
    gap:12px;
    margin-bottom:14px;
    color:var(--color-third);
    font-size:var(--size-small);
    line-height:20px;
    font-weight:var(--semibold);
    letter-spacing:2.5px;
    text-transform:uppercase;
}
.loan-process-tag::before,
.loan-process-tag::after{
    content:"";
    width:28px;
    height:2px;
    border-radius:10px;
    background:var(--color-third);
}
.loan-process-heading h2{
    margin:0;
    color:var(--color-secondary);
    font-family:var(--font-primary);
    font-size:var(--size-h2);
    line-height:var(--lh-h2);
    font-weight:var(--bold);
    letter-spacing:-1.5px;
}
.loan-process-heading h2 span{
    color:var(--color-third);
}
.loan-process-heading p{
    max-width:720px;
    margin:16px auto 0;
    color:var(--btc);
    font-size:17px;
    line-height:29px;
}
.loan-process-wrap{
    position:relative;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
}
.process-card{
    position:relative;
    min-width:0;
    padding:38px 24px 34px;
    border:1px solid var(--border-color);
    border-radius:22px;
    background:var(--color-white);
    box-shadow:0 15px 45px rgba(45,60,88,.07);
    text-align:center;
    transition:var(--transition);
}
.process-card:nth-child(odd){
    background:linear-gradient(180deg,#fff 0%,#fff 72%,#fff8f4 100%);
}
.process-card:nth-child(even){
    background:linear-gradient(180deg,#fff 0%,#fff 72%,#f3f7ff 100%);
}
.process-card:hover{
    transform:translateY(-8px);
    box-shadow:0 22px 55px rgba(45,60,88,.12);
}
.process-number{
    position:absolute;
    top:-35px;
    left:50%;
    z-index:3;
    width:70px;
    height:70px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(235,77,20,.45);
    border-radius:50%;
    color:var(--color-third);
    background:linear-gradient(145deg,#fff,#fff0e9);
    box-shadow:0 8px 22px rgba(235,77,20,.12);
    font-size:23px;
    line-height:1;
    font-weight:var(--bold);
    transform:translateX(-50%);
}
.process-number-blue{
    color:var(--color-primary);
    border-color:rgba(7,116,255,.35);
    background:linear-gradient(145deg,#fff,#edf4ff);
    box-shadow:0 8px 22px rgba(7,116,255,.12);
}
.process-icon{
    width:150px;
    height:150px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:17px auto 25px;
    border-radius:30px;
    transition:var(--transition);
}
.process-icon-orange{
    background:linear-gradient(145deg,#fff6f1,#ffeadf);
}
.process-icon-blue{
    background:linear-gradient(145deg,#f4f7ff,#e8efff);
}
.process-icon svg{
    width:120px;
    height:120px;
    display:block;
}
.process-card:hover .process-icon{
    transform:translateY(-5px) scale(1.03);
}
.process-card h3{
    margin:0 0 12px;
    color:var(--color-secondary);
    font-family:var(--font-primary);
    font-size:20px;
    line-height:28px;
    font-weight:var(--bold);
}
.process-card p{
    max-width:255px;
    margin:0 auto;
    color:var(--btc);
    font-size:14px;
    line-height:23px;
}
.process-connector{
    position:absolute;
    z-index:4;
    top:-53px;
    left:72%;
    width:58%;
    pointer-events:none;
}
.process-connector svg{
    width:100%;
    height:auto;
    display:block;
}

/* =========================================================
   Responsive - 991px
========================================================= */
@media(max-width:991px){
    .loan-process-heading{
        margin-bottom:65px;
    }
    .loan-process-heading h2{
        font-size:40px;
        line-height:50px;
    }
    .loan-process-wrap{
        grid-template-columns:repeat(2,1fr);
        gap:65px 24px;
        max-width:760px;
        margin:0 auto;
    }
    .process-connector{
        display:none;
    }
    .process-card{
        padding:36px 25px 32px;
    }
}

/* =========================================================
   Responsive - 767px
========================================================= */
@media(max-width:767px){
    .loan-process-sec{
        padding:40px 0;
    }
    .loan-process-heading{
        margin-bottom:62px;
    }
    .loan-process-heading h2{
        font-size:34px;
        line-height:43px;
        letter-spacing:-1px;
    }
    .loan-process-heading p{
        margin-top:13px;
        font-size:15px;
        line-height:25px;
    }
    .loan-process-tag{
        font-size:12px;
        letter-spacing:2px;
    }
    .loan-process-wrap{
        gap:60px 18px;
    }
    .process-icon{
        width:135px;
        height:135px;
        border-radius:27px;
    }
    .process-icon svg{
        width:108px;
        height:108px;
    }
    .process-card h3{
        font-size:19px;
        line-height:27px;
    }
}

/* =========================================================
   Responsive - 576px
========================================================= */
@media(max-width:576px){
    .loan-process-heading{
        margin-bottom:60px;
    }
    .loan-process-tag{
        gap:8px;
        font-size:10px;
        line-height:18px;
        letter-spacing:1.5px;
    }
    .loan-process-tag::before,
    .loan-process-tag::after{
        width:18px;
    }
    .loan-process-heading h2{
        font-size:29px;
        line-height:38px;
    }
    .loan-process-heading p{
        font-size:14px;
        line-height:23px;
    }
    .loan-process-wrap{
        grid-template-columns:1fr;
        gap:58px;
        max-width:390px;
    }
    .process-card{
        padding:35px 20px 30px;
        border-radius:20px;
    }
    .process-number{
        top:-30px;
        width:60px;
        height:60px;
        font-size:20px;
    }
    .process-icon{
        width:135px;
        height:135px;
        margin:15px auto 22px;
    }
    .process-card h3{
        margin-bottom:8px;
        font-size:19px;
        line-height:26px;
    }
    .process-card p{
        max-width:290px;
        font-size:13px;
        line-height:21px;
    }
}










/* =========================================================
   Rates & Charges
========================================================= */
.rates-charges-sec{
    position:relative;
    padding:50px 0;
    background:url(../images/section-bg.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.rates-charges-wrap{
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);
    gap:55px;
    align-items:center;
}
.rates-content{
    position:relative;
    z-index:2;
}
.rates-heading{
    max-width:680px;
    margin-bottom:35px;
}
.rates-tag{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-bottom:14px;
    color:var(--color-third);
    font-size:var(--size-small);
    line-height:20px;
    font-weight:var(--semibold);
    letter-spacing:2px;
    text-transform:uppercase;
}
.rates-tag::before{
    content:"";
    width:26px;
    height:2px;
    border-radius:10px;
    background:var(--color-third);
}
.rates-heading h2{
    margin:0;
    color:var(--color-secondary);
    font-family:var(--font-primary);
    font-size:var(--size-h2);
    line-height:var(--lh-h2);
    font-weight:var(--bold);
    letter-spacing:-1.5px;
}
.rates-heading h2 span{
    color:var(--color-third);
}
.rates-heading p{
    max-width:620px;
    margin:15px 0 0;
    color:var(--btc);
    font-size:16px;
    line-height:27px;
}
.rates-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}
.rate-item{
    position:relative;
    min-height:142px;
    display:flex;
    align-items:flex-start;
    gap:15px;
    padding:20px 38px 20px 18px;
    border:1px solid var(--border-color);
    border-radius:17px;
    background:rgba(255,255,255,.92);
    box-shadow:0 7px 25px rgba(45,60,88,.035);
    overflow:hidden;
    transition:var(--transition);
}
.rate-item::after{
    content:"";
    position:absolute;
    right:-38px;
    bottom:-45px;
    width:100px;
    height:100px;
    border-radius:50%;
    background:rgba(7,116,255,.035);
    transition:var(--transition);
}
.rate-item:hover{
    border-color:var(--light-border);
    transform:translateY(-4px);
    box-shadow:0 14px 35px rgba(45,60,88,.08);
}
.rate-item:hover::after{
    transform:scale(1.4);
}
.rate-icon{
    width:58px;
    height:58px;
    min-width:58px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:15px;
    background:#fff;
    box-shadow:0 6px 18px rgba(45,60,88,.07);
    overflow:hidden;
    transition:var(--transition);
}
.rate-icon svg{
    width:58px;
    height:58px;
    display:block;
}
.rate-item:hover .rate-icon{
    transform:translateY(-3px) scale(1.03);
}
.rate-info{
    position:relative;
    z-index:2;
    min-width:0;
}
.rate-info h3{
    margin:2px 0 5px;
    color:var(--color-secondary);
    font-size:16px;
    line-height:22px;
    font-weight:var(--bold);
}
.rate-info p{
    margin:0;
    color:var(--btc);
    font-size:13px;
    line-height:20px;
}
.rates-image-wrap{
    position:relative;
    min-height:620px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
}
.rates-image-wrap::before{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:470px;
    height:470px;
    border-radius:50%;
    background:linear-gradient(145deg,rgba(7,116,255,.07),rgba(235,77,20,.07));
    transform:translate(-50%,-50%);
}
.rates-image-wrap::after{
    content:"";
    position:absolute;
    top:13%;
    right:1%;
    width:95px;
    height:95px;
    border-radius:50%;
    background:rgba(235,77,20,.06);
}
.rates-image-wrap img{
    position:relative;
    z-index:2;
    display:block;
    width:100%;
    max-width:560px;
    height:auto;
    object-fit:contain;
}

/* =========================================================
   991px
========================================================= */
@media(max-width:991px){
    .rates-charges-wrap{
        grid-template-columns:1fr;
        gap:45px;
    }
    .rates-heading{
        max-width:750px;
    }
    .rates-heading h2{
        font-size:40px;
        line-height:50px;
    }
    .rates-grid{
        max-width:800px;
    }
    .rates-image-wrap{
        min-height:450px;
        align-items:center;
    }
    .rates-image-wrap::before{
        width:420px;
        height:420px;
    }
    .rates-image-wrap img{
        max-width:580px;
    }
}

/* =========================================================
   767px
========================================================= */
@media(max-width:767px){
    .rates-charges-sec{
        padding:40px 0;
    }
    .rates-heading{
        margin-bottom:30px;
    }
    .rates-heading h2{
        font-size:34px;
        line-height:43px;
        letter-spacing:-1px;
    }
    .rates-heading p{
        font-size:15px;
        line-height:25px;
    }
    .rates-grid{
        grid-template-columns:1fr;
    }
    .rate-item{
        min-height:auto;
        padding:18px 42px 18px 17px;
    }
    .rates-image-wrap{
        min-height:390px;
    }
    .rates-image-wrap::before{
        width:360px;
        height:360px;
    }
    .rates-image-wrap img{
        max-width:500px;
    }
}

/* =========================================================
   576px
========================================================= */
@media(max-width:576px){
    .rates-charges-wrap{
        gap:35px;
    }
    .rates-tag{
        gap:8px;
        font-size:10px;
        line-height:18px;
        letter-spacing:1.4px;
    }
    .rates-tag::before{
        width:18px;
    }
    .rates-heading h2{
        font-size:29px;
        line-height:38px;
    }
    .rates-heading p{
        font-size:14px;
        line-height:23px;
    }
    .rate-item{
        gap:13px;
        padding:16px 36px 16px 14px;
        border-radius:15px;
        flex-direction: column;
    }
    .rate-icon{
        width:52px;
        height:52px;
        min-width:52px;
        border-radius:13px;
    }
    .rate-icon svg{
        width:52px;
        height:52px;
    }
    .rate-info h3{
        margin-top:1px;
        font-size:15px;
        line-height:21px;
    }
    .rate-info p{
        font-size:12px;
        line-height:19px;
    }
    .rate-count{
        top:12px;
        right:12px;
        font-size:15px;
    }
    .rates-image-wrap{
        min-height:310px;
    }
    .rates-image-wrap::before{
        width:290px;
        height:290px;
    }
    .rates-image-wrap::after{
        width:65px;
        height:65px;
    }
}


/*==================================== Loan Calculator ===============================================*/


.loan-calculator-two{
    padding: 50px 0;
}

@media (max-width: 767px){
    .loan-calculator-two{
        padding: 40px 0;
    }
}
/*==================================== Personal Loan Locations ===============================================*/

/* =========================================================
   Personal Loan Locations
========================================================= */
.loan-locations{
    position:relative;
    padding: 50px 0 55px;
    background-color:var(--color-white);
    background-image:url("../images/location-bg.jpg");
    background-repeat:no-repeat;
    background-position:center bottom;
    background-size:cover;
    overflow:hidden;
}
.loan-locations::before{
    content:"";
    position:absolute;
    top:-180px;
    left:-150px;
    width:430px;
    height:430px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(235,77,20,.07) 0%,rgba(235,77,20,0) 70%);
    pointer-events:none;
}
.loan-locations::after{
    content:"";
    position:absolute;
    right:-150px;
    bottom:-180px;
    width:480px;
    height:480px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(7,116,255,.07) 0%,rgba(7,116,255,0) 70%);
    pointer-events:none;
}
.loan-locations .container{
    position:relative;
    z-index:2;
}

/* Heading */
.loan-locations-heading{
    max-width:900px;
    margin:0 auto 48px;
    text-align:center;
}
.loan-locations-heading .section-subtitle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-bottom:14px;
    padding:7px 17px;
    border-radius:50px;
    color:var(--color-third);
    background:rgba(235,77,20,.08);
    font-family:var(--font-primary);
    font-size:12px;
    line-height:18px;
    font-weight:var(--semibold);
    letter-spacing:1.6px;
    text-transform:uppercase;
}
.loan-locations-heading h2{
    margin:0;
    color:var(--color-secondary);
    font-family:var(--font-primary);
    font-size:var(--size-h2);
    line-height:var(--lh-h2);
    font-weight:var(--bold);
    letter-spacing:-1.5px;
}
.loan-locations-heading h2 span{
    color:var(--color-third);
}
.loan-locations-heading p{
    max-width:700px;
    margin:13px auto 0;
    color:var(--btc);
    font-family:var(--font-primary);
    font-size:16px;
    line-height:27px;
}

/* Grid */
.loan-locations-grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:18px;
}

/* Card */
.location-card{
    position:relative;
    min-width:0;
    min-height:205px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:18px 17px 17px;
    border:1px solid var(--border-color);
    border-radius:20px;
    color:inherit;
    background:rgba(255,255,255,.94);
    box-shadow:0 8px 30px rgba(45,60,88,.045);
    text-decoration:none;
    isolation:isolate;
    overflow:hidden;
    transition:transform .4s ease,border-color .4s ease,box-shadow .4s ease;
}
.location-card::before{
    content:"";
    position:absolute;
    inset:auto -45px -65px auto;
    z-index:-1;
    width:145px;
    height:145px;
    border-radius:50%;
    background:linear-gradient(145deg,rgba(7,116,255,.08),rgba(235,77,20,.04));
    transform:scale(.75);
    opacity:0;
    transition:var(--transition);
}
.location-card::after{
    content:"";
    position:absolute;
    top:0;
    left:18%;
    width:64%;
    height:2px;
    border-radius:0 0 10px 10px;
    background:linear-gradient(90deg,transparent,var(--color-third),transparent);
    opacity:0;
    transform:scaleX(.3);
    transition:var(--transition);
}
.location-card:hover{
    border-color:rgba(235,77,20,.28);
    transform:translateY(-8px);
    box-shadow:0 18px 45px rgba(45,60,88,.11),0 5px 16px rgba(235,77,20,.06);
}
.location-card:hover::before{
    opacity:1;
    transform:scale(1);
}
.location-card:hover::after{
    opacity:1;
    transform:scaleX(1);
}

/* Illustration */
.location-visual{
    position:relative;
    height:105px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:10px;
    border-radius:15px;
    background:linear-gradient(145deg,#fff 20%,#fff9f5 100%);
    overflow:hidden;
}
.location-visual::before{
    content:"";
    position:absolute;
    left:50%;
    bottom:9px;
    width:100px;
    height:24px;
    border-radius:50%;
    background:rgba(235,77,20,.06);
    filter:blur(6px);
    transform:translateX(-50%);
}
.location-visual svg{
    position:relative;
    z-index:2;
    width:110px;
    height:78px;
    transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
.location-card:hover .location-visual svg{
    transform:translateY(-4px) scale(1.07);
}

/* Bottom */
.location-card-bottom{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}
.location-card-bottom div{
    min-width:0;
}
.location-card-bottom span:not(.location-arrow){
    display:block;
    margin-bottom:2px;
    color:var(--btc);
    font-size:11px;
    line-height:16px;
    font-weight:var(--regular);
}
.location-card-bottom h3{
    margin:0;
    color:var(--color-secondary);
    font-family:var(--font-primary);
    font-size:16px;
    line-height:22px;
    font-weight:var(--bold);
    transition:var(--transition);
}
.location-arrow{
    width:38px;
    height:38px;
    min-width:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:var(--color-third);
    background:#fff2ec;
    transition:var(--transition);
}
.location-arrow svg{
    width:17px;
    height:17px;
    transition:transform .4s ease;
}
.location-card:hover .location-card-bottom h3{
    color:var(--color-third);
}
.location-card:hover .location-arrow{
    color:var(--color-white);
    background:var(--color-third);
    box-shadow:0 8px 18px rgba(235,77,20,.22);
}
.location-card:hover .location-arrow svg{
    transform:translateX(3px);
}

/* First card subtle featured treatment */
.location-card:first-child{
    border-color:rgba(235,77,20,.32);
    box-shadow:0 10px 35px rgba(235,77,20,.07);
}
.location-card:first-child .location-arrow{
    color:var(--color-white);
    background:var(--color-third);
}

/* =========================================================
   991px
========================================================= */
@media(max-width:991px){
    .loan-locations-heading{
        margin-bottom:40px;
    }
    .loan-locations-heading h2{
        font-size:40px;
        line-height:50px;
    }
    .loan-locations-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:16px;
    }
    .location-card{
        min-height:200px;
    }
}

/* =========================================================
   767px
========================================================= */
@media(max-width:767px){
    .loan-locations{
        padding:40px 0 50px;
    }
    .loan-locations-heading{
        margin-bottom:35px;
    }
    .loan-locations-heading h2{
        font-size:34px;
        line-height:43px;
        letter-spacing:-1px;
    }
    .loan-locations-heading p{
        font-size:15px;
        line-height:25px;
    }
    .loan-locations-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:14px;
    }
    .location-card{
        min-height:190px;
        padding:15px;
        border-radius:17px;
    }
    .location-visual{
        height:95px;
    }
    .location-visual svg{
        width:100px;
        height:72px;
    }
}

/* =========================================================
   576px
========================================================= */
@media(max-width:576px){
    .loan-locations-heading{
        margin-bottom:30px;
    }
    .loan-locations-heading .section-subtitle{
        margin-bottom:11px;
        padding:6px 13px;
        font-size:10px;
        line-height:16px;
        letter-spacing:1.2px;
    }
    .loan-locations-heading h2{
        font-size:29px;
        line-height:38px;
    }
    .loan-locations-heading p{
        margin-top:10px;
        font-size:14px;
        line-height:23px;
    }
    .loan-locations-grid{
        grid-template-columns:100%;
        gap:12px;
    }
    .location-card{
        min-height:auto;
        flex-direction:row;
        align-items:center;
        gap:14px;
        padding:13px 14px;
        border-radius:15px;
    }
    .location-visual{
        width:92px;
        min-width:92px;
        height:78px;
        margin:0;
        border-radius:13px;
    }
    .location-visual svg{
        width:80px;
        height:60px;
    }
    .location-card-bottom{
        width:100%;
    }
    .location-card-bottom h3{
        font-size:15px;
        line-height:21px;
    }
    .location-card-bottom span:not(.location-arrow){
        font-size:10px;
        line-height:15px;
    }
    .location-arrow{
        width:35px;
        height:35px;
        min-width:35px;
    }
    .location-card:hover{
        transform:translateY(-3px);
    }
}