/*==================================
    HELOC SECTION
==================================*/

.heloc-section{
    width:100%;
    max-width:1180px;
    margin:0 auto;
    padding:90px 20px;
}

/*==================================
    TOP FEATURES
==================================*/

.heloc-features{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:55px;
    margin-bottom:120px;
}

.feature-item{
    text-align:left;
}

.feature-icon{
    width:38px;
    height:38px;
    border-radius:50%;
    background:#edf5ff;
    color:#2d6cdf;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:16px;
    font-size:14px;
}

.feature-item h3{
    font-size:17px;
    font-weight:600;
    color:#222;
    margin-bottom:8px;
}

.feature-item p{
    font-size:14px;
    line-height:1.6;
    color:#777;
}

/*==================================
    TITLE
==================================*/

.heloc-title{
    text-align:center;
    margin-bottom:90px;
}

.heloc-title h2{
    font-size:50px;
    font-weight:700;
    color:#222;
    margin-bottom:14px;
    line-height:1.1;
}

.heloc-title p{
    font-size:18px;
    color:#555;
}

/*==================================
    TIMELINE
==================================*/

.heloc-timeline{
    position:relative;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:50px;
}

.timeline-line{
    position:absolute;
    top:24px;
    left:13%;
    right:13%;
    height:1px;
    background:#d8d8d8;
    z-index:1;
}

.timeline-step{
    position:relative;
    text-align:center;
    z-index:2;
}

.timeline-icon{
    width:48px;
    height:48px;
    background:#fff;
    border:1px solid #d9d9d9;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 20px;
    color:#555;
    font-size:18px;
}

.timeline-step h4{
    font-size:14px;
    font-weight:700;
    letter-spacing:.6px;
    margin-bottom:10px;
    color:#222;
}

.timeline-step p{
    max-width:220px;
    margin:0 auto;
    font-size:14px;
    line-height:1.6;
    color:#777;
}

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

@media (max-width:991px){

    .heloc-section{
        padding:70px 24px;
    }

    .heloc-features{
        grid-template-columns:repeat(2,1fr);
        gap:40px;
        margin-bottom:90px;
    }

    .heloc-title h2{
        font-size:40px;
    }

    .heloc-timeline{
        gap:30px;
    }

    .timeline-line{
        left:10%;
        right:10%;
    }

}

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

@media (max-width:767px){

    .heloc-section{
        padding:60px 20px;
    }

    .heloc-features{
        grid-template-columns:1fr;
        gap:35px;
        margin-bottom:70px;
    }

    .feature-item{
        text-align:center;
    }

    .feature-icon{
        margin:0 auto 16px;
    }

    .heloc-title{
        margin-bottom:60px;
    }

    .heloc-title h2{
        font-size:34px;
    }

    .heloc-title p{
        font-size:16px;
    }

    .heloc-timeline{
        grid-template-columns:1fr;
        gap:50px;
    }

    .timeline-line{
        display:none;
    }
}

/*=====================================
    COMMON USES FOR HELOC
======================================*/

.heloc-uses{
    width:100%;
    overflow:hidden;
    background:#fff;
    font-family:"Inter",sans-serif;
}

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

.heloc-banner{
    position:relative;
    min-height:430px;
    background:url("../img/heloc-hero2.png") center center/cover no-repeat;
    display:flex;
    align-items:flex-end;
}

.heloc-overlay{
    position:absolute;
    inset:0;
    /* background:rgba(0,0,0,.45); */
}

.heloc-content{
    position:relative;
    z-index:2;
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding:0 50px 40px;
}

.heloc-content h2{
    color:#fff;
    font-size:44px;
    font-weight:700;
    line-height:1.1;
    margin-bottom:40px;
    letter-spacing:-.5px;
}

/*=====================================
    USES
======================================*/

.uses-list{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:35px;
}

.use-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    color:#fff;
}

.use-icon{
    width:46px;
    height:46px;
    border:1px solid rgba(255,255,255,.8);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:14px;
    transition:.35s ease;
}

.use-icon i{
    font-size:16px;
    color:#fff;
}

.use-item span{
    font-size:14px;
    line-height:1.5;
    font-weight:500;
}

.use-item:hover .use-icon{
    background:#ffffff;
}

.use-item:hover .use-icon i{
    color:#0B3A82;
}

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

.heloc-cta{
    max-width:1200px;
    margin:0 auto;
    padding:55px 50px;
    display:grid;
    grid-template-columns:1fr 420px;
    align-items:center;
    gap:70px;
    background:#fff;
}

.cta-left h3{
    font-size:42px;
    line-height:1.1;
    font-weight:700;
    color:#222;
    text-transform:uppercase;
}

.cta-right{
    display:flex;
    flex-direction:column;
    gap:22px;
}

.cta-right p{
    color:#666;
    font-size:15px;
    line-height:1.7;
}

.btn-check{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    height:52px;
    width:100%;
    max-width:340px;
    background:#0A3B8D;
    color:#fff;
    text-decoration:none;
    font-size:13px;
    font-weight:700;
    letter-spacing:.6px;
    text-transform:uppercase;
    transition:.3s ease;
}

.btn-check:hover{
    background:#082f71;
}

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

@media (max-width:991px){

    .heloc-banner{
        min-height:380px;
    }

    .heloc-content{
        padding:0 30px 35px;
    }

    .heloc-content h2{
        font-size:36px;
        margin-bottom:30px;
    }

    .uses-list{
        grid-template-columns:repeat(3,1fr);
        row-gap:30px;
    }

    .heloc-cta{
        grid-template-columns:1fr;
        gap:35px;
        padding:45px 30px;
    }

    .cta-left h3{
        font-size:34px;
    }

    .cta-right{
        align-items:flex-start;
    }

}

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

@media (max-width:767px){

    .heloc-banner{
        min-height:520px;
        align-items:center;
    }

    .heloc-content{
        padding:40px 20px;
        text-align:center;
    }

    .heloc-content h2{
        font-size:30px;
        margin-bottom:35px;
    }

    .uses-list{
        grid-template-columns:repeat(2,1fr);
        gap:25px;
    }

    .use-item:last-child{
        grid-column:1 / -1;
        justify-self:center;
    }

    .heloc-cta{
        padding:40px 20px;
        text-align:center;
    }

    .cta-left h3{
        font-size:28px;
    }

    .cta-right{
        align-items:center;
    }

    .btn-check{
        max-width:100%;
    }

}

@media (max-width:480px){

    .uses-list{
        grid-template-columns:1fr;
    }

    .use-item:last-child{
        grid-column:auto;
    }

}