.boxContainer {
        background-color: #F3F3F3;
        padding: 20px;
        margin: 30px 0;

    }
 
    /* Apply white border only to featured images */
.featured.blog-image {
    border: 4px solid #ffffff;
}

    /* Apply white border only to featured images */
.review_featured {
    border: 4px solid #ffffff;
}
    
    
    .blog-post-body {
        padding-left: 20px;
        z-index: 3; /* Ensure content is above the background */
        position: relative; /* Ensure z-index applies */
        
    }
    
    /* To remove border from last post */
    .blogPost:last-child {
        border-bottom: none;
            top: -3px;
    }

.back-featured-bg {
   position: absolute; /* Position the background absolutely */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
    opacity: 0.1; /* Lower opacity */
    background-size: cover;
    background-position: center center;
   
}


.blogPost {
    position: relative;
     margin: -24px -20px auto;
     padding: 25px 26px;
     overflow: hidden;
     border-bottom: 1px solid #DCDCDC;
     
}

/* Mobile styles */
@media (max-width: 768px) {
    .boxContainer {
        padding: 10px;
        margin: 15px 0;
    }

    .blogPost {
        margin: 0 auto; /* Remove negative margin */
        padding: 15px; /* Reduce padding for mobile */
    }

    /* Stack content vertically on mobile */
    .row {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Ensure images are responsive */
    .blog-image, .review-image {
        width: 100%;
        height: auto; /* Keep image responsive */
        margin-bottom: 15px; /* Add spacing below images */
    }

    .blog-post-body {
        padding-left: 0; /* Remove left padding on mobile */
        padding-top: 10px; /* Add top padding for spacing */
    }

    .back-featured-bg {
        opacity: 0.1; /* Lower opacity for background image */
    }
}