.tcgelements-services-slider {
  .card {
    position: relative;
    display: flex;
    transition: all 0.3s ease;
    transform : perspective(var(--e-transform-tcgelements-services-slider-card-perspective,0)) rotate(var(--e-transform-tcgelements-services-slider-card-rotateZ,0)) rotateX(var(--e-transform-tcgelements-services-slider-card-rotateX,0)) rotateY(var(--e-transform-tcgelements-services-slider-card-rotateY,0)) translate(var(--e-transform-tcgelements-services-slider-card-translate,0)) translateX(var(--e-transform-tcgelements-services-slider-card-translateX,0)) translateY(var(--e-transform-tcgelements-services-slider-card-translateY,0)) scaleX(calc(var(--e-transform-tcgelements-services-slider-card-flipX, 1) * var(--e-transform-tcgelements-services-slider-card-scaleX, var(--e-transform-tcgelements-services-slider-card-scale, 1)))) scaleY(calc(var(--e-transform-tcgelements-services-slider-card-flipY, 1) * var(--e-transform-tcgelements-services-slider-card-scaleY, var(--e-transform-tcgelements-services-slider-card-scale, 1)))) skewX(var(--e-transform-tcgelements-services-slider-card-skewX,0)) skewY(var(--e-transform-tcgelements-services-slider-card-skewY,0));
    transform-origin: var(--e-transform-tcgelements-services-slider-card-transform-origin-y) var(--e-transform-tcgelements-services-slider-card-transform-origin-x);
    &:after{
      transform : perspective(var(--e-transform-tcgelements-services-slider-card-overlay-perspective,0)) rotate(var(--e-transform-tcgelements-services-slider-card-overlay-rotateZ,0)) rotateX(var(--e-transform-tcgelements-services-slider-card-overlay-rotateX,0)) rotateY(var(--e-transform-tcgelements-services-slider-card-overlay-rotateY,0)) translate(var(--e-transform-tcgelements-services-slider-card-overlay-translate,0)) translateX(var(--e-transform-tcgelements-services-slider-card-overlay-translateX,0)) translateY(var(--e-transform-tcgelements-services-slider-card-overlay-translateY,0)) scaleX(calc(var(--e-transform-tcgelements-services-slider-card-overlay-flipX, 1) * var(--e-transform-tcgelements-services-slider-card-overlay-scaleX, var(--e-transform-tcgelements-services-slider-card-overlay-scale, 1)))) scaleY(calc(var(--e-transform-tcgelements-services-slider-card-overlay-flipY, 1) * var(--e-transform-tcgelements-services-slider-card-overlay-scaleY, var(--e-transform-tcgelements-services-slider-card-overlay-scale, 1)))) skewX(var(--e-transform-tcgelements-services-slider-card-overlay-skewX,0)) skewY(var(--e-transform-tcgelements-services-slider-card-overlay-skewY,0));
    }
    .title {
      margin-bottom: 0.5rem;
      color: #000;
      position: relative;
    }

    .description {
      word-spacing: 0;
    }

    span {
      display: inline-block;
    }

    .icon {
      position: relative;

      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }

    .butn {
      transition: all 0.3s ease;

      &:before {
        content: "";
      }

      svg {
        transition: all 0.3s ease;
      }

      &:before {
        transition: all 0.3s ease;
      }
    }
  }
  //controls
  .tcgelements-services-slider-arrows {
    color: #ccc;
    font-size: 13px;
    width: 55px;
    height: 55px;
    line-height: 55px;
    text-align: center;
    margin: 5px 0;
    border: 1px solid rgba(255, 255, 255, .3);
    position: absolute;
    border-radius: 50%;
    background: none;

    &:after {
      display: none;
    }

    &.swiper-button-next {
      position: absolute;
      top: 50%;
      right: 30px;

      .tcgelements-services-slider-arrow-text {
        margin-right: 8px;
      }
    }

    &.swiper-button-prev {
      position: absolute;
      top: 50%;
      left: 30px;

      .tcgelements-services-slider-arrow-text {
        margin-left: 8px;
      }
    }
  }

  .swiper-pagination-bullets {
    &.swiper-pagination-horizontal {
      width: auto;
      display: block;
      right: 50%;
      left: unset;
      transform: translateX(50%);
    }

    &.swiper-pagination-vertical {
      width: auto;
      display: block;
      top: 50%;
      bottom: unset;
      transform: translateY(50%);
    }
  }

  .swiper-pagination-fraction {
    width: auto;
    display: block;
    right: 50%;
    left: unset;
    transform: translateX(50%);
  }

  .swiper-scrollbar {
    &.scrollbar-horizontal {
      position: absolute;
      bottom: 15px;
      z-index: 10;
      left: unset;
      margin: 0 1%;
      width: calc(100% - (1% + 1%));
      height: 4.5px;

      .swiper-scrollbar-drag {
        height: 4.5px;
      }
    }

    &.scrollbar-vertical {
      position: absolute;
      right: 15px;
      z-index: 10;
      top: 0;
      margin: 1% 0;
      display: block;
      height: calc(100% - ((1% + 1%) * 3));
      width: 4.5px;

      .swiper-scrollbar-drag {
        width: 4.5px;
      }
    }
  }

  .arrows-pagination-container {
    z-index: 1;
    transform : perspective(var(--e-transform-tcgelements-services-slider-arrows-pagination-container-perspective,0)) rotate(var(--e-transform-tcgelements-services-slider-arrows-pagination-container-rotateZ,0)) rotateX(var(--e-transform-tcgelements-services-slider-arrows-pagination-container-rotateX,0)) rotateY(var(--e-transform-tcgelements-services-slider-arrows-pagination-container-rotateY,0)) translate(var(--e-transform-tcgelements-services-slider-arrows-pagination-container-translate,0)) translateX(var(--e-transform-tcgelements-services-slider-arrows-pagination-container-translateX,0)) translateY(var(--e-transform-tcgelements-services-slider-arrows-pagination-container-translateY,0)) scaleX(calc(var(--e-transform-tcgelements-services-slider-arrows-pagination-container-flipX, 1) * var(--e-transform-tcgelements-services-slider-arrows-pagination-container-scaleX, var(--e-transform-tcgelements-services-slider-arrows-pagination-container-scale, 1)))) scaleY(calc(var(--e-transform-tcgelements-services-slider-arrows-pagination-container-flipY, 1) * var(--e-transform-tcgelements-services-slider-arrows-pagination-container-scaleY, var(--e-transform-tcgelements-services-slider-arrows-pagination-container-scale, 1)))) skewX(var(--e-transform-tcgelements-services-slider-arrows-pagination-container-skewX,0)) skewY(var(--e-transform-tcgelements-services-slider-arrows-pagination-container-skewY,0))
  }
  .swiper-gl {
    position: relative;
    margin: 0 auto;
    max-width: 100%;
    overflow: hidden;
    .swiper-wrapper{
      height: 100%;
    }
    .swiper-slide{
      height: 100%;
      position: relative;
    }
    .swiper-gl-image {
      display: none;
    }
    > canvas {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
    .swiper-gl-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      position: absolute;
      left: 0;
      top: 0;
    }
  }
}


@media screen and (max-width: 991px) {
  .tcgelements-services-slider {
    br{
      display: none;
    }
  }
}