.recommend .title {
  font-weight: 500;
}

.recommend .title::before {
  display: none;
}

.recommend .owl-carousel-classic-ctn {
  height: unset;
}

.recommend .owl-carousel-classic-ctn .owl-stage-outer {
  margin: 0;
  padding: 0;
  padding-top: 5px;
}

.recommend .owl-item {
  height: 325px;
  box-shadow: none;
  border-bottom: 4px solid #001AFF;
  transition: .3s;
}

.recommend .owl-item:hover {
  margin-top: -5px;
}

.recommend .owl-carousel-classic-slide {
  height: 100%;
}

.recommend .owl-classic-card-grad {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0%), rgba(0, 0, 0, 100%));
}

.recommend .owl-carousel-classic-category {
  top: 16px;
  left: 16px;
  right: unset;
  margin: 0;
  padding: 4px 8px;
  background: #fff;
  color: #333;
  font-weight: 500;
  opacity: 65%;
  z-index: 100;
}

.recommend .owl-carousel-classic-category:hover {

  filter: invert(1);
}

.recommend .owl-nav {
  position: absolute;
  margin-top: 0;
  top: 9px;
  right: 4px;
  width: unset;
  display: flex;
  gap: 4px;
}

.recommend .owl-nav button.owl-prev, .recommend .owl-nav button.owl-next {
  width: 50px;
  height: 50px;
  padding: 0;
  margin: 0;
  background: #fff;
  opacity: 65%;
  border-radius: 0;
}

.recommend .owl-nav button.owl-prev:hover, .recommend .owl-nav button.owl-next:hover {
  background: #fff;
  color: unset;
  filter: invert(1);
}

@media (max-width: 1400px) {
  .recommend .owl-item {
    height: 278px;
  }
}
@media (max-width: 1200px) {
  .recommend .owl-item {
    height: 232px;
  }
}
@media (max-width: 992px) {
  .recommend .owl-item {
    height: 260px;
  }
}
@media (max-width: 768px) {
  .recommend .owl-item {
    height: 387px;
  }
}
@media (max-width: 576px) {
  .recommend .owl-item {
    height: 301px;
  }
}