/* ==========================================
   TDOGSPH PREMIUM DASHBOARD CARD SYSTEM
========================================== */

.dashboard-grid{

    display:grid;

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

    gap:24px;

    margin-bottom:32px;

}

/* ==========================================
   GOLD CARD
========================================== */

.dashboard-card,
.dashboard-panel{

    position:relative;

    overflow:hidden;

    border:none;

    border-radius:32px;

    padding:30px;

    background-image:var(--dashboard-card-bg);

    background-repeat:no-repeat;

    background-position:center;

    background-size:100% 100%;

    background-color:transparent;

    box-shadow:var(--shadow-md);

    transition:all .35s ease;

}

.dashboard-card:hover,
.dashboard-panel:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow-lg);

}

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

.dashboard-card-icon{

    width:68px;

    height:68px;

    border-radius:50%;

    background:rgba(255,255,255,.95);

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:22px;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.dashboard-card-icon i{

    font-size:28px;

    color:var(--primary);

}

/* ==========================================
   NUMBERS
========================================== */

.dashboard-card h3{

    margin:0;

    font-size:48px;

    font-weight:800;

    color:var(--primary);

    font-family:'Cormorant Garamond',serif;

}

.dashboard-card p{

    margin-top:10px;

    color:var(--text-primary);

    font-size:17px;

    font-weight:700;

}

/* ==========================================
   PANEL
========================================== */

.dashboard-panel h2{

    color:var(--primary);

    font-family:'Cormorant Garamond',serif;

    font-size:52px;

    font-weight:700;

    margin-bottom:14px;

}

.dashboard-panel p{

    color:var(--text-secondary);

    font-size:17px;

    line-height:1.8;

    margin:0;

}
/* ==========================================
   PREMIUM PANEL REFINEMENTS
========================================== */

.dashboard-panel{

    position:relative;

    overflow:hidden;

}

.dashboard-panel::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:6px;

    height:100%;

    background:rgba(255,255,255,.45);

    border-radius:32px 0 0 32px;

}

.dashboard-panel h2{

    margin-bottom:18px;

}

.dashboard-panel p{

    max-width:900px;

}