/*** ==================================================================== Pricing One ==================================================================== ***/ .pricing-one { position: relative; display: block; padding: 0px 0 90px; z-index: 1; } .pricing-one__shape-1 { position: absolute; bottom: 165px; left: 30px; width: 1180px; height: 545px; background: linear-gradient(98deg, #00E3F2 5.55%, #FF9B00 32.85%, #FF2828 57.49%, #E6F85E 86.75%); opacity: 0.15; filter: blur(75px); } .pricing-one__shape-2 { position: absolute; bottom: -20px; left: 200px; width: 1180px; height: 545px; background: linear-gradient(98deg, #00E3F2 5.55%, #FF9B00 32.85%, #FF2828 57.49%, #E6F85E 86.75%); opacity: 0.1; filter: blur(75px); z-index: -1; } .pricing-one__section-title { position: relative; display: block; margin-bottom: 19px; } .pricing-one__section-title__title { font-size: 40px; font-weight: 500; line-height: 50px; color: var(--thm-white); margin: 0; } .pricing-one__switch-toggle-title-box { position: relative; display: block; } .pricing-one ul.switch-toggler-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 52px; } .pricing-one ul.switch-toggler-list li a { font-size: 16px; font-weight: 500; color: var(--thm-gray); padding-left: 10px; padding-right: 10px; display: block; } .pricing-one ul.switch-toggler-list li.active a { color: var(--thm-base); } .pricing-one .switch { position: relative; display: inline-block; vertical-align: middle; margin: 0; border-radius: 15px; width: 50px; height: 26px; } .pricing-one .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; -webkit-transition: .4s; transition: .4s; background-color: #426BFF; } .pricing-one .slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 3px; right: 3px; top: 50%; -webkit-transform: translateX(0px) translateY(-50%); transform: translateX(0px) translateY(-50%); background-color: var(--thm-white); -webkit-transition: .4s; transition: .4s; } .pricing-one .switch.off .slider:before { -webkit-transform: translateX(20px) translateY(-50%); transform: translateX(20px) translateY(-50%); } .pricing-one .slider.round { border-radius: 13px; } .pricing-one .slider.round:before { border-radius: 10px; } .pricing-one__discount { position: absolute; top: 0; right: 435px; background: #272749; font-size: 14px; line-height: 14px; font-weight: 500; color: var(--thm-base); padding: 6px 10px; border-radius: 8px; } .pricing-one__single { position: relative; display: block; border-radius: 16px; border: 1px solid var(--thm-bdr-color); background: #0F0F24; padding: 32px 40px 52px; margin-bottom: 30px; -webkit-transition: all 500ms ease; transition: all 500ms ease; z-index: 1; } .pricing-one__single:hover { border: 1px solid #ACDA49; } .pricing-one__popular { font-size: 14px; font-weight: 500; color: var(--thm-base); line-height: 14px; position: absolute; top: 35px; right: 30px; } .pricing-one__overly-color { position: absolute; bottom: 115px; right: 85px; height: 107px; width: 107px; background: linear-gradient(180deg, #6243FF 0%, #FF2828 100%); opacity: 0.8; filter: blur(90px); transform: scale(0); -webkit-transition: all 500ms ease; transition: all 500ms ease; z-index: -1; } .pricing-one__single:hover .pricing-one__overly-color { transform: scale(1); } .pricing-one__tagline { font-size: 24px; color: var(--thm-gradient-color2); font-weight: 600; margin-bottom: 35px; } .pricing-one__price { font-size: 56px; font-weight: 600; color: var(--thm-white); line-height: 56px; } .pricing-one__btn-box { position: relative; display: block; margin-top: 28px; margin-bottom: 13px; } .pricing-one__btn { background: var(--thm-main-bg); font-size: 16px; font-weight: 500; padding: 15px 39px 15px; border: 1px solid var(--thm-bdr-color); } .pricing-one__btn:before { position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: ""; border-radius: 8px; background: linear-gradient(211deg, #8F79FF 13.4%, #426BFF 118.74%); transform: scaleX(0.1) rotateX(90deg); -webkit-transition: all 0.4s linear; -o-transition: all 0.4s linear; transition: all 0.4s linear; z-index: -1; } .pricing-one__btn:hover:before { transform: scaleX(1.0) rotateX(0deg); -webkit-transition: all 0.4s linear; -o-transition: all 0.4s linear; transition: all 0.4s linear; } .pricing-one__text { font-size: 14px; } .pricing-one__points { position: relative; display: block; margin-top: 35px; } .pricing-one__points li { position: relative; display: flex; align-items: center; } .pricing-one__points li+li { margin-top: 14px; } .pricing-one__points li .circle-box { position: relative; display: flex; align-items: center; height: 6px; width: 6px; background-color: var(--thm-white); } .pricing-one__points li .text { margin-left: 10px; } .pricing-one__points li .text p { margin: 0; color: var(--thm-white); } /*** ==================================================================== Pricing Two ==================================================================== ***/ .pricing-two { padding-top: 112px; } /*** ==================================================================== Pricing Three ==================================================================== ***/ .pricing-three { padding-top: 98px; } .pricing-three .pricing-one__discount { color: var(--thm-primary); } .pricing-three .slider { background-color: var(--thm-primary); } .pricing-three .pricing-one__btn:before { background: var(--thm-primary); } .pricing-three .pricing-one__popular { color: var(--thm-primary); } /* End */