img{
max-width:100%;
height:auto;
}

/* RESET */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Segoe UI',sans-serif;
}

body{
background:#f4f4f4;
scroll-behavior:smooth;
}

/* HEADER */

header{
text-align:center;
background:#111;
color:white;
padding:15px;
position:sticky;
top:0;
z-index:1000;
}

header h1{
font-size:32px;
}

header p{
color:#ccc;
}

/* buttons */

.dark-btn{
position:absolute;
left:20px;
top:20px;
background:#ff3c00;
color:white;
border:none;
padding:6px 10px;
border-radius:5px;
cursor:pointer;
}

.login-btn{
position:absolute;
right:20px;
top:20px;
color:white;
font-weight:bold;
text-decoration:none;
}

/* NAVBAR */

nav{
background:#ff3c00;
text-align:center;
padding:10px;
}

nav a{
color:white;
margin:0 12px;
text-decoration:none;
font-weight:bold;
}

nav a:hover{
text-decoration:underline;
}

/* menu mobile */

.menu-toggle{
display:none;
background:#ff3c00;
color:white;
padding:10px;
text-align:center;
cursor:pointer;
}

/* BREAKING */

.breaking{
background:#ff0000;
color:white;
padding:8px;
font-weight:bold;
text-align:center;
}

/* SEARCH */

.search-box{
text-align:center;
margin:15px;
}

.search-box input{
padding:8px;
width:260px;
border-radius:6px;
border:1px solid #ccc;
}

.search-box button{
padding:8px 14px;
background:#ff3c00;
color:white;
border:none;
border-radius:6px;
}

/* CONTAINER */

.container{
display:flex;
flex-wrap:wrap;
justify-content:center;
width:90%;
margin:auto;
}

/* NEWS CARD */

.news-card{
width:30%;
background:white;
border-radius:10px;
overflow:hidden;
box-shadow:0 2px 8px rgba(0,0,0,0.08);
margin:10px;
transition:.2s;
}

.news-card:hover{
transform:translateY(-3px);
}

.news-card img{
width:100%;
height:180px;
object-fit:cover;
}

.news-card h2{

font-size:18px;

line-height:1.4;

margin:8px 0;

font-weight:600;

}


.news-card p{

font-size:13px;

color:gray;

margin:0;

}

.news-card a{
text-decoration:none;
color:#111;
}

.news-card:first-child{

border:2px solid rgba(0, 119, 255, 0.603);

}


.news-card:first-child h2{

color:rgb(0, 119, 255, 0.603);

}

/* FEATURED */

.featured{
background:white;
padding:15px;
margin:20px;
border-radius:10px;
box-shadow:0 3px 10px rgba(0,0,0,0.08);
}

.featured img{
width:100%;
height:320px;
object-fit:cover;
border-radius:10px;
}

/* AD */

.ad{
text-align:center;
margin:20px;
}

.ad img{
width:100%;
max-width:900px;
}

/* SINGLE PAGE */

.news-title{
font-size:25px;
margin:10px 0;
}

.meta{
color:gray;
font-size:22px;
margin-bottom:10px;
}

.news-flex{
display:flex;
gap:20px;
margin-top:20px;
}

.news-img{

width:40%;

float:left;

margin-right:20px;

margin-top:0;

margin-bottom:10px;

border-radius:10px;

}

.news-content{

font-size:18px;

line-height:1.3;

text-align:justify;

}

.news-content p{

margin-top:0;

margin-bottom:18px;

}

.page-wrap{

display:flex;

max-width:1100px;

margin:auto;

gap:30px;

align-items:flex-start;

}


.main-news{

width:70%;

}


.sidebar{

width:30%;

}


.news-img{

width:40%;

float:left;

margin-right:20px;

margin-bottom:10px;

border-radius:10px;

}


.comments-box{

margin-top:30px;

padding:20px;

border:1px solid #ddd;

border-radius:8px;

background:#fafafa;

}


.comments-box input,
.comments-box textarea{

width:100%;

padding:10px;

margin-top:10px;

border:1px solid #ccc;

border-radius:5px;

}


.comments-box button{

margin-top:10px;

padding:10px 20px;

background:#111;

color:white;

border:none;

cursor:pointer;

}


@media(max-width:768px){

.page-wrap{

flex-direction:column;

}

.main-news,
.sidebar{

width:100%;

}

.news-img{

width:100%;

float:none;

margin-right:0;

}

}

/* SHARE */

.share{
padding:6px 12px;
margin-right:6px;
border-radius:5px;
color:white;
text-decoration:none;
font-size:14px;
}

.whatsapp{background:#25D366;}
.facebook{background:#1877f2;}
.twitter{background:#1da1f2;}

/* COMMENTS */

.comment-form{
background:#fafafa;
padding:15px;
border-radius:8px;
margin-bottom:20px;
}

.comment-form textarea{
width:100%;
height:120px;
padding:10px;
border-radius:6px;
border:1px solid #ccc;
margin-bottom:10px;
}

.comment-card{
background:white;
padding:12px;
border-radius:8px;
margin-bottom:12px;
box-shadow:0 2px 6px rgba(0,0,0,0.05);
}

/* CATEGORY LINKS */

.category-links{
text-align:center;
margin:25px;
}

.category-links a{
margin:5px;
padding:6px 12px;
background:#eee;
border-radius:5px;
text-decoration:none;
color:black;
}

.related-news h3{

margin-bottom:15px;

text-align:left;

}


.related-grid{

display:flex;

flex-direction:column;

gap:15px;

}


.related-card{

display:flex;

gap:15px;

align-items:flex-start;

}


.related-card img{

width:140px;

height:90px;

object-fit:cover;

border-radius:8px;

}


.related-card p{

margin:0;

font-size:15px;

line-height:1.4;

text-align:left;

}


.related-card a{

text-decoration:none;

color:#111;

font-weight:500;

}


.related-news h3{

margin-bottom:15px;

}


/* mobile */

@media(max-width:768px){

.related-grid{

flex-direction:column;

}

.related-card{

width:100%;

}

}

.views{

font-size:12px;

color:gray;

margin-top:5px;

}

/* FOOTER */

footer{
background:#111;
color:white;
padding:20px;
text-align:center;
margin-top:40px;
}

/* DARK MODE */

.dark{
background:#111;
color:white;
}

.dark .news-card,
.dark .featured,
.dark .comment-card{
background:#1e1e1e;
}

.dark nav{
background:black;
}

.dark a{
color:#ff3c00;
}

/* MOBILE */

@media(max-width:768px){

.menu-toggle{
display:block;
}

nav{
display:none;
flex-direction:column;
background:#111;
}

nav a{
padding:10px;
border-bottom:1px solid #444;
}

.news-card{
width:100%;
}

.news-flex{
flex-direction:column;
}

.news-img,
.news-content{
width:100%;
}

.featured img{
height:220px;
}

}