.tcgelements-service-card{
  position: relative;
  display: flex;
  padding: 40px 25px;
  transition: all 0.3s ease;
  .title{
    position: relative;
  }
  .description{
    word-spacing: 0;
    transform : perspective(var(--e-transform-tcgelements-service-card-description-perspective,0)) rotate(var(--e-transform-tcgelements-service-card-description-rotateZ,0)) rotateX(var(--e-transform-tcgelements-service-card-description-rotateX,0)) rotateY(var(--e-transform-tcgelements-service-card-description-rotateY,0)) translate(var(--e-transform-tcgelements-service-card-description-translate,0)) translateX(var(--e-transform-tcgelements-service-card-description-translateX,0)) translateY(var(--e-transform-tcgelements-service-card-description-translateY,0)) scaleX(calc(var(--e-transform-tcgelements-service-card-description-flipX, 1) * var(--e-transform-tcgelements-service-card-description-scaleX, var(--e-transform-tcgelements-service-card-description-scale, 1)))) scaleY(calc(var(--e-transform-tcgelements-service-card-description-flipY, 1) * var(--e-transform-tcgelements-service-card-description-scaleY, var(--e-transform-tcgelements-service-card-description-scale, 1)))) skewX(var(--e-transform-tcgelements-service-card-description-skewX,0)) skewY(var(--e-transform-tcgelements-service-card-description-skewY,0));
  }
  span{
    display: inline-block;
  }
  .icon {
    position: relative;
    width: 50px;
    height: 50px;
    margin-inline-end: 30px;
    flex-shrink: 0;
    margin-top: 5px;
    img{
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
  .check-list {
    margin: 0;
    padding: 0;
    li {
      list-style-type: none;
      font-size: 16px;
      color: #777;
      margin-top: 10px;
      .list-icon{
        margin-right: 15px;
        flex-shrink: 0;
        svg{
          width: 16px;
          height: 16px;
          fill: #777;
        }
      }
    }
  }
  .float-icon {
    position: absolute;
    right: 40px;
    bottom: 30px;
    opacity: 0;
  }
  &:hover {
    &.hide-icon-hover{
      .icon {
        img {
          filter: invert(89%) sepia(100%) saturate(0%) hue-rotate(216deg) brightness(1000%) contrast(102%);
        }
      }
      .float-icon {
        opacity: 1;
        transition: all 0.3s ease;
      }
    }
  }
  .butn{
    transition: all 0.3s ease;
    span{
      text-decoration: inherit;
    }
    &:before{
      content: "";
    }
    svg{
      transition: all 0.3s ease;
    }
    &:before{
      transition: all 0.3s ease;
    }
  }
  .float-name {
    position: absolute;
    font-size: 12px;
    padding: 5px 15px;
    border-radius: 30px;
    background-color: var(--color-primary);
    color: #fff;
    opacity: 0;
    transform: scale(0);
    white-space: nowrap;
    transition: none;
    pointer-events: none;
    z-index: 99;
  }
}


@media screen and (max-width: 991px) {
  .tcgelements-service-card {
    &.tcgelements-responsive-br{
      br{
        display: none;
      }
    }
  }
}