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

#statistics{
    position:relative;
    padding:80px 0;
    background:#f8fafc;
    overflow:hidden;
}

/* OPTIONAL BACKGROUND EFFECT */

#statistics::before{
    content:"";
    position:absolute;
    top:-120px;
    right:-120px;

    width:320px;
    height:320px;

    border-radius:50%;

    background:rgba(79,70,229,0.05);

    filter:blur(40px);
}

#statistics::after{
    content:"";
    position:absolute;
    bottom:-120px;
    left:-120px;

    width:320px;
    height:320px;

    border-radius:50%;

    background:rgba(6,182,212,0.05);

    filter:blur(40px);
}

/*================================================
                    CONTAINER
================================================*/

.statistics-container{
    position:relative;
    z-index:2;
}

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

.statistics-row{
    display:flex;
    flex-wrap:wrap;

    margin-left:-12px;
    margin-right:-12px;

    row-gap:24px;
}

/*================================================
                    COLUMN
================================================*/

.statistics-col{
    width:33.3333%;
    padding:0 12px;
}

/*================================================
                    STAT BOX
================================================*/

.stat-box{
    display:block;
    position:relative;

    text-align:center;

    padding:34px 24px;

    border-radius:22px;

    background:#fff;

    border:1px solid rgba(0,0,0,0.05);

    overflow:hidden;

    cursor:pointer;

    height:100%;

    text-decoration:none;

    /* SHADOW */
    box-shadow:
        0 10px 25px rgba(0,0,0,0.08),
        0 4px 10px rgba(0,0,0,0.04);

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

/*================================================
                SHINE EFFECT
================================================*/

.stat-box::before{
    content:"";

    position:absolute;
    top:0;
    left:-100%;

    width:100%;
    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(79,70,229,0.08),
        transparent
    );

    transition:0.6s ease;
}

.stat-box:hover::before{
    left:100%;
}

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

.stat-icon{
    width:82px;
    height:82px;

    margin:0 auto 22px;

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

    border-radius:50%;

    font-size:32px;
    color:var(--primary);

    background:linear-gradient(
        135deg,
        rgba(79,70,229,0.12),
        rgba(6,182,212,0.12)
    );

    border:1px solid rgba(79,70,229,0.15);

    box-shadow:
        0 12px 25px rgba(79,70,229,0.16),
        inset 0 1px 0 rgba(255,255,255,0.7);

    transition:all 0.35s ease;
}

/*================================================
                    NUMBER
================================================*/

.stat-box h3{
    font-size:40px;
    font-weight:800;
    line-height:1.1;

    color:var(--primary);

    margin-bottom:10px;

    transition:0.3s ease;

    word-break:break-word;
}

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

.stat-box p{
    font-size:15px;
    font-weight:500;
    line-height:1.6;

    color:#555;

    margin-bottom:0;

    transition:0.3s ease;
}

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

.stat-arrow{
    position:absolute;
    bottom:16px;
    right:18px;

    font-size:14px;
    color:var(--primary);

    opacity:0.6;

    transition:0.3s ease;
}

/*================================================
                HOVER EFFECTS
================================================*/

.stat-box:hover{
    transform:translateY(-10px) scale(1.03);

    border-color:rgba(79,70,229,0.25);

    background:linear-gradient(
        135deg,
        rgba(79,70,229,0.05),
        rgba(6,182,212,0.05)
    );

    box-shadow:
        0 24px 50px rgba(0,0,0,0.14),
        0 10px 20px rgba(79,70,229,0.12);
}

/* ICON HOVER */

.stat-box:hover .stat-icon{
    transform:scale(1.12) rotate(6deg);

    background:linear-gradient(
        135deg,
        rgba(79,70,229,0.20),
        rgba(6,182,212,0.20)
    );

    box-shadow:
        0 18px 35px rgba(79,70,229,0.24),
        0 8px 18px rgba(6,182,212,0.14);
}

/* NUMBER HOVER */

.stat-box:hover h3{
    transform:scale(1.10);

    text-shadow:
        0 5px 15px rgba(79,70,229,0.25);
}

/* LABEL HOVER */

.stat-box:hover p{
    color:#111;
}

/* ARROW HOVER */

.stat-box:hover .stat-arrow{
    transform:translateX(5px);
    opacity:1;
}

/* CLICK EFFECT */

.stat-box:active{
    transform:scale(0.97);

    box-shadow:
        0 8px 20px rgba(0,0,0,0.15);
}

/*================================================
                COLOR VARIANTS
================================================*/

/* PRIMARY */

.stat-primary .stat-icon{
    background:linear-gradient(
        135deg,
        rgba(79,70,229,0.15),
        rgba(99,102,241,0.18)
    );
}

/* SUCCESS */

.stat-success .stat-icon{
    background:linear-gradient(
        135deg,
        rgba(16,185,129,0.15),
        rgba(5,150,105,0.18)
    );

    color:#059669;
}

/* WARNING */

.stat-warning .stat-icon{
    background:linear-gradient(
        135deg,
        rgba(245,158,11,0.15),
        rgba(251,191,36,0.18)
    );

    color:#d97706;
}

/* INFO */

.stat-info .stat-icon{
    background:linear-gradient(
        135deg,
        rgba(6,182,212,0.15),
        rgba(14,165,233,0.18)
    );

    color:#0891b2;
}

/*================================================
                LARGE DESKTOP
================================================*/

@media(min-width:1400px){

    .stat-box{
        padding:40px 28px;
    }

    .stat-box h3{
        font-size:46px;
    }

    .stat-icon{
        width:88px;
        height:88px;

        font-size:34px;
    }
}

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

@media(max-width:991px){

    #statistics{
        padding:70px 0;
    }

    .statistics-col{
        width:50%;
    }

    .stat-box{
        padding:30px 22px;
    }

    .stat-box h3{
        font-size:34px;
    }

    .stat-icon{
        width:74px;
        height:74px;

        font-size:28px;
    }

    .stat-box p{
        font-size:14px;
    }
}

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

@media(max-width:767px){

    #statistics{
        padding:60px 0;
    }

    .statistics-container{
        padding-left:16px;
        padding-right:16px;
    }

    .statistics-row{
        row-gap:20px;
    }

    .statistics-col{
        width:100%;
    }

    .stat-box{
        padding:28px 20px;

        border-radius:18px;

        min-height:auto;
    }

    .stat-icon{
        width:68px;
        height:68px;

        margin-bottom:18px;

        font-size:26px;
    }

    .stat-box h3{
        font-size:30px;

        margin-bottom:8px;
    }

    .stat-box p{
        font-size:14px;
        line-height:1.5;

        max-width:240px;

        margin-left:auto;
        margin-right:auto;
    }

    .stat-arrow{
        display:none;
    }

    /* REDUCE HOVER SCALE ON MOBILE */

    .stat-box:hover{
        transform:translateY(-5px) scale(1.01);
    }

    .stat-box:hover .stat-icon{
        transform:scale(1.06);
    }

    .stat-box:hover h3{
        transform:scale(1.05);
    }
}

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

@media(max-width:480px){

    #statistics{
        padding:50px 0;
    }

    .stat-box{
        padding:24px 18px;
    }

    .stat-icon{
        width:62px;
        height:62px;

        font-size:24px;
    }

    .stat-box h3{
        font-size:26px;
    }

    .stat-box p{
        font-size:13px;
    }
}