*{margin:0;padding:0;box-sizing:border-box;font-family:Arial,sans-serif}body{background:#f5f7fb;color:#1e293b}.navbar{width:100%;height:80px;background:#232f3e;display:flex;justify-content:space-between;align-items:center;padding:0 10%;position:sticky;top:0;z-index:1000}.logo{color:#febd69;font-size:1.7rem;font-weight:700}.nav-links{display:flex;gap:30px;list-style:none}.nav-links a{color:#fff;text-decoration:none;transition:.3s}.nav-links a:hover,.nav-links a.active{color:#febd69}.notifications-page{width:100%;max-width:900px;margin:0 auto;padding:30px 20px 80px}.page-header{margin-bottom:30px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px}.page-header h1{font-size:2rem;color:#232f3e;font-weight:700;margin-bottom:8px}.page-header p{color:#64748b;font-size:.95rem}.clear-btn{background:#ef4444;color:#fff;border:none;border-radius:10px;padding:10px 18px;font-weight:600;font-size:.85rem;cursor:pointer;transition:.2s ease-in-out}.clear-btn:hover{background:#dc2626}.notification-card{background:#fff;padding:22px 25px;border-radius:16px;display:flex;gap:20px;align-items:flex-start;margin-bottom:15px;box-shadow:0 4px 15px #0000000d;transition:.3s;border:1px solid #f1f5f9}.notification-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px #00000014}.unread{border-left:5px solid #FEBD69}.notif-icon-box{width:48px;height:48px;background:#f1f5f9;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0}.notif-content{flex:1}.notif-content h3{font-size:1.05rem;color:#232f3e;font-weight:600;margin:0}.notif-content p{color:#475569;font-size:.9rem;line-height:1.5;margin-top:5px}.icon{width:60px;height:60px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:#fff;flex-shrink:0}.blue{background:#0ea5e9}.green{background:#22c55e}.orange{background:#f59e0b}.notification-content h3{margin-bottom:8px;color:#232f3e}.notification-content p{color:#64748b;line-height:1.6;margin-bottom:10px}.notification-content span{color:#94a3b8;font-size:.9rem}.back-btn{position:fixed;top:25px;left:25px;width:50px;height:50px;border:none;border-radius:14px;background:#232f3e;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1rem;z-index:1000;transition:.3s;box-shadow:0 5px 15px #00000026}.back-btn:hover{background:#febd69;color:#232f3e;transform:translateY(-2px)}@media(max-width:768px){.navbar{padding:0 5%}.notification-section{padding:40px 5%}.notification-card{flex-direction:column}}