@extends('Admin.layouts.admin_layout')


<style>
.summary-container{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-evenly;
        gap: 2rem;
        width: 100%;
        max-width: 37.5rem;
        padding: 0.5rem;
        margin: 0 auto;
        box-sizing: border-box;
    }

    .summary-box{
    flex: 10%;
    text-align: center;
    padding: 15px;
}

.summary-box div{
    padding: 1rem;
}
@media only screen and (max-width: 1199px){
    .summary-container{
  
        gap: 1rem;
    }

    .summary-box{
    flex: 33% !important;
}
    
}

@media only screen and  (max-width: 991px){
    .summary-box{
    flex: 35% !important;
}  
}



</style>


@section('content')

<div class="container-fluid" style="margin: auto;">
    <div class="col-sm-11 summary-container" style="margin: auto;">
         
               
                <div class="summary-box" style="background: #EEE; border: 0.5px solid  #eee">
                    <div>
                            <i class="fas fa-users"></i>
                            <h4 class="numbers">