.pricingTable{ color: #fff; background: #fff; font-family: 'Open Sans', sans-serif; text-align: center; border-radius: 50px; box-shadow: 0 0 10px rgba(0,0,0,0.1); overflow: hidden; position: relative; } .pricingTable .pricingTable-header{ background: linear-gradient(to right,#82E19A,#30B662); padding: 15px 0 16px; margin: 0 0 30px; border-radius: 0 0 40% 40%; } .pricingTable .title{ font-size: 35px; font-weight: 700; line-height: 35px; text-transform: uppercase; margin: 0; } .pricingTable .price-value{ color: #444; background-color: #fff; height: 140px; width: 140px; padding: 43px 0; margin: 0 auto 10px; border-radius: 50%; box-shadow: 0 5px 0 15px #82E19A; position: relative; } .pricingTable .price-value .amount{ font-size: 48px; font-weight: 600; line-height: 40px; letter-spacing: -0.5px; display: inline-block; } .pricingTable .price-value .amount-sm{ font-size: 22px; font-weight: 400; line-height: 25px; vertical-align: top; display: inline-block; } .pricingTable .price-value .duration{ font-size: 14px; font-weight: 400; line-height: 20px; display: inline-block; } .pricingTable .pricing-content{ background: linear-gradient(to bottom,#82E19A,#30B662); padding: 70px 20px 40px; margin: -30px 0 0; } .pricingTable .pricing-content ul{ padding: 0; margin: 0 0 40px; list-style: none; display: inline-block; } .pricingTable .pricing-content ul li{ color: #fff; font-size: 16px; font-weight: 500; line-height: 30px; text-align: left; letter-spacing: 0.5px; text-transform: capitalize; text-shadow: 0 0 5px rgba(0,0,0,0.5); padding: 0 20px 0 30px; margin: 0 0 7px; position: relative; } .pricingTable .pricing-content ul li:nth-child(even){ background: transparent; } .pricingTable .pricing-content ul li:before{ content: "\f00c"; color: #fff; font-family: "Font Awesome 5 free"; font-size: 18px; font-weight: 900; position: absolute; top: 1px; left: 0; } .pricingTable .pricing-content li.disable:before{ content: "\f00d"; } .pricingTable .pricingTable-signup a{ color: #30B662; background: #fff; font-size: 22px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; padding: 9px 26px; border: none; border-radius: 20px; transition: all 0.3s ease 0s; } .pricingTable .pricingTable-signup a:hover{ box-shadow: 0 0 15px rgba(0,0,0,0.5); } .pricingTable.orange .pricingTable-header{ background: linear-gradient(to right,#FE9C3C,#FF773A); } .pricingTable.orange .price-value{ box-shadow: 0 5px 0 15px #FE9C3C; } .pricingTable.orange .pricing-content{ background: linear-gradient(to bottom,#FE9C3C,#FF773A); } .pricingTable.orange .pricingTable-signup a{ color: #FF773A; } .pricingTable.blue .pricingTable-header{ background: linear-gradient(to right,#43B5B5,#31939B); } .pricingTable.blue .price-value{ box-shadow: 0 5px 0 15px #43B5B5; } .pricingTable.blue .pricing-content{ background: linear-gradient(to bottom,#43B5B5,#31939B); } .pricingTable.blue .pricingTable-signup a{ color: #31939B; } @media only screen and (max-width: 990px){ .pricingTable{ margin: 0 0 40px; } }