// Core variables and mixins
@import "sub-stylesheet/_variables";
@import "sub-stylesheet/_mixins";



.da-custom-btn {
  padding: 12px 30px;
  font-size: 15px;
  display: inline-block;
  border: 1px solid $base-color;
  color: $base-color;
  position: relative;
  overflow: hidden;
  @include breakpoint(lg){
    padding: 15px 30px;
    font-size: 16px;
  }
  @include breakpoint(xxl-desktop){
    padding: 18px 50px;
    font-size: 16px;
  }
  span {
    position: relative;
    z-index: 2;
  }
  &.sm-btn{
    padding: 14px 50px;
    font-size: 14px;
    font-weight: 500;
    span {
      font-weight: 500;
    }
  }
  &:after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: $base-color;
    @include transition(0.3s);
  }
  &:hover {
    color: $white;
    &:after {
      color: $white;
      left: 0;
    }
  }
  &.btn-border-radius40 {
    @include border-radius(40px);
    &:after {
      @include border-radius(40px);
    }
  }
  &.btn-solid {
    background-color: $base-color;
    color: $white;
    &:hover {
      color: $base-color !important;
      &:after {
        left: 0;
        background-color: $white;
      }
    }
  }
}




.da-custom-btn2 {
  padding: 12px 30px;
  font-size: 14px;
  display: inline-block;
  border: 1px solid $secondary-color;
  color: $secondary-color;
  position: relative;
  overflow: hidden;
  @include breakpoint(md){
    padding: 18px 71px;
    font-size: 16px;
  }
  span {
    position: relative;
    z-index: 2;
  }
  &.sm-btn {
    padding: 14px 50px;
    font-size: 14px;
    font-weight: 500;
    span {
      font-weight: 500;
    }
  }
  &:after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: $secondary-color;
    @include transition(0.3s);
  }
  &:hover {
    color: $white;
    &:after {
      color: $white;
      left: 0;
    }
  }
  &.btn-border-radius40 {
    @include border-radius(40px);
    &:after {
      @include border-radius(40px);
    }
  }
  &.btn-solid {
    background-color: $secondary-color;
    color: $white;
    &:hover {
      &:after {
        color: $secondary-color;
        left: 0;
      }
    }
  }
}





.pricing-item-style1 {
  -webkit-box-shadow: 0 0 10px rgba($black,0.1);
  -moz-box-shadow: 0 0 10px rgba($black,0.1);
  box-shadow: 0 0 10px rgba($black,0.1);
  background-color: $white;
  @include border-radius(20px);
  @include transition(0.3s);
  overflow: hidden;
  .pricing-head {
    padding: 45px 20px;
    -webkit-box-shadow: 0 10px 15px rgba($black,0.06);
    -moz-box-shadow: 0 10px 15px rgba($black,0.06);
    box-shadow: 0 10px 15px rgba($black,0.06);
    .category-type span {
      font-size: 20px;
      color: #2e3c40;
      font-weight: 700;
      margin-bottom: 30px;
      display: inline-block;
    }
    .price {
      font-size: 60px;
      color: $blue;
      font-weight: 700;
      display: inline-block;
      position: relative;
      .dollar-sign {
        font-size: 14px;
        color: #222;
        font-weight: 400;
        position: absolute;
        left: -12px;
        top: 16px;
      }
      .per-time {
        font-size: 14px;
        color: $black;
        font-weight: 400;
        margin-left: -15px;
      }
    }
  }
  .pricing-body {
    padding-top: 40px;
    padding-bottom: 40px;
    .pricing-feature-list {
      margin-bottom: 15px;
      margin-left: 0;
      li {
        line-height: 2.8;
      }
    }
    .custom-btn {
      &:after {
        background-color: $black;
        @include transition(0.6s);
        opacity: 0.06;
      }
    }
  }
  &:hover,&.active {
    background-color: $blue;
    @include transform(scaleY(1.09));
    .pricing-head {
      .category-type span {
        color: $white;
      }
      .price,.price .dollar-sign,.price .per-time {
        color: $white;
      }
    }
    .pricing-body {
      .pricing-feature-list {
        li{
          color: $white;
        }
      }
      .da-custom-btn {
        background-color: $white;
        border-color: $white;
        color: $blue;
        &:after {
          background-color: $black;
          @include transition(0.6s);
          opacity: 0.06;
        }
        &:hover {
          &:after {
            left: 100%;
          }
        }
      }
    }
  }
}