<div class="col-xxl-3 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
    <div class="card custom-card tilt">
        <div class="top-left"></div>
        <div class="bottom-left"></div>
        <div class="bottom-right"></div>
        <div class="top-right"></div>
        <div class="card-body">
            <div class="d-flex align-items-center gap-3 flex-wrap">
                <div class="mb-4">
                    <span class="avatar avatar-lg rounded bg-primary-transparent svg-primary">
                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M128,56C48,56,16,128,16,128s32,72,112,72,112-72,112-72S208,56,128,56Zm0,112a40,40,0,1,1,40-40A40,40,0,0,1,128,168Z" opacity="0.2"></path><path d="M247.31,124.76c-.35-.79-8.82-19.58-27.65-38.41C194.57,61.26,162.88,48,128,48S61.43,61.26,36.34,86.35C17.51,105.18,9,124,8.69,124.76a8,8,0,0,0,0,6.5c.35.79,8.82,19.57,27.65,38.4C61.43,194.74,93.12,208,128,208s66.57-13.26,91.66-38.34c18.83-18.83,27.3-37.61,27.65-38.4A8,8,0,0,0,247.31,124.76ZM128,192c-30.78,0-57.67-11.19-79.93-33.25A133.47,133.47,0,0,1,25,128,133.33,133.33,0,0,1,48.07,97.25C70.33,75.19,97.22,64,128,64s57.67,11.19,79.93,33.25A133.46,133.46,0,0,1,231.05,128C223.84,141.46,192.43,192,128,192Zm0-112a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Z"></path></svg>
                    </span>
                </div>
                <div class="flex-fill">
                    <h5 class="fw-semibold" id="humans-count">0</h5>
                    <span class="d-block text-muted mb-1">Human</span>
                </div>
                <div id="humans"></div>
            </div>
        </div>
    </div>
</div>
<div class="col-xxl-3 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
    <div class="card custom-card tilt">
        <div class="top-left"></div>
        <div class="bottom-left"></div>
        <div class="bottom-right"></div>
        <div class="top-right"></div>
        <div class="card-body">
            <div class="d-flex align-items-center gap-3 flex-wrap">
                <div class="mb-4">
                    <span class="avatar avatar-lg rounded bg-primary-transparent svg-primary">
                    <i class="bi bi-airplane"></i>
                    </span>
                </div>
                <div class="flex-fill">
                    <h5 class="fw-semibold" id="bots-count">0</h5>
                    <span class="d-block text-muted mb-1">Bots</span>
                </div>
                <div id="bots"></div>
            </div>
        </div>
    </div>
</div>
<div class="col-xxl-3 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
    <div class="card custom-card tilt">
        <div class="top-left"></div>
        <div class="bottom-left"></div>
        <div class="bottom-right"></div>
        <div class="top-right"></div>
        <div class="card-body">
            <div class="d-flex align-items-center gap-3 flex-wrap">
                <div class="mb-4">
                    <span class="avatar avatar-lg rounded bg-primary-transparent svg-primary">
                    <i class="bi bi-door-open"></i>
                    </span>
                </div>
                <div class="flex-fill">
                    <h5 class="fw-semibold" id="login-count">0</h5>
                    <span class="d-block text-muted mb-1">Login</span>
                </div>
                <div id="login"></div>
            </div>
        </div>
    </div>
</div>
<div class="col-xxl-3 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
    <div class="card custom-card tilt">
        <div class="top-left"></div>
        <div class="bottom-left"></div>
        <div class="bottom-right"></div>
        <div class="top-right"></div>
        <div class="card-body">
            <div class="d-flex align-items-center gap-3 flex-wrap">
                <div class="mb-4">
                    <span class="avatar avatar-lg rounded bg-primary-transparent svg-primary">
                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M224,88V200a8,8,0,0,1-8,8H56a16,16,0,0,1-16-16V64A16,16,0,0,0,56,80H216A8,8,0,0,1,224,88Z" opacity="0.2"></path><path d="M216,72H56a8,8,0,0,1,0-16H192a8,8,0,0,0,0-16H56A24,24,0,0,0,32,64V192a24,24,0,0,0,24,24H216a16,16,0,0,0,16-16V88A16,16,0,0,0,216,72Zm0,128H56a8,8,0,0,1-8-8V86.63A23.84,23.84,0,0,0,56,88H216Zm-48-60a12,12,0,1,1,12,12A12,12,0,0,1,168,140Z"></path></svg>
                    </span>
                </div>
                <div class="flex-fill">
                    <h5 class="fw-semibold" id="card-count">0</h5>
                    <span class="d-block text-muted mb-1">Cards</span> 
                </div>
                <div id="card"></div>
            </div>
        </div>
    </div>
</div>