:root {
   --primary: #4F46E5;
   --secondary: #7C3AED;
   --dark: #111827;
   --light: #F3F4F6;
}

.blog-wrapper {
   background: var(--dark);
   min-height: 100vh;
   color: var(--light);
}

.blog-filters {
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   gap: 20px;
   margin-bottom: 40px;
}

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

.filter-btn {
   padding: 8px 20px;
   border: 1px solid rgba(255, 255, 255, 0.1);
   background: rgba(255, 255, 255, 0.05);
   color: rgba(255, 255, 255, 0.7);
   border-radius: 20px;
   cursor: pointer;
   transition: all 0.3s ease;
}

.filter-btn:hover, .filter-btn.active {
   background: var(--primary);
   color: white;
   border-color: var(--primary);
}

.search-box {
   position: relative;
   max-width: 300px;
   width: 100%;
}

.search-input {
   width: 100%;
   padding: 10px 40px 10px 15px;
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 20px;
   color: white;
}

.search-box i {
   position: absolute;
   right: 15px;
   top: 50%;
   transform: translateY(-50%);
   color: rgba(255, 255, 255, 0.5);
}

.blog-card {
   background: rgba(255, 255, 255, 0.05);
   backdrop-filter: blur(10px);
   border-radius: 20px;
   overflow: hidden;
   border: 1px solid rgba(255, 255, 255, 0.1);
   height: 100%;
   transition: all 0.3s ease;
}

.blog-card:hover {
   transform: translateY(-10px);
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.text-muted {
    --bs-text-opacity: 1;
    color: rgb(88 67 231) !important;
}
.blog-image {
   position: relative;
   overflow: hidden;
   aspect-ratio: 16/9;
}

.blog-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.3s ease;
}

.blog-card:hover .blog-image img {
   transform: scale(1.1);
}

.blog-category {
   position: absolute;
   top: 15px;
   right: 15px;
   padding: 5px 15px;
   border-radius: 20px;
   font-size: 0.8rem;
   font-weight: 500;
}

.blog-category.ai {
   background: rgba(79, 70, 229, 0.9);
   color: white;
}

.blog-category.ml {
   background: rgba(124, 58, 237, 0.9);
   color: white;
}

.blog-category.tech {
   background: rgba(16, 185, 129, 0.9);
   color: white;
}

.blog-content {
   padding: 25px;
}

.blog-content h2 {
   font-size: 1.3rem;
   font-weight: 600;
   margin-bottom: 15px;
   color: white;
}

.blog-content p {
   color: rgba(255, 255, 255, 0.7);
   margin-bottom: 20px;
   line-height: 1.6;
}

.blog-meta {
   display: flex;
   gap: 20px;
   color: rgba(255, 255, 255, 0.5);
   font-size: 0.9rem;
   margin-bottom: 20px;
}

.blog-meta span {
   display: flex;
   align-items: center;
   gap: 5px;
}

.read-more {
   color: var(--primary);
   text-decoration: none;
   display: flex;
   align-items: center;
   gap: 5px;
   font-weight: 500;
   transition: all 0.3s ease;
}

.read-more:hover {
   color: var(--secondary);
   gap: 10px;
}

.load-more {
   margin-top: 40px;
}

@media (max-width: 768px) {
   .blog-filters {
       flex-direction: column;
       align-items: stretch;
   }
   
   .search-box {
       max-width: 100%;
   }
}