.pricing-container { display: flex; flex-wrap: wrap; justify-content: center; font-family: 'Arial', sans-serif; margin: 40px 0; } .pricing-container .pricing-card { background-color: #fff; border-radius: 12px; box-shadow: 0px 3px 20px #00000029; padding: 56px 24px 12px 24px; text-align: center; flex: 1 1 250px; box-sizing: border-box; transition: transform 0.3s, box-shadow 0.3s; position: relative; z-index: 10; } .pricing-container .pricing-card h3 { font-size: 32px; font-weight: bold; color: #151948; margin-bottom: 32px; } .pricing-container .pricing-card .plan-options { font-size: 18px; color: #151948; margin-bottom: 16px; font-weight: 400; } .pricing-container .pricing-card .plan-options .inline-radio-label { display: inline-block; vertical-align: middle; margin-right: 15px; line-height: 1.5; } .pricing-container .pricing-card .price { position: relative; white-space: normal; } .pricing-container .pricing-card .price .price-prefix { vertical-align: text-bottom; font-weight: 400; font-size: 16px; color: #151948; line-height: 18px; text-align: left; max-width: 61px; padding-right: 25px; } .pricing-container .pricing-card .free-trial{ margin-bottom: 84px; } .pricing-container .pricing-card .free-trial .title{ font-size: 36px !important; } .pricing-container .pricing-card .free-trial .title, .pricing-container .pricing-card .price .pm_price { font-size: 42px; font-weight: 700; color: #0762F8; } .pricing-container .pricing-card .price .period { font-size: 20px; font-weight: 400; color: #AEAEB4; max-width: 62px; } .pricing-container .pricing-card .yearly-price { font-size: 18px; color: #AEAEB4; margin-bottom: 48px; } .pricing-card.selected_plan_border .btn{ background-color: #7C3AED !important; } .pricing-container .pricing-card .btn .btn-selected{ display: none; } .selected_plan_border .btn .btn-selected{ display: block !important; } .selected_plan_border .btn .btn-select{ display: none; } .pricing-container .pricing-card .btn { background-color: #0762F8; color: #fff; width: 100%; height: 62px; line-height: 62px; border: none; border-radius: 8px; padding: 0 25px; cursor: pointer; font-weight: 700; transition: background 0.3s; margin-bottom: 20px; font-size: 18px; } .pricing-container .pricing-card .btn:hover { background-color: #004bb5; } .pricing-container .pricing-card .description { font-size: 16px; color: #151948;  height: 42px; padding-top: 10px; } .pricing-container .pricing-card .description .note{ color: #AEAEB4; } .pricing-container .pricing-card .plan-arrow { margin-top: 20px; } .pricing-container .pricing-card .plan-type label { display: block; font-size: 14px; margin: 5px 0; } .pricing-container .pricing-card.popular { border: 2px solid #0066ff; } .pricing-container.active_plan_type_month .pricing-box.month{ display: inline-block; } .pricing-container.active_plan_type_year .pricing-box.year{ display: inline-block; } .inline-radio-label { display: inline-flex; align-items: center; margin-right: 12px; vertical-align: middle; margin-bottom: 0; } .inline-radio-label input { margin-right: 5px; } .plan-options { white-space: nowrap; } .pricing-box { display: none; } .pricing-box.active { display: block; } .pricing-box .vf-option-1, .pricing-box .vf-option-2{ display: none } .pricing-box.option_1 .vf-option-1{ display: inline-block; font-size: 16px; } .pricing-box.option_2 .vf-option-2{ display: inline-block; } .plan-groups { font-family: 'Arial', sans-serif; padding: 48px 40px; background: #dee8f4; position: relative; top: -9px; z-index: 5; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; } .page-checkout .plan-groups { font-family: 'Arial', sans-serif; overflow: hidden; max-height: 0; padding: 0 40px; transition: all 1s linar; } .page-checkout .plan-groups.is-open { max-height: 1000px; padding: 48px 40px 0; } .show-plan-content { cursor: pointer; margin-top: -4px; margin-bottom: 8px; } .show-plan-content img { width: 16px; } .plan-groups .group-title { font-weight: 600; margin-bottom: 8px; font-size: 16px; color: #333333; } .plan-groups .feature-list { list-style: none; padding-left: 0; margin: 0 0 16px 0; } .plan-groups .feature-item { align-items: center; margin-bottom: 6px; font-size: 14px; color: #333333; } .plan-groups .feature-item { margin-bottom: 6px; font-size: 14px; color: #333333; line-height: 1.4; } .plan-groups .feature-item .feature-icon, .plan-groups .feature-item .feature-text { vertical-align: middle; font-size: 16px; } .plan-groups .feature-item .feature-icon { margin-right: 8px; } .plan-groups .feature-icon { width: 13px; display: inline-flex; align-items: center; justify-content: center; margin-right: 8px; } .plan-groups .feature-icon img { max-width: 100%; height: auto; display: block; } .plan-groups .feature-text { line-height: 1.4; } .cta-box { display: flex; align-items: center; justify-content: space-between; background-color: #fff; border-radius: 12px; box-shadow: 0px 3px 20px #00000029; padding: 24px 32px; margin: 40px 0; gap: 20px; height: 200px; } .cta-box .cta-text { flex: 1; min-width: 200px; } .cta-box .cta-text h3 { font-size: 24px; font-weight: 700; margin: 0 0 24px 0; color: #151948; } .cta-box .cta-text p { font-size: 16px; font-weight: 400; color: #151948; margin: 0; } .cta-box .cta-button { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 298px; height: 62px; } .cta-box .cta-button .btn-cta { display: flex; align-items: center; justify-content: center; background-color: #FD3466; color: #fff; padding: 12px 28px; border-radius: 8px; text-decoration: none; font-weight: 700; font-size: 18px; transition: background-color 0.3s; width: 100%; height: 100%; text-align: center; } .cta-box .cta-button .btn-cta:hover { background-color: #e02f6e; } @media (max-width: 768px) { .pricing-container .pricing-card { flex: 1 1 100%; max-width: 100%; } .cta-box { flex-direction: column; text-align: center; gap: 20px; } .cta-box .cta-button { width: 100%; } .cta-box .cta-button .btn-cta { width: 100%; } }