.btn-type-gradient {
  .btn,
  button,
  .button,
  input[type="submit"] {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    padding: 0 34px;
    line-height: 51px;
    @include transition(all 200ms linear 0ms);
    @include font-family-heading($heading_default_font);
    @include border-radius(5px);
    @include box-shadow(0 8px 10px rgba(#0c0c0c, 0.1));
    position: relative;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    border: none;
    @include background-gradient-button(90deg, $gradient_color_from 0%, $gradient_color_to 50%, $gradient_color_from);
    background-size: 300%, 1px;
    background-position: 0%;
    &:hover, &:focus, &:active, &:not([disabled]):not(.disabled).active, &:not([disabled]):not(.disabled):active {
      outline: medium none;
      text-decoration: none;
      color: #fff;
      background-position: 100%;
    }
  }
  .elementor a.btn {
    @include box-shadow(0 7px 16px rgba(#0c0c0c, 0.22));
  }
  .btn {
    i {
      margin-left: 8px;
      &.space-right {
        margin-left: 0;
        margin-right: 8px;
      }
      &.fac-rotate {
        @include transform(scaleX(-1));
      }
    }
    .ct-align-icon-left i {
      margin-left: 0;
      margin-right: 8px;
    }
    .ct-align-icon-right {
      float: right;
    }
    @media #{$min-md} {
      &.btn-padding-big {
        padding-left: 165px;
        padding-right: 165px;
      }
    }
    &.btn-block {
      display: block;
    }
    &.btn-primary {
      background-image: none;
      background-color: $primary_color;
      border-color: $primary_color;
      &:hover, &:focus {
        background-color: $secondary_color;
        border-color: $secondary_color;
        color: #fff;
      }
    }
    &.btn-secondary {
      background-color: transparent;
      background-image: none;
      font-size: 16px;
      line-height: 55px;
      padding: 0 42px;
      z-index: 1;
      overflow: hidden;
      &:before, &:after {
        content: '';
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        position: absolute;
        z-index: -1;
        @include transition(all 200ms linear 0ms);
        background-color: $secondary_color;
      }
      &:after {
        @include background-horizontal($gradient_color_from, $gradient_color_to);
        @include transform(scaleY(0));
      }
      &:hover {
        &:before {
          opacity: 0;
        }
        &:after {
          @include transform(scaleY(1));
        }
      }
    }
    &.btn-secondary2 {
      border-color: $secondary_color;
      background-color: $secondary_color;
      background-image: none;
      @include box-shadow(none !important);
      &:hover {
        border-color: $primary_color;
        background-color: $primary_color;
      }
    }
    &.btn-round {
      @include border-radius(60px);
      line-height: 57px;
      padding: 0 46px;
      @include box-shadow(none !important);
    }
    &.btn-round2 {
      @include border-radius(60px);
      line-height: 56px;
      padding: 0 34px;
      @include box-shadow(none !important);
      background-image: none !important;
      background-color: $gradient_color_from;
      &:hover, &:focus {
        background-color: $gradient_color_to;
      }
    }
    &.btn-team {
      color: #383838;
      font-size: 14px;
      font-weight: 600;
      line-height: 33px;
      padding: 0 26px;
      @include border-radius(3px);
      @include box-shadow(none !important);
      background-color: transparent !important;
      background-image: none !important;
      z-index: 1;
      &:before, &:after {
        content: '';
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        position: absolute;
        z-index: -1;
        @include transition(all 200ms linear 0ms);
        @include border-radius(3px);
      }
      &:before {
        background-color: #eef2fb;
      }
      &:after {
        opacity: 0;
        @include background-gradient-button(90deg, $gradient_color_from 0%, $gradient_color_from 50%, $gradient_color_to);
        background-size: 300%, 1px;
        background-position: 0%;
      }
      &:hover {
        color: #fff;
        &:before {
          opacity: 0;
        }
        &:after {
          opacity: 1;
        }
      }
    }
    &.text-white {
      background-color: transparent;
      background-image: none !important;
      padding: 0;
      line-height: normal;
      @include box-shadow(none !important);
      &:before {
        content: '';
        width: 100%;
        height: 1px;
        background-color: rgba(#fff, 0.85);
        position: absolute;
        bottom: -8px;
        left: 0;
        opacity: 0;
        @include transition(all 200ms linear 0ms);
      }
      &:hover:before {
        opacity: 1;
        bottom: 0;
      }
    }
    &.line-white {
      background-color: transparent;
      background-image: none;
      line-height: 40px;
      padding: 0 17px;
      z-index: 1;
      @include box-shadow(none !important);
      &:before {
        content: '';
        width: 4px;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        @include transition(all 200ms linear 0ms);
        z-index: -1;
        background-color: $primary_color;
        font-size: 14px;
      }
      &:hover, &:focus {
        color: #fff;
        &:before {
          width: 100%;
        }
      }
    }
    &.btn-white {
      background-color: transparent;
      background-image: none !important;
      color: #000;
      position: relative;
      z-index: 1;
      &:before, &:after {
        content: '';
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        position: absolute;
        z-index: -1;
        @include transition(all 200ms linear 0ms);
        @include border-radius(74px);
      }
      &:before {
        background-color: #fff;
      }
      &:after {
        opacity: 0;
        @include background-gradient-button(90deg, $gradient_color_from 0%, $gradient_color_to 50%, $gradient_color_from);
        background-size: 300%, 1px;
        background-position: 0%;
      }
      &:hover {
        color: #fff;
        &:before {
          opacity: 0;
        }
        &:after {
          opacity: 1;
        }
      }
    }
    &.btn-white2 {
      @include box-shadow(none !important);
      background-image: none;
      background-color: #fff;
      padding-left: 46px;
      padding-right: 46px;
      line-height: 62px;
      font-size: 16px;
      @include border-radius(62px);
      color: #0e0e0e;
      &:hover {
        background-color: $secondary_color;
        color: #fff;
      }
    }
    &.btn-third {
      @include box-shadow(none !important);
      background-image: none;
      background-color: $third_color;
      padding-left: 36px;
      padding-right: 36px;
      line-height: 58px;
      font-size: 15px;
      @include border-radius(58px);
      color: #fff;
      &:hover {
        background-color: $primary_color;
        color: #fff;
      }
    }
  }
  .ct-icon-active + .btn.btn-white2 {
    padding-right: 76px;
    .ct-button-icon {
      position: absolute;
      top: 50%;
      @include transform(translate(0, -50%));
      right: 10px;
      width: 44px;
      height: 44px;
      background-color: $primary_color;
      color: #fff;
      line-height: 44px;
      border-radius: 44px;
      text-align: center;
      * {
        margin: 0px;
      }
    }
    &:hover .ct-button-icon {
      background-color: #fff;
      color: $secondary_color;
    }
  }
  .ct-icon-active + .btn.btn-white2 {
    padding-right: 76px;
    .ct-button-icon {
      position: absolute;
      top: 50%;
      @include transform(translate(0, -50%));
      right: 10px;
      width: 44px;
      height: 44px;
      background-color: $primary_color;
      color: #fff;
      line-height: 44px;
      border-radius: 44px;
      text-align: center;
      * {
        margin: 0px;
      }
    }
    &:hover .ct-button-icon {
      background-color: #fff;
      color: $secondary_color;
    }
  }
  .btn-text {
    @include background-gradient-button(90deg, $secondary_color 0%, lighten($secondary_color, 0.32) 50%, $secondary_color);
    font-size: 14px;
    line-height: 24px;
    font-weight: 700;
    i {
      margin-right: 4px;
      display: initial;
    }
    span {
      display: initial;
      border-bottom: 1px solid $secondary_color;
      line-height: 20px;
    }
    &:hover {
      @include background-horizontal($gradient_color_from, $gradient_color_to);
      span {
        border-color: $gradient_color_from;
      }
    }
  }

  .btn-landing {
    .btn.btn-default {
      font-size: 18px;
      font-weight: 600;
      line-height: 74px;
      padding: 0 66px;
      @include border-radius(74px);
      @include box-shadow(0 5px 4px rgba(0, 0, 0, 0.08) inset);
      @media #{$max-sm} {
        line-height: 60px;
        padding: 0 46px;
        font-size: 16px;
      }
    }
    .btn.btn-white {
      font-size: 18px;
      font-weight: 600;
      line-height: 74px;
      padding: 0 66px;
      @include border-radius(74px);
      &:before {
        @include box-shadow(0 4px 8px rgba(0, 0, 0, 0.52) inset);
      }
      @media #{$max-sm} {
        line-height: 60px;
        padding: 0 46px;
        font-size: 16px;
      }
    }
  }

  .rm-box-shadow {
    .btn {
      @include box-shadow(none !important);
    }
  }
}

.btn-type-normal {
  .btn,
  button,
  .button,
  input[type="submit"] {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    padding: 0 34px;
    line-height: 51px;
    @include transition(all 200ms linear 0ms);
    @include font-family-heading($heading_default_font);
    @include border-radius(5px);
    @include box-shadow(0 8px 10px rgba(#0c0c0c, 0.1));
    position: relative;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    border: none;
    background-image: none;
    background-color: $primary_color;
    &:hover, &:focus, &:active, &:not([disabled]):not(.disabled).active, &:not([disabled]):not(.disabled):active {
      outline: medium none;
      text-decoration: none;
      color: #fff;
      background-color: darken($primary_color, 0.08);
    }
  }
  .elementor a.btn {
    @include box-shadow(0 7px 16px rgba(#0c0c0c, 0.22));
  }
  .btn {
    i {
      margin-left: 8px;
      &.space-right {
        margin-left: 0;
        margin-right: 8px;
      }
      &.fac-rotate {
        @include transform(scaleX(-1));
      }
    }
    .ct-align-icon-left i {
      margin-left: 0;
      margin-right: 8px;
    }
    .ct-align-icon-right {
      float: right;
    }
    @media #{$min-md} {
      &.btn-padding-big {
        padding-left: 165px;
        padding-right: 165px;
      }
    }
    &.btn-block {
      display: block;
    }
    &.btn-primary {
      background-image: none;
      background-color: $primary_color;
      border-color: $primary_color;
      &:hover, &:focus {
        background-color: $secondary_color;
        border-color: $secondary_color;
        color: #fff;
      }
    }
    &.btn-secondary {
      background-color: transparent;
      background-image: none;
      font-size: 16px;
      line-height: 55px;
      padding: 0 42px;
      z-index: 1;
      overflow: hidden;
      &:before, &:after {
        content: '';
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        position: absolute;
        z-index: -1;
        @include transition(all 200ms linear 0ms);
        background-color: $secondary_color;
      }
      &:after {
        @include background-horizontal($gradient_color_from, $gradient_color_to);
        @include transform(scaleY(0));
      }
      &:hover {
        &:before {
          opacity: 0;
        }
        &:after {
          @include transform(scaleY(1));
        }
      }
    }
    &.btn-secondary2 {
      border-color: $secondary_color;
      background-color: $secondary_color;
      background-image: none;
      @include box-shadow(none !important);
      &:hover {
        border-color: $primary_color;
        background-color: $primary_color;
      }
    }
    &.btn-round {
      @include border-radius(60px);
      line-height: 57px;
      padding: 0 46px;
      @include box-shadow(none !important);
    }
    &.btn-round2 {
      @include border-radius(60px);
      line-height: 56px;
      padding: 0 34px;
      @include box-shadow(none !important);
      background-image: none !important;
      background-color: $gradient_color_from;
      &:hover, &:focus {
        background-color: $gradient_color_to;
      }
    }
    &.btn-team {
      color: #383838;
      font-size: 14px;
      font-weight: 600;
      line-height: 33px;
      padding: 0 26px;
      @include border-radius(3px);
      @include box-shadow(none !important);
      background-color: transparent !important;
      background-image: none !important;
      z-index: 1;
      &:before, &:after {
        content: '';
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        position: absolute;
        z-index: -1;
        @include transition(all 200ms linear 0ms);
        @include border-radius(3px);
      }
      &:before {
        background-color: #eef2fb;
      }
      &:after {
        opacity: 0;
        @include background-gradient-button(90deg, $gradient_color_from 0%, $gradient_color_from 50%, $gradient_color_to);
        background-size: 300%, 1px;
        background-position: 0%;
      }
      &:hover {
        color: #fff;
        &:before {
          opacity: 0;
        }
        &:after {
          opacity: 1;
        }
      }
    }
    &.text-white {
      background-color: transparent;
      background-image: none !important;
      padding: 0;
      line-height: normal;
      @include box-shadow(none !important);
      &:before {
        content: '';
        width: 100%;
        height: 1px;
        background-color: rgba(#fff, 0.85);
        position: absolute;
        bottom: -8px;
        left: 0;
        opacity: 0;
        @include transition(all 200ms linear 0ms);
      }
      &:hover:before {
        opacity: 1;
        bottom: 0;
      }
    }
    &.line-white {
      background-color: transparent;
      background-image: none;
      line-height: 40px;
      padding: 0 17px;
      z-index: 1;
      @include box-shadow(none !important);
      &:before {
        content: '';
        width: 4px;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        @include transition(all 200ms linear 0ms);
        z-index: -1;
        background-color: $primary_color;
        font-size: 14px;
      }
      &:hover, &:focus {
        color: #fff;
        &:before {
          width: 100%;
        }
      }
    }
    &.btn-white {
      background-color: transparent;
      background-image: none !important;
      color: #000;
      position: relative;
      z-index: 1;
      &:before, &:after {
        content: '';
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        position: absolute;
        z-index: -1;
        @include transition(all 200ms linear 0ms);
        @include border-radius(74px);
      }
      &:before {
        background-color: #fff;
      }
      &:after {
        opacity: 0;
        @include background-gradient-button(90deg, $gradient_color_from 0%, $gradient_color_to 50%, $gradient_color_from);
        background-size: 300%, 1px;
        background-position: 0%;
      }
      &:hover {
        color: #fff;
        &:before {
          opacity: 0;
        }
        &:after {
          opacity: 1;
        }
      }
    }
    &.btn-white2 {
      @include box-shadow(none !important);
      background-image: none;
      background-color: #fff;
      padding-left: 46px;
      padding-right: 46px;
      line-height: 62px;
      font-size: 16px;
      @include border-radius(62px);
      color: #0e0e0e;
      &:hover {
        background-color: $secondary_color;
        color: #fff;
      }
    }
    &.btn-third {
      @include box-shadow(none !important);
      background-image: none;
      background-color: $third_color;
      padding-left: 36px;
      padding-right: 36px;
      line-height: 58px;
      font-size: 15px;
      @include border-radius(58px);
      color: #fff;
      &:hover {
        background-color: $primary_color;
        color: #fff;
      }
    }
  }
  .ct-icon-active + .btn.btn-white2 {
    padding-right: 76px;
    .ct-button-icon {
      position: absolute;
      top: 50%;
      @include transform(translate(0, -50%));
      right: 10px;
      width: 44px;
      height: 44px;
      background-color: $primary_color;
      color: #fff;
      line-height: 44px;
      border-radius: 44px;
      text-align: center;
      * {
        margin: 0px;
      }
    }
    &:hover .ct-button-icon {
      background-color: #fff;
      color: $secondary_color;
    }
  }
  .ct-icon-active + .btn.btn-third {
    padding-right: 68px;
    .ct-button-icon {
      position: absolute;
      top: 50%;
      @include transform(translate(0, -50%));
      right: 9px;
      width: 40px;
      height: 40px;
      background-color: #fff;
      color: $third_color;
      line-height: 40px;
      border-radius: 40px;
      text-align: center;
      * {
        margin: 0px;
      }
    }
    &:hover .ct-button-icon {
      background-color: #fff;
      color: $primary_color;
    }
  }
  .btn-text {
    @include background-gradient-button(90deg, $secondary_color 0%, lighten($secondary_color, 0.32) 50%, $secondary_color);
    font-size: 14px;
    line-height: 24px;
    font-weight: 700;
    i {
      margin-right: 4px;
      display: initial;
    }
    span {
      display: initial;
      border-bottom: 1px solid $secondary_color;
      line-height: 20px;
    }
    &:hover {
      @include background-horizontal($gradient_color_from, $gradient_color_to);
      span {
        border-color: $gradient_color_from;
      }
    }
  }

  .btn-landing {
    .btn.btn-default {
      font-size: 18px;
      font-weight: 600;
      line-height: 74px;
      padding: 0 66px;
      @include border-radius(74px);
      @include box-shadow(0 5px 4px rgba(0, 0, 0, 0.08) inset);
      @media #{$max-sm} {
        line-height: 60px;
        padding: 0 46px;
        font-size: 16px;
      }
    }
    .btn.btn-white {
      font-size: 18px;
      font-weight: 600;
      line-height: 74px;
      padding: 0 66px;
      @include border-radius(74px);
      &:before {
        @include box-shadow(0 4px 8px rgba(0, 0, 0, 0.52) inset);
      }
      @media #{$max-sm} {
        line-height: 60px;
        padding: 0 46px;
        font-size: 16px;
      }
    }
  }

  .rm-box-shadow {
    .btn {
      @include box-shadow(none !important);
    }
  }
  .btn.btn-default, .ct-pricing-layout2 .pricing-button .btn, .btn.btn-round {
    z-index: 1;
    overflow: hidden;
    &:after {
      content: '';
      position: absolute;
      top: 0;
      left: -200%;
      width: 200%;
      height: 100%;
      @include transform(skewX(-20deg));
      background-image: -webkit-gradient(linear,left top,right top,from(transparent),color-stop(rgba(255,255,255,0.4)),to(transparent));
      background-image: linear-gradient(to right,transparent,rgba(255,255,255,0.4),transparent);
    }
    &:hover {
      background-color: $primary_color;
      &:after {
        -webkit-animation: btn_shine 1.2s ease;
        animation: btn_shine 1.2s ease;
        -webkit-animation-delay: .1s;
        animation-delay: .1s;
      }
    }
  }
}
.ct-icon-active {
  display: none;
}
.btn.btn-icon-fixed {
  line-height: 56px;
  height: inherit;
  padding-right: 26px;
  padding-left: 78px;
  @include border-radius(3px);
  &:before, &:after {
    display: none;
  }
  i {
    font-size: 18px;
    margin: 0;
    position: absolute;
    width: 56px;
    height: 56px;
    top: 0;
    left: 0;
    background: darken($primary_color, 0.12);
    border-radius: 3px 0 0 3px;
    line-height: 56px;
    text-align: center;
    &:before {
      display: inline-block;
      @include transition(all 300ms linear 0ms);
    }
  }
  &:hover i:before {
    -o-animation: toRightFromLeft 0.3s forwards;
    -ms-animation: toRightFromLeft 0.3s forwards;
    -webkit-animation: toRightFromLeft 0.3s forwards;
    animation: toRightFromLeft 0.3s forwards;
  }
}