/*--------------------------------------------------------------
  19. Custom Slider
----------------------------------------------------------------*/
.cs_custom_slide_container {
  height: 270px;
  position: relative;
  margin-top: 125px;
  margin-bottom: 125px;
  @media (max-width: 1199px) {
    margin-top: 100px;
    margin-bottom: 100px;
  }
  @media (max-width: 991px) {
    margin-top: 40px;
    margin-bottom: 84px;
  }
  @media (max-width: 767px) {
    margin-top: 15px;
    margin-bottom: 59px;
  }
  .container {
    height: inherit;
  }
}

.cs_custom_slide_container {
  .cs_custom_slide_wrapper {
    display: block;
    height: 100%;
    margin: 0 auto;
    position: relative;
    .cs_custom_slide {
      display: inline-block;
      width: 66%;
      height: 520px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate3d(-50%, -50%, 0) scale3d(0.4, 0.4, 1);
      transition: transform 0.3s ease-in-out 0s, z-index 0.2s ease-in-out 0.1s;
      @media (max-width: 1199px) {
        height: 470px;
      }
      @media (max-width: 991px) {
        height: 350px;
      }
      @media (max-width: 767px) {
        width: 98%;
        height: 300px;
      }
    }
  }
}

.cs_custom_slide_container {
  .cs_custom_slide_wrapper {
    .cs_custom_slide {
      &.prev-2 {
        transform: translate3d(-105%, -50%, 0) scale3d(0.4, 0.4, 1);
        z-index: 1;
      }
      &.prev-1 {
        transform: translate3d(-85%, -50%, 0) scale3d(0.6, 0.6, 1);
        z-index: 2;
      }
      &.next-1 {
        z-index: 2;
        transform: translate3d(-15%, -50%, 0) scale3d(0.6, 0.6, 1);
      }
      &.next-2 {
        z-index: 1;
        transform: translate3d(5%, -50%, 0) scale3d(0.4, 0.4, 1);
      }
      .cs_mouse_point.cs_style_1 {
        opacity: 0;
      }
      &.active {
        z-index: 3;
        transform: translate3d(-50%, -50%, 0) scale3d(1, 1, 1);
        backface-visibility: hidden;
        .cs_mouse_point.cs_style_1 {
          opacity: 1;
        }
      }
    }
  }
}

.cs_custom_slide_item {
  width: 100%;
  height: 520px;
  border-radius: 5px;
  display: block;
  position: relative;
  overflow: hidden;
  @media only screen and (min-width: 992px) and (max-width: 1199px) {
    height: 470px;
  }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    height: 350px;
  }
  @media (max-width: 767px) {
    height: 300px;
  }
}
.cs_custom_slide_arrow_left,
.cs_custom_slide_arrow_right {
  position: absolute;
  top: 50%;
  transform: translateY(-505);
  cursor: pointer;
  transition: all 0.3s ease;
  &:hover {
    color: var(--accent);
  }
  @media (max-width: 991px) {
    position: initial;
  }
}
.cs_custom_slide_arrow_left {
  left: calc((100vw - 1300px) / 2 / 2);
  margin-left: -28px;
  @media (max-width: 1400px) {
    left: calc((100vw - 1140px) / 2 / 2);
  }
  @media (max-width: 1199px) {
    left: calc((100vw - 960px) / 2 / 2);
  }
}
.cs_custom_slide_arrow_right {
  right: calc((100vw - 1300px) / 2 / 2);
  margin-right: -28px;
  @media (max-width: 1400px) {
    right: calc((100vw - 1140px) / 2 / 2);
  }
  @media (max-width: 1199px) {
    right: calc((100vw - 960px) / 2 / 2);
  }
}
.cs_custom_slide_arrows {
  @media (max-width: 991px) {
    display: flex;
    justify-content: center;
    gap: 15px;
    padding-top: 60px;
  }
  @media (max-width: 767px) {
    padding-top: 35px;
  }
}