.forecast-kpis{

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

    padding:18px 34px;

    border-radius:24px;

    background:
            rgba(255,255,255,.72);

    backdrop-filter:blur(22px);

    border:1px solid rgba(255,255,255,.9);

    box-shadow:
            0 30px 60px rgba(17,34,68,.08),
            inset 0 1px 0 rgba(255,255,255,.8);

    position:relative;

    overflow:hidden;

    margin-bottom: 30px;

}

.forecast-kpis::before{

    content:"";

    position:absolute;
    inset:0;

    background:

            radial-gradient(circle at top left,
            rgba(0,205,170,.12),
            transparent 45%),

            radial-gradient(circle at bottom right,
            rgba(0,120,255,.08),
            transparent 40%);

    pointer-events:none;

}

.kpi{

    padding:0 34px;

    position:relative;

    transition:.35s;

    cursor:pointer;

}

.kpi:hover{

    transform:translateY(-4px);

}

.label{

    font-size:11px;

    font-weight:700;

    letter-spacing:.18em;

    text-transform:uppercase;

    color:#8b97a9;

    margin-bottom:10px;

}

.value{

    font-family:Manrope;

    font-size:34px;

    font-weight:800;

    color:#17223b;

    line-height:1;

}

.value span{

    font-size:.6em;

    opacity:.55;

}

.gradient{

    background:
            linear-gradient(90deg,
            #0ec98c,
            #0aa0ff);

    -webkit-background-clip:text;
    color:transparent;
}

.divider{

    width:1px;

    height:72px;

    background:

            linear-gradient(

                    transparent,

                    rgba(130,150,180,.35),

                    transparent);

}

.kpi:hover .label{

    color:#18b990;

}

.kpi:hover .value{

    transform:scale(1.04);

}

.value{

    transition:.35s;

}

.accent{

    position:relative;

}

.accent::after{

    content:"";

    position:absolute;

    top:-10px;
    right:-10px;

    width:10px;
    height:10px;

    border-radius:50%;

    background:#15d59d;

    box-shadow:

            0 0 14px #15d59d;

}

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

.kpi-card{

    position:relative;

    overflow:hidden;

    border-radius:30px;

    background:rgba(255,255,255,.82);

    backdrop-filter:blur(24px);

    border:1px solid rgba(255,255,255,.9);

    box-shadow:
            0 20px 40px rgba(17,32,70,.06);

    transition:
            transform .45s cubic-bezier(.19,1,.22,1),
            box-shadow .45s cubic-bezier(.19,1,.22,1);

}

.kpi-card:hover{

    transform:translateY(-8px);

    box-shadow:
            0 35px 70px rgba(17,32,70,.10);

}

.kpi-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
            radial-gradient(
                    320px circle
                    at var(--mx,50%)
                    var(--my,50%),
                    rgba(255,255,255,.42),
                    transparent 70%);

    opacity:0;

    transition:.35s;

    pointer-events:none;

}

.kpi-card:hover::before{

    opacity:1;

}

.kpi-title{

    font-size:11px;

    font-weight:800;

    letter-spacing:.22em;

    text-transform:uppercase;

    color:#92a0b5;

}

.kpi-number{

    font-family:Manrope,sans-serif;

    font-size:72px;

    font-weight:800;

    color:#16233c;

    line-height:1;

}

.kpi-slider{

    position:relative;

    height:8px;

    border-radius:999px;

    background:#eef3f8;

    overflow:hidden;

}

.kpi-progress{

    position:absolute;

    left:0;

    top:0;

    height:100%;

    width:40%;

    border-radius:inherit;

    background:
            linear-gradient(90deg,#16b978,#46d6a3);

}

.kpi-thumb{

    position:absolute;

    top:50%;

    left:40%;

    width:18px;

    height:18px;

    border-radius:50%;

    background:#fff;

    border:4px solid #18b978;

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

    box-shadow:
            0 8px 20px rgba(22,185,120,.25);

}

/*==========================================================
    KPI MONTHLY BILL CARD
==========================================================*/

.kpi-bill-card{

    display:flex;

    flex-direction:column;

    gap:28px;

    padding:34px;

    min-height:450px;

    margin-bottom: 30px;
}


/*==========================================================
    HEADER
==========================================================*/

.kpi-card-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.kpi-card-header h6{

    margin:0;

    font-size:11px;

    letter-spacing:.22em;

    text-transform:uppercase;

    color:#94A3B8;

    font-weight:800;

}


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

.kpi-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 18px;

    border-radius:999px;

    background:

            linear-gradient(
                    135deg,
                    #31d492,
                    #15b874
            );

    color:#fff;

    font-size:11px;

    font-weight:700;

    letter-spacing:.06em;

    box-shadow:

            0 12px 25px rgba(23,185,120,.28);

    transition:.35s;

}

.kpi-badge:hover{

    transform:translateY(-2px);

    box-shadow:

            0 18px 40px rgba(23,185,120,.35);

}


/*==========================================================
    PRICE
==========================================================*/

.kpi-currency{

    display:flex;

    align-items:flex-start;

    gap:10px;

}

.kpi-currency .rupee{

    margin-top:14px;

    font-size:36px;

    color:#18b978;

    font-weight:700;

}

.kpi-number{

    font-size:84px;

    line-height:.9;

    font-weight:800;

    color:#152238;

    font-family:Manrope,sans-serif;

    letter-spacing:-2px;

}


/*==========================================================
    SLIDER
==========================================================*/

.kpi-slider-block{

    display:flex;

    flex-direction:column;

    gap:16px;

}

.kpi-slider{

    position:relative;

    height:8px;

    border-radius:999px;

    overflow:hidden;

    background:#edf3f8;

}

.kpi-progress{

    position:absolute;

    left:0;

    top:0;

    height:100%;

    width:35%;

    border-radius:inherit;

    background:

            linear-gradient(
                    90deg,
                    #19b97d,
                    #39dca2
            );

    box-shadow:

            0 4px 14px rgba(30,205,140,.35);

}

.kpi-thumb{

    position:absolute;

    top:50%;

    left:35%;

    width:22px;

    height:22px;

    border-radius:50%;

    background:#fff;

    border:5px solid #18b978;

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

    box-shadow:

            0 10px 24px rgba(22,185,120,.25);

    transition:.35s;

}

.kpi-thumb:hover{

    transform:

            translate(-50%,-50%)

            scale(1.08);

}


/*==========================================================
    SLIDER LABELS
==========================================================*/

.kpi-slider-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.kpi-slider-footer span{

    font-size:12px;

    color:#97a6bc;

    font-weight:600;

}


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

.kpi-metric-card{

    /*margin-top:auto;*/

    border-radius:26px;

    padding:26px;

    background:

            linear-gradient(
                    180deg,
                    rgba(245,252,249,.95),
                    rgba(236,248,243,.95)
            );

    border:

            1px solid rgba(25,185,120,.12);

    position:relative;

    overflow:hidden;

}

.kpi-metric-card::before{

    content:"";

    position:absolute;

    right:-60px;

    top:-60px;

    width:180px;

    height:180px;

    border-radius:50%;

    background:

            radial-gradient(
                    rgba(24,185,120,.12),
                    transparent
            );

}


/*==========================================================
    METRIC HEADER
==========================================================*/

.kpi-metric-header{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:18px;

}

.kpi-metric-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#18b978;

    box-shadow:

            0 0 10px rgba(24,185,120,.5);

}

.kpi-metric-header span{

    font-size:12px;

    font-weight:700;

    letter-spacing:.16em;

    color:#18b978;

}


/*==========================================================
    METRIC VALUE
==========================================================*/

.kpi-metric-value{

    display:flex;

    flex-direction:column;

    gap:6px;

}

.kpi-metric-value span{

    font-family:Manrope,sans-serif;

    font-size:54px;

    font-weight:800;

    color:#14233a;

    line-height:1;

}

.kpi-metric-value small{

    font-size:14px;

    color:#74829a;

}


/*==========================================================
    HOVER EFFECT
==========================================================*/

.kpi-metric-card:hover{

    transform:translateY(-6px);

    transition:.4s;

    box-shadow:

            0 20px 40px rgba(20,180,120,.10);

}

/*==========================================================
    TOP KPI CONTAINER
==========================================================*/

.kpi-top-cards{

    display:grid;

    grid-template-columns:260px 1fr;

    gap:28px;

    align-items:stretch;

    margin-bottom: 30px;
}


/*==========================================================
    COMMON KPI CARD
==========================================================*/

.kpi-recommendation-card,
.kpi-gain-card{

    position:relative;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    min-height:220px;

    padding:30px;

    overflow:hidden;

}


/*==========================================================
    AMBIENT LIGHT
==========================================================*/

.kpi-recommendation-card::after,
.kpi-gain-card::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    right:-110px;

    top:-110px;

    border-radius:50%;

    background:

            radial-gradient(circle,
            rgba(24,185,120,.12),
            transparent 70%);

    pointer-events:none;

}


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

.kpi-recommendation-card h6,
.kpi-gain-card h6{

    margin:0;

    font-size:11px;

    font-weight:800;

    letter-spacing:.22em;

    text-transform:uppercase;

    color:#97a5ba;

}


/*==========================================================
    RECOMMENDED ARRAY
==========================================================*/

.kpi-recommend-number{

    display:flex;

    align-items:flex-end;

    gap:10px;

}

.kpi-recommend-number span{

    font-family:Manrope,sans-serif;

    font-size:78px;

    font-weight:800;

    color:#17243c;

    letter-spacing:-2px;

    line-height:.9;

}

.kpi-recommend-number small{

    margin-bottom:14px;

    font-size:18px;

    font-weight:700;

    color:#18b978;

}


/*==========================================================
    GAIN VALUE
==========================================================*/

.kpi-gain-value{

    display:flex;

    align-items:flex-start;

    gap:6px;

    font-family:Manrope,sans-serif;

    font-weight:800;

    color:#17243c;

    line-height:1;

}

.kpi-gain-value{

    font-size:28px;

}

.kpi-gain-value span{

    font-size:72px;

    letter-spacing:-2px;

}


/*==========================================================
    BOTTOM LABEL
==========================================================*/

.kpi-recommend-footer,
.kpi-gain-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:18px;

}

.kpi-recommend-footer span,
.kpi-gain-footer span{

    font-size:13px;

    color:#90a0b7;

}


/*==========================================================
    MINI STATUS BADGE
==========================================================*/

.kpi-status{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:7px 14px;

    border-radius:999px;

    background:#edf9f4;

    color:#16b878;

    font-size:12px;

    font-weight:700;

}

.kpi-status::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:#18b978;

    box-shadow:0 0 10px rgba(24,185,120,.45);

}


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

.kpi-icon{

    width:56px;

    height:56px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:

            linear-gradient(
                    135deg,
                    #effcf6,
                    #dff8ef);

    color:#18b978;

    font-size:22px;

    box-shadow:

            inset 0 1px 1px rgba(255,255,255,.8),
            0 10px 24px rgba(24,185,120,.08);

}


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

.kpi-recommendation-card:hover,
.kpi-gain-card:hover{

    transform:

            translateY(-8px);

}

.kpi-recommendation-card:hover .kpi-recommend-number span,
.kpi-gain-card:hover .kpi-gain-value span{

    color:#18b978;

    transition:.35s;

}


/*==========================================================
    SHIMMER
==========================================================*/

.kpi-recommendation-card::before,
.kpi-gain-card::before{

    content:"";

    position:absolute;

    top:-120%;

    left:-60%;

    width:45%;

    height:260%;

    transform:rotate(24deg);

    background:

            linear-gradient(

                    transparent,

                    rgba(255,255,255,.55),

                    transparent

            );

    transition:1.2s;

}

.kpi-recommendation-card:hover::before,
.kpi-gain-card:hover::before{

    left:130%;

}


/*==========================================================
    KPI TREND
==========================================================*/

.kpi-trend{

    display:inline-flex;

    align-items:center;

    gap:6px;

    margin-top:12px;

    color:#16b878;

    font-size:13px;

    font-weight:700;

}

.kpi-trend svg{

    width:16px;

    height:16px;

}


/*==========================================================
    VALUE ANIMATION
==========================================================*/

.kpi-recommend-number span,
.kpi-gain-value span{

    transition:

            color .35s,

            transform .35s;

}

.kpi-recommendation-card:hover .kpi-recommend-number span{

    transform:translateY(-3px);

}

.kpi-gain-card:hover .kpi-gain-value span{

    transform:translateY(-3px);

}


/*==========================================================
    GLOW BORDER
==========================================================*/

.kpi-recommendation-card:hover,
.kpi-gain-card:hover{

    border-color:

            rgba(24,185,120,.20);

}

.kpi-range{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    opacity:0;

    cursor:pointer;

    z-index:20;

}

/*=========================================================
    PROJECTION METRICS CARD
=========================================================*/

.kpi-projection-card{

    display:flex;

    flex-direction:column;

    gap:30px;

    padding:34px;

    border-radius:34px;

    min-height:760px;

}


/*=========================================================
HEADER
=========================================================*/

.kpi-projection-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

}

.kpi-heading{

    margin-top:8px;

    font-size:30px;

    font-family:Manrope,sans-serif;

    font-weight:800;

    color:#17233d;

    letter-spacing:-.03em;

}


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

.kpi-projection-badge{

    display:flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    border-radius:999px;

    background:#edf9f3;

    color:#18b978;

    font-size:12px;

    font-weight:700;

    border:1px solid rgba(24,185,120,.12);

}

.kpi-dot{

    width:9px;

    height:9px;

    border-radius:50%;

    background:#18b978;

    animation:kpiPulse 1.8s infinite;

}

@keyframes kpiPulse{

    0%{

        box-shadow:0 0 0 0 rgba(24,185,120,.5);

    }

    70%{

        box-shadow:0 0 0 12px rgba(24,185,120,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(24,185,120,0);

    }

}


/*=========================================================
BODY
=========================================================*/

.kpi-projection-body{

    display:flex;

    flex-direction:column;

    gap:22px;

}


/*=========================================================
METRIC ROW
=========================================================*/

.kpi-metric-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px 22px;

    border-radius:22px;

    background:#fbfcfe;

    border:1px solid #edf2f7;

    transition:.35s;

}

.kpi-metric-row:hover{

    transform:translateY(-4px);

    border-color:#dfe8f3;

    box-shadow:

            0 18px 35px rgba(25,40,70,.06);

}

.kpi-metric-left{

    display:flex;

    align-items:center;

    gap:18px;

}


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

.kpi-metric-icon{

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    font-size:24px;

}

.kpi-grid-icon{

    background:

            linear-gradient(
                    135deg,
                    #fff6e7,
                    #ffe7a5);

}

.kpi-solar-icon{

    background:

            linear-gradient(
                    135deg,
                    #eafcf5,
                    #d8f7ea);

}


/*=========================================================
LABELS
=========================================================*/

.kpi-label{

    font-size:16px;

    font-weight:700;

    color:#16243b;

}

.kpi-description{

    margin-top:4px;

    font-size:13px;

    color:#93a2b7;

}

.kpi-value{

    font-size:32px;

    font-weight:800;

    font-family:Manrope,sans-serif;

    color:#16243b;

}


/*=========================================================
DIVIDER
=========================================================*/

.kpi-divider{

    height:1px;

    background:

            linear-gradient(
                    90deg,
                    transparent,
                    #e7edf5,
                    transparent);

}


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

.kpi-highlight-card{

    position:relative;

    overflow:hidden;

    padding:28px;

    border-radius:28px;

    background:

            linear-gradient(
                    145deg,
                    #16b978,
                    #3ed59d);

    color:#fff;

}

.kpi-highlight-card::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    right:-80px;

    top:-80px;

    border-radius:50%;

    background:

            rgba(255,255,255,.12);

}


/*=========================================================
HIGHLIGHT
=========================================================*/

.kpi-highlight-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-size:13px;

    font-weight:600;

}

.kpi-positive{

    padding:6px 14px;

    border-radius:999px;

    background:rgba(255,255,255,.18);

    font-size:12px;

}

.kpi-highlight-value{

    margin:20px 0 8px;

    font-size:56px;

    font-family:Manrope,sans-serif;

    font-weight:800;

    letter-spacing:-2px;

}

.kpi-highlight-footer{

    font-size:14px;

    opacity:.9;

}


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

.kpi-projection-grid{

    display:grid;

    grid-template-columns:

        repeat(2,1fr);

    gap:18px;

}


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

.kpi-mini-card{

    padding:22px;

    border-radius:22px;

    background:#fbfcfe;

    border:1px solid #edf2f7;

    transition:.35s;

}

.kpi-mini-card:hover{

    transform:translateY(-4px);

    box-shadow:

            0 18px 35px rgba(30,45,80,.05);

}

.kpi-mini-card span{

    display:block;

    margin-bottom:10px;

    font-size:12px;

    text-transform:uppercase;

    letter-spacing:.15em;

    color:#8d9cb2;

}

.kpi-mini-card strong{

    font-size:28px;

    font-family:Manrope,sans-serif;

    font-weight:800;

    color:#16243b;

}


/*=========================================================
INSIGHT
=========================================================*/

.kpi-insight{

    display:flex;

    align-items:flex-start;

    gap:18px;

    padding:24px;

    border-radius:24px;

    background:

            linear-gradient(
                    180deg,
                    #f7fcfa,
                    #eef9f3);

    border:1px solid rgba(24,185,120,.10);

}

.kpi-insight-icon{

    width:54px;

    height:54px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:#18b978;

    color:#fff;

    font-size:24px;

    flex-shrink:0;

}

.kpi-insight-title{

    font-size:15px;

    font-weight:700;

    color:#16243b;

}

.kpi-insight-description{

    margin-top:8px;

    font-size:14px;

    line-height:1.8;

    color:#6f7f98;

}


/*=========================================================
VALUE ANIMATION
=========================================================*/

.kpi-value,
.kpi-highlight-value,
.kpi-mini-card strong{

    transition:

            color .3s,

            transform .3s;

}

.kpi-metric-row:hover .kpi-value,

.kpi-mini-card:hover strong{

    color:#18b978;

}

.kpi-highlight-card:hover .kpi-highlight-value{

    transform:scale(1.03);

}


/*=========================================================
GLASS SHINE
=========================================================*/

.kpi-projection-card::before{

    content:"";

    position:absolute;

    top:-150%;

    left:-50%;

    width:40%;

    height:350%;

    transform:rotate(24deg);

    background:

            linear-gradient(

                    transparent,

                    rgba(255,255,255,.35),

                    transparent

            );

    transition:1.2s;

}

.kpi-projection-card:hover::before{

    left:140%;

}