.blog-card {
        border: none;
    }
    
    .blog-image {
        width: 100%;
        height: 250px;
        background: linear-gradient(135deg, var(--primary-color), #4a7ba7);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 4rem;
        border-radius: 15px;
        position: relative;
        overflow: hidden;
    }

    .blog-image::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="dots" width="60" height="60" patternUnits="userSpaceOnUse"><circle cx="30" cy="30" r="2" fill="rgba(255,255,255,0.08)"/></pattern></defs><rect width="60" height="60" fill="url(%23dots)"/></svg>');
        opacity: 0.45;
        z-index: 2; /* overlay sits above image */
    }
    
    .blog-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        position: relative;
        z-index: 1; /* keep image beneath overlay */
        -webkit-backface-visibility: hidden; /* helps crisp rendering */
    }
    
    .blog-date {
        position: absolute;
        top: 20px;
        left: 20px;
        background: var(--secondary-color);
        color: white;
        padding: 10px 15px;
        border-radius: 10px;
        font-weight: 600;
        font-size: 0.9rem;
        z-index: 3; /* ensure date sits above overlay */
    }
    
    .blog-card h5 a {
        color: var(--primary-color);
        text-decoration: none;
        transition: color 0.3s ease;
    }
    
    .blog-card h5 a:hover {
        color: var(--secondary-color);
    }
    
    .blog-meta {
        display: flex;
        gap: 20px;
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid #e9ecef;
        font-size: 0.9rem;
        color: #666;
    }
    
    .blog-meta i {
        color: var(--primary-color);
        margin-right: 5px;
    }
    
    .blog-excerpt {
        color: #666;
        line-height: 1.8;
    }
    
    .read-more {
        color: var(--primary-color);
        font-weight: 600;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        transition: gap 0.3s ease;
    }
    
    .read-more:hover {
        gap: 10px;
        color: var(--secondary-color);
    }
    
    .sidebar-card {
        background: white;
        border-radius: 15px;
        padding: 2rem;
        box-shadow: 0 5px 20px rgba(0,0,0,0.08);
        margin-bottom: 2rem;
    }
    
    .sidebar-card h4 {
        color: var(--primary-color);
        margin-bottom: 1.5rem;
        font-weight: 700;
    }
    
    .category-list, .recent-posts {
        list-style: none;
        padding: 0;
    }
    
    .category-list li, .recent-posts li {
        padding: 10px 0;
        border-bottom: 1px solid #e9ecef;
    }
    
    .category-list li:last-child, .recent-posts li:last-child {
        border-bottom: none;
    }
    
    .category-list a, .recent-posts a {
        color: var(--dark-color);
        text-decoration: none;
        transition: color 0.3s ease;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .category-list a:hover, .recent-posts a:hover {
        color: var(--primary-color);
    }
    
    .category-count {
        background: var(--light-color);
        padding: 3px 10px;
        border-radius: 15px;
        font-size: 0.85rem;
        color: var(--primary-color);
        font-weight: 600;
    }