/*========================================================
GenZClass Notifications Page
Part 1
========================================================*/

body{
background:#f6f8fc;
color:#222;
line-height:1.6;
}

/*==================================
BREAKING NEWS
==================================*/

.breaking-news{
display:flex;
align-items:center;
background:#ffffff;
margin:25px auto;
width:92%;
border-radius:14px;
overflow:hidden;
box-shadow:0 6px 18px rgba(0,0,0,.05);
}

.breaking-label{
background:#EF4444;
color:#fff;
padding:16px 22px;
font-weight:700;
font-size:11px;
white-space:nowrap;
}

.breaking-scroll{
padding:14px 18px;
flex:1;
font-size:11px;
color:#444;
}

/*==================================
HERO
==================================*/

.notification-hero{
width:92%;
margin:auto;
padding:70px 60px;
border-radius:28px;
background:linear-gradient(135deg,#4F46E5,#7C3AED);
color:#fff;
margin-bottom:40px;
}

.hero-content h1{
font-size:48px;
margin-bottom:18px;
font-weight:700;
}

.hero-content p{
font-size:18px;
max-width:700px;
opacity:.95;
}

/*==================================
SEARCH
==================================*/

.notification-search{
width:92%;
margin:auto;
margin-bottom:35px;
}

.search-box{
display:flex;
background:transparent !important;
border:none !important;
border-radius:0 !important;
padding:0 !important;
box-shadow:none !important;
gap: 10px;
}

.search-box input{
flex:1;
border-radius:50px !important;
border:1.5px solid #cbd5e1 !important;
background:#ffffff !important;
color:#1e293b !important;
outline:none !important;
font-size:16px;
padding:14px 24px !important;
box-shadow:0 4px 16px rgba(0,0,0,.06) !important;
}

.search-box button{
padding:16px 30px;
border:none;
background:#4F46E5;
color:#fff;
border-radius:12px;
cursor:pointer;
font-size:16px;
font-weight:600;
transition:.3s;
}

.search-box button:hover{
background:#4338CA;
transform:translateY(-2px);
}

/*==================================
CATEGORY FILTERS
==================================*/

.category-filter{
width:92%;
margin:auto;
display:flex;
flex-wrap:wrap;
gap:14px;
margin-bottom:45px;
}

.category-filter button{
padding:12px 24px;
border:none;
background:#fff;
border-radius:30px;
cursor:pointer;
font-weight:600;
transition:.3s;
box-shadow:0 4px 15px rgba(0,0,0,.05);
}

.category-filter button:hover{
background:#4F46E5;
color:#fff;
}

.category-filter button.active{
background:#4F46E5;
color:#fff;
}
/*========================================================
PART 2
Featured News + Notification Cards
========================================================*/

/*==================================
SECTION TITLE
==================================*/

.section-title{
width:92%;
margin:60px auto 25px;
display:flex;
justify-content:space-between;
align-items:end;
}

.section-title h2{
font-size:25px;
font-weight:700;
color:#222;
}

.section-title p{
color:#777;
font-size:11px;
}

/*==================================
FEATURED NEWS
==================================*/

.featured-news{
width:92%;
margin:0 auto 60px;
display:grid;
grid-template-columns:1.1fr 1fr;
background:#fff;
border-radius:24px;
overflow:hidden;
box-shadow:0 12px 35px rgba(0,0,0,.08);
}

.featured-image{
min-height:380px;
overflow:hidden;
}

.featured-image img{
width:100%;
height:100%;
object-fit:cover;
transition:.5s;
}

.featured-news:hover img{
transform:scale(1.05);
}

.featured-content{
padding:45px;
display:flex;
flex-direction:column;
justify-content:center;
}

.featured-tag{
display:inline-block;
background:#EF4444;
color:#fff;
padding:8px 18px;
border-radius:50px;
font-size:13px;
font-weight:700;
margin-bottom:20px;
width:max-content;
}

.featured-content h2{
font-size:25px;
line-height:1.3;
margin-bottom:20px;
}

.featured-content p{
font-size:16px;
color:#666;
margin-bottom:28px;
}

.featured-content a{
display:inline-block;
padding:14px 24px;
background:#4F46E5;
color:#fff;
text-decoration:none;
border-radius:12px;
font-weight:600;
transition:.3s;
width:max-content;
}

.featured-content a:hover{
background:#4338CA;
transform:translateY(-3px);
}

/*==================================
NOTIFICATION GRID
==================================*/

.notification-container{
width:92%;
margin:auto;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:28px;
margin-bottom:70px;
}

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

.news-card{
background:#fff;
padding:28px;
border-radius:22px;
box-shadow:0 10px 25px rgba(0,0,0,.06);
transition:.35s;
position:relative;
overflow:hidden;
display:flex;
flex-direction:column;
}

.news-card::before{
content:"";
position:absolute;
left:0;
top:0;
width:6px;
height:100%;
background:#4F46E5;
}

.news-card:hover{
transform:translateY(-8px);
box-shadow:0 18px 40px rgba(0,0,0,.12);
}

/*==================================
CATEGORY TAGS
==================================*/

.tag{
display:inline-block;
padding:8px 16px;
border-radius:50px;
font-size:12px;
font-weight:700;
margin-bottom:18px;
color:#fff;
width:max-content;
}

.cbse{
background:#2563EB;
}

.jee{
background:#DC2626;
}

.neet{
background:#059669;
}

.scholarship{
background:#7C3AED;
}

.results{
background:#EA580C;
}

.admission{
background:#0891B2;
}

/*==================================
CARD CONTENT
==================================*/

.news-card h3{
font-size:22px;
line-height:1.4;
margin-bottom:16px;
color:#222;
}

.news-card p{
font-size:11px;
color:#666;
line-height:1.8;
margin-bottom:30px;
flex:1;
}

/*==================================
CARD FOOTER
==================================*/

.card-footer{
display:flex;
justify-content:space-between;
align-items:center;
margin-top:auto;
}

.date{
font-size:10px;
font-weight:600;
color:#888;
}

/*==================================
READ MORE
==================================*/

.read-more-btn{
padding:10px 18px;
border:none;
background:#4F46E5;
color:#fff;
border-radius:10px;
cursor:pointer;
font-size:10px;
font-weight:600;
transition:.3s;
}

.read-more-btn:hover{
background:#4338CA;
transform:translateY(-2px);
}

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

.news-card:hover .read-more-btn{
box-shadow:0 8px 18px rgba(79,70,229,.35);
}
/*========================================================
PART 3
Info Sections • Newsletter • Footer • Modal • Responsive
========================================================*/

/*==================================
UPCOMING EXAMS & SCHOLARSHIPS
==================================*/

.info-section{
width:92%;
margin:70px auto;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(350px,1fr));
gap:30px;
}

.info-box{
background:#fff;
padding:35px;
border-radius:24px;
box-shadow:0 10px 30px rgba(0,0,0,.06);
}

.info-box h2{
font-size:22px;
margin-bottom:25px;
color:#222;
}

.info-box ul{
list-style:none;
}

.info-box li{
padding:14px 0;
border-bottom:1px solid #EEE;
font-size:16px;
color:#555;
transition:.3s;
}

.info-box li:last-child{
border:none;
}

.info-box li:hover{
padding-left:10px;
color:#4F46E5;
}

/*==================================
DEADLINES
==================================*/

.deadline-section{
width:92%;
margin:70px auto;
}

.deadline-section h2{
font-size:25px;
margin-bottom:30px;
}

.deadline-list{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:22px;
}

.deadline-card{
background:#fff;
padding:28px;
border-left:6px solid #4F46E5;
border-radius:18px;
box-shadow:0 8px 20px rgba(0,0,0,.05);
transition:.3s;
}

.deadline-card:hover{
transform:translateY(-6px);
}

.deadline-card strong{
display:block;
font-size:22px;
margin-bottom:10px;
color:#4F46E5;
}

.deadline-card p{
color:#666;
}

/*==================================
NEWSLETTER
==================================*/

.newsletter{
width:92%;
margin:80px auto;
padding:60px;
background:linear-gradient(135deg,#4F46E5,#7C3AED);
border-radius:30px;
text-align:center;
color:#fff;
}

.newsletter h2{
font-size:38px;
margin-bottom:18px;
}

.newsletter p{
opacity:.95;
margin-bottom:30px;
}

.newsletter-form{
display:flex;
justify-content:center;
gap:15px;
flex-wrap:wrap;
}

.newsletter-form input{
width:400px;
max-width:100%;
padding:18px;
border:none;
border-radius:12px;
font-size:16px;
outline:none;
}

.newsletter-form button{
padding:18px 35px;
border:none;
background:#fff;
color:#4F46E5;
border-radius:12px;
cursor:pointer;
font-weight:700;
transition:.3s;
}

.newsletter-form button:hover{
transform:translateY(-3px);
}

/*==================================
ADVERTISEMENT
==================================*/

.ad-banner{
width:92%;
margin:60px auto;
height:180px;
background:#E5E7EB;
border-radius:20px;
display:flex;
justify-content:center;
align-items:center;
font-size:26px;
font-weight:700;
color:#777;
}

/*==================================
FOOTER
==================================*/

footer{
margin-top:80px;
background:#111827;
padding:60px 10%;
text-align:center;
color:#fff;
}

footer h3{
font-size:32px;
margin-bottom:15px;
}

footer p{
opacity:.75;
margin:8px 0;
}

/*==================================
POPUP
==================================*/

.news-modal{
display:none;
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
background:rgba(0,0,0,.6);
justify-content:center;
align-items:center;
z-index:9999;
padding:20px;
}

.news-modal-content{
background:#fff;
width:min(800px,95vw);
border-radius:24px;
padding:40px;
position:relative;
animation:popup .3s ease;
}

.news-modal-content h2{
font-size:25px;
margin-bottom:20px;
}

.news-modal-content p{
font-size:17px;
line-height:1.9;
color:#555;
}

#closeNews{
position:absolute;
right:25px;
top:20px;
font-size:25px;
cursor:pointer;
transition:.3s;
}

#closeNews:hover{
color:#EF4444;
transform:rotate(90deg);
}

/*==================================
ANIMATION
==================================*/

@keyframes popup{
from{
transform:translateY(40px);
opacity:0;
}

to{
transform:translateY(0);
opacity:1;
}

}

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

@media(max-width:1100px){
.featured-news{
grid-template-columns:1fr;
}

.featured-image{
height:320px;
}

.hero-content h1{
font-size:38px;
}

}

@media(max-width:768px){
header{
flex-direction:column;
gap:20px;
padding:20px;
}

nav{
flex-wrap:wrap;
justify-content:center;
}

.notification-hero{
padding:50px 30px;
}

.hero-content h1{
font-size:25px;
}

.section-title{
flex-direction:column;
align-items:flex-start;
gap:10px;
}

.search-box{
flex-direction:column;
}

.search-box button{
width:100%;
}

.card-footer{
flex-direction:column;
align-items:flex-start;
gap:15px;
}

.newsletter{
padding:40px 25px;
}

.newsletter h2{
font-size:22px;
}

}

@media(max-width:480px){
.logo-container span{
font-size:22px;
}

.hero-content h1{
font-size:26px;
}

.news-card{
padding:22px;
}

.info-box{
padding:25px;
}

.deadline-card{
padding:20px;
}

.news-modal-content{
padding:25px;
}

.news-modal-content h2{
font-size:26px;
}

}