.blog-category-button {
    display: inline-flex;
    padding: 4px 16px;
    align-items: center;
    gap: 10px;
    border-radius: 20px;
    border: 1px solid #6C66E7;
    color: #6C66E7;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    transition: background 0.3s ease, color 0.3s ease;
}

.blog-category-button:hover {
    background: #6C66E7;
    color: #F6F7FA;
}

.previous-blog-post{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    border-radius: 10px;
    padding-left: 24px;
    padding-right: 24px;
    border: 1px solid #E9EBF3;
    background: #F6F7FA;
    transition: background 0.3s ease;
    box-shadow: 0 1px 3px 0 rgba(26, 30, 101, 0.01),
                0 2px 8px 0 rgba(26, 30, 101, 0.02),
                0 4px 19px 0 rgba(26, 30, 101, 0.03),
                0 12px 62px 0 rgba(26, 30, 101, 0.04);
}

.previous-blog-post:hover{
    background: #E9EBF3;
}

.previous-post-title{
    color: #242338;
    width: 100%;
    padding: 24px 0;
    gap: 10px;
    box-shadow: 0 -1px 0 0 #D9DCDF;
    text-align: right;
}

.blog-post-card {
    border-radius: 10px;
    border: 1px solid #E9EBF3;
    background: #F6F7FA;
    transition: background 0.3s ease;
    box-shadow: 0 1px 3px 0 rgba(26, 30, 101, 0.01),
                0 2px 8px 0 rgba(26, 30, 101, 0.02),
                0 4px 19px 0 rgba(26, 30, 101, 0.03),
                0 12px 62px 0 rgba(26, 30, 101, 0.04);
}

.blog-post-card:active {
    box-shadow: 0 3px 3px 0 rgba(26, 30, 101, 0.04),
                0 7px 8px 0 rgba(26, 30, 101, 0.03),
                0 17px 19px 0 rgba(26, 30, 101, 0.02),
                0 57px 62px 0 rgba(26, 30, 101, 0.01);
}

.blog-post-card:hover {
    background: #E9EBF3;
}

.blog-post-excerpt {
    color: #242338;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    overflow-y: auto;
    max-height: 130px;
    margin-right: 7px;
    scrollbar-width: thin;
    scrollbar-color: #888 #F6F7FA;
}

/* Style for the scrollbar track */
.blog-post-excerpt::-webkit-scrollbar {
    width: 7px; /* Adjust width as needed */
}

/* Style for the scrollbar thumb (the part you drag) */
.blog-post-excerpt::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 4px; /* Rounded corners */
}

/* Style for the scrollbar thumb when hovering */
.blog-post-excerpt::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

.load-more-link {
    display: inline-flex;
    padding: 14px 24px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 18px;
    background: #6C66E7;
    color: #F6F7FA;
    margin-bottom: 120px;
}