/* ==========================================================
   BANKHELPLINE
   TRUST & STATS SECTION
========================================================== */

:root{

    --bh-primary:#E60023;
    --bh-primary-dark:#C4001D;
    --bh-secondary:#0F172A;
    --bh-text:#475569;
    --bh-light:#F8FAFC;
    --bh-border:#E5E7EB;
    --bh-shadow:0 18px 45px rgba(15,23,42,.08);
    --bh-radius:22px;

}


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

.bh-stats{

    padding:100px 0;
    background:#fff;
    position:relative;
    overflow:hidden;

}

.bh-stats::before{

    content:"";
    position:absolute;
    top:-250px;
    right:-250px;
    width:500px;
    height:500px;
    background:rgba(230,0,35,.04);
    border-radius:50%;
    z-index:0;

}

.bh-stats::after{

    content:"";
    position:absolute;
    left:-200px;
    bottom:-200px;
    width:420px;
    height:420px;
    background:rgba(230,0,35,.03);
    border-radius:50%;
    z-index:0;

}

.bh-stats .container{

    position:relative;
    z-index:2;

}


/* ==========================================================
   BADGE
========================================================== */

.section-badge{

    display:inline-flex;
    align-items:center;
    gap:10px;

    background:#FFF1F2;
    color:var(--bh-primary);

    padding:12px 22px;

    border-radius:50px;

    font-weight:700;

    font-size:15px;

}


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

.section-title{

    font-size:52px;
    font-weight:900;
    color:var(--bh-secondary);
    line-height:1.2;
    margin-bottom:25px;

}

.section-title span{

    color:var(--bh-primary);

}

.section-subtitle{

    max-width:850px;

    margin:auto;

    color:var(--bh-text);

    font-size:19px;

    line-height:1.9;

}


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

.stats-card{

    background:#fff;

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

    border-radius:var(--bh-radius);

    padding:40px 30px;

    height:100%;

    text-align:center;

    transition:.35s;

    position:relative;

    overflow:hidden;

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

}

.stats-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    background:var(--bh-primary);

    transform:scaleX(0);

    transition:.35s;

}

.stats-card:hover{

    transform:translateY(-12px);

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

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

}

.stats-card:hover::before{

    transform:scaleX(1);

}


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

.stats-icon{

    width:82px;

    height:82px;

    margin:auto;

    margin-bottom:28px;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:34px;

    transition:.35s;

}

.stats-card:hover .stats-icon{

    transform:rotate(-10deg) scale(1.08);

}


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

.bg-red{

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

}

.bg-blue{

    background:linear-gradient(135deg,#2563EB,#1D4ED8);

}

.bg-green{

    background:linear-gradient(135deg,#22C55E,#16A34A);

}

.bg-orange{

    background:linear-gradient(135deg,#F59E0B,#EA580C);

}


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

.stats-card h3{

    font-size:52px;

    font-weight:900;

    color:var(--bh-secondary);

    margin-bottom:12px;

}

.stats-card h5{

    font-size:24px;

    font-weight:800;

    margin-bottom:18px;

    color:var(--bh-secondary);

}

.stats-card p{

    color:var(--bh-text);

    line-height:1.8;

    font-size:16px;

}


/* ==========================================================
   TRUST STRIP
========================================================== */

.trust-strip{

    background:#fff;

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

    border-radius:18px;

    padding:25px;

    margin-top:70px;

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

}

.trust-item{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    font-weight:700;

    color:var(--bh-secondary);

    transition:.30s;

}

.trust-item i{

    color:var(--bh-primary);

    font-size:24px;

}

.trust-item:hover{

    color:var(--bh-primary);

    transform:translateY(-3px);

}
/* ==========================================================
   PROGRESS SECTION
========================================================== */

.progress-wrapper{

    margin-top:70px;

    background:#fff;

    border-radius:24px;

    padding:45px;

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

    box-shadow:0 18px 45px rgba(15,23,42,.06);

}

.progress-wrapper h6{

    font-size:16px;

    font-weight:700;

    color:var(--bh-secondary);

    margin-bottom:14px;

}

.modern-progress{

    height:16px;

    border-radius:50px;

    overflow:hidden;

    background:#EDF2F7;

}

.progress-bar{

    border-radius:50px;

    font-size:12px;

    font-weight:700;

    display:flex;

    justify-content:flex-end;

    align-items:center;

    padding-right:10px;

    color:#fff;

    animation:progressAnimation 2s ease;

}

.progress-red{

    background:linear-gradient(90deg,#FF1400,#E60023);

}

.progress-green{

    background:linear-gradient(90deg,#22C55E,#16A34A);

}

.progress-blue{

    background:linear-gradient(90deg,#2563EB,#1D4ED8);

}


/* ==========================================================
   COUNTER
========================================================== */

.counter{

    display:inline-block;

    transition:.3s;

}


/* ==========================================================
   CARD GLOW EFFECT
========================================================== */

.stats-card:hover{

    box-shadow:
        0 20px 45px rgba(15,23,42,.08),
        0 0 0 1px rgba(230,0,35,.08);

}

.stats-card:hover .stats-icon{

    box-shadow:0 18px 35px rgba(230,0,35,.22);

}


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

.stats-icon i{

    transition:.35s;

}

.stats-card:hover .stats-icon i{

    transform:scale(1.15);

}


/* ==========================================================
   TRUST STRIP
========================================================== */

.trust-item{

    padding:14px 18px;

    border-radius:14px;

}

.trust-item:hover{

    background:#FFF3F3;

}


/* ==========================================================
   SCROLL ANIMATION READY
========================================================== */

.stats-card{

    opacity:1;

    transform:translateY(0);

}

.fade-up{

    opacity:0;

    transform:translateY(40px);

    transition:.8s ease;

}

.fade-up.show{

    opacity:1;

    transform:translateY(0);

}


/* ==========================================================
   KEYFRAMES
========================================================== */

@keyframes progressAnimation{

    from{

        width:0;

    }

}

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}

.stats-icon{

    animation:floating 4s ease-in-out infinite;

}


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

@media(max-width:991px){

    .bh-stats{

        padding:80px 0;

    }

    .section-title{

        font-size:40px;

    }

    .section-subtitle{

        font-size:17px;

    }

    .stats-card{

        padding:35px 25px;

    }

    .progress-wrapper{

        padding:35px;

    }

}


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

@media(max-width:767px){

    .bh-stats{

        padding:60px 0;

    }

    .section-title{

        font-size:32px;

    }

    .section-subtitle{

        font-size:16px;

        line-height:1.8;

    }

    .section-badge{

        font-size:13px;

        padding:10px 18px;

    }

    .stats-card{

        padding:30px 22px;

    }

    .stats-icon{

        width:72px;

        height:72px;

        font-size:30px;

    }

    .stats-card h3{

        font-size:40px;

    }

    .stats-card h5{

        font-size:20px;

    }

    .trust-strip{

        padding:20px;

    }

    .trust-item{

        justify-content:flex-start;

    }

    .progress-wrapper{

        padding:25px;

    }

}


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

@media(max-width:575px){

    .section-title{

        font-size:28px;

    }

    .stats-card{

        padding:25px 20px;

    }

    .stats-card h3{

        font-size:34px;

    }

    .stats-card h5{

        font-size:18px;

    }

    .stats-icon{

        width:65px;

        height:65px;

        font-size:26px;

    }

    .progress-wrapper{

        padding:20px;

    }

}