.slider-swiper img {
  border-radius: 25px;
}

.course-card > div {
  border-radius: 20px;
  padding: 18px;
  text-align: center;
}

.course-card:nth-child(5n-4) > div {
  background-color: var(--primary-color);
}

.course-card:nth-child(5n-3) > div {
  background-color: #6b3c00;
}

.course-card:nth-child(5n-2) > div {
  background-color: var(--secondary-color);
}

.course-card:nth-child(5n-1) > div {
  background-color: #d9b24f;
}

.course-card:nth-child(5n-0) > div {
  background-color: var(--secondary-color2);
}

.course-card h3,
.course-card a {
  color: var(--light-color);
}

.course-card p {
  color: var(--primary-color2);
}

.course-card img {
  -o-object-fit: contain;
  object-fit: contain;
}

.about-section {
  background-color: var(--secondary-color);
  background-image: url("../image/header-pattern.png");
  background-size: cover;
  background-repeat: no-repeat;
}

.teacher-div {
  position: relative;
  border-radius: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  background-color: var(--primary-color2);
  padding: 18px;
  gap: 18px;
}
.teacher-div img {
  width: 100px;
  height: 100px;
  border-radius: 16px;
}
.teacher-div:hover {
  background-color: #f2e2ba;
}

.teacher-div > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.teacher-div span {
  position: relative;
  padding-right: 18px;
}

.teacher-div span::before {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: var(--input-radius);
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  background-color: var(--primary-color);
  -webkit-box-shadow: 0 3px 10px 2px #ff6f08ba;
  box-shadow: 0 3px 10px 2px #ff6f08ba;
}

@media screen and (max-width: 350px) {
  .teacher-div {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .teacher-div img {
    width: 100%;
    height: auto;
  }
}