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

.statistics {
    background: #08111F;
    position: relative;
    overflow: hidden;
}

    .statistics::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 90deg, rgba(255,255,255,.02), transparent, rgba(200,155,60,.03) );
    }

section.statistics {
    padding: 28px 0 !important;
}

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

.stats-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    align-items: center;
}

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

.stat-item {
    position: relative;
    text-align: center;
    color: #fff;
    padding: 12px 18px;
}

    .stat-item:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 18%;
        left: 0;
        width: 1px;
        height: 64%;
        background: rgba(255,255,255,.10);
    }

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

.stat-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(200,155,60,.12);
    color: #C89B3C;
    font-size: 32px;
    transition: all .35s ease;
    box-shadow: 0 10px 25px rgba(200,155,60,.18);
}

.stat-item:hover .stat-icon {
    background: #C89B3C;
    color: #fff;
    transform: translateY(-6px) scale(1.08);
    box-shadow: 0 18px 35px rgba(200,155,60,.30);
}

.stat-item h3 {
    margin: 0;
    font-size: 42px;
    font-weight: 800;
    line-height: 1.1;
    color: #fff;
}

.stat-item > span {
    margin-top: 8px;
    font-size: 17px;
    font-weight: 500;
    color: #d4d9df;
}
/*=========================================
            NUMBER
==========================================*/

.stat-item h3 {
    margin: 0;
    font-size: 36px;
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
}

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

.stat-item > span {
    display: block;
    margin-top: 8px;
    color: #d4d9df;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 500;
}

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

@media(max-width:992px) {

    section.statistics {
        padding: 35px 0 !important;
    }

    .stats-grid {
        grid-template-columns: repeat(2,1fr);
        gap: 30px;
    }

    .stat-item::after {
        display: none;
    }
}

@media(max-width:576px) {

    section.statistics {
        padding: 30px 0 !important;
    }

    .stats-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }
}