.pricingTable{ font-family: 'Montserrat', sans-serif; text-align: center; margin: 0 15px; position: relative; z-index: 1; } .pricingTable:before, .pricingTable:after{ content: ''; background-color: #fff; height: 150px; border-radius: 20px; box-shadow: 0 0 10px rgba(0,0,0,0.1); position: absolute; left: -10px; right: -10px; top: 50px; z-index: -1; } .pricingTable:after{ height: 60px; border-radius: 10px; top: auto; bottom: 46px; } .pricingTable .pricingTable-header{ color: #fff; background: linear-gradient(to right,#04d9b8,#0651d4); padding: 20px; outline: 2px solid #fff; outline-offset: -10px; } .pricingTable .title{ font-size: 30px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin: 0; } .pricingTable .price-value{ color: #303030; font-weight: 400; padding: 10px 0; } .pricingTable .price-value .currency{ font-size: 30px; line-height: 30px; vertical-align: top; display: inline-block; } .pricingTable .price-value .amount{ font-size: 60px; line-height: 60px; display: inline-block; } .pricingTable .price-value .amount-sm{ font-size: 30px; line-height: 30px; vertical-align: bottom; } .pricingTable .price-value .duration{ font-size: 14px; font-weight: 600; letter-spacing: 1px; line-height: 22px; text-transform: uppercase; display: block; } .pricingTable .pricing-content{ color: #fff; background: linear-gradient(to bottom right,#04d9b8,#0651d4); padding: 20px 10px; margin: 0 0 20px; outline: 2px solid #fff; outline-offset: -10px; position: relative; } .pricingTable .pricing-content ul{ text-align: left; padding: 0; margin: 0; list-style: none; display: inline-block; } .pricingTable .pricing-content ul li{ font-size: 15px; line-height: 45px; text-transform: uppercase; padding: 0 0 0 40px; position: relative; } .pricingTable .pricing-content ul li:before{ content: "\f04b"; color: #0651d4; background: #fff; font-family: "Font Awesome 5 Free"; font-size: 10px; font-weight: 900; text-align: center; line-height: 25px; height: 25px; width: 25px; border-radius: 50%; position: absolute; left: 7px; top: 10px; } .pricingTable .pricing-content li.disable:before{ content: "\f00d"; font-size: 15px; } .pricingTable .pricingTable-signup{ background: linear-gradient(to right,#04d9b8,#0651d4); padding: 10px 10px; position: relative; z-index: 1; } .pricingTable .pricingTable-signup:before{ content: ""; background: #fff; position: absolute; top: 10px; bottom: 10px; left: 10px; right: 10px; z-index: -1; } .pricingTable .pricingTable-signup a{ color:#0651d4; font-size: 25px; font-weight: 900; line-height: 45px; text-transform: uppercase; transition: all 0.3s; } .pricingTable .pricingTable-signup a:hover{ letter-spacing: 3px; text-shadow: 2px 2px 2px rgba(0,0,0,0.5); } .pricingTable.pink .pricingTable-header, .pricingTable.pink .pricingTable-signup{ background: linear-gradient(to right,#fe4ce3,#8139dd); } .pricingTable.pink .pricing-content{ background: linear-gradient(to bottom right,#fe4ce3,#8139dd); } .pricingTable.pink .pricing-content ul li:before, .pricingTable.pink .pricingTable-signup a{ color: #8139dd; } .pricingTable.green .pricingTable-header, .pricingTable.green .pricingTable-signup{ background: linear-gradient(to right,#86e026,#2c970d); } .pricingTable.green .pricing-content{ background: linear-gradient(to bottom right,#86e026,#2c970d); } .pricingTable.green .pricing-content ul li:before, .pricingTable.green .pricingTable-signup a{ color: #2c970d; } @media only screen and (max-width: 990px){ .pricingTable{ margin: 0 15px 40px; } }