//
//pricing.scss
//

.price-box {
  padding: 40px 50px;
  transition: all 0.5s ease;
  overflow: hidden;
  box-shadow: $box-shadow;
  .plan-price {
    sup {
      top: -1.5rem;
      font-size: 29px;
      @media (max-width: 767.98px) { 
        top: -1rem;
        font-size: 20px;
       }
    }
    sub {
      bottom: -0.15rem;
      font-size: 15px;
    }
  }
  .price-features {
    i {
      background-color: rgba($primary, 0.15);
      width: 20px;
      height: 20px;
      line-height: 20px;
      display: inline-block;
      text-align: center;
      font-size: 14px;
      border-radius: 50%;
      margin-right: 10px;
    }
  }
}

.ribbon {
  background: $primary;
  color: $white;
  padding: 45px 54px 15px;
  transform: rotate(45deg);
  position: absolute;
  top: -16px;
  right: -60px;
  border-radius: 50%;
}