.pricingTable{ background: #fff; font-family: 'Poppins', sans-serif; text-align: center; padding: 0 0 30px; border-radius: 40px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .pricingTable .pricingTable-header{ background: #b236b2; padding: 50px 0 20px; margin: 0 auto 40px; border-radius: 40px 40px 0 0; position: relative; } .pricingTable .pricingTable-header:after{ content: ""; background: linear-gradient(-45deg, transparent 75%, #b236b2 75%) 0 50%, linear-gradient(45deg, transparent 75%, #b236b2 75%) 0 50%; background-repeat: repeat-x; background-size: 22px; width: 100%; height: 21px; position: absolute; bottom: -21px; left: 0; } .pricingTable .title{ color: #fff; font-size: 40px; font-weight: 500; text-transform: uppercase; margin: 0; } .pricingTable .price-value{ color: #5b5b5b; margin: 0 0 20px; } .pricingTable .price-value .amount{ font-size: 65px; font-weight: 400; line-height: 60px; display: block; } .pricingTable .price-value .duration{ font-size: 16px; font-weight: 500; text-transform: capitalize; display: block; } .pricingTable .pricing-content{ padding: 0 20px; margin: 0 0 30px; list-style: none; } .pricingTable .pricing-content li{ color: #5b5b5b; font-size: 17px; font-weight: 500; text-align: left; line-height: 30px; text-transform: uppercase; padding: 10px 15px 10px 50px; position: relative; } .pricingTable .pricing-content li:nth-child(odd){ background: #e7e7e7; } .pricingTable .pricing-content li:before{ content: "\f00c"; color: #4c753c; font-family: "Font Awesome 5 Free"; font-size: 18px; font-weight: 900; text-align: center; position: absolute; left: 22px; top: 10px; } .pricingTable .pricing-content li.disable:before{ content: "\f00d"; color: #a92e2b; } .pricingTable .pricingTable-signup a{ color: #fff; background: #b236b2; font-size: 22px; font-weight: 400; text-transform: capitalize; letter-spacing: 1px; padding: 5px 25px; border-radius: 50px; transition: all 0.3s ease 0s; } .pricingTable .pricingTable-signup a:hover{ text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.9); } .pricingTable.red .pricingTable-header{ background: #d83b50; } .pricingTable.red .pricingTable-header:after{ background: linear-gradient(-45deg, transparent 75%, #d83b50 75%) 0 50%, linear-gradient(45deg, transparent 75%, #d83b50 75%) 0 50%; background-size: 22px; } .pricingTable.red .pricingTable-signup a{ background: #d83b50; } .pricingTable.orange .pricingTable-header{ background: #e0681e; } .pricingTable.orange .pricingTable-header:after{ background: linear-gradient(-45deg, transparent 75%, #e0681e 75%) 0 50%, linear-gradient(45deg, transparent 75%, #e0681e 75%) 0 50%; background-size: 22px; } .pricingTable.orange .pricingTable-signup a{ background: #e0681e; } @media only screen and (max-width: 990px){ .pricingTable{ margin-bottom: 40px; } }