/* =====================================================
     PREMIUM LIVE COUNTERS SECTION
===================================================== */

.astro-counter-section{

    width:100%;

    padding:90px 20px;

    position:relative;

    overflow:hidden;

    background:
    linear-gradient(
        135deg,
        #050014 0%,
        #120022 45%,
        #1b0035 100%
    );

    font-family:Arial,sans-serif;
}

/* =====================================================
     GLOW EFFECTS
===================================================== */

.counter-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(80px);

    opacity:.28;
}

.counter-glow-1{

    width:320px;
    height:320px;

    background:#ff0099;

    top:-100px;
    left:-100px;
}

.counter-glow-2{

    width:320px;
    height:320px;

    background:#7b2cff;

    right:-100px;
    bottom:-100px;
}

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

.astro-counter-container{

    width:100%;
    max-width:1400px;

    margin:auto;

    display:grid;

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

    gap:30px;

    position:relative;
    z-index:2;
}

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

.counter-box{

    position:relative;

    padding:45px 30px;

    border-radius:30px;

    text-align:center;

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

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

    backdrop-filter:blur(16px);

    transition:.45s ease;

    overflow:hidden;

    box-shadow:
    0 15px 40px rgba(0,0,0,.22);
}

/* TOP BORDER */

.counter-box::before{

    content:'';

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:4px;

    background:
    linear-gradient(
        90deg,
        #ff0099,
        #7b2cff
    );
}

/* HOVER */

.counter-box:hover{

    transform:
    translateY(-10px);

    border:
    1px solid rgba(255,0,153,.35);

    box-shadow:
    0 20px 55px rgba(255,0,153,.25);
}

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

.counter-icon{

    width:85px;
    height:85px;

    margin:auto auto 25px;

    border-radius:50%;

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

    font-size:34px;

    background:
    linear-gradient(
        135deg,
        #ff0099,
        #7b2cff
    );

    color:#fff;

    box-shadow:
    0 12px 35px rgba(255,0,153,.30);
}

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

.counter-box h2{

    font-size:56px;

    color:#fff;

    font-weight:800;

    display:inline-block;

    line-height:1;
}

/* SYMBOL */

.counter-box span{

    font-size:36px;

    font-weight:700;

    color:#ff4db8;

    margin-left:3px;
}

/* =====================================================
     TEXT
===================================================== */

.counter-box p{

    margin-top:18px;

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

    font-size:17px;

    line-height:1.7;
}

/* =====================================================
     RESPONSIVE
===================================================== */

@media(max-width:1100px){

    .astro-counter-container{

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

}

@media(max-width:768px){

    .astro-counter-section{

        padding:70px 15px;
    }

    .counter-box{

        padding:35px 20px;
    }

    .counter-box h2{

        font-size:44px;
    }

}

@media(max-width:580px){

    .astro-counter-container{

        grid-template-columns:1fr;
    }

    .counter-box h2{

        font-size:40px;
    }

    .counter-box p{

        font-size:15px;
    }

}