/*
==========================================================
ARENASA
COUNTER SECTION
==========================================================
*/

.counter{

    position:relative;

    padding:90px 0;

    background:#04180D;

    overflow:hidden;

}

/*==========================================================
BACKGROUND
==========================================================*/

.counter::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(circle at center,
        rgba(212,175,55,.05),
        transparent 65%);

    pointer-events:none;

}

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

.counter-grid{

    position:relative;

    z-index:2;

    display:grid;

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

    gap:28px;

}

/*==========================================================
ITEM
==========================================================*/

.counter-item{

    text-align:center;

    padding:45px 25px;

    background:rgba(6,33,15,.96);

    border:1px solid rgba(212,175,55,.20);

    border-radius:22px;

    transition:.35s;

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

}

.counter-item:hover{

    transform:translateY(-8px);

    border-color:#D4AF37;

    box-shadow:
        0 25px 60px rgba(0,0,0,.35);

}

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

.counter-icon{

    width:78px;

    height:78px;

    margin:auto;

    margin-bottom:22px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#D4AF37;

    color:#06210F;

    font-size:32px;

}

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

.counter-number{

    margin:0;

    font-family:'Cormorant Garamond',serif;

    font-size:72px;

    font-weight:700;

    color:#D4AF37;

    line-height:1;

}

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

.counter-item span{

    display:block;

    margin-top:12px;

    color:#E8E8E8;

    font-size:18px;

    font-weight:500;

    line-height:1.6;

}

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

@media(max-width:992px){

    .counter-grid{

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

    }

}

@media(max-width:576px){

    .counter{

        padding:70px 0;

    }

    .counter-grid{

        grid-template-columns:1fr;

    }

    .counter-number{

        font-size:54px;

    }

    .counter-item span{

        font-size:16px;

    }

}