/*Blog css*/
.blog-hero{
padding:52px 20px 24px;
text-align:center;
background:linear-gradient(180deg,#ffffff,#f4f8ff);
}

.blog-hero h1{
font-size:36px;
margin-bottom:10px;
}

.blog-hero p{
color:#5f6b7a;
font-size:15px;
}

/* FEATURED */

.featured-card{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
align-items:center;
padding:60px 0;
}

.featured-card img{
width:100%;
border-radius:20px;
box-shadow:0 20px 50px rgba(0,0,0,0.08);
}

.read-btn{
display:inline-block;
margin-top:15px;
padding:12px 24px;
background:linear-gradient(90deg,#1e78ff,#00c8b4);
color:#fff;
border-radius:10px;
text-decoration:none;
}

/* GRID */

.blog-grid-section{
padding:22px 20px 38px;
background:#fff;
}

.blog-empty{
padding:28px 16px;
text-align:center;
width:100%;
}

.blog-empty h2{
font-size:24px;
margin:0;
color:#0b2244;
}

.grid-3{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
max-width:1100px;
margin:auto;
}

.blog-card{
background:#fff;
border-radius:18px;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,0.06);
transition:.25s;
height:100%;
}

.blog-card:hover{
transform:translateY(-6px);
box-shadow:0 20px 46px rgba(15,23,42,.12);
}

.blog-card-link{
display:grid;
grid-template-rows:auto auto auto 1fr auto;
height:100%;
color:inherit;
text-decoration:none;
}

.blog-card picture{
display:block;
overflow:hidden;
}

.blog-card img{
width:100%;
height:200px;
object-fit:cover;
transition:transform .3s ease;
}

.blog-card:hover img{
transform:scale(1.035);
}

.blog-tag{
display:inline-flex;
margin:14px 15px 0;
padding:6px 10px;
border-radius:999px;
background:#fff7ed;
color:#c2410c;
font-size:12px;
font-weight:800;
}

.blog-card h3{
padding:15px;
font-size:18px;
}

.blog-card p{
padding:0 15px 15px;
color:#5f6b7a;
}

.blog-read-more{
padding:0 15px 20px;
display:inline-block;
color:#1e78ff;
text-decoration:none;
font-weight:800;
}

.blog-detail{
max-width:900px;
padding:34px 20px 44px;
}

.blog-detail-tools{
display:flex;
justify-content:flex-start;
align-items:center;
margin-bottom:18px;
}

.blog-back-link{
display:inline-flex;
align-items:center;
gap:9px;
min-height:42px;
padding:9px 16px;
border:1px solid #dbe7f5;
border-radius:999px;
background:linear-gradient(180deg,#ffffff,#f8fbff);
color:#0f3f7a;
font-weight:800;
text-decoration:none;
box-shadow:0 12px 32px rgba(15,23,42,.08);
transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.blog-back-link span{
width:24px;
height:24px;
border-radius:999px;
display:inline-flex;
align-items:center;
justify-content:center;
background:#fff7ed;
color:#ff7a00;
}

.blog-back-link:hover{
transform:translateY(-1px);
border-color:#fed7aa;
box-shadow:0 16px 38px rgba(255,122,0,.14);
}

.blog-cover{
width:100%;
max-height:430px;
object-fit:cover;
border-radius:20px;
box-shadow:0 18px 48px rgba(15,23,42,.1);
margin-bottom:24px;
}

.blog-content{
font-size:16px;
line-height:1.8;
color:#1f2937;
white-space:normal;
}

.blog-cta-box{
margin-top:30px;
padding:24px;
border-radius:18px;
background:#f8fbff;
border:1px solid #e2eaf5;
}

/* MOBILE */

@media(max-width:900px){

.featured-card{
grid-template-columns:1fr;
}

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

}

/* FILTER */

.blog-filter{
padding:10px 0 5px;
text-align:center;
}

.filter-btn{
padding:10px 20px;
margin:6px;
border:none;
border-radius:25px;
background:#eef3ff;
color:#1e78ff;
font-weight:500;
cursor:pointer;
transition:.25s;
}

.filter-btn:hover{
background:#dbe7ff;
}

.filter-btn.active{
background:linear-gradient(90deg,#1e78ff,#00c8b4);
color:#fff;
box-shadow:0 6px 18px rgba(0,0,0,0.15);
}