.articles-section{
    margin-top: 80px;
}
.articles-section h1{
    text-align: center;
    font-size: 36px;
    font-weight: 900;
    margin-bottom: 16px;
}
.articles-section p.slug{
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    color: #334155;
    margin-bottom: 80px;
}
.main-article{
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    transition: .3s;
    margin: 32px auto 32px auto;
    padding: 16px;
}
.read-time{
    color: #94A3B8;
    font-size: 14px;
    font-weight: 400;
}
.cat-btn a{
    background: transparent;
    border: 1px solid #CBD5E1;
    border-radius: 12px;
    padding: 16px;
    color: #020817;
    text-decoration: none;
    margin-left: 30px;
}
.blog-cat{
    margin-top: 80px;
    margin-bottom: 48px;
}
.blog-cat h2{
    text-align: center;
    color: #020817;
    font-weight: 700;
    font-size: 28px;
    margin-bottom: 8px;
}
.cat-btn{
    margin-bottom:36px ;
}
.blog-cat p.slug{
font-size: 16px;
    color: #475569;
    text-align: center;
    font-weight: 400;
    margin-bottom: 36px;
}
.cat-btn a:first-child{
    margin-left: 0;
}
.article-box,
.article-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    transition: .3s;
}
.article-card{
    padding: 16px;
}
.article-card .cat{
    color: #94A3B8;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 52px;
}
.article-card h6{
    font-size: 16px;
    font-weight: 600;
    margin: 24px 0 8px 0;
}
.article-card:hover {
    transform: translateY(-5px);
}
.big-article{
    height: 240px;
}
.big-article h3{
    font-size: 24px;
    margin-bottom: 16px;
    color: #020817;
}
.big-article p{
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 40px;
    color: #020817B2;
}
.big-article-img {
    border-radius: 22px;
    height: 100%;
    object-fit: cover;
}
.btn-light {
    border-radius: 50px;
    font-size: 14px;
    width: auto;
    float: left;
    background: transparent;
    border: 1px solid #CBD5E1;
}
.small-info{
    margin-bottom: 40px;
}
.small-info span {
     font-size: 14px;
     border-left: 1px solid #0208171A;
     padding-left: 24px;
     margin-left: 24px;
 }
.small-info span:last-child{
    font-size: 14px;
    border-left: none;
    padding-left: 0;
    margin-left: 0;
}
.small-info strong{
    display: block;
    font-size: 16px;
    font-weight: 400;
    color: #020817;
    margin-top: 4px;
}
/* Responsive */
@media (max-width: 768px) {
    .articles-section {
        margin-top: 24px;
    }
    .articles-section h1 {
        font-size: 24px;
    }
    .articles-section p.slug {
        font-size: 12px;
        margin-bottom: 48px;
    }
    .big-article h3 {
        font-size: 14px;
        margin-top: 16px;
    }
    .big-article p {
        font-size: 12px;
    }
    .small-info strong {
        font-size: 12px;
    }
    .small-info span {
        font-size: 10px;
        border-left: 1px solid #0208171A;
        padding-left: 12px;
        margin-left: 12px;
    }
    .article-card h6 {
        font-size: 14px;
    }
    .blog-cat {
        margin-top: 48px;
        margin-bottom: 48px;
    }
    /* کانتینر دکمه‌ها - اسکرول افقی موبایل */
    .cat-btn {
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        scrollbar-width: none; /* مخفی کردن اسکرول در فایرفاکس */
        -ms-overflow-style: none; /* IE/Edge */
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
    }

    /* مخفی کردن اسکرول در WebKit */
    .cat-btn::-webkit-scrollbar {
        display: none;
    }

    /* دکمه‌ها در موبایل کنار هم */
    .category-filter-btn {
        display: inline-block; /* مهم */
        white-space: nowrap;
    }
}