.text-lesson-hero {
  width: 100%;
  height: 320px;
}
.text-lesson-hero img {
  position: absolute;
  inset: 0;
}
.text-lesson-hero__mask {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(1deg, rgba(18, 31, 62, 0.9) 0%, rgba(18, 31, 62, 0) 100%);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.dark-mode .text-lesson-hero__mask {
  background: linear-gradient(1deg, rgba(170, 184, 197, 0.9) 0%, rgba(170, 184, 197, 0) 100%);
}

.text-lesson-header {
  top: -119px;
  margin-bottom: -119px;
  z-index: 5;
}
.text-lesson-header__mask {
  position: absolute;
  inset: 8px;
  bottom: -8px;
  border-radius: 32px;
  opacity: 0.5;
  background: var(--white);
  z-index: 1;
}
.text-lesson-header__overlay-img {
  width: 280px;
  height: 280px;
  position: absolute;
  right: 16px;
  bottom: 16px;
  top: auto;
}
@media (max-width: 991px) {
  .text-lesson-header__overlay-img {
    width: 140px;
    height: 140px;
    bottom: auto;
    top: 0;
  }
}
.rtl .text-lesson-header__overlay-img {
  right: auto;
  left: 16px;
}

.text-lesson-contents img, .text-lesson-contents video {
  width: 100%;
  max-width: 100%;
  border-radius: 16px;
  margin-bottom: 16px;
}
.text-lesson-contents h1, .text-lesson-contents h2, .text-lesson-contents h3, .text-lesson-contents h4, .text-lesson-contents h5, .text-lesson-contents h6 {
  color: var(--dark);
  margin-bottom: 16px;
}
.text-lesson-contents p {
  color: var(--gray-500);
  margin-bottom: 16px;
}

.text-lesson-bottom-fixed-card {
  position: fixed;
  bottom: -150%;
  left: 0;
  right: 0;
  padding: 16px 0;
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.02);
  transition: all 0.5s ease;
  z-index: 50;
}
@media (max-width: 991px) {
  .text-lesson-bottom-fixed-card {
    display: none !important;
  }
}
.text-lesson-bottom-fixed-card.show {
  bottom: 0;
}
.text-lesson-bottom-fixed-card__course-img {
  width: 67px;
  height: 48px;
}
.text-lesson-bottom-fixed-card__progress {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: transparent;
  z-index: 55;
}
.text-lesson-bottom-fixed-card__progress .progress-line {
  width: 0;
  height: 100%;
  background-color: var(--primary);
}

.text-lesson-item {
  transition: all 0.2s ease;
}
.text-lesson-item .mask-8-white {
  border: 1px dashed var(--gray-200);
  transition: all 0.2s ease;
}
.text-lesson-item__card {
  background-color: var(--white);
  border: 1px solid var(--gray-200);
  transition: all 0.2s ease;
}
.text-lesson-item__card-number {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 4px 8px;
  border-radius: 16px;
  background-color: var(--gray-100);
  font-size: 8px;
  color: var(--gray-500);
  transition: all 0.2s ease;
}
.text-lesson-item__card h3 {
  color: var(--dark);
  line-height: 21px;
}
.text-lesson-item__card.view-full-lessons {
  color: var(--gray-500);
}
.text-lesson-item:hover .text-lesson-item__card, .text-lesson-item.is-current .text-lesson-item__card {
  background-color: var(--primary);
  border: 1px solid var(--primary);
}
.text-lesson-item:hover .text-lesson-item__card h3, .text-lesson-item.is-current .text-lesson-item__card h3 {
  color: var(--white);
}
.text-lesson-item:hover .text-lesson-item__card.view-full-lessons, .text-lesson-item.is-current .text-lesson-item__card.view-full-lessons {
  color: var(--white);
}
.text-lesson-item:hover .text-lesson-item__card-number, .text-lesson-item.is-current .text-lesson-item__card-number {
  background-color: rgba(255, 255, 255, 0.2);
  color: var(--white);
}
.text-lesson-item:hover .mask-8-white, .text-lesson-item.is-current .mask-8-white {
  border: 1px dashed var(--info);
}