.pricingTable{ background: #fff; font-family: 'Poppins', sans-serif; text-align: center; padding: 30px; border: 4px solid #fff; border-radius: 25px; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15); position: relative; z-index: 1; } .pricingTable:after{ content: ''; background: linear-gradient(#9b42c4, #6D3093); height: 165px; width: 100%; border-radius: 23px; position: absolute; left: 0; bottom: 0; z-index: -1; } .pricingTable .pricingTable-header{ font-family: 'Teko', sans-serif; margin: 0 0 10px; } .pricingTable .title{ color: transparent; background: linear-gradient(#9b42c4, #6D3093); font-size: 65px; font-weight: 300; text-transform: uppercase; margin: 0; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .pricingTable .pricing-content{ padding: 0; margin: 0 0 25px; list-style: none; } .pricingTable .pricing-content li{ color: #333; font-size: 17px; margin: 0 0 10px; } .pricingTable .pricing-content li:last-child{ margin-bottom: 0; } .pricingTable .price-value{ color: #9b42c4; background: #fff; width: 130px; height: 130px; padding: 28px 3px 28px 0; margin: 0 auto 20px; border: 4px solid #9b42c4; box-shadow: 0 0 0 5px #fff inset, 0 0 0 7px #9b42c4 inset; border-radius: 50%; } .pricingTable .price-value .currency{ font-size: 18px; line-height: 18px; margin: 0 -5px 0 0; vertical-align: top; display: inline-block; } .pricingTable .price-value .amount{ font-size: 55px; line-height: 50px; letter-spacing: -2px; display: inline-block; } .pricingTable .price-value .duration{ font-size: 13px; display: block; } .pricingTable .pricingTable-signup a{ color: #80489F; background-color: #fff; font-size: 27px; font-weight: 400; text-transform: uppercase; width: 220px; padding: 5px 10px; margin: 0 auto; border-radius: 10px; display: block; transition: all 0.3s ease 0s; } .pricingTable .pricingTable-signup a:hover{ box-shadow: 0 0 10px rgba(0,0,0,0.8) inset,5px 5px 0 rgba(0,0,0,0.5); } .pricingTable.orange .title{ background: linear-gradient(#fc4a1a, #ce3610); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .pricingTable.orange:after{ background: linear-gradient(#fc4a1a, #ce3610); } .pricingTable.orange .price-value{ color: #fc4a1a; border-color: #fc4a1a; box-shadow: 0 0 0 5px #fff inset, 0 0 0 7px #fc4a1a inset; } .pricingTable.orange .pricingTable-signup a{ color: #fc4a1a; } @media only screen and (max-width: 990px){ .pricingTable{ margin-bottom: 40px; } }