/* -------------------- PRICING PAGE -------------------- */ /* -- COLORS -- */ :root { --c-pricing-text-title: #3E6F76; --c-pricing-text: #000000; --c-pricing-background-featured: #F6F5F3; --c-pricing-featured: #3E6F76; --c-pricing-standard: #3E6F76; --c-pricing-border: #EAE9E7; --c-pricing-tooltip: #3E6F76; --c-pricing-button: #FB9F86; } /* -- TOOLTIP -- */ @media (max-width: 767px) { .pricing__btn__content { padding: 10px 5px; font-size: 10px; } } .pricing__text-fee { font-size: 12px; } .pricing__text-mo { padding-bottom: 10px; } .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted var(--c-pricing-tooltip); cursor: pointer; } .tooltip .tooltiptext { visibility: hidden; width: 150px; background-color: var(--c-pricing-tooltip); color: #fff; text-align: left; border-radius: 6px; padding: 10px 10px; top: -75px; left: -155px; position: absolute; z-index: 1; box-shadow: 0px 0px 7px 2px rgb(0 0 0 / 25%); } .tooltip .tooltiptext::after { content: ""; position: absolute; top: 50%; left: 100%; margin-top: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent transparent var(--c-pricing-tooltip); } .tooltip:hover .tooltiptext { visibility: visible; } /* -- CELL SETTINGS -- */ .featurestable_new { border-collapse: collapse; width: 100%; margin: 0 auto; max-width: 1000px; } .pricing-cell { padding: 8px 6px; font-size: 14px; color: var(--c-pricing-text); } .pricing__column-center { text-align: center; } .pricing__column-one, .pricing__cell-first-title, .pricing__cell-other-title { border-bottom: 1px solid var(--c-pricing-border); } .pricing__column-two { border-bottom: 1px solid var(--c-pricing-border); border-left: 1px solid var(--c-pricing-border); } .pricing__column-three { border-bottom: 1px solid var(--c-pricing-border); border-right: 2px solid var(--c-pricing-featured); border-left: 2px solid var(--c-pricing-featured); background-color: var(--c-pricing-background-featured); } .pricing__column-featured-last { border-bottom: 2px solid var(--c-pricing-featured); } /* -- FEATURES TITLEs -- */ .features__text-title { text-transform: uppercase; font-weight: 700; font-size: 26px; letter-spacing: 1px; color: var(--c-pricing-text-title); line-height: 27px; } .pricing__cell-first-title { padding: 0px 0 15px 0; } .pricing__cell-other-title { padding: 50px 0 15px 0; } .featured__title { color: var(--c-pricing-featured); font-weight: 700; font-size: 15px; letter-spacing: 1px; padding-top: 20px; text-transform: uppercase; } .standard__title { color: var(--c-pricing-standard); font-weight: 700; font-size: 15px; letter-spacing: 1px; padding-top: 20px; text-transform: uppercase; } /* -- BANNER CELLS -- */ .banner__cell-featured { color: #ffffff; background: var(--c-pricing-background-featured); } .banner__cell_column-two { border-left: 1px solid var(--c-pricing-border); } .banner__cell_column-three { border-right: 1px solid var(--c-pricing-border); border-left: 1px solid var(--c-pricing-border); } .banner__cell-featured_column-two { border-left: 1px solid var(--c-pricing-border); } .banner__cell-featured_column-three { border-right: 2px solid var(--c-pricing-featured); border-left: 2px solid var(--c-pricing-featured); background-color: var(--c-pricing-background-featured); } .banner__features__topcell { background-color: var(--c-pricing-featured); border: 2px solid var(--c-pricing-featured); font-weight: 500; font-size: 14px; letter-spacing: 1px; color: #ffffff; padding: 7px; } .pricing__text-mo { font-weight: 300; font-size: 24px; letter-spacing: 1px; } .pricing__text-fee { font-weight: 400; font-size: 11px; } /* -- BUTTON -- */ .pricing__btn { display: block; text-align: center; font-size: 0; } .pricing__btn--text { padding: 0.7em 1em; color: #ffffff; } .pricing__btn__content { background-color: var(--c-pricing-button); display: inline-flex; padding: 0.75em 1.25em; letter-spacing: .125em; text-decoration: none; font-size: 14px; font-family: 'Poppins'; font-weight: 500; color: var(--c-pricing-text); } /* -- CHECKMARK -- */ .features__tick::after { content: "\2713"; font-size: 0px; } .features__tick { display: inline-block; transform: rotate(45deg); height: 15px; width: 7px; border-bottom: 1.5px solid var(--c-pricing-text); border-right: 1.5px solid var(--c-pricing-text); } /* -- MOBILE -- */ @media (max-width: 767px) { .pricing__btn__content { font-size: 11px; padding: 10px 6px; } .featured__title { font-size: 13px !important; } .features__text-title { font-size: 22px!important; } .pricing__text-mo { font-size: 18px !important; } .banner__cell-featured_column-two, .banner__cell-featured_column-three { min-width: 100px; } } /*--- For Pricing Page Desktop only ---*/ @media (min-width: 768px) { .standard__title { font-size: 20px; } .pricing__text-fee { font-size: 14px !important; } .pricing__text-mo { font-weight: 500; font-size: 36px; } .tooltip .tooltiptext { top: -75px; } .pricing__text-fee .tooltip .tooltiptext { top: -130px; } .pricing__text-fee .tooltip .tooltiptext { top: -92px; } } /*--- For Pricing Page mobile only ---*/ @media (max-width: 768px) { .pricing__text-mo { font-weight: 500; font-size: 30px !important; } /*--- For Pricing Page both Desktop and mobile ---*/ .one-time-fee { font-size: 18px !important; font-weight: 500 !important; }