/* ==========================================
   Tracking Variables
========================================== */

:root{

    --stats-gap:20px;

    --stats-card-width:100%;

    --stats-card-height:80px;

    --stats-card-padding:12px;

    --stats-card-radius:16px;

    --stats-count-size:28px;

    --stats-title-size:15px;

}

/* ==========================================
   CSS
========================================== */
.stats-box{

    width:100%;

    margin:0 auto;

    padding-top:20px;

}

.stats-grid{

    display:grid;

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

    gap:var(--stats-gap);

}

.stat-item{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

}

.count{

    display:block;

    order:1;

    font-size:var(--stats-count-size);

    font-weight:var(--fw-bold);

    color:var(--primary);

    line-height:1.1;

    margin-bottom:4px;

}

.stat-title{

    display:block;

    order:2;

    font-size:var(--stats-title-size);

    font-weight:var(--fw-semibold);

    color:var(--text-dark);

    line-height:1.2;

}

/* ==========================================
   Large Desktop (1400px+)
========================================== */

@media (min-width:1400px){

    :root{

        --stats-gap:24px;

        --stats-card-height:90px;

        --stats-card-padding:16px;

        --stats-card-radius:18px;

        --stats-count-size:30px;

        --stats-title-size:16px;

    }

}

/* ==========================================
   Desktop (1200px - 1399.98px)
========================================== */

@media (min-width:1200px) and (max-width:1399.98px){

    :root{

        --stats-gap:22px;

        --stats-card-height:86px;

        --stats-card-padding:14px;

        --stats-card-radius:17px;

        --stats-count-size:28px;

        --stats-title-size:15px;

    }

}

/* ==========================================
   Tablet Landscape (992px - 1199.98px)
========================================== */

@media (min-width:992px) and (max-width:1199.98px){

    :root{

        --stats-gap:18px;

        --stats-card-height:78px;

        --stats-card-padding:12px;

        --stats-card-radius:16px;

        --stats-count-size:24px;

        --stats-title-size:14px;

    }

}

/* ==========================================
   Tablet Portrait (768px - 991.98px)
========================================== */

@media (min-width:768px) and (max-width:991.98px){

    :root{

        --stats-gap:16px;

        --stats-card-height:72px;

        --stats-card-padding:10px;

        --stats-card-radius:15px;

        --stats-count-size:22px;

        --stats-title-size:13px;

    }

}

/* ==========================================
   Large Mobile (576px - 767.98px)
========================================== */

@media (min-width:576px) and (max-width:767.98px){

    :root{

        --stats-gap:12px;

        --stats-card-width:180px;

        --stats-card-height:66px;

        --stats-card-padding:9px;

        --stats-card-radius:14px;

        --stats-count-size:20px;

        --stats-title-size:12px;

    }

    .stats-grid{

        display:flex;

        flex-wrap:nowrap;

        align-items:stretch;

        justify-content:center;

        gap:var(--stats-gap);

        width:100%;

        overflow-x:auto;

        overflow-y:hidden;

        padding:0 calc((100% - (3 * var(--stats-card-width) + 2 * var(--stats-gap))) / 2);

        box-sizing:border-box;

        scroll-behavior:smooth;

        -webkit-overflow-scrolling:touch;

        scrollbar-width:none;

    }

    .stats-grid::-webkit-scrollbar{

        display:none;

    }

    .stat-item{

        flex:0 0 var(--stats-card-width);

        min-width:var(--stats-card-width);

    }

}

/* ==========================================
   Small Mobile (320px - 575.98px)
========================================== */

@media (max-width:575.98px){

    :root{

        --stats-gap:10px;

        --stats-card-width:95px;

        --stats-card-height:50px;

        --stats-card-padding:8px;

        --stats-card-radius:12px;

        --stats-count-size:12px;

        --stats-title-size:8px;

    }

    .stats-grid{

        display:flex;

        flex-wrap:nowrap;

        justify-content:center;

        align-items:stretch;

        gap:var(--stats-gap);

        width:100%;

        overflow-x:auto;

        overflow-y:hidden;

        padding:0 12px;

        box-sizing:border-box;

        scroll-behavior:smooth;

        -webkit-overflow-scrolling:touch;

        scrollbar-width:none;

    }

    .stats-grid::-webkit-scrollbar{

        display:none;

    }

    .stat-item{

        flex:0 0 var(--stats-card-width);

        min-width:var(--stats-card-width);

    }

}