/* General Styles */  
.category-filter-wrapper {  
    text-align: center;  
    margin-bottom: 20px;  
}  

#category-dropdown {  
    padding: 10px;  
    font-size: 16px;  
    border: 1px solid #ccc !important;  
    border-radius: 5px;  
    width: 200px;  
}  

/* Post Grid Container */  
.fusion-posts-container {  
    display: grid !important;  
    grid-template-columns: repeat(3, 1fr) !important;  
    gap: 48px !important;  
    max-width: 1200px !important;  
    margin: auto !important;  
}  

/* Individual Post Styles */  
.fusion-post {  
    border-bottom: 1px solid #ddd !important;  
    padding-bottom: 20px !important;  
    text-align: left !important;  
}  

.fusion-post img {  
    width: 100% !important;  
    max-width: 100% !important;  
    height: auto !important;  
    border-radius: 5px !important;  
}  

/* Post Titles and Text */  
.fusion-post h2 {  
    font-size: 20px !important;  
    margin-top: 10px !important;  
}  

.fusion-post p {  
    font-size: 16px !important;  
    color: #666 !important;  
}  

/* Read More Button */  
.fusion-post .read-more {  
    display: inline-block !important;  
    font-size: 14px !important;  
    text-decoration: none !important;  
    color: #0073aa !important;  
    font-weight: bold !important;  
}  

/* Pagination Styles */  
.pagination a,  
.pagination span {  
    display: inline-block;  
    padding: 8px 12px;  
    margin: 0 5px;  
    font-size: 14px;  
    color: #0073aa;  
    text-decoration: none;  
    border: 1px solid #ddd;  
    border-radius: 3px;  
}  

.pagination .current {  
    background: #0073aa;  
    color: #fff;  
    border-color: #0073aa;  
}  

/* Responsive Design */  
@media only screen and (max-width: 600px) {  
    .fusion-posts-container {  
        grid-template-columns: repeat(1, 1fr) !important;  
        gap: 20px !important;  
    }  

    #category-dropdown {  
        width: 100% !important;  
    }  
}  

@media only screen and (min-width: 600px) {  
    .fusion-posts-container {  
        grid-template-columns: repeat(2, 1fr) !important;  
        gap: 25px !important;  
    }  
}  

@media only screen and (min-width: 768px) {  
    .fusion-posts-container {  
        grid-template-columns: repeat(2, 1fr) !important;  
        gap: 30px !important;  
    }  
}  

@media only screen and (min-width: 992px) {  
    .fusion-posts-container {  
        grid-template-columns: repeat(3, 1fr) !important;  
        gap: 40px !important;  
    }  
}  

@media only screen and (min-width: 1200px) {  
    .fusion-posts-container {  
        grid-template-columns: repeat(3, 1fr) !important;  
        gap: 48px !important;  
    }  
}