.pricingTable{ color: #666; font-family: 'Poppins', sans-serif; text-align: center; } .pricingTable .pricingTable-header{ background-color: #fff; padding: 25px; border-radius: 40px 40px 0 0; } .pricingTable .title{ color: #333; font-size: 25px; font-weight: 500; text-transform: uppercase; letter-spacing: 2px; margin: 0 0 10px; } .pricingTable .price-value{ color: #fff; background: linear-gradient(to right bottom,#25c648,#21a313); height: 150px; width: 150px; padding: 40px 20px; margin: 0 auto; border-radius: 50%; position: relative; z-index: 1; } .pricingTable .price-value:before{ content: ''; background: linear-gradient(to left top,#25c648,#21a313); border-radius: inherit; box-shadow: 1px 1px 5px rgba(0,0,0,0.2) inset; position: absolute; left: 12px; top: 12px; bottom: 12px; right: 12px; z-index: -1; } .pricingTable .price-value .currency{ font-size: 20px; line-height: 22px; font-weight: 500; display: inline-block; vertical-align: top; } .pricingTable .price-value .amount{ font-size: 60px; line-height: 55px; font-weight: 600; display: inline-block; } .pricingTable .price-value .duration{ font-size: 15px; line-height: 15px; font-weight: 500; display: block; } .pricingTable .pricing-content{ background: linear-gradient(to right bottom,#25c648,#21a313); padding: 30px 20px 60px; margin: 0; list-style: none; border-radius: 0 0 40px 40px; } .pricingTable .pricing-content li{ color: rgba(255,255,255,0.7); font-size: 16px; font-weight: 500; line-height: 25px; padding: 0; margin: 0 0 13px; position: relative; } .pricingTable .pricing-content li:last-child{ margin-bottom: 0; } .pricingTable .pricing-content li strong{ color: #fff; } .pricingTable .pricingTable-signup a{ color: #fff; background: linear-gradient(to right bottom,#25c648,#21a313); font-size: 20px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; width: 150px; padding: 12px 25px; margin: -30px auto 0; border: none; box-shadow: 0 0 5px rgba(0,0,0,0.2); border-radius: 15px; display: block; transition: all 0.3s ease 0s; } .pricingTable .pricingTable-signup a:hover{ color: #fff; text-shadow: 3px 3px rgba(0,0,0,0.3); box-shadow: 0 -3px 15px rgba(0,0,0,0.2); } .pricingTable.blue .price-value{ background: linear-gradient(to right bottom,#01AFED,#0097EA); } .pricingTable.blue .price-value:before{ background: linear-gradient(to left top,#01AFED,#0097EA); } .pricingTable.blue .pricing-content, .pricingTable.blue .pricingTable-signup a{ background: linear-gradient(to right bottom,#01AFED,#0097EA); } .pricingTable.pink .price-value{ background: linear-gradient(to right bottom,#FF4EA5,#FE0879); } .pricingTable.pink .price-value:before{ background: linear-gradient(to left top,#FF4EA5,#FE0879); } .pricingTable.pink .pricing-content, .pricingTable.pink .pricingTable-signup a{ background: linear-gradient(to right bottom,#FF4EA5,#FE0879); } @media only screen and (max-width: 990px){ .pricingTable{ margin: 0 0 40px; } }