/**
 * ItcSlider
 * @version 1.0.1
 * @author https://github.com/itchief
 * @copyright Alexander Maltsev 2020 - 2023
 * @license MIT (https://github.com/itchief/ui-components/blob/master/LICENSE)
 * @tutorial https://itchief.ru/javascript/slider
 */

.itc-slider {
  position: relative;
  width: calc(100vw - 20px);
  margin: 0 auto;
}

.itc-slider-wrapper {
  overflow: hidden;
  max-width: 550px;
  margin: 0 auto;
}

.itc-slider-items {
  display: flex;
  transition: transform 0.5s ease;
  will-change: transform;
  gap: 10px;
}

.itc-slider-transition-none {
  transition: none;
}

.itc-slider-item {
  flex: 0 0 100%;
  max-width: calc(100% - 50px);
  user-select: none;
  will-change: transform;
  border-radius: 20px;
  border: 1px solid #0B2235;
  padding: 20px;
  height: 200px;
}

.itc-slider-btn {
  position: absolute;
  top: -20px;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 50px;
  text-align: center;
  border: none;
  transform: translateY(-50%);
  cursor: pointer;
  background: transparent;
  display: none;
}


@media screen and (min-width:576px) {
  .itc-slider-item {
    flex: 0 0 100%;
    max-width: calc(100% - 50px);
  }

  .slider-text{
    font-size: 16px;
  }

  .itc-slider-btn {
    top: 40%;
    display: flex;
  }

  .itc-slider-btn-prev {
    left: 0;
  }
  
  .itc-slider-btn-next {
    right: 20px;
  }
}

@media (min-width: 1174px) {
  .itc-slider {
    height: 270px;
    width: calc(1174px - 90px);
  }

  .itc-slider-item {
    flex: 0 0 492px;
  }
  .itc-slider-wrapper{
    max-width: 100%;
  }

  .itc-slider-btn-prev {
    left: -50px;
  }
  
  .itc-slider-btn-next {
    right: -40px;
  }
}

.itc-slider-btn:hover,
.itc-slider-btn:focus {
  color: #fff;
  text-decoration: none;
  outline: 0;
}

.itc-slider-btn::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background: transparent no-repeat center center;
  background-size: 100% 100%;
}

.itc-slider-btn-prev::before {
  background-image: url("../img/slider/prev-arrow.svg");
}

.itc-slider-btn-next::before {
  background-image: url("../img/slider/next-arrow.svg");
}

.slider-step{
  font-size: 20px;
  color: #BDBDBD;
  font-weight: 400;
}
.slider-title{
  font-size: 20px;
  font-weight: 400;
  margin: 10px 0 20px;
}

.slider-text{
  font-size: 14px;
}

.itc-slider-indicators {
  display: flex;
  justify-content: center;
  margin: 0 15%;
  padding-left: 0;
  padding-top: 10px;
  list-style: none;
}

.itc-slider-indicator {
  flex: 0 1 auto;
  box-sizing: content-box;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 3px;
  margin-left: 3px;
  text-indent: -999px;
  background-color: #0B22351A;
  background-clip: padding-box;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  cursor: pointer;
}

.itc-slider-indicator-active {
  background-color: black
}

.itc-slider-wrapper.salary-slider {
  max-width: 80%;
}

.itc-slider-item.salary-slider {
  width: auto;
  flex: 0 0 100%;
  height: 175px;
}

.itc-slider-btn-prev.salary-slider {
  left: 0;
}

.itc-slider-btn-next.salary-slider {
  right: 0;
}

.itc-slider-item.salary-slider {
  height: inherit;
}

@media screen and (max-width: 576px) {
  .itc-slider-items {
    gap: 25px;
  }

  .itc-slider-item {
    max-width: calc(100% - 65px);
  }

  .itc-slider-wrapper.salary-slider {
    margin: 0;
    max-width: 100%;
  }
}

.itc-slider.about-teaching-slider {
  width: 100%;
  min-height: 550px;
  height: 100%;
}

.itc-slider-wrapper.about-teaching-slider {
  max-width: 100%;
  min-height: 550px;
  margin: 0;
}

.itc-slider-item.about-teaching-slider {
  width: auto;
  flex: 0 0 29%;
  min-height: 550px;
  background-color: #0B2235;
  position: relative;
}

.itc-slider-items.about-teaching-slider {
  padding-top: 40px;
}

.itc-slider-btn-prev.about-teaching-slider {
  left: 0;
}

.itc-slider-btn-next.about-teaching-slider {
  right: 0;
}

/* bg-dark */
.bg-dark .itc-slider-item{
  background-color: #fff;
}

.bg-dark .itc-slider-indicator {
  background-color: #fff;
}

.bg-dark .itc-slider-indicator-active {
  background-color:#FD460E;
}