.blog-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

    padding:70px 0;

}

.blog-card{

    background:#fff;

    border-radius:10px;

    overflow:hidden;

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

    transition:.3s;

}

.blog-card:hover{

    transform:translateY(-6px);

}

.blog-image img{

    width:100%;

    display:block;

    aspect-ratio:16/9;

    object-fit:cover;

}

.blog-content{

    padding:25px;

}

.blog-meta{

    display:flex;

    justify-content:space-between;

    font-size:13px;

    color:#777;

    margin-bottom:15px;

}

.blog-title{

    font-size:24px;

    margin-bottom:15px;

}

.blog-title a{

    color:#111;

}

.blog-excerpt{

    color:#666;

    line-height:1.8;

    margin-bottom:20px;

}

.read-more{

    color:var(--primary);

    font-weight:600;

}

.single-post-container{
    max-width:900px;
    margin:60px auto;
    padding:0 20px;
}

.post-title{
    font-size:42px;
    line-height:1.2;
    margin-bottom:10px;
}

.post-meta{
    color:#666;
    margin-bottom:30px;
}

.post-thumbnail{
    margin-bottom:30px;
}

.post-thumbnail img{
    width:100%;
    border-radius:12px;
}

.post-content{
    font-size:18px;
    line-height:1.9;
}

.post-content p{
    margin-bottom:22px;
}

.post-content h2,
.post-content h3{
    margin:35px 0 20px;
}

.post-content ul{
    margin:20px 0 20px 30px;
}

.post-content img{
    max-width:100%;
    height:auto;
    border-radius:10px;
}

.page-header{

background:#176f5d;

padding:70px 0;

color:#fff;

text-align:center;

}

.page-header h1{

font-size:42px;

margin-bottom:15px;

}

.page-header p{

font-size:18px;

opacity:.9;

}

.blog-container{

padding:70px 0;

}

.blog-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:35px;

}

.blog-card{

background:#fff;

border-radius:15px;

overflow:hidden;

box-shadow:0 8px 25px rgba(0,0,0,.08);

transition:.3s;

}

.blog-card:hover{

transform:translateY(-8px);

}

.blog-image img{

width:100%;

height:240px;

object-fit:cover;

display:block;

}

.blog-content{

padding:25px;

}

.blog-meta{

font-size:13px;

color:#777;

margin-bottom:15px;

}

.blog-content h2{

font-size:24px;

margin-bottom:15px;

line-height:1.3;

}

.blog-content h2 a{

color:#222;

text-decoration:none;

}

.blog-content p{

color:#666;

line-height:1.8;

margin-bottom:25px;

}

.read-more{

display:inline-block;

background:#ffc72c;

padding:12px 24px;

border-radius:6px;

font-weight:700;

color:#222;

text-decoration:none;

}

.pagination{

margin-top:60px;

text-align:center;

}

.pagination .page-numbers{

display:inline-block;

padding:12px 18px;

margin:4px;

background:#176f5d;

color:#fff;

text-decoration:none;

border-radius:5px;

}

.pagination .current{

background:#ffc72c;

color:#111;

}

@media(max-width:992px){

.blog-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.blog-grid{

grid-template-columns:1fr;

}

.page-header h1{

font-size:34px;

}

}


.single-layout{

display:grid;

grid-template-columns:3fr 1fr;

gap:50px;

padding:60px 0;

}

.single-content{

background:#fff;

}

.featured-image{

margin-bottom:35px;

}

.featured-image img{

width:100%;

border-radius:12px;

display:block;

}

.entry-content{

font-size:18px;

line-height:1.9;

color:#444;

}

.entry-content h2{

margin:40px 0 20px;

}

.entry-content img{

max-width:100%;

height:auto;

border-radius:10px;

margin:30px 0;

}

.post-meta{

margin-top:15px;

font-size:15px;

opacity:.9;

}

.post-tags{

margin-top:50px;

}

.post-tags a{

display:inline-block;

padding:8px 15px;

background:#176f5d;

color:#fff;

border-radius:30px;

margin:5px;

text-decoration:none;

}

.share-post{

margin-top:50px;

padding-top:30px;

border-top:1px solid #ddd;

}

.share-post a{

display:inline-block;

margin-right:10px;

padding:10px 20px;

background:#ffc72c;

border-radius:6px;

color:#111;

text-decoration:none;

font-weight:700;

}

.sidebar-widget{

background:#fff;

padding:25px;

border-radius:10px;

box-shadow:0 5px 20px rgba(0,0,0,.08);

margin-bottom:30px;

}

@media(max-width:992px){

.single-layout{

grid-template-columns:1fr;

}

}