.price-card { position: relative; // border: 2px dotted #ff9997; border-radius: 5px; box-shadow: 0 0 25px rgba(0, 0, 0, 0.2); overflow: hidden; @include mq (991) { margin-bottom: 30px; } &-header { padding: 50px 30px 90px 30px; position: relative; background-size: cover; background-position: center center; background-repeat: no-repeat; z-index: 1; &::after { @include pseudo(); background: rgba(#000, 0.5); z-index: -1; } } &-body { ul { margin: 0; padding: 60px 0 30px 0; list-style: none; } li { padding: 10px 30px; display: flex; align-items: center; font-size: 17px; font-weight: 400; color: #111; &:nth-child(even) { background-color: rgba($secoundery-clr, 0.3); } i { margin-right: 20px; color: #ff9997; } } } .pricing-info { p { display: block; margin: 0; font-size: 50px; font-weight: 700; line-height: 1; color: #fff; span { font-size: 20px; font-weight: 400; } } } span.plan-badge { position: relative; display: inline-block; padding: 10px 30px; background: #ffc107; color: #fff; font-size: 14px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; text-align: center; border-radius: 50px; margin-bottom: 30px; } } a.btn-plan-select { display: block; background: #ff9997; color: #fff; padding: 15px 20px; border-radius: 50px; max-width: 260px; text-align: center; width: 100%; margin: 0 auto; font-size: 16px; font-weight: 500; text-transform: capitalize; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); outline: 0; &:hover { color: #fff; } } .pricing-style-1 { a.btn-plan-select { position: absolute; bottom: -25px; left: 0; right: 0; } } .pricing-style-2 { .price-card-header { padding: 50px 30px; } .price-card-body li { color: #fff; } } .button-area.monthYear { text-align: center; display: block; margin-bottom: 60px; } .btn-box { width: 230px; margin: 0 auto; background: $primary-clr; border-radius: 50px; display: flex; padding: 5px; position: relative; transition: all .5s; &:before{ content: ''; position: absolute; background-color: #0000001a; left: 5px; width: 50%; height: calc(100% - 10px); top: 5px; border-radius: 40px; display: block; transition: all .5s; z-index: 0; } &.squre{ &:before{ border-radius: 0 !important; } } &.round{ &:before{ border-radius: 50px !important; } } &.roundShape{ &:before{ border-radius: 5px !important; } } &.active{ &:before{ left: calc(50% - 5px); } } } .btn-box button { width: 50%; margin: 0; padding: 12px; display: inline-block; border-radius: 20px; background: transparent; border: none; cursor: pointer; outline: none; z-index: 1; color: #fff } .pricing-style-1.v2{ .price-card{ &.align-right{ text-align: right; .price-card-body{ ul{ li{ display: block; text-align: right; } } } } &.center{ text-align: center; .price-card-body{ ul{ li{ display: block; text-align: center; } } } } } }