.blog-posts-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 35px;
}
.blog-post-item {
  width: 31.5%;
}
.blog-post-item:hover {
   
}
.blog-post-image {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  margin-bottom: 25px;
}
.blog-post-image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  object-position: 0 0;
}

.blog-post-title {
  
}

.blog-post-title h3 {
  
}

.blog-post-title a {
  font-size: 22px;
  color: #001f49;
}

.blog-post-title a:hover {
  color: #8dc631;
}

/* Pagination Styles */
.blog-posts-pagination {
    text-align: center;
    margin: 30px 0;
}

.blog-posts-pagination a,
.blog-posts-pagination span {
    display: inline-block;
    padding: 8px 12px;
    margin: 0 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #001f49;
    background-color: #fff;
    transition: all 0.3s ease;
    cursor: pointer;
}

.blog-posts-pagination a:hover {
    background-color: #f5f5f5;
    border-color: #999;
    transform: translateY(-1px);
}

.pagination-current {
    background-color: #8dc631 !important;
    color: white !important;
    border-color: #8dc631 !important;
}

.pagination-disabled {
    color: #ccc !important;
    cursor: not-allowed !important;
    background-color: #f9f9f9 !important;
}

.pagination-disabled:hover {
    transform: none !important;
}

.pagination-dots {
    border: none !important;
    background: none !important;
    cursor: default !important;
    color: #666;
}

.pagination-dots:hover {
    background: none !important;
    transform: none !important;
}

/* Loading indicator */
.blog-posts-loading {
    text-align: center;
    padding: 20px;
    font-style: italic;
    color: #666;
}

.blog-posts-loading::after {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 10px;
    border: 2px solid #ccc;
    border-radius: 50%;
    border-top-color: #8dc631;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@media screen and (max-width: 768px) {
  .blog-post-item {
    width: 47%;
  }
}

@media screen and (max-width: 480px) {
  .blog-post-item {
    width: 100%;
  }
}

@media screen and (max-width: 390px) {
  .blog-posts-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }
  .blog-posts-pagination a, 
  .blog-posts-pagination span {
      display: block;
      width: 30%;
  }
}