body{
    background: linear-gradient(135deg, #0f0c0a, #222222, #1c1c1c);
}
/* ================= BLOG SECTION ================= */
.blog-section{
max-width:1200px;
margin:auto;
padding:130px 20px 100px;
}
/* ================= BLOG TITLE ================= */
.blog-title{
font-family:Batangas;
font-size:42px;
text-align:center;
margin-bottom:60px;
background:linear-gradient(
90deg,
#f5d77a,
#d4af37,
#b9922e
);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
/* ================= BLOG GRID ================= */
#blog-container{
display:grid;
grid-template-columns:
repeat(auto-fill,minmax(300px,1fr));
gap:36px;
}
/* ================= BLOG CARD ================= */
.blog-card{
background:linear-gradient(
145deg,
#16120f,
#0f0c0a
);
border-radius:18px;
overflow:hidden;
border:1px solid rgba(212,175,55,0.25);
box-shadow:0 10px 30px rgba(0,0,0,0.6);
transition:0.35s ease;
display:flex;
flex-direction:column;
}
.blog-card:hover{
transform:translateY(-8px);
box-shadow:0 18px 40px rgba(212,175,55,0.15);
border-color:rgba(212,175,55,0.6);
}
/* ================= BLOG IMAGE ================= */
.blog-image{
width:100%;
height:220px;
object-fit:cover;
}
/* ================= BLOG CONTENT ================= */
.blog-content{
padding:26px;
display:flex;
flex-direction:column;
height:100%;
}
.blog-heading{
font-family:Batangas;
font-size:22px;
margin-bottom:12px;
color:#f5d77a;
}
.blog-excerpt{
font-size:14px;
line-height:1.7;
color:#c9b78a;
margin-bottom:20px;
flex-grow:1;
}
.blog-excerpt p{
margin:0;
}
/* ================= BACK BUTTON ================= */
.back-btn {
    border: 1px solid;
    border-radius: 3px;
    border-color: #f5d77a;
    color: #f5d77a;
    padding: 5px;
    text-decoration: none;
    margin-bottom: 100px;
}
/* ================= READ BUTTON ================= */
.blog-btn{
display:inline-block;
background:linear-gradient(
135deg,
#d4af37,
#b9922e
);
color:#111;
padding:10px 18px;
border-radius:6px;
text-decoration:none;
font-size:14px;
font-weight:600;
width:fit-content;
}
.blog-btn:hover{
background:linear-gradient(
135deg,
#f5d77a,
#d4af37
);
}
/* ================= SINGLE BLOG PAGE ================= */
.post-section{
max-width:900px;
margin:auto;
padding:130px 20px;
}
.post-title{
font-family:Batangas;
font-size:38px;
margin-top: 20px;
margin-bottom:18px;
background:linear-gradient(
90deg,
#f5d77a,
#d4af37
);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.post-meta{
color:#b89e6b;
font-size:14px;
margin-bottom:25px;
}
.post-image{
width:100%;
height:380px;
object-fit:cover;
border-radius:12px;
margin-bottom:28px;
}
.post-content{
line-height:1.9;
font-size:16px;
color:#d6c39a;
}
.post-content p{
margin-bottom:20px;
}
.post-content img{
    display: none;
}
/* ================= MOBILE ================= */
@media(max-width:768px){
.blog-title{
font-size:32px;
}
.blog-section{
padding:110px 16px 70px;
}
.post-title{
font-size:28px;
}
}