/* ==========================================
NOTIFICATIONS
========================================== */

.notifications-summary{

display:grid;

grid-template-columns:repeat(3,1fr) 280px;

gap:20px;

margin-bottom:30px;

align-items:stretch;

}

.notification-card-small{

background:#0f172a;

border:1px solid rgba(255,255,255,.08);

border-radius:20px;

padding:24px;

transition:.3s;

}

.notification-card-small:hover{

border-color:#22d3ee;

transform:translateY(-4px);

box-shadow:0 10px 30px rgba(34,211,238,.12);

}

.notification-card-small p{

color:#94a3b8;

margin-bottom:10px;

}

.notification-card-small h2{

font-size:30px;

}

/* ==========================
NOTIFICATION LIST
========================== */

.notifications-list{

display:flex;

flex-direction:column;

gap:18px;

}

.notification-card{

background:#0f172a;

border:1px solid rgba(255,255,255,.08);

border-left:5px solid #22d3ee;

border-radius:18px;

padding:22px;

transition:.3s;

}

.notification-card:hover{

border-color:#22d3ee;

transform:translateY(-3px);

}

.notification-card h3{

font-size:20px;

margin-bottom:10px;

color:#fff;

}

.notification-card p{

color:#cbd5e1;

line-height:1.7;

margin-bottom:12px;

}

.notification-card span{

font-size:13px;

color:#94a3b8;

}

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

@media(max-width:900px){

.notifications-summary{

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

}

}

@media(max-width:900px){

.notifications-summary{

grid-template-columns:1fr;

}

#markAllBtn{

width:100%;

}

}

#markAllBtn{

height:58px;

border:none;

cursor:pointer;

font-size:16px;

font-weight:600;

}