.filter-container {
         background: white;
         border-radius: 8px;
         padding: 1.5rem;
         margin-bottom: 2rem;
         box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
     }

     .filter-form {
         display: flex;
         gap: 10px;
     }

     .filter-form .form-control {
         border-radius: 4px;
         border: 1px solid #ddd;
         padding: 0.75rem;
     }

     .filter-form .btn {
         border-radius: 4px;
         font-weight: 500;
         text-transform: uppercase;
         letter-spacing: 0.5px;
         padding: 0.75rem 1.5rem;
     }

     .article-card {
         border: none;
         border-radius: 8px;
         overflow: hidden;
         box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
         transition: transform 0.3s ease, box-shadow 0.3s ease;
         margin-bottom: 2rem;
         height: 100%;
     }

     .article-card:hover {
         transform: translateY(-5px);
         box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
     }

     .article-card-body {
         padding: 1.5rem;
     }

     .article-card-title {
         font-family: 'Jost', sans-serif;
         font-weight: 500;
         font-size: 1.25rem;
         margin-bottom: 0.75rem;
         color: #333;
     }

     .article-card-text {
         color: #666;
         margin-bottom: 1.5rem;
     }

     .article-card-btn {
         border-radius: 4px;
         font-weight: 500;
         text-transform: uppercase;
         letter-spacing: 0.5px;
         padding: 0.5rem 1.25rem;
     }

     .pagination {
         justify-content: center;
         margin-top: 2rem;
     }

     .page-item .page-link {
         color: #333;
         border: 1px solid #ddd;
         margin: 0 5px;
         border-radius: 4px;
     }

     .page-item.active .page-link {
         background-color: #0066cc;
         border-color: #0066cc;
     }

     .page-item.disabled .page-link {
         color: #6c757d;
     }

     @media (max-width: 768px) {

         .filter-form {
             flex-direction: column;
         }
     }