.blog-card-wrapper { 

    display: flex; 

    gap: 20px; 

    flex-wrap: wrap;

   justify-content: center;

}

.blog-card-image {

    overflow: hidden;

    height: 230px;

    margin-bottom: 20px;

    border-radius: 5px 5px 0 0;

    position:relative;

}

.blog-card-image img {

    height: 230px;

    border-radius: 5px 5px 0 0;

    transition: all .3s ease-in-out;

    object-fit: cover;

    object-position: top;

}

.blog-card-image img:hover {

    transform:scale(1.04);

}

.blog-card {

    width: 32.3%;

    background: #fff;

    box-shadow: 4px 4px 0px var(--global-palette1);

    border-radius: 10px;

    border: 1px solid var(--global-palette1);

}

.blog-cardinner {

    padding: 0 30px 20px 30px;

}

.blog-card-readmore {

    font-size: 15px;

    font-weight: 500;

    transition: all .3s ease-in-out;

    display: flex;

    align-items: center;

    gap: 10px;

    transform:translateX(0px);

}

.blog-card-readmore:hover {

    transform:translateX(10px);

}

.blogdate {

    background: var(--global-palette2);

    position: absolute;

    bottom: 5px;

    color: #fff;

    padding: 5px 10px;

    border-radius: 5px;

    left: 30px;

    font-size: 14px;

    text-align: center;

}

.blogdate span {

    display: block;

    font-weight: bold;

    font-size: 18px;

}



/* blog category filter */

.blogfilter .blog-card {

    width: 48.3%;

}

.blog-category-filter {

    margin-bottom: 30px;

}

.blog-category-filter .filter-btn {

    background: transparent;

    border: 1px solid var(--global-palette1);

    padding: 10px 15px 10px 15px;

    color: var(--global-palette1);

    margin: 5px;

    text-transform: none;

}

.blog-category-filter .filter-btn:hover, .blog-category-filter .filter-btn:focus {

    color: #fff;

}



.news-pagination {

    text-align: center;

    padding-top: 40px;

    display: flex;

    justify-content: center;

    gap: 15px;

}

.news-pagination-next a, .news-pagination-prev a  {

    background: var(--global-palette1);

    padding: 10px 20px;

    border-radius: 5px;

    color: #fff;

}

.news-pagination-next a:hover , .news-pagination-prev a:hover {

    background: var(--global-palette2);
    color:#fff;

}



@media (max-width:991px){

    .blog-card, .blogfilter .blog-card {    width: 47.3%;} 

    .blog-cardinner {    padding: 0 20px 20px 20px;} 

    .blogdate {left: 20px;}



}

@media (max-width:630px){ 

    .blog-card, .blogfilter .blog-card {    width: 100%;}

}