8889841c/*-------------------------------- #Pricing Tables ---------------------------------*/ .pricing { .price-table { display : flex; flex-direction: column; @media #{$maxTablet} { max-width: 370px; margin : 0 auto; } .pricing-panel { background-color: var(--global--color-white); padding : 44px 50px 42px; border-radius : 8px; box-shadow : 0px 5px 83px 0px rgba(40, 40, 40, 0.11); display : flex; flex-direction : column; justify-content : space-between; flex-grow : 1; @media #{$noteBook} { padding-right: 25px; padding-left : 25px; } @media #{$maxTablet} { text-align: center; max-width : 370px; margin : 0 auto 30px; } @media #{$maxSmall} { padding-left : 25px; padding-right: 25px; } .pricing-body { .pricing-heading { margin-bottom: 40px; .pricing-title { font-family : var(--global--font-heading); font-size : 18px; font-weight : 700px; line-height : 26px; color : var(--global--color-secondary); margin-bottom : 0px; position : relative; text-transform: capitalize; transition : 300ms ease-in-out; } .pricing-desc { font-family : var(--global--font-body); font-size : 14px; font-weight : 400; color : var(--global--color-body); line-height : 26px; margin-bottom: 0px; } } .pricing-list { p { font-size : 14px; line-height : 24px; color : var(--global--color-body); margin-bottom: 20px; } } .pricing-price { margin-bottom: 34px; p { padding-top : 55px; margin-bottom: 29px; font-family : var(--global--font-heading); font-weight : 400; color : var(--global--color-secondary); display : flex; align-items : baseline; line-height : 30px; position : relative; &::before { content : ''; position : absolute; top : 0; left : 0; height : 2px; width : 100%; background-color: #eaeaea; } @media screen and(max-width:991.98px) { justify-content: center; } span { &::before { content: '/'; } &:first-of-type { &::before { content: unset; } } } .currency { font-size: 50px; } .time { font-size: 14px; } } .btn { width : 100%; height : 65px; color : var(--global--color-white); padding-right: 20px; transition : 0.5s ease-in-out; &:hover { background-color: var(--global--color-primary); } i { width : 28px; height : 28px; background-color: var(--global--color-white); display : flex; justify-content : center; align-items : center; color : var(--global--color-heading); border-radius : 50%; transition : 0.5s ease-in-out; &::before { font-size: 14px; } } &::before { content: unset; } &:hover { i { transform: translateX(5px); } } } } } &.active { position: relative; &::before { content : ''; display : block; width : 46px; height : 20px; background-image: url('../images/icons/high-light.png'); position : absolute; top : 30px; right : -2px; } &::after { content : ''; position : absolute; bottom : 0; left : 50%; background-color: var(--global--color-primary); transform : translateX(-50%); height : 4px; width : calc(100% - 100px); @media #{$noteBook} { width: calc(100% - 50px); } } .pricing-price { .btn { background-color: var(--global--color-primary); &:hover { background-color: var(--global--color-heading); } } } } } } .more-prices { text-align: center; margin-top: 0px; @media #{$minLarge} { margin-top: 32px; } p { font-family: var(--global--font-body); font-weight: 700; font-size : 15px; color : var(--global--color-body); a { position : relative; font-weight : 700; color : var(--global--color-heading); transition : 0.3s ease-in-out; text-transform: capitalize; padding-bottom: 6px; &:hover { &::before { width: calc(100% - 20%); } } &::before { content : ''; transition : 0.3s ease-in-out; position : absolute; bottom : 0; left : 50%; transform : translateX(-50%); width : 100%; height : 2px; background-color: var(--global--color-primary); } } } } &.pricing-1 { padding-top : 130px; padding-bottom: 100px; @media #{$maxTablet} { padding-top : 70px; padding-bottom: 70px; } } }