/* slider styles */
.articles-slider {
  @apply w-[100%] h-[500px] max-[1200px]:h-[450px] max-[900px]:h-[350px] max-[650px]:h-[250px] max-[500px]:h-[200px];
  overflow: hidden;
  border-radius: 16px !important;
  position: relative;
}
.articles-slider-container .slick-list {
  border-radius: 16px !important;
}

.articles-slider .contnet-container {
  @apply max-[900px]:!w-[90%];
  height: 100%;
  width: 80% !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%);
  position: absolute;
  text-align: justify;
  direction: rtl;
  z-index: 2 !important;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.articles-slider .contnet-container button {
  @apply max-[900px]:!text-[18px] max-[500px]:!hidden;
  border: 1px solid white;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 24px;
  margin-top: 36px;
}
.articles-slider img {
  width: 100% !important;
  height: 100% !important;
}

.articles-slider-container .slick-prev {
  @apply !bg-white !text-primary-500 duration-200 hover:!bg-primary-300 hover:!text-white w-[42px] h-[42px] max-[1200px]:!h-[40px] max-[650px]:!h-[36px] max-[1200px]:!w-[40px] max-[650px]:!w-[36px];
  font-size: 28px !important;
  z-index: 2 !important;
  border-radius: 100%;
  opacity: 1;
  padding: 8px 0 !important;
  margin-right: 100px;
  top: auto;
  bottom: 40px !important;
}

.articles-slider-container .slick-next {
  @apply !bg-white !text-primary-500 duration-200 hover:!bg-primary-300 hover:!text-white w-[42px] h-[42px]  max-[1200px]:!h-[40px] max-[650px]:!h-[36px] max-[1200px]:!w-[40px] max-[650px]:!w-[36px];
  font-size: 28px !important;
  z-index: 2 !important;
  border-radius: 100%;
  opacity: 1;
  padding: 8px 0 8px 12px !important;
  margin-right: 130px;
  top: auto;
  left: auto !important;
  bottom: 40px !important;
  right: 0 !important;
}
.articles-slider-container .slick-dots li {
  @apply w-3 h-3 bg-primary-200;
  border-radius: 50%;
}
.articles-slider-container .slick-dots .slick-active {
  @apply bg-primary-400;
}

.articles-slider-container .slick-dots button::before {
  display: none !important;
}

/* slider styles */

/* card styles */

.newst-article-container {
  @apply relative mb-20 rounded-[16px] flex justify-center overflow-hidden;
}
.newst-article-container .title {
  @apply bg-primary-700 text-center py-2 px-20 leading-9 text-white mb-20 rounded-b-[16px] absolute line-clamp-1 !overflow-hidden;
  min-width: 345px;
  max-width: 345px;
}

.newst-article-container .content-container-box {
  direction: ltr;
}
.newst-article-container .content-container-box button {
  @apply px-6 py-2 bg-white border-2 border-solid rounded-xl border-primary-300 text-primary-600;
}
.newst-article-container .content-container-box .text-container {
  @apply !text-white;
}

.articles-list-container .page-title {
  @apply font-yekan text-[24px] text-primary-700 mr-10 max-[580px]:text-center max-[580px]:mr-0;
  position: relative;
}
.articles-list-container .page-title::before {
  @apply bg-primary-700 max-[580px]:hidden rounded-b-full;
  content: "";
  position: absolute;
  width: 21px;
  height: 10px;
  rotate: 90deg;
  right: -46px;
  margin-top: 16px;
}

.articles-list-container .content-container {
  @apply flex flex-row items-center max-[500px]:flex-col max-[500px]:items-start max-[500px]:!pl-0 max-[500px]:gap-2;
  margin-top: 16px;
  padding-left: 24px;
}
.articles-list-container .content-container > div {
  @apply max-[500px]:!w-full max-[500px]:!h-[auto];
  width: 190px;
  height: 123px;
  min-width: 190px;
  min-height: 123px;
  border-radius: 16px;
  overflow: hidden;
}

.similar-slider {
  height: 450px !important;
  overflow: hidden;
  direction: rtl;

  @apply max-[1000px]:!h-[400px] max-[650px]:!h-[300px];
}

.similar-slider .blur-backdrop-box {
  box-sizing: border-box !important;
  border-radius: 16px !important;
}

.similar-slider-container .slick-list {
  margin: 0 -7px;
}
.similar-slider-container .slick-list .slick-slide > div {
  padding: 0 20px;
}

@media (max-width: 650px) {
  .similar-slider-container .slick-list {
    margin: 0;
  }
  .similar-slider-container .slick-list .slick-slide > div {
    padding: 0;
  }
}

.similar-slider-container {
  transform: rotateY(180deg);
}

.similar-slider-container .slick-slide {
  transform: rotateY(180deg);
}

.filter-article-img {
  filter: invert(99%) sepia(22%) saturate(70%) hue-rotate(198deg)
    brightness(118%) contrast(85%);
}