.pricing { background: $background-violet url(../img/testimonials/pricing.png) no-repeat 50% 30%; padding-top: 90px; padding-bottom: 75px; } .pricing__title { font-family: Montserrat, sans-serif; font-size: 48px; font-weight: bold; color: white; text-transform: capitalize; text-align: center; } .price { position: relative; margin-top: 110px; margin-bottom: 125px; background-color: rgba(255, 255, 255, 0.06); height: 450px; transition: $hover-duration; &:hover { margin-top: 70px; margin-bottom: 75px; background-color: rgba(0, 0, 0, 0.06); transition: $hover-duration; height: 530px; & > .price__title { background-color: rgba(0, 0, 0, 0.06); transition: $hover-duration; } } } .price__title { background-color: rgba(255, 255, 255, 0.06); font-family: Montserrat, sans-serif; font-size: 24px; font-weight: 500; color: white; text-transform: uppercase; padding: 30px 0; text-align: center; transition: $hover-duration; } .price__value { font-family: Montserrat, sans-serif; font-size: 60px; font-weight: bold; color: white; text-align: center; } .price__period { font-family: Montserrat, sans-serif; font-size: 14px; font-weight: 500; color: white; opacity: 0.3; text-transform: uppercase; text-align: center; } .price__splitter { margin: 30px auto; color: $primary; border: none; width: 60px; height: 5px; background-color: $primary; } .price__description { font-family: Montserrat, sans-serif; font-size: 16px; font-weight: 500; color: white; text-transform: capitalize; text-align: center; } .price__rounded-button--purchase { padding-top: 10px; padding-bottom: 10px; background-color: rgba(255, 255, 255, 0.15); position: absolute; bottom: 35px; left: 20%; font-family: Montserrat, sans-serif; font-weight: 500; font-size: 16px; text-transform: uppercase; } .pricing__footer { font-family: Source Sans Pro, sans-serif; font-size: 14px; font-weight: 300; color: $light-text; text-align: center; }