/* ===================================
   TABLETS
=================================== */

@media screen and (max-width: 1024px){

    .container{
        width:95%;
    }

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

}

/* ===================================
   MOBILE
=================================== */

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

    .container{
        width:95%;
        padding:10px;
    }

    .topbar{
        flex-direction:column;
        text-align:center;
        gap:10px;
    }

    .welcome-card{
        padding:20px;
    }

    .balance-card{
        padding:20px;
    }

    .balance-card h1{
        font-size:30px;
    }

    .actions{
        display:flex;
        flex-direction:column;
        gap:10px;
    }

    .btn{
        width:100%;
        text-align:center;
        box-sizing:border-box;
    }

    table{
        display:block;
        overflow-x:auto;
        white-space:nowrap;
    }

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

    .service-grid{
        grid-template-columns:1fr;
    }

    .hero h1{
        font-size:38px;
    }

    .hero p{
        font-size:16px;
    }

}

/* ===================================
   SMALL PHONES
=================================== */

@media screen and (max-width:480px){

    .hero{
        padding:70px 15px;
    }

    .hero h1{
        font-size:30px;
    }

    .balance-card h1{
        font-size:26px;
    }

    h2{
        font-size:24px;
    }

}