@import url("base.css");
@import url("header.css");
@import url("hero.css");
@import url("movie.css");
@import url("footer.css");
@import url("animation.css");
@import url("responsive.css");
.notification-page{

max-width:950px;

margin:120px auto 60px;

}

.notification-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:25px;

}

.notification-header h2{

color:#fff;

}

.mark-read{

padding:10px 18px;

background:#E50914;

color:#fff;

text-decoration:none;

border-radius:30px;

}

.notification-filter{

display:flex;

gap:10px;

margin-bottom:25px;

}

.notification-filter a{

padding:10px 18px;

border-radius:25px;

background:#222;

color:#fff;

text-decoration:none;

}

.notification-filter a.active{

background:#E50914;

}

.notification-card{

display:flex;

gap:20px;

padding:20px;

background:#1f1f1f;

border-radius:14px;

margin-bottom:15px;

text-decoration:none;

color:#fff;

transition:.3s;

}

.notification-card:hover{

transform:translateY(-2px);

background:#292929;

}

.notification-card.unread{

border-left:5px solid #E50914;

}

.notification-icon{

width:50px;

height:50px;

background:#E50914;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:20px;

}

.notification-info h3{

margin-bottom:8px;

}

.notification-info p{

color:#bbb;

margin-bottom:8px;

}

.notification-info small{

color:#888;

}

.pagination{

margin-top:30px;

text-align:center;

}

.pagination a{

display:inline-block;

margin:0 5px;

padding:10px 15px;

background:#222;

border-radius:8px;

color:#fff;

text-decoration:none;

}

.pagination a.active{

background:#E50914;

}