/* استایل اسکرول بار افقی */
.related-posts-container {
    display: flex;
    overflow-x: auto; /* افزودن اسکرول افقی */
    width: 100%;
    white-space: nowrap;
    padding-bottom: 20px; /* افزودن فاصله پایینی به کانتینر */
}

/* استایل هر باکس خبر */
.related-posts {
    flex: 0 0 calc(100% / 3 - 60px); /* تعیین عرض هر باکس خبر با توجه به تعداد ستون‌ها */
    margin: 10px; /* فاصله بین باکس‌های خبری */
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    width: 250px; /* اضافه کردن عرض ثابت */
}

/* مدیا کوئری برای تنظیم تعداد ستون‌ها در اندازه‌های مختلف */
@media only screen and (max-width: 768px) {
    .related-posts {
        flex: 0 0 calc(80% - 20px); /* یک ستون در موبایل */
        width: calc(80% - 20px); /* تنظیم عرض برای موبایل */
    }
}


/* استایل تصاویر */
.related-posts img {
    width: 100%; /* تصاویر پراکنده را به اندازه عرض باکس خبری تنظیم می‌کند */
    
    height: auto; /* حفظ نسبت عکس */
    margin-bottom: 10px; /* حاشیه پایین عکس */
}

/* استایل عنوان هر خبر */
.related-posts h5 {
    font-family: Kalameh;
    font-size: 18px;
    font-weight: 700;

    letter-spacing: -0.03em;
    text-align: right;
    margin-top: 10px; /* فاصله بالایی برای عنوان */
    overflow: hidden; /* Add overflow property to hide overflowing content */
    white-space: break-spaces; /* Prevent text from wrapping */
    text-overflow: ellipsis; /* Add ellipsis (...) when text overflows */
}
/* استایل متادیتا هر خبر */
.related-posts .entry-meta {
    font-size: 14px;
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
}

/* استایل محتوای هر خبر */
.related-posts .entry-content {
    font-family: Kalameh(FaNum);
    font-size: 12px;
    font-weight: 400;
    line-height: 14.4px;
    
    text-align: left;
    display: flex;
    justify-content: space-between;
}

/* رنگ متن لینک */
.related-posts a {
    text-decoration: none;
    color: #333;
    word-wrap: break-word; /* Added property to allow the text to break into multiple lines */
    display: block; /* Added to force the link to behave as a block element */
}

/* رنگ متن لینک در حالت هاور */
.related-posts a:hover {
    color: #555;
}

/* استایل اسکرول بار */
.related-posts-container::-webkit-scrollbar {
    height: 5px; /* اندازه اسکرول بار */
    
}

.related-posts-container::-webkit-scrollbar-thumb {
    background: #888; /* رنگ پس زمینه اسکرول بار */
    border-radius: 0px; /* شکل گوشه‌های اسکرول بار */
}

.related-posts-container::-webkit-scrollbar-thumb:hover {
    background: #666; /* رنگ پس زمینه اسکرول بار در حالت هاور */
}

.rel-articles{
    margin:10px;
    font-weight: bold;
    font-size: 18px;
}


.ul-rel-articles{
    padding:0;
    list-style: none;
}