.blog-layout {
     display: flex;
     justify-content: flex-start;
     align-items: flex-start;
     width: 100%;
     padding: 0px;
     gap: 30px;
     box-sizing: border-box;
     margin: 0;
}
 .blog-container {
     display: flex;
     flex-wrap: wrap;
     gap: 20px;
     flex: 3;
}
 .blog-card {
     flex: 0 0 calc(33.333% - 13.5px);
     background: var(--blogcardbg);
     border-radius: 8px;
     overflow: hidden;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     display: flex;
     flex-direction: column;
     height: 400px;
}
 .blog-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
 .card-image {
     position: relative;
     height: 200px;
     overflow: hidden;
     border-bottom-left-radius: 8px;
     border-bottom-right-radius: 8px;
}
 .card-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.5s ease;
}
 .blog-card:hover .card-image img {
     transform: scale(1.05);
}
 .bookmark-icon {
     position: absolute;
     top: 10px;
     right: 10px;
     background: var(--Mainbg);
     width: 30px;
     height: 30px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: all 0.3s ease;
}
 .bookmark-icon:hover {
     background: var(--Mainbg);
     transform: scale(1.1);
}
 .bookmark-icon i {
     color: #333;
     font-size: 14px;
}
 .card-content {
     padding: 10px;
     display: flex;
     flex-direction: column;
     flex-grow: 1;
     justify-content: space-between;
}
 .card-title {
     font-size: 1.2rem;
     margin-bottom: -20px;
     color: var(--color);
}
 .card-description {
     color: var(--blogcardesc);
     font-size: 0.9rem;
     margin-bottom: 10px;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     overflow: hidden;
     text-overflow: ellipsis;
     -webkit-line-clamp: 3;
     min-height: 4.5em;
}
 .publish-date {
     font-size: 0.8rem;
     color: #999;
     display: flex;
     align-items: center;
     margin-top: auto;
}
 .publish-date i {
     margin-right: 5px;
     font-size: 0.7rem;
}
 @media (max-width: 768px) {
     .blog-card {
         flex: 1 1 100%;
    }
}
 .card-tags {
     margin-bottom: 0px;
}
 .tag {
     display: inline-block;
     background-color: var(--blogcardtag);
     color: var(--color);
     font-size: 0.75rem;
     padding: 4px 8px;
     border-radius: 12px;
     margin-right: 6px;
     margin-bottom: 4px;
}
 .load-more-container {
     width: 100%;
     display: flex;
     justify-content: center;
     margin-top: 20px;
     margin-bottom: 20px;
}
 .load-more-btn {
     padding: 10px 20px;
     background-color: var(--Mainbg);
     color: var(--color);
     border: var(--border);
     border-radius: 62px;
     font-size: 1rem;
     cursor: pointer;
     transition: all 0.3s ease;
     font-family: inherit;
}
 .load-more-btn:hover {
     background-color: var(--Mainbg-hover);
     transform: translateY(-2px);
}
 .loader-circle {
     width: 16px;
     height: 16px;
     border: 2px solid transparent;
     border-top: 2px solid var(--color);
     border-radius: 50%;
     margin-right: 8px;
     animation: spin 0.8s linear infinite;
     display: inline-block;
}
 @keyframes spin {
     to {
         transform: rotate(360deg);
    }
}
 .load-more-btn.loading {
     pointer-events: none;
     opacity: 0.7;
}
 .load-more-btn.loading .btn-text::after {
     content: '...';
}
 .load-more-btn:not(.done):hover {
     transform: translateY(-2px);
     animation: pulse 0.3s ease-in-out;
}
 @keyframes pulse {
     0% {
         transform: translateY(0);
    }
     50% {
         transform: translateY(-2px);
    }
     100% {
         transform: translateY(0);
    }
}
 .sidebarblog {
     flex: 1;
     min-width: 250px;
     background: transparent;
     padding: 0px;
     border-radius: 12px;
}
 .blog-layout {
     display: flex;
}
 .blog-container {
     overflow-y: auto;
}
 .sidebarblog {
     position: sticky;
     top: 80px;
     margin-top: calc(0px + 0px);
     align-self: flex-start;
}
 @media (max-width: 1024px) {
     .blog-card {
         flex: 0 0 calc(50% - 10px);
    }
}
 @media (max-width: 768px) {
     .blog-layout {
         flex-direction: column;
    }
     .blog-card {
         flex: 0 0 100%;
    }
     .sidebarblog {
         width: 100%;
         margin-top: 20px;
    }
}
 * {
     user-select: none;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
}