.article-cart{
  border: 1px solid rgba(165, 42, 42, 0.56);
  border-radius: 10px 100px 10px 10px;
}

.article-cart .top{
  position: relative;
  height: 200px;
}
.article-cart .top img{
  height: 100%;
  filter: grayscale(100%);
  border-radius: 10px 100px 10px 10px;
  width: 100%;

  
}
.article-cart .top .article-title{
  position: absolute;
  bottom:15px;
  right: 10px;
  z-index: 10;
  color:#fff;
  font-weight: 500;
  font-size: 17px;
}
.article-cart .top::after{
    content: "";
    position: absolute;
    border-radius: 10px 100px 10px 10px;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
   background-color: transparent;
    background-image: linear-gradient(310deg, #64300099 59%, #0000003f 49%);
}
.read-more{
 color: rgba(165, 91, 42, 0.74);
 font-weight: bold;
}
.read-more:hover{
 color: rgba(165, 91, 42, 0.74);
}
.description{
  font-size: 15px;
  color:black;
}
@media (min-width: 576px) {
    .container,.container-sm {
        max-width:540px
    }
}

@media (min-width: 768px) {
    .container,.container-md,.container-sm {
        max-width:1140px
    }
}

@media (min-width: 992px) {
    .container,.container-lg,.container-md,.container-sm {
        max-width:1140px !important
    }
}

@media (min-width: 1200px) {
    .container,.container-lg,.container-md,.container-sm,.container-xl {
        max-width:1140px
    }
}

@media (min-width: 1400px) {
    .container,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl {
        max-width:1320px
    }
}
.spacee{
    margin-top:80px;
}
#articles-container {
  transition: none; /* حذف transition قدیمی */
  position: relative;
  overflow: hidden;
  min-height: 300px; /* ارتفاع ثابت برای جلوگیری از لرزش */
}

#articles-container.fade-out {
  animation: fadeSlideDown 0.5s forwards;
}

#articles-container.fade-in {
  animation: fadeSlideUp 0.5s forwards;
}
/* انیمیشن محو شدن و پایین رفتن */
@keyframes fadeSlideDown {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(30px);
  }
}

/* انیمیشن ظاهر شدن و بالا آمدن */
@keyframes fadeSlideUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.page-item a{
    color: black;
}
.active>.page-link,
.page-link.active {
  z-index:3;
  color:#fff !important;
  background-color:rgba(165, 91, 42, 0.74) !important;
  border-color:rgba(165, 91, 42, 0.74) !important;
}
.page-link{
    border-radius:10px !important;
}
}