.blog-section{
    padding:80px 0;
    background:#f8fafc;
}

.blog-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
}

.blog-card{
    background:#fff;
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 5px 25px rgba(0,0,0,.08);
    transition:.3s;
}

.blog-card:hover{
    transform:translateY(-6px);
}

.blog-card a{
    color:inherit;
    text-decoration:none;
}

.blog-card figure{
    height:260px;
    overflow:hidden;
    margin:0;
}

.blog-card figure img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.4s;
}

.blog-card:hover figure img{
    transform:scale(1.08);
}

.blog-info{
    padding:25px;
}

.blog-info small{
    color:#64748b;
    font-weight:500;
}

.blog-info h2{
    font-size:22px;
    color:#1e293b;
    margin:12px 0;
}

.blog-info p{
    color:#475569;
    line-height:1.7;
}

.read-more{
    display:inline-block;
    margin-top:15px;
    color:#2563eb;
    font-weight:600;
}

.blog-detail-section{
    padding:80px 0;
    background:#f8fafc;
}

.singlepost{
    max-width:950px;
    margin:auto;
    background:#fff;
    border-radius:15px;
    padding:35px;
    box-shadow:0 5px 25px rgba(0,0,0,.08);
}

.singlepost figure{
    margin:-35px -35px 30px -35px;
}

.singlepost figure img{
    width:100%;
    max-height:450px;
    object-fit:cover;
    border-radius:15px 15px 0 0;
}

.postmeta ul{
    list-style:none;
    padding:0;
    margin-bottom:20px;
}

.postmeta li{
    color:#64748b;
}

.blog-content{
    line-height:1.9;
    color:#1e293b;
    font-size:17px;
}

.blog-content h1,
.blog-content h2,
.blog-content h3{
    margin:25px 0 15px;
    color:#1e293b;
}

.blog-content p{
    margin-bottom:18px;
}

.blog-content img{
    max-width:100%;
    border-radius:12px;
    margin:20px 0;
}

@media(max-width:768px){

    .blog-grid{
        grid-template-columns:1fr;
    }

    .blog-card figure{
        height:220px;
    }

    .singlepost{
        padding:25px;
    }

    .singlepost figure{
        margin:-25px -25px 25px -25px;
    }

    .blog-section,.blog-detail-section{padding:48px 0}
    .singlepost{border-radius:12px}
    .blog-content{font-size:16px;overflow-wrap:anywhere}

}
