/* ==================================================
   VIDYA BHARATI SAMBAD
   PREMIUM NEWS PORTAL UI
================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root{

--primary:#f97316;
--secondary:#1e3a8a;
--accent:#dc2626;

--dark:#0f172a;
--light:#ffffff;

--gray:#f5f7fb;
--border:#e5e7eb;

--radius:16px;

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

}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

font-family:'Poppins',sans-serif;

background:#fff;

color:#222;

overflow-x:hidden;

}

a{
text-decoration:none;
color:inherit;
}

img{
max-width:100%;
display:block;
}

ul{
list-style:none;
}

.container{

width:100%;
max-width:1400px;

margin:auto;

padding:0 20px;

}

/* ==========================
   TOP BAR
========================== */

.topbar{

background:var(--primary);

color:#fff;

font-size:14px;

padding:10px 0;

}

.topbar-wrap{

display:flex;

justify-content:space-between;

align-items:center;

gap:20px;

}

/* ==========================
   HEADER
========================== */

.header{

background:#fff;

box-shadow:var(--shadow);

position:sticky;

top:0;

z-index:9999;

}

.header-wrap{

display:flex;

justify-content:space-between;

align-items:center;

padding:15px 0;

}

.logo{

font-size:34px;

font-weight:800;

color:var(--secondary);

}

.logo span{

color:var(--primary);

}

.header-right{

display:flex;

align-items:center;

gap:15px;

}

/* ==========================
   BUTTONS
========================== */

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

gap:8px;

padding:12px 22px;

border:none;

border-radius:10px;

cursor:pointer;

transition:.3s;

font-weight:600;

}

.btn-primary{

background:var(--primary);

color:#fff;

}

.btn-primary:hover{

transform:translateY(-3px);

}

.btn-dark{

background:var(--dark);

color:#fff;

}

/* ==========================
HOME BANNER
========================== */

.home-banner{

border-radius:16px;

overflow:hidden;

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

background:#fff;

max-width:100%;

}

.home-banner img{

width:100%;

height:350px;

object-fit:cover;

display:block;

}

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

.hero{

padding:40px 0;

background:var(--gray);

}

.hero-grid{

display:grid;

grid-template-columns:2fr 1fr;

gap:25px;

}

.hero-main{

background:#fff;

border-radius:var(--radius);

overflow:hidden;

box-shadow:var(--shadow);

}

.hero-main img{

height:450px;

width:100%;

object-fit:cover;

}

.hero-content{

padding:25px;

}

.hero-content h2{

font-size:34px;

line-height:1.3;

margin-bottom:15px;

}

.hero-side{

display:grid;

gap:20px;

}

.hero-card{

background:#fff;

border-radius:var(--radius);

overflow:hidden;

box-shadow:var(--shadow);

}

.hero-card img{

height:150px;

width:100%;

object-fit:cover;

}

.hero-card h4{

padding:15px;

font-size:18px;

}

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

.section{

padding:70px 0;

}

.section-title{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:30px;

}

.section-title h2{

font-size:32px;

font-weight:800;

}

/* ==========================
   NEWS GRID
========================== */

.news-grid{

display:grid;

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

gap:25px;

}

.news-card{

background:#fff;

border-radius:var(--radius);

overflow:hidden;

box-shadow:var(--shadow);

transition:.3s;

}

.news-card:hover{

transform:translateY(-5px);

}

.news-card img{

height:230px;

width:100%;

object-fit:cover;

}

.news-content{

padding:20px;

}

.news-content h3{

font-size:20px;

line-height:1.5;

}

/* ==========================
   EBOOK SECTION
========================== */

.ebook-card{

background:#fff;

padding:20px;

border-radius:20px;

box-shadow:var(--shadow);

text-align:center;

}

.ebook-card img{

height:350px;

object-fit:cover;

margin:auto;

}

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

.newsletter{

background:var(--secondary);

color:#fff;

padding:70px 0;

text-align:center;

}

.newsletter h2{

font-size:40px;

margin-bottom:15px;

}

.newsletter form{

max-width:600px;

margin:auto;

display:flex;

gap:10px;

margin-top:25px;

}

.newsletter input{

flex:1;

height:55px;

padding:0 20px;

border:none;

border-radius:10px;

}

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

.footer{

background:#111827;

color:#fff;

padding:70px 0 20px;

}

.footer-grid{

display:grid;

grid-template-columns:
2fr 1fr 1fr 1fr;

gap:40px;

}

.footer h4{

margin-bottom:20px;

}

.footer ul li{

margin-bottom:10px;

}

.copyright{

text-align:center;

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

margin-top:50px;

padding-top:20px;

}

/* ==================================================
PREMIUM NAVIGATION MENU
================================================== */

.main-navbar{
background:#fff;
border-top:1px solid #eee;
border-bottom:1px solid #eee;
position:relative;
z-index:999;
}

.main-navbar .container{
display:flex;
justify-content:center;
align-items:center;
}

.main-menu{
display:flex;
justify-content:center;
align-items:center;
gap:35px;
margin:0;
padding:0;
list-style:none;
}

.main-menu > li{
position:relative;
}

.main-menu > li > a{
display:flex;
align-items:center;
gap:6px;
padding:18px 0;
font-size:16px;
font-weight:600;
color:#111827;
transition:.3s;
}

.main-menu > li > a:hover{
color:var(--primary);
}

.mega-menu{
position:absolute;
top:100%;
left:0;
min-width:280px;
background:#fff;
padding:15px;
border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,.10);
opacity:0;
visibility:hidden;
transform:translateY(10px);
transition:.3s;
z-index:9999;
}

.has-dropdown:hover .mega-menu{
opacity:1;
visibility:visible;
transform:translateY(0);
}

.mega-menu li{
border-bottom:1px solid #f1f1f1;
}

.mega-menu li:last-child{
border:none;
}

.mega-menu li a{
display:block;
padding:12px;
font-size:15px;
font-weight:500;
border-radius:8px;
}

.mega-menu li a:hover{
background:#f8fafc;
color:var(--primary);
}

.mobile-toggle{
display:none;
}

@media(max-width:991px){

.mobile-toggle{
display:block;
background:none;
border:none;
font-size:22px;
cursor:pointer;
padding:15px;
}

.main-navbar .container{
display:block;
}

.main-menu{
display:none;
flex-direction:column;
align-items:flex-start;
gap:0;
padding:15px;
}

.main-menu.active{
display:flex;
}

.main-menu li{
width:100%;
}

.main-menu li a{
width:100%;
padding:12px 0;
}

.mega-menu{
position:static;
opacity:1;
visibility:visible;
transform:none;
box-shadow:none;
display:none;
width:100%;
padding-left:15px;
}

.has-dropdown.active .mega-menu{
display:block;
}

}

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

.footer{
background:#0b1430;
color:#fff;
padding:60px 0 20px;
}

.footer-grid{
display:grid;
grid-template-columns:2fr 1fr 1fr 1.5fr;
gap:40px;
}

.footer h3{
font-size:28px;
font-weight:700;
margin-bottom:20px;
line-height:1.3;
}

.footer h4{
font-size:22px;
font-weight:700;
margin-bottom:20px;
}

.footer p,
.footer li,
.footer a{
font-size:15px;
line-height:1.8;
font-weight:400;
}

.footer ul{
padding:0;
margin:0;
list-style:none;
}

.footer ul li{
margin-bottom:10px;
}

.footer a{
color:#fff;
transition:.3s;
}

.footer a:hover{
color:#f97316;
}

.footer .fab,
.footer .fas,
.footer .fa-solid{
font-size:18px;
}

.copyright{
margin-top:40px;
padding-top:20px;
border-top:1px solid rgba(255,255,255,.1);
text-align:center;
font-size:14px;
line-height:1.8;
}

/* Mobile */

@media(max-width:992px){

.footer-grid{
grid-template-columns:1fr 1fr;
}

}

@media(max-width:768px){

.footer-grid{
grid-template-columns:1fr;
gap:30px;
}

.footer h3{
font-size:24px;
}

.footer h4{
font-size:20px;
}

}

/* EBOOK PAGE */

.ebook-card{
background:#fff;
padding:30px;
border-radius:20px;
box-shadow:0 10px 25px rgba(0,0,0,.08);
text-align:center;
}

.ebook-card img{
max-width:300px;
margin:auto;
border-radius:10px;
box-shadow:0 5px 15px rgba(0,0,0,.15);
}

/* ==========================
DARK MODE
========================== */

body.dark-mode{
background:#0f172a !important;
color:#ffffff !important;
}

body.dark-mode .header,
body.dark-mode .main-navbar,
body.dark-mode .hero-main,
body.dark-mode .hero-card,
body.dark-mode .news-card,
body.dark-mode .ebook-card,
body.dark-mode .contact-card,
body.dark-mode .card,
body.dark-mode .footer{
background:#1e293b !important;
color:#ffffff !important;
}

body.dark-mode .hero,
body.dark-mode .section,
body.dark-mode .contact-section,
body.dark-mode .category-section,
body.dark-mode .post-page{
background:#0f172a !important;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode p,
body.dark-mode span,
body.dark-mode li,
body.dark-mode a{
color:#ffffff !important;
}

body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select{
background:#334155 !important;
color:#ffffff !important;
border-color:#475569 !important;
}

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

.newsletter{
background:#283593;
padding:80px 0;
text-align:center;
color:#fff;
}

.newsletter h2{
font-size:48px;
font-weight:800;
margin-bottom:15px;
color:#fff;
}

.newsletter p{
font-size:18px;
margin-bottom:35px;
opacity:.95;
}

.subscribe-form{
display:flex;
justify-content:center;
align-items:center;
gap:15px;
max-width:900px;
margin:auto;
}

.subscribe-form input{
flex:1;
height:64px;
padding:0 22px;
border:none;
border-radius:14px;
font-size:16px;
outline:none;
}

.subscribe-form button{
height:64px;
padding:0 35px;
border:none;
border-radius:14px;
background:linear-gradient(135deg,#f97316,#ea580c);
color:#fff;
font-size:16px;
font-weight:700;
cursor:pointer;
transition:.3s;
white-space:nowrap;
box-shadow:0 10px 25px rgba(249,115,22,.30);
}

.subscribe-form button:hover{
transform:translateY(-3px);
background:linear-gradient(135deg,#ea580c,#c2410c);
}

.subscribe-form button i{
margin-right:8px;
}

@media(max-width:768px){

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

.subscribe-form{
flex-direction:column;
}

.subscribe-form input,
.subscribe-form button{
width:100%;
}

}

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

.ebook-popup-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(15,23,42,.75);
backdrop-filter:blur(5px);
display:none;
justify-content:center;
align-items:center;
z-index:99999;
padding:20px;
animation:fadeIn .4s ease;
}

.ebook-popup{
position:relative;
width:100%;
max-width:520px;
background:#fff;
border-radius:28px;
padding:45px;
text-align:center;
box-shadow:0 30px 80px rgba(0,0,0,.25);
overflow:hidden;
}

.ebook-popup:before{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:6px;
background:linear-gradient(
90deg,
#f97316,
#ea580c,
#1e3a8a
);
}

.ebook-close{
position:absolute;
top:15px;
right:15px;
width:40px;
height:40px;
border:none;
border-radius:50%;
background:#f1f5f9;
cursor:pointer;
}

.ebook-icon{
width:100px;
height:100px;
margin:auto;
border-radius:50%;
background:linear-gradient(
135deg,
#f97316,
#ea580c
);
display:flex;
align-items:center;
justify-content:center;
font-size:42px;
color:#fff;
margin-bottom:20px;
}

.ebook-badge{
display:inline-block;
padding:8px 18px;
border-radius:50px;
background:#fff7ed;
color:#ea580c;
font-size:13px;
font-weight:700;
margin-bottom:15px;
}

.ebook-popup h2{
font-size:34px;
font-weight:800;
margin-bottom:15px;
color:#0f172a;
}

.ebook-popup p{
font-size:16px;
line-height:1.8;
color:#64748b;
margin-bottom:30px;
}

.ebook-actions{
display:flex;
justify-content:center;
gap:12px;
flex-wrap:wrap;
}

.ebook-btn{
background:linear-gradient(
135deg,
#f97316,
#ea580c
);
color:#fff;
padding:14px 28px;
border-radius:12px;
font-weight:700;
text-decoration:none;
}

.ebook-btn:hover{
color:#fff;
transform:translateY(-2px);
}

.ebook-later{
background:#e2e8f0;
border:none;
padding:14px 28px;
border-radius:12px;
font-weight:600;
cursor:pointer;
}

@keyframes fadeIn{
from{
opacity:0;
}
to{
opacity:1;
}
}

@media(max-width:768px){

.ebook-popup{
padding:30px 20px;
}

.ebook-popup h2{
font-size:26px;
}

}

.writer-box{
margin-top:40px;
padding:20px;
background:#f8fafc;
border-left:5px solid #f97316;
border-radius:10px;
text-align:right;
}

.writer-box h4{
margin-bottom:8px;
font-weight:700;
color:#0f172a;
}