/* =========================================
   HAS Framework 1.0
   DASHBOARD ATAS
   haldi.my.id
========================================= */

/* =========================================
   DASHBOARD
========================================= */

.dashboard{

    max-width:1200px;

    margin:35px auto 20px;

    background:var(--white);

    border-radius:var(--radius);

    padding:22px 30px;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:25px;

    box-shadow:var(--shadow);

}

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

.dashboard-item{

    display:flex;

    align-items:center;

    gap:10px;

    color:var(--text);

    font-size:18px;

    font-weight:500;

}

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

.dashboard-item .icon{

    font-size:22px;

    color:var(--primary);

}

/* =========================================
   TANGGAL & JAM
========================================= */

#tanggal,
#jam{

    font-weight:600;

    color:var(--primary);

}

/* =========================================
   UCAPAN
========================================= */

#ucapan{

    color:var(--text-light);

    font-weight:600;

}

#iconSalam{

    font-size:24px;

}

/* =========================================
   HOVER
========================================= */

.dashboard-item{

    transition:.3s;

}

.dashboard-item:hover{

    transform:translateY(-3px);

}

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

@media(max-width:768px){

    .dashboard{

        flex-direction:column;

        align-items:flex-start;

        padding:20px;

        gap:16px;

    }

    .dashboard-item{

        width:100%;

        font-size:17px;

    }

    .dashboard-item .icon{

        font-size:20px;

    }

}