/*==================================================
Zhitu Network
Counter.css
Version 2.0
==================================================*/

.counter{
    position:relative;
    overflow:hidden;
    background:
        linear-gradient(
            180deg,
            #081A32 0%,
            #07142B 100%
        );
}

.counter::before{
    content:"";
    position:absolute;
    top:-180px;
    left:-180px;
    width:520px;
    height:520px;
    border-radius:50%;
    background:
        radial-gradient(
            circle,
            rgba(22,119,255,.12),
            transparent 72%
        );
    filter:blur(25px);
    pointer-events:none;
}

.counter::after{
    content:"";
    position:absolute;
    right:-220px;
    bottom:-220px;
    width:620px;
    height:620px;
    border-radius:50%;
    background:
        radial-gradient(
            circle,
            rgba(107,92,255,.10),
            transparent 72%
        );
    filter:blur(30px);
    pointer-events:none;
}

.counter-grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:24px;

}

.counter-item{

    position:relative;

    padding:42px 30px;

    text-align:center;

    border-radius:24px;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.08),
            rgba(255,255,255,.03)
        );

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

    backdrop-filter:blur(18px);

    transition:.35s;

}

.counter-item::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            135deg,
            rgba(22,119,255,.10),
            transparent 45%
        );

    opacity:0;

    transition:.35s;

}

.counter-item:hover{

    transform:translateY(-8px);

    border-color:rgba(22,119,255,.35);

    box-shadow:
        0 24px 70px rgba(0,0,0,.35);

}

.counter-item:hover::before{

    opacity:1;

}

.counter-item h2{

    font-size:54px;

    line-height:1;

    color:#fff;

    margin-bottom:14px;

    font-weight:800;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #8FC8FF
        );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.counter-item span{

    display:block;

    color:#AFC2E3;

    font-size:15px;

    letter-spacing:1px;

}

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

@media(max-width:1200px){

    .counter-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

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

@media(max-width:768px){

    .counter{

        padding:70px 0;

    }

    .counter-grid{

        grid-template-columns:1fr;

        gap:18px;

    }

    .counter-item{

        padding:32px 20px;

    }

    .counter-item h2{

        font-size:42px;

    }

    .counter-item span{

        font-size:14px;

    }

}

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