/* Custom CSS overrides */

/* Fixed height for blog card images to maintain consistent card sizes */
/* Target both blog-page and blog-section */
.blog-page .blog-box .img-box,
.blog-section .blog-box .img-box {
    height: 220px;
    overflow: hidden;
}

.blog-page .blog-box .img-box img,
.blog-section .blog-box .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
}

/* Optional: Add a hover effect for better user experience */
.blog-page .blog-box:hover .img-box img,
.blog-section .blog-box:hover .img-box img {
    transform: scale(1.05);
}

/* Additional fixes for the recent blog section */
.blog-section .blog-box {
    height: 400px; /* Set a fixed height for the blog box in the homepage */
    display: flex;
    flex-direction: column;
}

.blog-section .blog-box .text-box {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.blog-section .blog-box .text-box .title {
    margin-bottom: 10px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.blog-section .blog-box .text-box .read-more {
    margin-top: auto;
}