/*
==========================================
Counter Section
==========================================
*/

.srb-counter{

    position:relative;

    padding:120px 0;

    background:linear-gradient(
        135deg,
        #0f7c90 0%,
        #13b5ea 100%
    );

    overflow:hidden;

}

.srb-counter::before{

    content:"";

    position:absolute;

    top:-180px;

    left:-180px;

    width:420px;

    height:420px;

    border-radius:50%;

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

}

.srb-counter::after{

    content:"";

    position:absolute;

    bottom:-160px;

    right:-160px;

    width:380px;

    height:380px;

    border-radius:50%;

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

}

/*
==========================================
Grid
==========================================
*/

.srb-counter-wrapper{

    display:grid;

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

    gap:30px;

    position:relative;

    z-index:2;

}

/*
==========================================
Card
==========================================
*/

.srb-counter-item{

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

    backdrop-filter:blur(14px);

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

    border-radius:24px;

    padding:45px 25px;

    text-align:center;

    transition:.35s;

    box-shadow:0 20px 45px rgba(0,0,0,.10);

}

.srb-counter-item:hover{

    transform:translateY(-10px);

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

}

/*
==========================================
Counter Number
==========================================
*/

.srb-counter-item h2{

    font-size:64px;

    font-weight:800;

    line-height:1;

    color:#fff;

    margin-bottom:18px;

    letter-spacing:-2px;

}

.srb-counter-item span{

    display:block;

    font-size:18px;

    font-weight:600;

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

}

/*
==========================================
Icon
==========================================
*/

.srb-counter-icon{

    width:85px;

    height:85px;

    margin:0 auto 30px;

    border-radius:50%;

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

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:36px;

    color:#fff;

    transition:.35s;

}

.srb-counter-item:hover .srb-counter-icon{

    transform:rotate(12deg) scale(1.08);

    background:#fff;

    color:var(--srb-primary);

}

/*
==========================================
Hover Glow
==========================================
*/

.srb-counter-item{

    position:relative;

    overflow:hidden;

}

.srb-counter-item::before{

    content:"";

    position:absolute;

    top:-100%;

    left:-100%;

    width:220%;

    height:220%;

    background:linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.18),

        transparent

    );

    transform:rotate(25deg);

    transition:.9s;

}

.srb-counter-item:hover::before{

    left:100%;

}

/*
==========================================
Float Animation
==========================================
*/

.srb-counter-item{

    animation:srbCounterFloat 7s ease-in-out infinite;

}

.srb-counter-item:nth-child(2){

    animation-delay:.4s;

}

.srb-counter-item:nth-child(3){

    animation-delay:.8s;

}

.srb-counter-item:nth-child(4){

    animation-delay:1.2s;

}

@keyframes srbCounterFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}