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

.blog-header{

text-align:center;

padding:140px 20px 60px;

}

.blog-header h1{

font-size:48px;

margin-bottom:10px;

}

.blog-header p{

opacity:0.8;

font-size:16px;

}



/* =========================
BLOG CONTAINER
========================= */

.blog-container{

max-width:1100px;

margin:auto;

padding:40px 20px;

}



/* =========================
BLOG GRID
========================= */

.blog-grid{

display:grid;

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

gap:30px;

}



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

.blog-card{

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

padding:25px;

border-radius:15px;

backdrop-filter:blur(10px);

transition:0.3s;

}



.blog-card:hover{

transform:translateY(-8px);

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

}



/* =========================
BLOG CARD TEXT
========================= */

.blog-card h3{

margin-bottom:10px;

font-size:20px;

}

.blog-card p{

opacity:0.85;

margin-bottom:15px;

line-height:1.6;

}



/* =========================
BLOG LINK
========================= */

.blog-card a{

text-decoration:none;

color:#6bdcff;

font-weight:500;

}



.blog-card a:hover{

text-decoration:underline;

}



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

@media(max-width:768px){

.blog-header h1{

font-size:36px;

}

}
.blog-img{

width:100%;

height:180px;

object-fit:cover;

border-radius:12px;

margin-bottom:15px;

}

.blog-date{

font-size:12px;

opacity:0.6;

display:block;

margin-bottom:8px;

}
.social-links{

display:flex;

justify-content:center;

gap:25px;

margin-top:20px;

}

.social-links a{

font-size:26px;

color:white;

transition:0.3s;

}

.social-links a:hover{

color:#6bdcff;

transform:translateY(-4px);

}