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

html{
scroll-behavior:smooth;
}

body{

font-family:'Hind Madurai',sans-serif;

background:
linear-gradient(
to bottom,
#2b0000,
#5a1200
);

overflow-x:hidden;

color:white;
}

/* NAVBAR */
.navbar{

position:sticky;

top:0;

z-index:999;

background:
rgba(0,0,0,0.92);

backdrop-filter:blur(12px);

border-bottom:
1px solid rgba(255,215,0,0.35);
}

.container{

max-width:1400px;

margin:auto;

display:flex;

justify-content:space-between;

align-items:center;

padding:
18px 25px;
}

.logo{

font-size:30px;

font-weight:700;

color:gold;
}

.nav{

display:flex;

gap:28px;

list-style:none;
}

.nav a{

color:white;

text-decoration:none;

font-size:17px;

font-weight:600;

transition:0.3s;
}

.nav a:hover{

color:gold;
}

.nav .active{

color:gold;
}

.menu-toggle{

display:none;

font-size:35px;

color:white;

cursor:pointer;
}

/* DETAILS */
.details-section{

padding:
70px 20px;
}

.details-card{

max-width:1350px;

margin:auto;

background:transparent;

border-radius:35px;

overflow:hidden;
}

/* HEADER IMAGE */
.details-img{

width:100%;

height:520px;

object-fit:cover;

object-position:center;

display:block;

border-radius:
35px 35px 0 0;
}

/* CONTENT */
.details-content{

background:white;

padding:
55px;

border-radius:
0 0 35px 35px;

box-shadow:
0 15px 50px rgba(0,0,0,0.3);
}

/* DATE */
.details-date{

display:inline-block;

margin-bottom:20px;

font-size:18px;

font-weight:700;

color:#8b0000;
}

/* TITLE */
.details-content h1{

font-size:62px;

line-height:1.3;

color:#111;

margin-bottom:35px;

word-break:break-word;
}

/* PARAGRAPH */
.news-text{

font-size:20px;

line-height:2;

text-align:justify;

color:#222;

font-weight:500;

word-break:break-word;

overflow-wrap:break-word;
}

/* EXTRA IMAGES */
.extra-images{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));

gap:20px;

padding-top:45px;
}

.extra-images img{

width:100%;

height:240px;

object-fit:cover;

border-radius:24px;

box-shadow:
0 10px 30px rgba(0,0,0,0.15);

transition:0.4s;
}

.extra-images img:hover{

transform:scale(1.03);
}

/* SHARE */
.share-box{

margin-top:55px;
}

.share-box h3{

font-size:34px;

margin-bottom:25px;

color:#8b0000;
}

.share-icons{

display:flex;

gap:18px;

flex-wrap:wrap;
}

.share-icons a,
.copy-btn{

width:68px;

height:68px;

display:flex;

justify-content:center;

align-items:center;

border:none;

border-radius:22px;

background:
linear-gradient(
135deg,
#8b0000,
#b91c1c
);

color:white;

font-size:26px;

cursor:pointer;

transition:0.3s;

text-decoration:none;
}

.share-icons a:hover,
.copy-btn:hover{

transform:
translateY(-5px);

background:
linear-gradient(
135deg,
gold,
#ffcc00
);

color:black;
}

/* RELATED */
.related-section{

padding:
20px 20px 100px;
}

.related-section h2{

text-align:center;

font-size:52px;

margin-bottom:55px;

color:gold;
}

/* GRID */
.related-grid{

max-width:1350px;

margin:auto;

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(320px,1fr));

gap:35px;
}

/* CARD */
.related-card{

background:
rgba(255,255,255,0.08);

border-radius:28px;

overflow:hidden;

border:
1px solid rgba(255,215,0,0.15);

backdrop-filter:blur(8px);

transition:0.4s;
}

.related-card:hover{

transform:
translateY(-8px);
}

/* IMAGE */
.related-card img{

width:100%;

height:220px;

object-fit:cover;
}

/* CONTENT */
.related-content{

padding:28px;
}

.related-content h3{

font-size:30px;

line-height:1.5;

margin-bottom:16px;

color:white;
}

.related-content p{

font-size:16px;

line-height:1.9;

color:#f2dfc6;

margin-bottom:22px;

text-align:justify;
}

.related-content a{

display:inline-block;

padding:
13px 26px;

border-radius:40px;

background:gold;

color:black;

font-weight:700;

text-decoration:none;

transition:0.3s;
}

.related-content a:hover{

transform:
translateY(-4px);
}

/* FOOTER */
.footer{

background:
linear-gradient(
135deg,
#1f0000,
#4d0d00,
#6f1a00
);

padding-top:65px;
}

.footer-container{

max-width:1350px;

margin:auto;

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));

gap:40px;

padding:
0 30px 45px;
}

.footer-box h2{

font-size:30px;

margin-bottom:22px;

color:gold;
}

.footer-box p{

margin-bottom:15px;

line-height:1.9;

color:#f2dfc6;
}

.footer-box a{

display:block;

margin-bottom:15px;

text-decoration:none;

color:#f2dfc6;

transition:0.3s;
}

.footer-box a:hover{

color:gold;
}

.footer-bottom{

text-align:center;

padding:18px;

font-size:15px;

background:
rgba(0,0,0,0.2);
}

/* MOBILE */
@media(max-width:768px){

.nav{

display:none;

flex-direction:column;

position:absolute;

top:72px;
left:0;

width:100%;

background:black;

padding:22px;
}

.nav.active{

display:flex;
}

.menu-toggle{

display:block;
}

.logo{

font-size:24px;
}

.details-section{

padding:
20px 8px;
}

.details-card{

border-radius:20px;
}

.details-img{

width:100%;

height:auto;

max-height:260px;

object-fit:cover;

border-radius:
20px 20px 0 0;
}

.details-content{

padding:20px;

border-radius:
0 0 20px 20px;
}

.details-date{

font-size:15px;

margin-bottom:14px;
}

.details-content h1{

font-size:28px;

line-height:1.5;

margin-bottom:22px;

word-break:break-word;

text-align:left;
}

.news-text{

font-size:17px;

line-height:1.9;

text-align:left;

word-break:break-word;

overflow-wrap:break-word;

color:#222;
}

.extra-images{

grid-template-columns:1fr;

gap:15px;

padding-top:30px;
}

.extra-images img{

height:200px;

border-radius:18px;
}

.share-box{

margin-top:35px;
}

.share-box h3{

font-size:24px;

margin-bottom:18px;
}

.share-icons{

gap:12px;
}

.share-icons a,
.copy-btn{

width:52px;

height:52px;

font-size:20px;

border-radius:16px;
}

.related-section{

padding:
20px 10px 70px;
}

.related-section h2{

font-size:34px;

margin-bottom:35px;
}

.related-grid{

grid-template-columns:1fr;

gap:22px;
}

.related-card{

border-radius:20px;
}

.related-card img{

height:200px;
}

.related-content{

padding:20px;
}

.related-content h3{

font-size:22px;

line-height:1.5;
}

.related-content p{

font-size:15px;

line-height:1.8;

text-align:left;
}

.related-content a{

padding:
11px 22px;

font-size:14px;
}

.footer{

text-align:center;

padding-top:45px;
}

.footer-container{

padding:
0 20px 35px;

gap:28px;
}

.footer-box h2{

font-size:24px;
}

.footer-box p,
.footer-box a{

font-size:15px;

line-height:1.8;
}

.footer-bottom{

font-size:13px;

padding:15px;
}

}