.pricing-plan-container { background: white; } .pricing-plan { background: white; width:300px; border-radius: 25px; box-shadow: 0 0 5px rgba(0,0,0,0.2); overflow: hidden; font-family: sans-serif; font-size: 16px; line-height: 1.5; color: #555555; margin: 15px; } .pricing-plan:hover{ box-shadow: 0 0 15px rgba(0,0,0,0.4); transform: scale(1.05); } .pricing-plan__header{ padding:25px; background: #009578; color: #ffffff; } .pricing-plan__special-text { padding: 10px; text-align: center; font-weight: bold; color: #ffffff; background: #007c64; box-shadow: 0 0 10px rgba(0,0,0,0.2) inset; } .pricing-plan__title,.pricing-plan__summary{ margin: 0; text-align: center; font-family: sans-serif; } .pricing-plan__title{ font-size: 1.5em; font-weight: 400; } .pricing-plan__summary { font-size: 1em; font-weight:300; } .pricing-plan__desc { padding:25px; } .pricing-plan__list { padding: 0; margin: 0; text-align: left; } .pricing-plan__feature { list-style: none; margin: 0; padding-left: 25px; position: relative; font-size: 0.9em; } .pricing-plan__feature:not(:last-child) { margin-bottom: 0.5em; } .pricing-plan__feature::before { content: "\2714"; color: #009578; position: absolute; left: 0; } .pricing-plan__actions { padding: 25px; border-top: 1px solid #eeeeee; display: flex; flex-direction: column; } .pricing-plan__button { display: inline-block; margin: 15px auto; padding: 8px 20px; color: #009578; background: #ffffff; border-radius: 5px; border: 1px solid #009578; text-transform: uppercase; letter-spacing: 0.02em; text-decoration: none !important; font-weight: bold; } .pricing-plan__button:hover{ background: #009578; color: #ffffff; } .pricing-plan__cost{ margin: 0; text-align: center; font-size: 2em; color:#000000; } .pricing-plan__text { font-size: 0.9em; text-align: center; margin: 0 0 10px 0; } .pricing-plan-container{ display:flex; align-items: center; justify-content: center; padding: 10px; }