.wcf--image-box {
  display: block;
  position: relative;
  overflow: hidden;

  svg {
    width: 1em;
    height: 1em;
  }

  .icon {
    display: inline-block;
  }


  .thumb {
    line-height: 0;

    img {
      width: 100%;
    }
  }

  .wcf__btn {
    margin-top: 15px;
  }

  .title-wrap {
    display: flex;
    flex-direction: column;
  }

  .title,
  .subtitle,
  .description {
    color: #fff;
  }

  .title {
    margin: 10px 0;
  }

  &.style {
    &-1 {
      display: flex;
      flex-direction: column;

      .title,
      .subtitle,
      .description {
        color: #1C1D20;
      }

      .thumb {
        flex-basis: 50%;
      }

      .content {
        padding: 30px;
        flex-basis: 50%;
      }
    }

    &-2 {
      display: flex;
      flex-direction: column;
      position: relative;

      &:hover .wcf__btn {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, -50%);
      }

      .title,
      .subtitle,
      .description {
        color: #1C1D20;
      }

      .thumb {
        position: relative;
        flex-basis: 50%;
      }

      .content {
        padding: 30px;
        flex-basis: 50%;
      }

      .wcf__btn {
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -30%);
        opacity: 0;
        visibility: hidden;
        transition: all 0.5s;
      }
    }

    &-3 {

      &:hover {
        .icon {
          opacity: 1;
          visibility: visible;
          transform: translateY(0);
        }

        .subtitle {
          opacity: 0;
          visibility: hidden;
          transform: translateY(-20px);
        }
      }

      .icon {
        position: absolute;
        transform: translateY(20px);
        opacity: 0;
        visibility: hidden;
        color: #fff;
        font-size: 16px;
        font-weight: 500;
        line-height: 1.5;
        transition: all 0.3s;
      }

      .subtitle {
        position: absolute;
        transform: translateY(0);
      }

      &:hover {
        .title,
        .description,
        .wcf__btn {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .content {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        padding: 30px;
        z-index: 1;
        background-color: rgba(0, 0, 0, 0.3);
      }

      .wrap {
        position: relative;
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;
      }

      .title {
        font-size: 50px;
        font-weight: 400;
        line-height: 1.1;
        margin-top: auto;
        transition: all 0.5s;
        transform: translateY(100px);
      }

      .subtitle {
        color: #fff;
        font-size: 16px;
        font-weight: 500;
        line-height: 1.5;
        transition: all 0.3s;
      }

      .description {
        transition: all 0.5s;
        transform: translateY(50px);
        opacity: 0;
      }

      .wcf__btn {
        transition: all 0.5s;
        transform: translateY(60px);
        opacity: 0;
      }
    }

    &-4 {
      &:hover {
        .icon,
        .title,
        .subtitle,
        .description,
        .wcf__btn {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .content {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        padding: 30px;
        z-index: 1;
        display: flex;
        flex-direction: column;
        background-color: rgba(0, 0, 0, 0.3);
      }

      .title {
        font-size: 50px;
        font-weight: 400;
        line-height: 1.1;
        transform: translateY(50px);
        transition: all 0.5s;
        opacity: 0;
      }

      .subtitle {
        font-size: 14px;
        font-weight: 500;
        line-height: 1.5;
        text-transform: uppercase;
        transform: translateY(45px);
        transition: all 0.5s;
        opacity: 0;
      }

      .icon {
        color: #fff;
        transform: translateY(40px);
        transition: all 0.5s;
        opacity: 0;
      }

      .wcf__btn,
      .description {
        transform: translateY(35px);
        transition: all 0.5s;
        opacity: 0;
      }

    }

    &-5 {

      .content {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        padding: 30px;
        z-index: 1;
        display: flex;
        flex-direction: column;
        background-color: rgba(0, 0, 0, 0.3);

        .wrap {
          margin-top: auto;
        }
      }

      .title {
        font-size: 50px;
        font-weight: 400;
        line-height: 1.1;
      }

      .subtitle {
        font-size: 14px;
        font-weight: 500;
        line-height: 1.5;
        text-transform: uppercase;
      }

      .icon {
        color: #fff;
      }

    }
  }
}

.img-box-wrap {
  &-left {
    .wcf--image-box.style-3 {
      .icon,
      .subtitle {
        inset-inline-start: 0;
      }
    }
  }

  &-center {
    .wcf--image-box.style-3 {
      .icon,
      .subtitle {
        inset-inline-start: 50%;
        transform: translateX(-50%);
      }
    }
  }

  &-right {
    .wcf--image-box.style-3 {
      .icon,
      .subtitle {
        inset-inline-start: unset;
        inset-inline-end: 0;
      }
    }
  }
}

//hover effect for image tag
.elementor-widget-wcf--image-box {
  &.wcf--image {
    &-effect-zoom-in,
    &-effect-zoom-out,
    &-left-move,
    &-right-move {
      img {
        transition: all 0.5s;
      }

      .thumb {
        overflow: hidden;
      }
    }

    &-effect-zoom-in {
      img {
        transform: scale(1);
      }

      .elementor-widget-container:hover {
        img {
          transform: scale(1.1) !important;
        }
      }
    }

    &-effect-zoom-out {
      img {
        transform: scale(1);
      }

      .elementor-widget-container:hover {
        img {
          transform: scale(0.9) !important;
        }
      }
    }

    &-left-move {
      img {
        transform: scale(1.1);
      }

      .elementor-widget-container:hover {
        img {
          transform: scale(1.1) translateX(4%) !important;
        }
      }
    }

    &-right-move {
      img {
        transform: scale(1.1);
      }

      .elementor-widget-container:hover {
        img {
          transform: scale(1.1) translateX(-4%) !important;
        }
      }
    }
  }
}

//image box slider
.wcf__image-box-slider {
  .swiper-vertical {
    max-height: 774px;
  }

  .wcf__slider {
    &:not(.swiper-fade,.swiper-coverflow,.swiper-flip,.swiper-cube) {
      .swiper-slide {
        transition: all 0.3s ease;
        transform: scale(var(--scale-x, 1), var(--scale-y, 1));

        &.swiper-slide-active {
          transform: scale(1) !important;
        }
      }
    }
  }

  .wcf-arrow {
    border-radius: 50%;
  }

  .ts-navigation {
    justify-content: space-between;
  }

  .swiper-pagination {
    width: auto;
    position: static;
  }
}

.elementor-widget-wcf--image-box-slider {
  &.wcf--image {
    &-effect-zoom-in,
    &-effect-zoom-out,
    &-left-move,
    &-right-move {
      img {
        transition: all 0.5s;
      }

      .thumb {
        overflow: hidden;
      }
    }

    &-effect-zoom-in {
      img {
        transform: scale(1);
      }

      .wcf--image-box:hover {
        img {
          transform: scale(1.1);
        }
      }
    }

    &-effect-zoom-out {
      img {
        transform: scale(1);
      }

      .wcf--image-box:hover {
        img {
          transform: scale(0.9);
        }
      }
    }

    &-left-move {
      img {
        transform: scale(1.1);
      }

      .wcf--image-box:hover {
        img {
          transform: scale(1.1) translateX(4%);
        }
      }
    }

    &-right-move {
      img {
        transform: scale(1.1);
      }

      .wcf--image-box:hover {
        img {
          transform: scale(1.1) translateX(-4%);
        }
      }
    }
  }
}