.cta-area {
  background-color: $primary-color;
  
  .te-column-bg-image {
    position: relative;
    clip-path: polygon(0 0, 100% 0%, 80% 100%, 0% 100%);

    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .te-content-wrapper {
    display: flex;
    flex-direction: column;
    padding: 70px 0;
    
    @include rmaxwd(781) {
      padding: 0 30px 80px 30px;
    }
    .short-title {
      font-size: 21px;
      font-weight: 900;
      color: $white;
      margin-bottom: 0;
    }
    .te-cta-title {
      font-size: 36px;
      font-weight: 900;
      line-height: initial;

      @include rmaxwd(375) {
        font-size: 34px !important;
      }
      @include md {
        font-size: 32px;
      }
      @include sm {
        font-size: 28px;
      }
    }
    .text {
      font-size: 18px;
      line-height: initial;
      color: $white;
      margin-bottom: 0;
    }
  }
  .te-btn-wrapper {
    margin-top: 30px;
  }
  .te-cta-inner-area {
    display: flex;
    gap: 20px;


    @include sm {
      flex-direction: column;
      gap: 20px;
    }
    .te-cta-collumn {
      width: 50%;
      flex-grow: 1;
      flex-basis: 0;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;

      @include rmaxwd(991) {
        width: 100%;
      }

      .icon {
        width: 70px;
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50px;
        background-color: $white;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: -120px;

        @include sm {
          display: none;
        }
      }
    }
  }
}